Refactor: {{action}} helper usage, the sequel

app/components/form/form-form.hbs

@@ -1,10 +1,10 @@
 <ModelForm::DatetimeInput
-  @model={{model}}
+  @model={{@model}}
   @property='respondFrom'
   @label='Inschrijven vanaf'
 />
 <ModelForm::DatetimeInput
-  @model={{model}}
+  @model={{@model}}
   @property='respondUntil'
   @label='Inschrijven tot'
 />
@@ -26,9 +26,9 @@
         <div class='card'>
           <div class='card-body create-new-question'>
             {{#if question.isOpenQuestion}}
-              <Form::OpenQuestion @question={{question}} @form={{model}}/>
+              <Form::OpenQuestion @question={{question}} @form={{@model}}/>
             {{else}}
-              <Form::ClosedQuestion @question={{question}} @form={{model}}/>
+              <Form::ClosedQuestion @question={{question}} @form={{@model}}/>
             {{/if}}
           </div>
         </div>
@@ -39,14 +39,14 @@
       <button
         type='button'
         class='btn btn-default'
-        {{action 'addOpenQuestion'}}
+        {{on 'click' this.addOpenQuestion}}
       >
         Open vraag toevoegen
       </button>
       <button
         type='button'
         class='btn btn-default'
-        {{action 'addClosedQuestion'}}
+        {{on 'click' this.addClosedQuestion}}
       >
         Gesloten vraag toevoegen
       </button>

app/components/form/form-form.js

@@ -1,31 +1,31 @@
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
-export const FormFormComponent = Component.extend({
-  model: null,
-  store: service(),
-  actions: {
-    createQuestion(modelClass, fieldType) {
-      const form = this.model;
-      const position = form.get('sortedQuestions.lastObject.position') + 1 || 0;
-      this.store.createRecord(modelClass, {
-        form,
-        fieldType,
-        position,
-        required: true,
-      });
-    },
-    addOpenQuestion() {
-      this.send('createQuestion', 'form/open-question', 'text');
-    },
-    addClosedQuestion() {
-      this.send('createQuestion', 'form/closed-question', 'radio');
-    },
-  },
-});
+export default class FormFormComponent extends Component {
+  @service store;
+  get model() {
+    return this.args.model;
+  }
 
-FormFormComponent.reopenClass({
-  positionalParams: ['model'],
-});
+  createQuestion(modelClass, fieldType) {
+    const form = this.model;
+    const position = form.get('sortedQuestions.lastObject.position') + 1 || 0;
+    this.store.createRecord(modelClass, {
+      form,
+      fieldType,
+      position,
+      required: true,
+    });
+  }
 
-export default FormFormComponent;
+  @action
+  addOpenQuestion() {
+    this.createQuestion('form/open-question', 'text');
+  }
+
+  @action
+  addClosedQuestion() {
+    this.createQuestion('form/closed-question', 'radio');
+  }
+}

app/components/form/response/open-question.hbs

@@ -1,20 +1,20 @@
-{{#if (eq question.fieldType 'textarea')}}
+{{#if (eq @question.fieldType 'textarea')}}
   <ModelForm::TextareaInput
-    @model={{answer}}
+    @model={{@answer}}
     @property='answer'
     @inputLayout='vertical'
-    @label={{question.question}}
-    @inputIdentifier={{inputIdentifier}}
-    @required={{question.required}}
+    @label={{@question.question}}
+    @inputIdentifier={{this.inputIdentifier}}
+    @required={{@question.required}}
   />
 {{else}}
   <ModelForm::TextInput
-    @type={{question.fieldType}}
-    @model={{answer}}
+    @type={{@question.fieldType}}
+    @model={{@answer}}
     @property='answer'
     @inputLayout='vertical'
-    @label={{question.question}}
-    @inputIdentifier={{inputIdentifier}}
-    @required={{question.required}}
+    @label={{@question.question}}
+    @inputIdentifier={{this.inputIdentifier}}
+    @required={{@question.required}}
   />
 {{/if}}

app/components/form/response/open-question.js

@@ -1,14 +1,7 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 
-const OpenQuestionComponent = Component.extend({
-  inputIdentifier: computed('question.id', function () {
-    return `question-${this.question.id}`;
-  }),
-});
-
-OpenQuestionComponent.reopenClass({
-  positionalParams: ['question', 'answer'],
-});
-
-export default OpenQuestionComponent;
+export default class OpenQuestionComponent extends Component {
+  get inputIdentifier() {
+    return `question-${this.args.question.id}`;
+  }
+}

app/components/form/response/response-card.hbs

@@ -1,25 +1,27 @@
-<div class='card-header mt-2'>
-  <div class='d-flex justify-content-between'>
-    <h5>Inschrijven</h5>
-    <span class='text-muted'>{{form-opened-label form}}</span>
+<div class="card">
+  <div class='card-header mt-2'>
+    <div class='d-flex justify-content-between'>
+      <h5>Inschrijven</h5>
+      <span class='text-muted'>{{form-opened-label @form}}</span>
+    </div>
   </div>
-</div>
-<div class='card-body'>
-  <form {{action 'submitResponse' on='submit'}}>
-    {{form/response/response-form form response}}
+  <div class='card-body'>
+    <form {{on 'submit' (prevent-default this.submitResponse)}}>
+      <Form::Response::ResponseForm @form={{@form}} @response={{@response}} />
 
-    <ModelForm::FormActions
-      @errors={{form.errors}}
-      @errorMessage={{this.errorMessage}}
-      @submitButtonLabel='Inschrijven'
-      @inputLayout='vertical'
-    >
-      {{#if form.questions}}
-        <LinkTo @route='activities' class='btn btn-default'>
-          Annuleren
-        </LinkTo>
-        Vragen met een * zijn verplicht
-      {{/if}}
-    </ModelForm::FormActions>
-  </form>
+      <ModelForm::FormActions
+        @errors={{@form.errors}}
+        @errorMessage={{this.errorMessage}}
+        @submitButtonLabel='Inschrijven'
+        @inputLayout='vertical'
+      >
+        {{#if @form.questions}}
+          <LinkTo @route='activities' class='btn btn-default'>
+            Annuleren
+          </LinkTo>
+          Vragen met een * zijn verplicht
+        {{/if}}
+      </ModelForm::FormActions>
+    </form>
+  </div>
 </div>

app/components/form/response/response-card.js

@@ -1,45 +1,31 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-const FormResponseCardComponent = Component.extend({
-  flashNotice: service('flash-notice'),
-  classNames: ['card'],
-  form: null,
-  response: null,
-  errorMessage: null,
-  actions: {
-    submitResponse() {
-      this.response
-        .saveWithAnswers()
-        .then(() => {
-          // The response is the first thing that is saved (in order to save answers), so currently the response is
-          // always 'incomplete'. Furthermore, the form has a field 'amountOfResponses' which should be updated.
-          // We now reload the response and the corresponding form.
-          this.response.reload();
-          this.form.reload();
-          this.flashNotice.sendSuccess('Inschrijving opgeslagen');
-        })
-        .catch((error) => {
-          this.set('errorMessage', error.message);
-          if (
-            error.payload?.errors &&
-            error.payload.errors.isAny(
-              'source.pointer',
-              '/data/attributes/user'
-            )
-          ) {
-            this.set(
-              'errorMessage',
-              'Er is al een response gevonden, probeer eerst te refreshen, zie je dit formulier dan nog? Neem dan contact op met de ict-commissie.'
-            );
-          }
-        });
-    },
-  },
-});
+export default class FormResponseCardComponent extends Component {
+  @service flashNotice;
+  @tracked errorMessage = null;
 
-FormResponseCardComponent.reopenClass({
-  positionalParams: ['form', 'response'],
-});
-
-export default FormResponseCardComponent;
+  @action
+  async submitResponse() {
+    try {
+      await this.args.response.saveWithAnswers();
+      // The response is the first thing that is saved (in order to save answers), so currently the response is
+      // always 'incomplete'. Furthermore, the form has a field 'amountOfResponses' which should be updated.
+      // We now reload the response and the corresponding form.
+      this.args.response.reload();
+      this.args.form.reload();
+      this.flashNotice.sendSuccess('Inschrijving opgeslagen');
+    } catch (error) {
+      this.errorMessage = error.message;
+      if (
+        error.payload?.errors &&
+        error.payload.errors.isAny('source.pointer', '/data/attributes/user')
+      ) {
+        this.errorMessage =
+          'Er is al een response gevonden, probeer eerst te refreshen, zie je dit formulier dan nog? Neem dan contact op met de ict-commissie.';
+      }
+    }
+  }
+}

app/components/form/response/response-form.hbs

@@ -1,15 +1,13 @@
-{{#each form.sortedQuestions as |question|}}
+{{#each @form.sortedQuestions as |question|}}
   {{#if question.isOpenQuestion}}
-    {{form/response/open-question
-      question
-      question.linkedAnswer
-      data-test-open-question=question.id
-    }}
+    <Form::Response::OpenQuestion
+      @question={{question}}
+      @answer={{question.linkedAnswer}}/>
   {{else if question.isMultipleChoice}}
     {{form/response/multiple-choice-question
       question
       question.linkedAnswers
-      updateAnswers=(action 'updateMultipleChoiceAnswers')
+      updateAnswers=this.updateMultipleChoiceAnswers
       data-test-closed-question=question.id
     }}
   {{else}}

app/components/form/response/response-form.js

@@ -1,46 +1,40 @@
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
-const FormResponseComponent = Component.extend({
-  store: service(),
-  actions: {
-    updateMultipleChoiceAnswers(question, optionIds) {
-      setTimeout(() => {
-        const answers = question.get('linkedAnswers');
-        const previousOptionIds = answers
-          .mapBy('option.id')
-          .rejectBy('isDeleted');
-        const removedOptionIds = previousOptionIds.reject((id) =>
-          optionIds.includes(id)
-        );
-        const addedOptionIds = optionIds.reject((id) =>
-          previousOptionIds.includes(id)
-        );
-
-        removedOptionIds.forEach((removedOptionId) => {
-          const removedAnswer = answers.findBy('option.id', removedOptionId);
-          answers.removeObject(removedAnswer);
-          removedAnswer.deleteRecord();
-        });
+export default class FormResponseComponent extends Component {
+  @service store;
+  @action
+  updateMultipleChoiceAnswers(question, optionIds) {
+    setTimeout(() => {
+      const answers = question.get('linkedAnswers');
+      const previousOptionIds = answers
+        .mapBy('option.id')
+        .rejectBy('isDeleted');
+      const removedOptionIds = previousOptionIds.reject((id) =>
+        optionIds.includes(id)
+      );
+      const addedOptionIds = optionIds.reject((id) =>
+        previousOptionIds.includes(id)
+      );
 
-        addedOptionIds.forEach((addedOptionId) => {
-          const option = this.store.peekRecord(
-            'form/closed-question-option',
-            addedOptionId
-          );
-          const addedAnswer = this.store.createRecord(
-            'form/closed-question-answer',
-            { response: this.response, option }
-          );
-          answers.push(addedAnswer);
-        });
-      }, 10);
-    },
-  },
-});
+      removedOptionIds.forEach((removedOptionId) => {
+        const removedAnswer = answers.findBy('option.id', removedOptionId);
+        answers.removeObject(removedAnswer);
+        removedAnswer.deleteRecord();
+      });
 
-FormResponseComponent.reopenClass({
-  positionalParams: ['form', 'response'],
-});
-
-export default FormResponseComponent;
+      addedOptionIds.forEach((addedOptionId) => {
+        const option = this.store.peekRecord(
+          'form/closed-question-option',
+          addedOptionId
+        );
+        const addedAnswer = this.store.createRecord(
+          'form/closed-question-answer',
+          { response: this.args.response, option }
+        );
+        answers.push(addedAnswer);
+      });
+    }, 10);
+  }
+}