refactor: use ember-resources for ember-caluma fetching

ember/.eslintignore

@@ -18,3 +18,6 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+
+# mirage
+/mirage/mirage

ember/app/caluma-query/models/case.js

@@ -0,0 +1,21 @@
+import CaseModel from "@projectcaluma/ember-core/caluma-query/models/work-item";
+
+export default class CustomCaseModel extends CaseModel {
+  static fragment = `{
+    createdAt
+    modifiedAt
+    createdByUser
+    createdByGroup
+    closedAt
+    closedByUser
+    closedByGroup
+    status
+    meta
+    document {
+      id
+      form {
+        name
+      }
+    }
+  }`;
+}

ember/app/cases/detail/controller.js

@@ -1,35 +1,7 @@
 import Controller from "@ember/controller";
-import getCaseQuery from "caluma-portal-demo/gql/queries/get-case";
-import { queryManager } from "ember-apollo-client";
-import { task, lastValue } from "ember-concurrency";
-import QueryParams from "ember-parachute";
 
-export default class CasesDetailController extends Controller.extend(
-  new QueryParams().Mixin
-) {
-  @queryManager apollo;
-
-  setup() {
-    this.fetchCase.perform();
-  }
-  reset() {
-    this.fetchCase.cancelAll();
-  }
-
-  @lastValue("fetchCase") case;
-  @task
-  *fetchCase() {
-    if (typeof this.model === "object" && this.model) {
-      return this.model;
-    }
-
-    const caseNode = yield this.apollo.query(
-      {
-        query: getCaseQuery,
-        variables: { caseId: this.model },
-      },
-      "allCases.edges"
-    );
-    return caseNode.map(({ node }) => node)[0];
+export default class CasesDetailController extends Controller {
+  get case() {
+    return this.model.value[0];
   }
 }

ember/app/cases/detail/edit/controller.js

@@ -0,0 +1,7 @@
+import Controller from "@ember/controller";
+
+export default class CasesDetailEditController extends Controller {
+  get case() {
+    return this.model.value[0];
+  }
+}

ember/app/cases/detail/edit/route.js

@@ -1,3 +1,7 @@
 import CasesDetailRoute from "caluma-portal-demo/cases/detail/index/route";
 
-export default class CasesDetailEditRoute extends CasesDetailRoute {}
+export default class CasesDetailEditRoute extends CasesDetailRoute {
+  model() {
+    return this.modelFor("cases.detail");
+  }
+}

ember/app/cases/detail/edit/template.hbs

@@ -1,3 +1,3 @@
 {{#if @model}}
-  <CfContent @documentId={{@model.document.id}} />
+  <CfContent @documentId={{this.case.document.id}} />
 {{/if}}

ember/app/cases/detail/index/controller.js

@@ -2,16 +2,21 @@ import Controller from "@ember/controller";
 import { inject as service } from "@ember/service";
 import cancelCaseMutation from "caluma-portal-demo/gql/mutations/cancel-case";
 import { queryManager } from "ember-apollo-client";
-import { task } from "ember-concurrency";
+import { dropTask } from "ember-concurrency";
 
 export default class CasesDetailIndexController extends Controller {
   @service router;
   @queryManager apollo;
 
-  @task *closeCase() {
+  get case() {
+    return this.model.value[0];
+  }
+
+  @dropTask
+  *closeCase() {
     yield this.apollo.mutate({
       mutation: cancelCaseMutation,
-      variables: { case: this.model.id },
+      variables: { case: this.case.id },
     });
     this.router.transitionTo("cases.index");
   }

ember/app/cases/detail/index/route.js

@@ -1,22 +1,7 @@
 import Route from "@ember/routing/route";
-import getCaseQuery from "caluma-portal-demo/gql/queries/get-case";
-import { queryManager } from "ember-apollo-client";
 
 export default class CasesDetailRoute extends Route {
-  @queryManager apollo;
-  async model() {
-    const model = this.modelFor("cases.detail");
-    if (typeof model === "object" && model) {
-      return model;
-    }
-
-    const caseRecord = await this.apollo.query(
-      {
-        query: getCaseQuery,
-        variables: { caseId: model },
-      },
-      "allCases.edges"
-    );
-    return caseRecord.map(({ node }) => node)[0];
+  model() {
+    return this.modelFor("cases.detail");
   }
 }

ember/app/cases/detail/index/template.hbs

@@ -1,46 +1,46 @@
 <div class="uk-grid-collapse" uk-grid>
   <div class="uk-width-1-3">
     <span class="uk-text-large">
-      {{t "documents.general"}}
+      {{t "cases.general"}}
     </span>
   </div>
   <div class="uk-width-2-3">
     <table class="uk-table uk-table-justify uk-table-small">
       <tbody>
         <tr>
           <th class="uk-text-bold uk-width-1-6">
-            {{t "documents.status"}}
+            {{t "cases.status"}}
           </th>
           <td class="uk-width-1-3">
-            <CaseStateLabel @state={{@model.status}} @iconPosition="right" />
+            <CaseStateLabel @state={{this.case.raw.status}} @iconPosition="right" />
           </td>
           <th class="uk-text-bold uk-width-1-6">
-            {{t "documents.description"}}
+            {{t "cases.description"}}
           </th>
           <td class="uk-width-1-3">
-            {{or @model.form.description "-"}}
+            {{or this.case.form.description "-"}}
           </td>
         </tr>
         <tr>
           <th class="uk-text-bold uk-width-1-6">
-            {{t "documents.createdAt"}}
+            {{t "cases.createdAt"}}
           </th>
           <td class="uk-width-1-3">
             {{
               if
-              @model.createdAt
-              (moment-format @model.createdAt "DD.MM.YYYY")
+              this.case.createdAt
+              (moment-format this.case.createdAt "DD.MM.YYYY")
               "-"
             }}
           </td>
           <th class="uk-text-bold uk-width-1-6">
-            {{t "documents.modifiedAt"}}
+            {{t "cases.modifiedAt"}}
           </th>
           <td class="uk-width-1-3">
             {{
               if
-              @model.modifiedAt
-              (moment-format @model.modifiedAt "DD.MM.YYYY")
+              this.case.modifiedAt
+              (moment-format this.case.modifiedAt "DD.MM.YYYY")
               "-"
             }}
           </td>
@@ -55,32 +55,32 @@
 <div class="uk-grid-collapse" uk-grid>
   <div class="uk-width-1-3">
     <span class="uk-text-large">
-      {{t "documents.actions"}}
+      {{t "cases.actions"}}
     </span>
   </div>
   <div class="uk-width-2-3">
     <h3>
-      {{t "documents.edit"}}
+      {{t "cases.edit"}}
     </h3>
     <p>
-      {{t "documents.editText"}}
+      {{t "cases.editText"}}
     </p>
     <LinkTo @route="cases.detail.edit" class="uk-button uk-button-default">
-      {{t "documents.edit"}}
+      {{t "cases.edit"}}
     </LinkTo>
 
     <h3>
-      {{t "documents.delete"}}
+      {{t "cases.delete"}}
     </h3>
     <p>
-      {{t "documents.deleteText"}}
+      {{t "cases.deleteText"}}
     </p>
     <UkButton
-      @onClick={{perform this.closeCase @model}}
+      @onClick={{perform this.closeCase this.case}}
       @disabled={{this.closeCase.isRunning}}
       @loading={{this.closeCase.isRunning}}
     >
-      {{t "documents.delete"}}
+      {{t "cases.delete"}}
     </UkButton>
   </div>
 </div>

ember/app/cases/detail/route.js

@@ -1,7 +1,13 @@
 import Route from "@ember/routing/route";
-
+import { useCalumaQuery } from "@projectcaluma/ember-core/caluma-query";
+import { allCases } from "@projectcaluma/ember-core/caluma-query/queries";
 export default class CasesDetailRoute extends Route {
-  model(params) {
-    return params.id;
+  model({ case_id }) {
+    const caseQuery = useCalumaQuery(this, allCases, () => ({
+      options: { pageSize: 1 },
+      filter: [{ id: case_id }],
+    }));
+
+    return caseQuery;
   }
 }

ember/app/cases/detail/template.hbs

@@ -1,4 +1,4 @@
-{{#if this.fetchCase.isRunning}}
+{{#if @model.isLoading}}
   <div class="uk-text-center uk-padding">
     <UkSpinner @ratio={{2}} />
   </div>
@@ -14,13 +14,13 @@
 
   <UkTab as |tab|>
     <tab.item @href="/{{this.case.id}}" @linkToIndex={{true}}>
-      {{t "documents.subnav.overview"}}
+      {{t "cases.subnav.overview"}}
     </tab.item>
     <tab.item @href="/{{this.case.id}}/work-items">
-      {{t "documents.subnav.workItems"}}
+      {{t "cases.subnav.workItems"}}
     </tab.item>
     <tab.item @href="/{{this.case.id}}/edit">
-      {{t "documents.subnav.document"}}
+      {{t "cases.subnav.document"}}
     </tab.item>
   </UkTab>
 

ember/app/cases/detail/work-items/edit/form/controller.js

@@ -1,40 +1,16 @@
 import Controller from "@ember/controller";
 import { inject as service } from "@ember/service";
-import calumaQuery from "@projectcaluma/ember-core/caluma-query";
-import { allWorkItems } from "@projectcaluma/ember-core/caluma-query/queries";
 import completeWorkItem from "caluma-portal-demo/gql/mutations/complete-work-item";
 import { queryManager } from "ember-apollo-client";
-import {
-  dropTask,
-  restartableTask,
-  lastValue,
-} from "ember-concurrency-decorators";
+import { dropTask } from "ember-concurrency-decorators";
 
 export default class CasesDetailWorkItemsEditFormController extends Controller {
   @queryManager apollo;
 
-  @service store;
-  @service notification;
-  @service intl;
   @service router;
 
-  @calumaQuery({ query: allWorkItems })
-  workItemsQuery;
-
-  @lastValue("fetchWorkItems") workItem;
-  @restartableTask()
-  *fetchWorkItems(id) {
-    if (typeof id === "object") {
-      return id;
-    }
-    try {
-      yield this.workItemsQuery.fetch({ filter: [{ id }] });
-
-      return this.workItemsQuery.value[0];
-    } catch (error) {
-      console.error(error);
-      this.notification.danger(this.intl.t("workItems.fetchError"));
-    }
+  get workItem() {
+    return this.model.value[0];
   }
 
   @dropTask()

ember/app/cases/detail/work-items/edit/form/template.hbs

@@ -1,6 +1,6 @@
 <h3>{{this.workItem.name}}</h3>
 
-{{#if this.fetchWorkItems.isRunning}}
+{{#if @model.isLoading}}
   <div class="uk-text-center uk-padding">
     <UkSpinner @ratio={{2}} />
   </div>