refactor to native ECMAScript classes (#344)

Replaces Ember's old object model by native ECMAScript classes. Mostly automated with ember-native-class-codemod.
jelhan · Jan 18, 2020 · c948278 · c948278
1 parent 9983f76
commit c948278
Show file tree

Hide file tree

Showing 58 changed files with 1,765 additions and 1,270 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -18,6 +18,7 @@ sudo: false
 
 addons:
   chrome: stable
+  firefox: latest-esr
 
 cache:
   yarn: true

diff --git a/app/adapters/application.js b/app/adapters/application.js
@@ -2,11 +2,12 @@ import RESTAdapter from '@ember-data/adapter/rest';
 import { inject as service } from '@ember/service';
 import AdapterFetch from 'ember-fetch/mixins/adapter-fetch';
 
-export default RESTAdapter.extend(AdapterFetch, {
-  encryption: service(),
+export default class ApplicationAdapter extends RESTAdapter.extend(AdapterFetch) {
+  @service
+  encryption;
 
   // set namespace to api.php in same subdirectory
-  namespace:
+  namespace =
     window.location.pathname
     // remove index.html if it's there
     .replace(/index.html$/, '')
@@ -20,4 +21,4 @@ export default RESTAdapter.extend(AdapterFetch, {
     .concat('/api/index.php')
     // remove leading slash
     .replace(/^\//g, '')
-});
+}
diff --git a/app/components/autofocusable-element.js b/app/components/autofocusable-element.js
@@ -1,13 +1,15 @@
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 
-export default Component.extend({
-  autofocus: true,
+@classic
+export default class AutofocusableElement extends Component {
+  autofocus = true;
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     if (this.autofocus) {
       this.element.focus();
     }
-  },
-});
+  }
+}
diff --git a/app/components/bs-form/element/control/input.js b/app/components/bs-form/element/control/input.js
@@ -1,11 +1,13 @@
-import BsInput from 'ember-bootstrap/components/bs-form/element/control/input';
+import classic from 'ember-classic-decorator';
+import BaseBsInput from 'ember-bootstrap/components/bs-form/element/control/input';
 
-export default BsInput.extend({
+@classic
+export default class CustomizedBsInput extends BaseBsInput {
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     if (this.autofocus) {
       this.element.focus();
     }
-  },
-});
+  }
+}
diff --git a/app/components/create-options-dates.js b/app/components/create-options-dates.js
@@ -1,15 +1,21 @@
-import Component from '@ember/component';
+import classic from 'ember-classic-decorator';
+import { action, computed } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { computed } from '@ember/object';
+import Component from '@ember/component';
 import { isArray } from '@ember/array';
 import { isPresent } from '@ember/utils';
 import moment from 'moment';
 
-export default Component.extend({
-  i18n: service(),
-  store: service('store'),
+@classic
+export default class CreateOptionsDates extends Component {
+  @service
+  i18n;
 
-  selectedDays: computed('options.[]', function() {
+  @service('store')
+  store;
+
+  @computed('options.[]')
+  get selectedDays() {
     return this.options
       // should be unique
       .uniqBy('day')
@@ -18,64 +24,67 @@ export default Component.extend({
       // filter out invalid
       .filter(moment.isMoment)
       .toArray();
-  }),
-  calendarCenterNext: computed('calendarCenter', function() {
+  }
+
+  @computed('calendarCenter')
+  get calendarCenterNext() {
     return moment(this.calendarCenter).add(1, 'months');
-  }),
+  }
 
-  actions: {
-    daysSelected({ moment: newMoments }) {
-      let { options } = this;
+  @action
+  daysSelected({ moment: newMoments }) {
+    let { options } = this;
 
-      if (!isArray(newMoments)) {
-        // special case: all options are unselected
-        options.clear();
-        return;
-      }
+    if (!isArray(newMoments)) {
+      // special case: all options are unselected
+      options.clear();
+      return;
+    }
 
-      // array of options that represent days missing in updated selection
-      let removedOptions = options.filter((option) => {
-        return !newMoments.find((newMoment) => newMoment.format('YYYY-MM-DD') === option.day);
-      });
+    // array of options that represent days missing in updated selection
+    let removedOptions = options.filter((option) => {
+      return !newMoments.find((newMoment) => newMoment.format('YYYY-MM-DD') === option.day);
+    });
 
-      // array of moments that aren't represented yet by an option
-      let addedMoments = newMoments.filter((moment) => {
-        return !options.find((option) => moment.format('YYYY-MM-DD') === option.day);
-      });
+    // array of moments that aren't represented yet by an option
+    let addedMoments = newMoments.filter((moment) => {
+      return !options.find((option) => moment.format('YYYY-MM-DD') === option.day);
+    });
 
-      // remove options that represent deselected days
-      options.removeObjects(removedOptions);
+    // remove options that represent deselected days
+    options.removeObjects(removedOptions);
 
-      // add options for newly selected days
-      let newOptions = addedMoments.map((moment) => {
-        return this.store.createFragment('option', {
-          title: moment.format('YYYY-MM-DD'),
-        })
-      });
-      newOptions.forEach((newOption) => {
-        // options must be insert into options array at correct position
-        let insertBefore = options.find(({ date }) => {
-          if (!moment.isMoment(date)) {
-            // ignore options that do not represent a valid date
-            return false;
-          }
+    // add options for newly selected days
+    let newOptions = addedMoments.map((moment) => {
+      return this.store.createFragment('option', {
+        title: moment.format('YYYY-MM-DD'),
+      })
+    });
+    newOptions.forEach((newOption) => {
+      // options must be insert into options array at correct position
+      let insertBefore = options.find(({ date }) => {
+        if (!moment.isMoment(date)) {
+          // ignore options that do not represent a valid date
+          return false;
+        }
 
-          return date.isAfter(newOption.date);
-        });
-        let position = isPresent(insertBefore) ? options.indexOf(insertBefore) : options.length;
-        options.insertAt(position, newOption);
+        return date.isAfter(newOption.date);
       });
-    },
-    updateCalenderCenter(diff) {
-      this.calendarCenter.add(diff, 'months');
-      this.notifyPropertyChange('calenderCenter');
-    },
-  },
+      let position = isPresent(insertBefore) ? options.indexOf(insertBefore) : options.length;
+      options.insertAt(position, newOption);
+    });
+  }
+
+  @action
+  updateCalenderCenter(diff) {
+    this.calendarCenter.add(diff, 'months');
+    this.notifyPropertyChange('calenderCenter');
+  }
 
   init() {
-    this._super(arguments);
+    super.init(arguments);
 
     let { selectedDays } = this;
     this.set('calendarCenter', selectedDays.length >= 1 ? selectedDays[0] : moment());
-  },
-});
+  }
+}