refactor: user credits controller to glimmer

Refactor to prevent usage of deprecated built-in transition methods
for controllers and routes.

app/users/edit/credits/absence-credits/edit/controller.js

@@ -1,25 +1,27 @@
 import Controller, { inject as controller } from "@ember/controller";
 import { inject as service } from "@ember/service";
-import { task } from "ember-concurrency";
+import { dropTask, task } from "ember-concurrency";
 import AbsenceCreditValidations from "timed/validations/absence-credit";
 
-export default Controller.extend({
-  AbsenceCreditValidations,
+export default class UsersEditCreditsAbsenceCreditsEditController extends Controller {
+  AbsenceCreditValidations = AbsenceCreditValidations;
 
-  userController: controller("users.edit"),
+  @controller("users.edit") userController;
 
-  userCreditsController: controller("users.edit.credits.index"),
+  @controller("users.edit.credits.index") userCreditsController;
 
-  notify: service("notify"),
-  router: service("router"),
+  @service notify;
+  @service router;
 
-  absenceTypes: task(function* () {
+  @task
+  *absenceTypes() {
     return yield this.store.query("absence-type", {
       fill_worktime: 0, // eslint-disable-line camelcase
     });
-  }),
+  }
 
-  credit: task(function* () {
+  @task
+  *credit() {
     const id = this.model;
 
     return id
@@ -29,22 +31,21 @@ export default Controller.extend({
       : yield this.store.createRecord("absence-credit", {
           user: this.user,
         });
-  }),
+  }
 
-  save: task(function* (changeset) {
+  @dropTask
+  *save(changeset) {
     try {
       yield changeset.save();
 
       this.notify.success("Absence credit was saved");
 
       this.get("userController.data").perform(this.get("user.id"));
 
-      let allYears = this.get(
-        "userCreditsController.years.lastSuccessful.value"
-      );
+      let allYears = this.get("userCreditsController.years.value");
 
       if (!allYears) {
-        allYears = yield this.get("userCreditsController.years").perform();
+        allYears = yield this.get("userCreditsController._years").perform();
       }
 
       const year =
@@ -61,9 +62,10 @@ export default Controller.extend({
       /* istanbul ignore next */
       this.notify.error("Error while saving the absence credit");
     }
-  }).drop(),
+  }
 
-  delete: task(function* (credit) {
+  @dropTask
+  *delete(credit) {
     try {
       yield credit.destroyRecord();
 
@@ -76,5 +78,5 @@ export default Controller.extend({
       /* istanbul ignore next */
       this.notify.error("Error while deleting the absence credit");
     }
-  }).drop(),
-});
+  }
+}

app/users/edit/credits/index/controller.js

@@ -1,30 +1,34 @@
 import Controller, { inject as controller } from "@ember/controller";
-import { computed } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
 import { ability } from "ember-can/computed";
+import { dropTask } from "ember-concurrency";
 import { task } from "ember-concurrency";
-import QueryParams from "ember-parachute";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 import moment from "moment";
 
-const UsersEditCreditsQueryParams = new QueryParams({
-  year: {
-    defaultValue: `${moment().year()}`,
-    replace: true,
-    refresh: true,
-  },
-});
+export default class UsersEditCreditsController extends Controller {
+  @service notify;
+  @service fetch;
+  @service can;
+  @service router;
 
-export default Controller.extend(UsersEditCreditsQueryParams.Mixin, {
-  notify: service("notify"),
+  @controller("users.edit") userController;
 
-  fetch: service("fetch"),
+  queryParams = {
+    year: {
+      refreshModel: true,
+      replace: true,
+    },
+  };
 
-  can: service("can"),
-  router: service("router"),
+  year = moment().year();
+  years = trackedTask(this, this._years, () => [this.model?.id]);
 
-  userController: controller("users.edit"),
+  @task
+  *_years() {
+    yield Promise.resolve();
 
-  years: task(function* () {
     const employments = yield this.store.query("employment", {
       user: this.get("model.id"),
       ordering: "start_date",
@@ -34,38 +38,25 @@ export default Controller.extend(UsersEditCreditsQueryParams.Mixin, {
     const to = moment().add(1, "year").year();
 
     return [...new Array(to + 1 - from).keys()].map((i) => `${from + i}`);
-  }),
-
-  overtimeCreditAbility: ability("overtime-credit"),
-  absenceCreditAbility: ability("absence-credit"),
-
-  allowTransfer: computed(
-    "year",
-    "overtimeCreditAbility.canCreate",
-    "absenceCreditAbility.canCreate",
-    function () {
-      return (
-        parseInt(this.year) === moment().year() - 1 &&
-        this.get("overtimeCreditAbility.canCreate") &&
-        this.get("absenceCreditAbility.canCreate")
-      );
-    }
-  ),
-
-  setup() {
-    this.years.perform();
-    this.absenceCredits.perform();
-    this.overtimeCredits.perform();
-  },
-
-  queryParamsDidChange({ shouldRefresh }) {
-    if (shouldRefresh) {
-      this.absenceCredits.perform();
-      this.overtimeCredits.perform();
-    }
-  },
+  }
+
+  @ability("overtime-credit") overtimeCreditAbility;
+  @ability("absence-credit") absenceCreditAbility;
+
+  get allowTransfer() {
+    return (
+      parseInt(this.year) === moment().year() - 1 &&
+      this.get("overtimeCreditAbility.canCreate") &&
+      this.get("absenceCreditAbility.canCreate")
+    );
+  }
+
+  absenceCredits = trackedTask(this, this._absenceCredits, () => [this.year]);
+
+  @task
+  *_absenceCredits() {
+    yield Promise.resolve();
 
-  absenceCredits: task(function* () {
     const year = this.year;
 
     return yield this.store.query("absence-credit", {
@@ -74,19 +65,25 @@ export default Controller.extend(UsersEditCreditsQueryParams.Mixin, {
       ordering: "-date",
       ...(year ? { year } : {}),
     });
-  }),
+  }
+
+  overtimeCredits = trackedTask(this, this._overtimeCredits, () => [this.year]);
+
+  @task
+  *_overtimeCredits() {
+    yield Promise.resolve();
 
-  overtimeCredits: task(function* () {
     const year = this.year;
 
     return yield this.store.query("overtime-credit", {
       user: this.get("model.id"),
       ordering: "-date",
       ...(year ? { year } : {}),
     });
-  }),
+  }
 
-  transfer: task(function* () {
+  @dropTask
+  *transfer() {
     /* istanbul ignore next */
     if (!this.allowTransfer) {
       return;
@@ -101,28 +98,35 @@ export default Controller.extend(UsersEditCreditsQueryParams.Mixin, {
 
       this.get("userController.data").perform(this.get("model.id"));
 
-      this.resetQueryParams("year");
+      this.year = `${moment().year()}`;
     } catch (e) {
       /* istanbul ignore next */
       this.notify.error("Error while transfering");
     }
-  }).drop(),
+  }
 
-  editAbsenceCredit: task(function* (id) {
+  @dropTask
+  *editAbsenceCredit(id) {
     if (this.can.can("edit absence-credit")) {
       yield this.router.transitionTo(
         "users.edit.credits.absence-credits.edit",
         id
       );
     }
-  }).drop(),
+  }
 
-  editOvertimeCredit: task(function* (id) {
+  @task
+  *editOvertimeCredit(id) {
     if (this.can.can("edit overtime-credit")) {
       yield this.router.transitionTo(
         "users.edit.credits.overtime-credits.edit",
         id
       );
     }
-  }).drop(),
-});
+  }
+
+  @action
+  transitionTo(route) {
+    this.router.transitionTo(route);
+  }
+}

app/users/edit/credits/index/route.js

@@ -1,3 +1,3 @@
 import Route from "@ember/routing/route";
 
-export default Route.extend({});
+export default class UsersEditCreditsIndexRoute extends Route {}

app/users/edit/credits/index/template.hbs

@@ -8,7 +8,7 @@
       >Transfer</button>
     {{/if}}
 
-    {{#let this.years.lastSuccessful.value as |years|}}
+    {{#let this.years.value as |years|}}
       <label for="credit-year-select" hidden>
         Select year
       </label>
@@ -33,7 +33,7 @@
           <LoadingIcon />
         </div>
       {{else}}
-        {{#let this.absenceCredits.lastSuccessful.value as |absenceCredits|}}
+        {{#let this.absenceCredits.value as |absenceCredits|}}
           {{#if absenceCredits}}
             <div class="card-block">
               <div class="grid">
@@ -50,7 +50,7 @@
                     <tbody>
                       {{#each absenceCredits as |absenceCredit|}}
                         <tr
-                        role="link"
+                          role="link"
                           class={{if (can "edit absence-credit") "pointer"}}
                           {{on
                             "click"
@@ -88,10 +88,17 @@
                   {{#if (can "create absence-credit")}}
                     Add a new credit by clicking the button below!<br />
                     <br />
-                    <LinkTo
-                      @route="users.edit.credits.absence-credits.new"
+                    <button
+                      {{on
+                        "click"
+                        (fn
+                          this.router.transitionTo
+                          "users.edit.credits.absence-credits.new"
+                        )
+                      }}
                       class="btn btn-success"
-                    >Add new credit</LinkTo>
+                      type="button"
+                    >Add new credit</button>
                   {{/if}}
                 </p>
               </div>
@@ -112,7 +119,7 @@
           <LoadingIcon />
         </div>
       {{else}}
-        {{#let this.overtimeCredits.lastSuccessful.value as |overtimeCredits|}}
+        {{#let this.overtimeCredits.value as |overtimeCredits|}}
           {{#if overtimeCredits}}
             <div class="card-block">
               <div class="grid">
@@ -128,7 +135,7 @@
                     <tbody>
                       {{#each overtimeCredits as |overtimeCredit|}}
                         <tr
-                        role="link"
+                          role="link"
                           class="{{if (can 'edit overtime-credit') 'pointer'}}"
                           {{on
                             "click"
@@ -168,10 +175,17 @@
                   {{#if (can "create overtime-credit")}}
                     Add a new credit by clicking the button below!<br />
                     <br />
-                    <LinkTo
-                      @route="users.edit.credits.overtime-credits.new"
+                    <button
+                      {{on
+                        "click"
+                        (fn
+                          this.transitionTo
+                          "users.edit.credits.overtime-credits.new"
+                        )
+                      }}
                       class="btn btn-success"
-                    >Add new credit</LinkTo>
+                      type="button"
+                    >Add new credit</button>
                   {{/if}}
                 </p>
               </div>

app/users/edit/credits/overtime-credits/edit/controller.js

@@ -13,6 +13,8 @@ export default Controller.extend({
   notify: service("notify"),
   router: service("router"),
 
+  router: service("router"),
+
   credit: task(function* () {
     const id = this.model;
 
@@ -31,12 +33,10 @@ export default Controller.extend({
 
       this.get("userController.data").perform(this.get("user.id"));
 
-      let allYears = this.get(
-        "userCreditsController.years.lastSuccessful.value"
-      );
+      let allYears = this.get("userCreditsController.years.value");
 
       if (!allYears) {
-        allYears = yield this.get("userCreditsController.years").perform();
+        allYears = yield this.get("userCreditsController._years").perform();
       }
 
       const year =