From a90eb41bf4465af280b94fd8ddf4ba8a3e31791d Mon Sep 17 00:00:00 2001
From: DrumsnChocolate <matbronk@gmail.com>
Date: Sun, 3 Nov 2024 22:12:20 +0100
Subject: [PATCH] write open and closed question components in octane

---
 app/components/form/closed-question.hbs | 51 +++++++------
 app/components/form/closed-question.js  | 77 +++++++++----------
 app/components/form/form-form.hbs       |  4 +-
 app/components/form/open-question.hbs   | 31 ++++----
 app/components/form/open-question.js    | 98 +++++++++++++------------
 5 files changed, 133 insertions(+), 128 deletions(-)

diff --git a/app/components/form/closed-question.hbs b/app/components/form/closed-question.hbs
index 44b10b7bc..bbbbf3e96 100644
--- a/app/components/form/closed-question.hbs
+++ b/app/components/form/closed-question.hbs
@@ -2,7 +2,7 @@
 
 {{#unless question.form.hasResponses}}
   <div class='float-md-end mb-3'>
-    <FaIcon @icon='xmark' {{on 'click' (action 'deleteQuestion')}} />
+    <FaIcon @icon='xmark' {{on 'click' this.deleteQuestion}} />
   </div>
 {{/unless}}
 
@@ -13,8 +13,8 @@
     aria-label='Vraag'
     name='question'
     placeholder='Vraag'
-    @value={{question.question}}
-    disabled={{question.form.hasResponses}}
+    @value={{@question.question}}
+    disabled={{@question.form.hasResponses}}
   />
 </div>
 
@@ -25,11 +25,10 @@
         <label class='visually-hidden form-label'>Vraagtype</label>
         <Input::SelectInput
           @class='form-select w-auto'
-          @required={{required}}
-          @options={{questionTypeOptions}}
-          @placeholder={{Vraagtype}}
-          @value={{question.fieldType}}
-          @disabled={{question.form.hasResponses}}
+          @options={{this.questionTypeOptions}}
+          @placeholder="vraagtype"
+          @value={{@question.fieldType}}
+          @disabled={{@question.form.hasResponses}}
         />
       </div>
 
@@ -38,22 +37,22 @@
             class='form-check-input'
             @type='checkbox'
             name='required'
-            @checked={{question.required}}
-            disabled={{question.form.hasResponses}}
-            id="question-{{question.position}}-required-check"
+            @checked={{@question.required}}
+            disabled={{@question.form.hasResponses}}
+            id="question-{{@question.position}}-required-check"
           />
-        <label class='form-check-label' for="question-{{question.position}}-required-check">Verplicht</label>
+        <label class='form-check-label' for="question-{{@question.position}}-required-check">Verplicht</label>
       </div>
     </div>
   </div>
 
-  {{#unless question.form.hasResponses}}
+  {{#unless @question.form.hasResponses}}
     <div class='col-md-7 col-sm-12'>
       <div class='float-md-end'>
         <button
           type='button'
           class='btn btn-default'
-          {{action 'moveQuestionUp'}}
+          {{on 'click' this.moveQuestionUp}}
         >
           <FaIcon @icon='arrow-up' />
           Omhoog
@@ -62,7 +61,7 @@
         <button
           type='button'
           class='btn btn-default'
-          {{action 'moveQuestionDown'}}
+          {{on 'click' this.moveQuestionDown}}
         >
           <FaIcon @icon='arrow-down' />
           Omlaag
@@ -72,14 +71,14 @@
   {{/unless}}
 </div>
 
-{{#each question.sortedOptions as |opt|}}
+{{#each @question.sortedOptions as |opt|}}
   {{#unless opt.isDeleted}}
     <div class='d-flex mb-3'>
       <span class='input-group-addon d-flex justify-content-center align-items-center me-3'>
-        <input id="question-{{question.position}}-option-{{opt.position}}-check" class="form-check-input" type={{question.fieldType}} disabled={{true}} />
-        <label for="question-{{question.position}}-option-{{opt.position}}-required-check"/>
+        <input id="question-{{@question.position}}-option-{{opt.position}}-check" class="form-check-input" type={{@question.fieldType}} disabled={{true}} />
+        <label for="question-{{@question.position}}-option-{{opt.position}}-required-check"/>
       </span>
-      
+
       <div class='input-group'>
         <Input
           @type='text'
@@ -88,28 +87,28 @@
           name='option'
           placeholder='Optie'
           @value={{opt.option}}
-          disabled={{question.form.hasResponses}}
+          disabled={{@question.form.hasResponses}}
         />
 
-        {{#unless question.form.hasResponses}}
+        {{#unless @question.form.hasResponses}}
           <button
             type='button'
             class='btn btn-default'
-            {{action 'moveOptionUp' opt}}
+            {{on 'click' (fn this.moveOptionUp opt)}}
           >
             <FaIcon @icon='arrow-up' />
           </button>
           <button
             type='button'
             class='btn btn-default'
-            {{action 'moveOptionDown' opt}}
+            {{on 'click' (fn this.moveOptionDown opt)}}
           >
             <FaIcon @icon='arrow-down' />
           </button>
           <button
             type='button'
             class='btn btn-default'
-            {{action 'deleteOption' opt}}
+            {{on 'click' (fn this.deleteOption opt)}}
           >
             <FaIcon @icon='trash' />
           </button>
@@ -119,8 +118,8 @@
   {{/unless}}
 {{/each}}
 
-{{#unless question.form.hasResponses}}
-  <button type='button' class='btn btn-default mb-3' {{action 'addOption'}}>
+{{#unless @question.form.hasResponses}}
+  <button type='button' class='btn btn-default mb-3' {{on 'click' this.addOption}}>
     Optie toevoegen
   </button>
 {{/unless}}
\ No newline at end of file
diff --git a/app/components/form/closed-question.js b/app/components/form/closed-question.js
index c144b45a3..e3e1bcf8e 100644
--- a/app/components/form/closed-question.js
+++ b/app/components/form/closed-question.js
@@ -1,42 +1,43 @@
 import { ClosedQuestionTypes } from 'amber-ui/constants';
 import { inject as service } from '@ember/service';
 import OpenQuestionComponent from './open-question';
+import { action } from '@ember/object';
 
-export default OpenQuestionComponent.extend({
-  store: service(),
-  questionTypes: ClosedQuestionTypes,
-  init() {
-    this._super();
-  },
-  actions: {
-    addOption() {
-      const position =
-        this.question.get('sortedOptions.lastObject.position') + 1 || 0;
-      this.store.createRecord('form/closed-question-option', {
-        question: this.question,
-        position,
-      });
-    },
-    deleteOption(option) {
-      option.deleteRecord();
-    },
-    moveOptionUp(option) {
-      const index = this.question.get('sortedOptions').indexOf(option);
-      if (index > 0) {
-        const previousOption = this.question
-          .get('sortedOptions')
-          .objectAt(index - 1);
-        this.send('switchPositions', option, previousOption);
-      }
-    },
-    moveOptionDown(option) {
-      const index = this.question.get('sortedOptions').indexOf(option);
-      if (index < this.question.get('sortedOptions.length') - 1) {
-        const nextOption = this.question
-          .get('sortedOptions')
-          .objectAt(index + 1);
-        this.send('switchPositions', option, nextOption);
-      }
-    },
-  },
-});
+export default class ClosedQuestionComponent extends OpenQuestionComponent {
+  @service store;
+  questionTypes = ClosedQuestionTypes;
+  @action
+  addOption() {
+    const position =
+      this.question.get('sortedOptions.lastObject.position') + 1 || 0;
+    this.store.createRecord('form/closed-question-option', {
+      question: this.question,
+      position,
+    });
+  }
+
+  @action
+  deleteOption(option) {
+    option.deleteRecord();
+  }
+
+  @action
+  moveOptionUp(option) {
+    const index = this.question.get('sortedOptions').indexOf(option);
+    if (index > 0) {
+      const previousOption = this.question
+        .get('sortedOptions')
+        .objectAt(index - 1);
+      this.switchPositions(option, previousOption);
+    }
+  }
+
+  @action
+  moveOptionDown(option) {
+    const index = this.question.get('sortedOptions').indexOf(option);
+    if (index < this.question.get('sortedOptions.length') - 1) {
+      const nextOption = this.question.get('sortedOptions').objectAt(index + 1);
+      this.switchPositions(option, nextOption);
+    }
+  }
+}
diff --git a/app/components/form/form-form.hbs b/app/components/form/form-form.hbs
index 523d00171..e71284722 100644
--- a/app/components/form/form-form.hbs
+++ b/app/components/form/form-form.hbs
@@ -26,9 +26,9 @@
         <div class='card'>
           <div class='card-body create-new-question'>
             {{#if question.isOpenQuestion}}
-              {{form/open-question question form=model}}
+              <Form::OpenQuestion @question={{question}} @form={{model}}/>
             {{else}}
-              {{form/closed-question question form=model}}
+              <Form::ClosedQuestion @question={{question}} @form={{model}}/>
             {{/if}}
           </div>
         </div>
diff --git a/app/components/form/open-question.hbs b/app/components/form/open-question.hbs
index beeb6ae3e..f68d3883f 100644
--- a/app/components/form/open-question.hbs
+++ b/app/components/form/open-question.hbs
@@ -1,8 +1,8 @@
 <span class='fw-bold mb-3'>Open vraag</span>
 
-{{#unless question.form.hasResponses}}
+{{#unless @question.form.hasResponses}}
   <div class='float-md-end mb-3'>
-    <FaIcon @icon='xmark' {{on 'click' (action 'deleteQuestion')}} />
+    <FaIcon @icon='xmark' {{on 'click' this.deleteQuestion}} />
   </div>
 {{/unless}}
 
@@ -13,8 +13,8 @@
     aria-label='Vraag'
     name='question'
     placeholder='Vraag'
-    @value={{question.question}}
-    disabled={{question.form.hasResponses}}
+    @value={{@question.question}}
+    disabled={{@question.form.hasResponses}}
   />
 </div>
 
@@ -25,11 +25,10 @@
         <label class='visually-hidden form-label'>Vraagtype</label>
         <Input::SelectInput
           @class='form-select'
-          @required={{required}}
-          @options={{questionTypeOptions}}
-          @placeholder={{Vraagtype}}
-          @value={{question.fieldType}}
-          @disabled={{question.form.hasResponses}}
+          @options={{this.questionTypeOptions}}
+          @placeholder="vraagtype"
+          @value={{@question.fieldType}}
+          @disabled={{@question.form.hasResponses}}
         />
       </div>
 
@@ -38,22 +37,22 @@
             class='form-check-input'
             @type='checkbox'
             name='required'
-            @checked={{question.required}}
-            disabled={{question.form.hasResponses}}
-            id="question-{{question.position}}-required-check"
+            @checked={{@question.required}}
+            disabled={{@question.form.hasResponses}}
+            id="question-{{@question.position}}-required-check"
           />
-        <label class='form-check-label' for="question-{{question.position}}-required-check">Verplicht</label>
+        <label class='form-check-label' for="question-{{@question.position}}-required-check">Verplicht</label>
       </div>
     </div>
   </div>
 
-  {{#unless question.form.hasResponses}}
+  {{#unless @question.form.hasResponses}}
     <div class='col-md-7 col-sm-12'>
       <div class='float-md-end'>
         <button
           type='button'
           class='btn btn-default'
-          {{action 'moveQuestionUp'}}
+          {{on 'click' this.moveQuestionUp}}
         >
           <FaIcon @icon='arrow-up' />
           Omhoog
@@ -62,7 +61,7 @@
         <button
           type='button'
           class='btn btn-default'
-          {{action 'moveQuestionDown'}}
+          {{on 'click' this.moveQuestionDown}}
         >
           <FaIcon @icon='arrow-down' />
           Omlaag
diff --git a/app/components/form/open-question.js b/app/components/form/open-question.js
index 4f7de2207..538073b25 100644
--- a/app/components/form/open-question.js
+++ b/app/components/form/open-question.js
@@ -1,53 +1,59 @@
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action } from '@ember/object';
 import { OpenQuestionTypes } from 'amber-ui/constants';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
-const OpenQuestionComponent = Component.extend({
-  intl: service(),
-  question: null,
-  form: null,
-  questionTypes: OpenQuestionTypes,
-  questionTypeOptions: computed('questionTypes', function () {
+export default class OpenQuestionComponent extends Component {
+  @service intl;
+  questionTypes = OpenQuestionTypes;
+
+  get questionTypeOptions() {
     return this.questionTypes.map((questionType) => ({
       value: questionType,
       label: this.intl.t(`tag.input.types.${questionType}`),
     }));
-  }),
-  actions: {
-    moveQuestionUp() {
-      const index = this.form.get('sortedQuestions').indexOf(this.question);
-      if (index > 0) {
-        const previousQuestion = this.form
-          .get('sortedQuestions')
-          .objectAt(index - 1);
-        this.send('switchPositions', this.question, previousQuestion);
-      }
-    },
-    moveQuestionDown() {
-      const index = this.form.get('sortedQuestions').indexOf(this.question);
-      if (index < this.form.get('sortedQuestions.length') - 1) {
-        const nextQuestion = this.form
-          .get('sortedQuestions')
-          .objectAt(index + 1);
-        this.send('switchPositions', this.question, nextQuestion);
-      }
-    },
-    deleteQuestion() {
-      this.question.deleteRecord();
-    },
-    switchPositions(first, second) {
-      const firstPosition = first.get('position');
-      const secondPosition = second.get('position');
-
-      first.set('position', secondPosition);
-      second.set('position', firstPosition);
-    },
-  },
-});
-
-OpenQuestionComponent.reopenClass({
-  positionalParams: ['question'],
-});
-
-export default OpenQuestionComponent;
+  }
+
+  get question() {
+    return this.args.question;
+  }
+
+  get form() {
+    return this.args.form;
+  }
+
+  @action
+  moveQuestionUp() {
+    const index = this.form.get('sortedQuestions').indexOf(this.question);
+    if (index > 0) {
+      const previousQuestion = this.form
+        .get('sortedQuestions')
+        .objectAt(index - 1);
+      this.switchPositions(this.question, previousQuestion);
+    }
+  }
+
+  @action
+  moveQuestionDown() {
+    const index = this.form.get('sortedQuestions').indexOf(this.question);
+    if (index < this.form.get('sortedQuestions.length') - 1) {
+      const nextQuestion = this.form.get('sortedQuestions').objectAt(index + 1);
+      this.switchPositions(this.question, nextQuestion);
+    }
+  }
+
+  @action
+  deleteQuestion() {
+    this.question.deleteRecord();
+  }
+
+  @action
+  switchPositions(first, second) {
+    const firstPosition = first.get('position');
+    const secondPosition = second.get('position');
+
+    first.set('position', secondPosition);
+    second.set('position', firstPosition);
+  }
+}