remove implicit this usage in templates (#352)

This refactors references to values in templates from `{{foo}}` to either `{{this.foo}}` if it's a property of backing JavaScript class or `{{@foo}}` if it's passed in on invocation. You could find more details on this change in Ember docs: - [required `this` in templates](https://guides.emberjs.com/release/upgrading/current-edition/templates/#toc_required-this-in-templates) - [named arguments](https://guides.emberjs.com/release/upgrading/current-edition/templates/#toc_named-arguments) While doing this I noticed that `<PollEvaluationSummaryOption>` component could be easily refactored to a template-only component. Done it as part of this pull request even so it's technically not related.
2020-01-18 12:17:06 +01:00 · 2020-01-18 12:17:06 +01:00 · 77afc0d9fa
commit 77afc0d9fa
parent c9482786c1
21 changed files with 201 additions and 197 deletions
--- a/.template-lintrc.js
+++ b/.template-lintrc.js
@ -1,5 +1,10 @@
 'use strict';

 module.exports = {
-  extends: 'recommended'
+  extends: 'recommended',
+  rules: {
+    'no-implicit-this': {
+      allow: ['scroll-first-invalid-element-into-view-port'],
+    },
+  },
 };
--- a/app/components/poll-evaluation-summary-option.js
+++ b/app/components/poll-evaluation-summary-option.js
@ -1,5 +0,0 @@
-import classic from 'ember-classic-decorator';
-import Component from '@ember/component';
-
-@classic
-export default class PollEvaluationSummaryOption extends Component {}
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@ -17,7 +17,7 @@

 <main role="main" class="container cr-main">
  <div id="messages">
-    {{#each flashMessages.queue as |flash|}}
+    {{#each this.flashMessages.queue as |flash|}}
      <FlashMessage @flash={{flash}}>
        {{t flash.message}}
      </FlashMessage>
--- a/app/templates/components/create-options-dates.hbs
+++ b/app/templates/components/create-options-dates.hbs
@ -17,17 +17,17 @@
      <div class="row">
        <div class="col-12 col-md-6">
          <InlineDatepicker
-            @center={{calendarCenter}}
-            @selectedDays={{selectedDays}}
-            @onCenterChange={{action (mut calendarCenter) value="moment"}}
+            @center={{this.calendarCenter}}
+            @selectedDays={{this.selectedDays}}
+            @onCenterChange={{action (mut this.calendarCenter) value="moment"}}
            @onSelect={{action "daysSelected"}}
          />
        </div>
        <div class="col-md-6 cr-hide-on-mobile">
          <InlineDatepicker
-            @center={{calendarCenterNext}}
-            @selectedDays={{selectedDays}}
-            @onCenterChange={{action (mut calendarCenter) value="moment"}}
+            @center={{this.calendarCenterNext}}
+            @selectedDays={{this.selectedDays}}
+            @onCenterChange={{action (mut this.calendarCenter) value="moment"}}
            @onSelect={{action "daysSelected"}}
          />
        </div>
--- a/app/templates/components/create-options-datetime.hbs
+++ b/app/templates/components/create-options-datetime.hbs
@ -1,7 +1,7 @@
 <div class="cr-form-wrapper box">
-  {{#if errorMessage}}
+  {{#if this.errorMessage}}
    <BsAlert type="warning">
-      {{t errorMessage}}
+      {{t this.errorMessage}}
    </BsAlert>
  {{/if}}

@ -14,14 +14,14 @@
    as |form|
  >
    <div class="days">
-      {{#each dates as |date index|}}
+      {{#each @dates as |date index|}}
        {{!
          show summarized validation state for all times in a day
        }}
        <div
          class={{if
-            (get daysValidationState date.day)
-            (concat "label-has-" (get daysValidationState date.day))
+            (get this.daysValidationState date.day)
+            (concat "label-has-" (get this.daysValidationState date.day))
            "label-has-no-validation"
          }}
          data-test-day={{date.day}}
@ -35,7 +35,7 @@
              Therefore we pass in array length if index is null. Cause index starting
              by zero there can't be any element with an index === array.length.
            }}
-            @invisibleLabel={{eq date.dayFormatted (get (object-at (if index (sub index 1) dates.length) dates) "dayFormatted")}}
+            @invisibleLabel={{eq date.dayFormatted (get (object-at (if index (sub index 1) @dates.length) @dates) "dayFormatted")}}
            @model={{date}}
            @property="time"
            class="option"
@ -77,7 +77,7 @@
                  @type="link"
                  class="delete"
                  {{! disable delete button if there is only one option }}
-                  disabled={{lte dates.length 1}}
+                  disabled={{lte @dates.length 1}}
                >
                  <span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
                  <span class="sr-only">{{t "create.options.button.delete.label"}}</span>
@ -99,7 +99,7 @@
      {{/each}}
    </div>

-    {{#if (gt groupedDates.length 1)}}
+    {{#if (gt this.groupedDates.length 1)}}
      <form.element>
        <BsButton
          @onClick={{action "adoptTimesOfFirstDay"}}
--- a/app/templates/components/create-options-text.hbs
+++ b/app/templates/components/create-options-text.hbs
@ -1,5 +1,5 @@
 {{#let @form as |form|}}
-  {{#each options as |option index|}}
+  {{#each @options as |option index|}}
    <form.element
      {{! show label only on first item }}
      @label={{unless index (t "create.options.options.label")}}
@ -22,7 +22,7 @@
            @type="link"
            class="delete"
            {{! disable delete button if there is only one option }}
-            disabled={{lte options.length 1}}
+            disabled={{lte @options.length 1}}
          >
            <span class="oi oi-trash" title={{t "create.options.button.delete.label"}} aria-hidden="true"></span>
            <span class="sr-only">{{t "create.options.button.delete.label"}}</span>
--- a/app/templates/components/create-options.hbs
+++ b/app/templates/components/create-options.hbs
@ -7,10 +7,10 @@
    novalidate
    as |form|
  >
-    {{#if isMakeAPoll}}
-      <CreateOptionsText @options={{options}} @form={{form}} />
+    {{#if this.isMakeAPoll}}
+      <CreateOptionsText @options={{@options}} @form={{form}} />
    {{else}}
-      <CreateOptionsDates @options={{options}} @form={{form}} />
+      <CreateOptionsDates @options={{@options}} @form={{form}} />
    {{/if}}

    <div class="row cr-steps-bottom-nav">
--- a/app/templates/components/language-select.hbs
+++ b/app/templates/components/language-select.hbs
@ -1,4 +1,4 @@
-{{#each locales as |locale|}}
+{{#each this.locales as |locale|}}
  <option value={{locale.id}} selected={{locale.selected}}>
    {{locale.text}}
  </option>
--- a/app/templates/components/poll-evaluation-chart.hbs
+++ b/app/templates/components/poll-evaluation-chart.hbs
@ -1 +1 @@
-<EmberChart @type="bar" @data={{data}} @options={{chartOptions}} />
+<EmberChart @type="bar" @data={{this.data}} @options={{this.chartOptions}} />
--- a/app/templates/components/poll-evaluation-participants-table.hbs
+++ b/app/templates/components/poll-evaluation-participants-table.hbs
@ -11,7 +11,7 @@
          </th>
          {{#each this.optionsGroupedByDays as |optionGroup|}}
            <th colspan={{optionGroup.items.length}}>
-              {{moment-format optionGroup.value this.momentLongDayFormat}}
+              {{moment-format optionGroup.value @momentLongDayFormat}}
            </th>
          {{/each}}
        </tr>
@ -28,7 +28,7 @@
                {{moment-format option.date "LT"}}
              {{/if}}
            {{else if this.isFindADate}}
-              {{moment-format option.date this.momentLongDayFormat}}
+              {{moment-format option.date @momentLongDayFormat}}
            {{else}}
              {{option.title}}
            {{/if}}
--- a/app/templates/components/poll-evaluation-summary-option.hbs
+++ b/app/templates/components/poll-evaluation-summary-option.hbs
@ -2,59 +2,59 @@
  There must not be a line break between option text and "</strong>." cause otherwise
  we will see a space between option string and following dot.
 --}}
-{{#if isFindADate}}
+{{#if @isFindADate}}
  {{! Need to disable block indentation rule cause there shouldn't be a space between date and dot }}
  {{! template-lint-disable block-indentation }}
  <strong class="best-option-value">
    {{moment-format
-      evaluationBestOption.option.title
-      (if evaluationBestOption.option.hasTime "LLLL" momentLongDayFormat)
-      locale=currentLocale
-      timeZone=timezone
+      @evaluationBestOption.option.title
+      (if @evaluationBestOption.option.hasTime "LLLL" @momentLongDayFormat)
+      locale=@currentLocale
+      timeZone=@timezone
    }}</strong>.
  {{! template-lint-enable block-indentation }}
 {{else}}
-  <strong class="best-option-value">{{evaluationBestOption.option.title}}</strong>.
+  <strong class="best-option-value">{{@evaluationBestOption.option.title}}</strong>.
 {{/if}}

 <br>

-{{#if isFindADate}}
-  {{#if evaluationBestOption.answers.yes}}
+{{#if @isFindADate}}
+  {{#if @evaluationBestOption.answers.yes}}
    {{t
      "poll.evaluation.bestOptionParticipants.findADate.yes"
-      count=evaluationBestOption.answers.yes
+      count=@evaluationBestOption.answers.yes
    }}
  {{/if}}
-  {{#if evaluationBestOption.answers.maybe}}
+  {{#if @evaluationBestOption.answers.maybe}}
    {{t
      "poll.evaluation.bestOptionParticipants.findADate.maybe"
-      count=evaluationBestOption.answers.maybe
+      count=@evaluationBestOption.answers.maybe
    }}
  {{/if}}
-  {{#if evaluationBestOption.answers.no}}
+  {{#if @evaluationBestOption.answers.no}}
    {{t
      "poll.evaluation.bestOptionParticipants.findADate.no"
-      count=evaluationBestOption.answers.no
+      count=@evaluationBestOption.answers.no
    }}
  {{/if}}
 {{else}}
-  {{#if evaluationBestOption.answers.yes}}
+  {{#if @evaluationBestOption.answers.yes}}
    {{t
      "poll.evaluation.bestOptionParticipants.makeAPoll.yes"
-      count=evaluationBestOption.answers.yes
+      count=@evaluationBestOption.answers.yes
    }}
  {{/if}}
-  {{#if evaluationBestOption.answers.maybe}}
+  {{#if @evaluationBestOption.answers.maybe}}
    {{t
      "poll.evaluation.bestOptionParticipants.makeAPoll.maybe"
-      count=evaluationBestOption.answers.maybe
+      count=@evaluationBestOption.answers.maybe
    }}
  {{/if}}
-  {{#if evaluationBestOption.answers.no}}
+  {{#if @evaluationBestOption.answers.no}}
    {{t
      "poll.evaluation.bestOptionParticipants.makeAPoll.no"
-      count=evaluationBestOption.answers.no
+      count=@evaluationBestOption.answers.no
    }}
  {{/if}}
 {{/if}}
--- a/app/templates/components/poll-evaluation-summary.hbs
+++ b/app/templates/components/poll-evaluation-summary.hbs
@ -3,43 +3,43 @@
 </h2>

 <p class="participants">
-  {{t "poll.evaluation.participants" count=participantsCount}}
+  {{t "poll.evaluation.participants" count=this.participantsCount}}
 </p>

 <p class="best-options">
-  {{#if poll.isFindADate}}
+  {{#if @poll.isFindADate}}
    {{t
      "poll.evaluation.bestOption.label.findADate"
-      count=bestOptions.length
+      count=this.bestOptions.length
    }}
  {{else}}
    {{t
      "poll.evaluation.bestOption.label.makeAPoll"
-      count=bestOptions.length
+      count=this.bestOptions.length
    }}
  {{/if}}

-  {{#if multipleBestOptions}}
+  {{#if this.multipleBestOptions}}
    <ul>
-      {{#each bestOptions as |evaluationBestOption|}}
+      {{#each this.bestOptions as |evaluationBestOption|}}
+        <li>
          <PollEvaluationSummaryOption
-          @currentLocale={{currentLocale}}
+            @currentLocale={{this.currentLocale}}
            @evaluationBestOption={{evaluationBestOption}}
-          @isFindADate={{poll.isFindADate}}
-          @momentLongDayFormat={{momentLongDayFormat}}
-          @tagName="li"
-          @timezone={{timezone}}
+            @isFindADate={{@poll.isFindADate}}
+            @momentLongDayFormat={{@momentLongDayFormat}}
+            @timezone={{@timezone}}
          />
+        </li>
      {{/each}}
    </ul>
  {{else}}
    <PollEvaluationSummaryOption
-      @currentLocale={{currentLocale}}
-      @evaluationBestOption={{bestOptions.firstObject}}
-      @isFindADate={{poll.isFindADate}}
-      @momentLongDayFormat={{momentLongDayFormat}}
-      @tagName="span"
-      @timezone={{timezone}}
+      @currentLocale={{this.currentLocale}}
+      @evaluationBestOption={{this.bestOptions.firstObject}}
+      @isFindADate={{@poll.isFindADate}}
+      @momentLongDayFormat={{@momentLongDayFormat}}
+      @timezone={{@timezone}}
    />
  {{/if}}
 </p>
@ -47,6 +47,6 @@
 <p class="last-participation">
  {{t
    "poll.evaluation.lastParticipation"
-    ago=(moment-from-now lastParticipationAt locale=currentLocale timezone=timezone)
+    ago=(moment-from-now this.lastParticipationAt locale=this.currentLocale timezone=@timezone)
  }}
 </p>
--- a/app/templates/create.hbs
+++ b/app/templates/create.hbs
@ -1,11 +1,11 @@
 {{title (t "create.title")}}

 <BsButtonGroup @justified={{true}} class="cr-steps-top-nav form-steps">
-  {{#each formSteps as |formStep|}}
+  {{#each this.formSteps as |formStep|}}
    {{#unless formStep.hidden}}
      <BsButton
        @onClick={{transition-to formStep.route}}
-        @type={{if (eq router.currentRouteName formStep.route) "primary is-active" "default"}}
+        @type={{if (eq this.router.currentRouteName formStep.route) "primary is-active" "default"}}
        disabled={{formStep.disabled}}
        class="cr-steps-top-nav__button"
      >
@ -15,14 +15,14 @@
  {{/each}}
  <BsButton
    @onClick={{transition-to "create.index"}}
-    @type={{if (eq router.currentRouteName "create.index") "primary is-active" "default"}}
+    @type={{if (eq this.router.currentRouteName "create.index") "primary is-active" "default"}}
    class="cr-steps-top-nav__button"
  >
    {{t "create.formStep.type"}}
  </BsButton>
  <BsButton
    @onClick={{transition-to "create.meta"}}
-    @type={{if (eq router.currentRouteName "create.meta") "primary is-active" "default"}}
+    @type={{if (eq this.router.currentRouteName "create.meta") "primary is-active" "default"}}
    disabled={{not this.canEnterMetaStep}}
    class="cr-steps-top-nav__button"
  >
@ -30,7 +30,7 @@
  </BsButton>
  <BsButton
    @onClick={{transition-to "create.options"}}
-    @type={{if (eq router.currentRouteName "create.options") "primary is-active" "default"}}
+    @type={{if (eq this.router.currentRouteName "create.options") "primary is-active" "default"}}
    disabled={{not this.canEnterOptionsStep}}
    class="cr-steps-top-nav__button"
  >
@ -43,7 +43,7 @@
  {{#if this.isFindADate}}
    <BsButton
      @onClick={{transition-to "create.options-datetime"}}
-      @type={{if (eq router.currentRouteName "create.options-datetime") "primary is-active" "default"}}
+      @type={{if (eq this.router.currentRouteName "create.options-datetime") "primary is-active" "default"}}
      disabled={{not this.canEnterOptionsDatetimeStep}}
      class="cr-steps-top-nav__button"
    >
@ -52,7 +52,7 @@
  {{/if}}
  <BsButton
    @onClick={{transition-to "create.settings"}}
-    @type={{if (eq router.currentRouteName "create.settings") "primary is-active" "default"}}
+    @type={{if (eq this.router.currentRouteName "create.settings") "primary is-active" "default"}}
    disabled={{not this.canEnterSettingsStep}}
    class="cr-steps-top-nav__button"
  >
--- a/app/templates/create/options-datetime.hbs
+++ b/app/templates/create/options-datetime.hbs
@ -1,5 +1,5 @@
 <CreateOptionsDatetime
-  @dates={{options}}
+  @dates={{this.options}}
  @onNextPage={{action "nextPage"}}
  @onPrevPage={{action "previousPage"}}
 />
--- a/app/templates/create/options.hbs
+++ b/app/templates/create/options.hbs
@ -1,7 +1,7 @@
 <CreateOptions
-  @isFindADate={{model.isFindADate}}
-  @isMakeAPoll={{model.isMakeAPoll}}
-  @options={{model.options}}
+  @isFindADate={{@model.isFindADate}}
+  @isMakeAPoll={{@model.isMakeAPoll}}
+  @options={{@model.options}}
  @onPrevPage={{action "previousPage"}}
  @onNextPage={{action "nextPage"}}
 />
--- a/app/templates/create/settings.hbs
+++ b/app/templates/create/settings.hbs
@ -21,7 +21,7 @@
        id={{el.id}}
        class="custom-select"
      >
-        {{#each answerTypes as |answerType|}}
+        {{#each this.answerTypes as |answerType|}}
          <option value={{answerType.id}} selected={{eq el.value answerType.id}}>
            {{t answerType.labelTranslation}}
          </option>
@ -42,7 +42,7 @@
        onchange={{action (mut el.value) value="target.value"}}
        class="custom-select"
      >
-        {{#each expirationDurations as |duration|}}
+        {{#each this.expirationDurations as |duration|}}
          <option value={{duration.id}} selected={{eq el.value duration.id}}>
            {{t duration.labelTranslation}}
          </option>
--- a/app/templates/head.hbs
+++ b/app/templates/head.hbs
@ -3,4 +3,4 @@ Add content you wish automatically added to the documents head
 here. The 'model' available in this template can be populated by
 setting values on the 'head-data' service.
 --}}
-<title>{{model.title}}</title>
+<title>{{this.model.title}}</title>
--- a/app/templates/poll-error.hbs
+++ b/app/templates/poll-error.hbs
@ -1,12 +1,12 @@
 <div class="box">
-  {{#if decryptionFailed}}
+  {{#if this.decryptionFailed}}
    <h2 data-test-error-type="decryption-failed">
      {{t "error.poll.decryptionFailed.title"}}
    </h2>
    <p>
      {{t "error.poll.decryptionFailed.description"}}
    </p>
-  {{else if notFound}}
+  {{else if this.notFound}}
    <h2 data-test-error-type="not-found">
      {{t "error.poll.notFound.title"}}
    </h2>
--- a/app/templates/poll.hbs
+++ b/app/templates/poll.hbs
@ -1,24 +1,25 @@
-{{title model.title}}
+{{#let @model as |poll|}}
+  {{title poll.title}}

  <div id="poll">
    <div class="row">
      <div class="col-sm-6 col-lg-5">
        <div class="box meta-data">
-        <h2 class="title">{{model.title}}</h2>
-        <p class="description">{{model.description}}</p>
+          <h2 class="title">{{poll.title}}</h2>
+          <p class="description">{{poll.description}}</p>
          <p class="dates">
            <span class="creationDate">
              {{t
                "poll.created-date"
-              date=(moment-format model.creationDate "LLLL" locale=currentLocale)
+                date=(moment-format poll.creationDate "LLLL" locale=this.currentLocale)
              }}
            </span>
-          {{#if model.expirationDate}}
+            {{#if poll.expirationDate}}
              <br>
              <span class="expirationDate">
                {{t
                  "poll.expiration-date"
-                date=(moment-format model.expirationDate "LLLL" locale=currentLocale)
+                  date=(moment-format poll.expirationDate "LLLL" locale=this.currentLocale)
                }}
              </span>
            {{/if}}
@ -30,10 +31,10 @@
          <p>{{t "poll.share"}}</p>
          <p class="link cr-poll-link__link">
            <small>
-            <code class="cr-poll-link__url">{{pollUrl}}</code>
+              <code class="cr-poll-link__url">{{this.pollUrl}}</code>
            </small>
            <CopyButton
-            @clipboardText={{pollUrl}}
+              @clipboardText={{this.pollUrl}}
              @error={{action "linkAction" "selected"}}
              @success={{action "linkAction" "copied"}}
              class="btn btn-secondary cr-poll-link__copy-btn btn-sm"
@ -49,13 +50,13 @@
      </div>
    </div>

-  {{#if showExpirationWarning}}
+    {{#if this.showExpirationWarning}}
      <div class="row">
        <div class="col-xs-12">
          <BsAlert @type="warning" class="expiration-warning">
            {{t
              "poll.expiration-date-warning"
-            timeToNow=(moment-from-now model.expirationDate locale=currentLocale)
+              timeToNow=(moment-from-now poll.expirationDate locale=this.currentLocale)
            }}
          </BsAlert>
        </div>
@ -64,13 +65,13 @@

    <div class="box">
      <ul class="nav nav-tabs" role="tablist">
-      <LinkTo @route="poll.participation" @model={{model}} @tagName="li" @activeClass="active" class="participation nav-item">
-        <LinkTo @route="poll.participation" @model={{model}} class="nav-link">
+        <LinkTo @route="poll.participation" @model={{poll}} @tagName="li" @activeClass="active" class="participation nav-item">
+          <LinkTo @route="poll.participation" @model={{poll}} class="nav-link">
            {{t "poll.tab-title.participation"}}
          </LinkTo>
        </LinkTo>
-      <LinkTo @route="poll.evaluation" @model={{model}} @tagName="li" @activeClass="active" class="evaluation nav-item">
-        <LinkTo @route="poll.evaluation" @model={{model}} class="nav-link">
+        <LinkTo @route="poll.evaluation" @model={{poll}} @tagName="li" @activeClass="active" class="evaluation nav-item">
+          <LinkTo @route="poll.evaluation" @model={{poll}} class="nav-link">
            {{t "poll.tab-title.evaluation"}}
          </LinkTo>
        </LinkTo>
@ -83,10 +84,11 @@
      </div>
    </div>
  </div>
+{{/let}}

 <BsModal
  @title={{t "poll.modal.timezoneDiffers.title"}}
-  @open={{mustChooseTimezone}}
+  @open={{this.mustChooseTimezone}}
  @footer={{false}}
  @closeButton={{false}}
  @keyboard={{false}}
@ -107,7 +109,7 @@
      {{t "poll.modal.timezoneDiffers.button.useLocalTimezone"}}
    </BsButton>
    <BsButton
-      @onClick={{action (mut timezoneChoosen) true}}
+      @onClick={{action (mut this.timezoneChoosen) true}}
      data-test-button="use-poll-timezone"
    >
      {{t "poll.modal.timezoneDiffers.button.usePollTimezone"}}
--- a/app/templates/poll/evaluation.hbs
+++ b/app/templates/poll/evaluation.hbs
@ -1,21 +1,23 @@
-{{#if isEvaluable}}
+{{#let @model as |poll|}}
+  {{#if this.isEvaluable}}
    <PollEvaluationSummary
-    @momentLongDayFormat={{momentLongDayFormat}}
+      @momentLongDayFormat={{this.momentLongDayFormat}}
      @poll={{poll}}
-    @timezone={{timezone}}
+      @timezone={{this.timezone}}
    />

    <h3>{{t "poll.evaluation.overview"}}</h3>
    <PollEvaluationChart
-    @momentLongDayFormat={{momentLongDayFormat}}
+      @momentLongDayFormat={{this.momentLongDayFormat}}
      @poll={{poll}}
-    @timezone={{timezone}}
+      @timezone={{this.timezone}}
    />
  {{/if}}

  <h3>{{t "poll.evaluation.participantTable"}}</h3>
  <PollEvaluationParticipantsTable
-  @momentLongDayFormat={{momentLongDayFormat}}
+    @momentLongDayFormat={{this.momentLongDayFormat}}
    @poll={{poll}}
-  @timezone={{timezone}}
+    @timezone={{this.timezone}}
  />
+{{/let}}
--- a/app/templates/poll/participation.hbs
+++ b/app/templates/poll/participation.hbs
@ -17,16 +17,16 @@
      data-test-form-element="name"
    />
    <div class="selections">
-      {{#each selections as |selection|}}
-        {{#if isFreeText}}
+      {{#each this.selections as |selection|}}
+        {{#if this.isFreeText}}
          <form.element
            @controlType="text"
-            @label={{if isFindADate
+            @label={{if this.isFindADate
              (moment-format
                selection.labelValue
-                (if (eq selection.momentFormat "day") momentLongDayFormat selection.momentFormat)
-                locale=currentLocale
-                timeZone=timezone
+                (if (eq selection.momentFormat "day") this.momentLongDayFormat selection.momentFormat)
+                locale=this.currentLocale
+                timeZone=this.timezone
              )
              selection.labelValue
            }}
@ -35,12 +35,12 @@
          />
        {{else}}
          <form.element
-            @label={{if isFindADate
+            @label={{if this.isFindADate
              (moment-format
                selection.labelValue
-                (if (eq selection.momentFormat "day") momentLongDayFormat selection.momentFormat)
-                locale=currentLocale
-                timeZone=timezone
+                (if (eq selection.momentFormat "day") this.momentLongDayFormat selection.momentFormat)
+                locale=this.currentLocale
+                timeZone=this.timezone
              )
              selection.labelValue
            }}
@ -51,7 +51,7 @@
            data-test-form-element={{concat "option-" selection.labelValue}}
            as |el|
          >
-            {{#each possibleAnswers as |possibleAnswer|}}
+            {{#each this.possibleAnswers as |possibleAnswer|}}
              <div class="radio custom-control custom-radio custom-control-inline {{possibleAnswer.type}}">
                <input
                  class="custom-control-input
@ -84,9 +84,9 @@
 </div>

 <BsModal
-  @onHidden={{action (mut savingFailed) false}}
+  @onHidden={{action (mut this.savingFailed) false}}
  @onSubmit={{action "save"}}
-  @open={{savingFailed}}
+  @open={{this.savingFailed}}
  data-test-modal="saving-failed"
  as |modal|
 >