@projectcaluma/ember-distribution 1.0.0-beta.2 → 1.0.0-beta.5

package/addon/components/inquiry-new-form.hbs

@@ -1,110 +1,121 @@
-<h1>{{t "caluma.distribution.new.title"}}</h1>
+{{#if this.controls.workItems.isRunning}}
+  <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
+{{else if (can "create inquiry of distribution")}}
+  <h1>{{t "caluma.distribution.new.title"}}</h1>
 
-{{#if this.selectedGroups.length}}
-  <div class="uk-flex uk-flex-middle">
-    <div class="uk-width-expand">
-      <button type="button" class="uk-link uk-text-light">
-        {{t "caluma.distribution.new.groups" count=this.selectedGroups.length}}
-      </button>
-      <div uk-dropdown class="uk-width-auto">
-        <ul
-          class="uk-list uk-list-bullet uk-margin-remove uk-padding-remove"
-          data-test-selected-groups
-        >
-          {{#each this.selectedGroups as |identifier|}}
-            <li class="uk-text-nowrap">{{group-name identifier}}</li>
-          {{/each}}
-        </ul>
+  {{#if this.selectedGroups.length}}
+    <div class="uk-flex uk-flex-middle">
+      <div class="uk-width-expand">
+        <button type="button" class="uk-link uk-text-light">
+          {{t
+            "caluma.distribution.new.groups"
+            count=this.selectedGroups.length
+          }}
+        </button>
+        <div uk-dropdown class="uk-width-auto">
+          <ul
+            class="uk-list uk-list-bullet uk-margin-remove uk-padding-remove"
+            data-test-selected-groups
+          >
+            {{#each this.selectedGroups as |identifier|}}
+              <li class="uk-text-nowrap">{{group-name identifier}}</li>
+            {{/each}}
+          </ul>
+        </div>
+        {{t
+          "caluma.distribution.new.selected"
+          count=this.selectedGroups.length
+        }}
+      </div>
+      <div>
+        <UkButton
+          @label={{t "caluma.distribution.new.reset"}}
+          @onClick={{this.clearSelectedGroups}}
+          data-test-reset
+        />
+        <UkButton
+          @color="primary"
+          @label={{t "caluma.distribution.new.create-draft"}}
+          @type="submit"
+          @loading={{this.submit.isRunning}}
+          @disabled={{this.submit.isRunning}}
+          @onClick={{perform this.submit}}
+          data-test-submit
+        />
       </div>
-      {{t "caluma.distribution.new.selected" count=this.selectedGroups.length}}
-    </div>
-    <div>
-      <UkButton
-        @color="default"
-        @label={{t "caluma.distribution.new.reset"}}
-        @onClick={{this.clearSelectedGroups}}
-        data-test-reset
-      />
-      <UkButton
-        @color="primary"
-        @label={{t "caluma.distribution.new.create-draft"}}
-        @type="submit"
-        @loading={{this.submit.isRunning}}
-        @disabled={{this.submit.isRunning}}
-        @onClick={{perform this.submit}}
-        data-test-submit
-      />
     </div>
-  </div>
-  <hr />
-{{/if}}
-
-<div class="uk-margin-bottom uk-button-group">
-  {{#each-in this.config.new.types as |slug config|}}
-    {{#unless config.disabled}}
-      <UkButton
-        data-test-type={{slug}}
-        @label={{t config.label}}
-        @color={{if (includes slug @selectedTypes) "primary" "default"}}
-        @onClick={{fn this.updateSelectedTypes slug}}
-      />
-    {{/unless}}
-  {{/each-in}}
-</div>
+    <hr />
+  {{/if}}
 
-<div class="uk-search uk-search-default uk-width-1-1">
-  <span class="uk-search-icon-flip" uk-search-icon></span>
-  <input
-    placeholder={{t "caluma.distribution.new.search"}}
-    aria-label={{t "caluma.distribution.new.search"}}
-    class="uk-search-input"
-    type="search"
-    value={{@search}}
-    data-test-search
-    {{on "input" (perform this.updateSearch)}}
-  />
-</div>
+  <div class="uk-margin-bottom uk-button-group">
+    {{#each-in this.config.new.types as |slug config|}}
+      {{#unless config.disabled}}
+        <UkButton
+          data-test-type={{slug}}
+          @label={{t config.label}}
+          @color={{if (includes slug @selectedTypes) "primary" "default"}}
+          @onClick={{fn this.updateSelectedTypes slug}}
+        />
+      {{/unless}}
+    {{/each-in}}
+  </div>
 
-{{#if this.groups.isRunning}}
-  <div class="uk-text-center uk-margin">
-    <UkSpinner @ratio={{2}} />
+  <div class="uk-search uk-search-default uk-width-1-1">
+    <span class="uk-search-icon-flip" uk-search-icon></span>
+    <input
+      placeholder={{t "caluma.distribution.new.search"}}
+      aria-label={{t "caluma.distribution.new.search"}}
+      class="uk-search-input"
+      type="search"
+      value={{@search}}
+      data-test-search
+      {{on "input" (perform this.updateSearch)}}
+    />
   </div>
-{{else if this.groups.value.length}}
-  <ul class="uk-list uk-list-striped">
-    {{#each this.groups.value as |group|}}
-      {{! template-lint-disable require-presentational-children }}
-      <li
-        role="checkbox"
-        class="uk-flex uk-flex-between uk-flex-middle"
-        data-test-group={{group.identifier}}
-        {{on "click" (fn this.updateSelectedGroups group.identifier)}}
-      >
-        {{! template-lint-disable no-nested-interactive }}
-        <label for="group-{{group.identifier}}">
-          <input
-            type="checkbox"
-            class="uk-checkbox uk-margin-small-right"
-            checked={{includes group.identifier this.selectedGroups}}
-            id="group-{{group.identifier}}"
-          />
-          {{group-name group.identifier}}
-        </label>
-        {{#if group.config.icon}}
-          {{svg-jar
-            group.config.icon
-            width="20"
-            height="20"
-            class=(concat "uk-text-" group.config.iconColor)
-          }}
-        {{/if}}
-      </li>
-    {{/each}}
-  </ul>
+
+  {{#if this.groups.isRunning}}
+    <div class="uk-text-center uk-margin">
+      <UkSpinner @ratio={{2}} />
+    </div>
+  {{else if this.groups.value.length}}
+    <ul class="uk-list uk-list-striped">
+      {{#each this.groups.value as |group|}}
+        {{! template-lint-disable require-presentational-children }}
+        <li
+          role="checkbox"
+          class="uk-flex uk-flex-between uk-flex-middle"
+          data-test-group={{group.identifier}}
+          {{on "click" (fn this.updateSelectedGroups group.identifier)}}
+        >
+          {{! template-lint-disable no-nested-interactive }}
+          <label for="group-{{group.identifier}}">
+            <input
+              type="checkbox"
+              class="uk-checkbox uk-margin-small-right"
+              checked={{includes group.identifier this.selectedGroups}}
+              id="group-{{group.identifier}}"
+            />
+            {{group-name group.identifier}}
+          </label>
+          {{#if group.config.icon}}
+            {{svg-jar
+              group.config.icon
+              width="20"
+              height="20"
+              class=(concat "uk-text-" group.config.iconColor)
+            }}
+          {{/if}}
+        </li>
+      {{/each}}
+    </ul>
+  {{else}}
+    <div class="uk-text-center">
+      <UkIcon @icon="search" @ratio={{10}} class="uk-margin-top" />
+      <p class="uk-text-muted">
+        {{t "caluma.distribution.new.empty"}}
+      </p>
+    </div>
+  {{/if}}
 {{else}}
-  <div class="uk-text-center">
-    <UkIcon @icon="search" @ratio={{10}} class="uk-margin-top" />
-    <p class="uk-text-muted">
-      {{t "caluma.distribution.new.empty"}}
-    </p>
-  </div>
+  <Notfound />
 {{/if}}

package/addon/components/inquiry-new-form.js

@@ -1,5 +1,6 @@
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
@@ -9,7 +10,6 @@ import { useTask } from "ember-resources";
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import config from "@projectcaluma/ember-distribution/config";
 import createInquiryMutation from "@projectcaluma/ember-distribution/gql/mutations/create-inquiry.graphql";
-import controlWorkItemsQuery from "@projectcaluma/ember-distribution/gql/queries/control-work-items.graphql";
 import inquiryNavigationQuery from "@projectcaluma/ember-distribution/gql/queries/inquiry-navigation.graphql";
 
 const toggle = (value, array) => {
@@ -25,6 +25,7 @@ export default class InquiryNewFormComponent extends Component {
   @service notification;
   @service intl;
   @service router;
+  @service("caluma-distribution-controls") controls;
 
   @queryManager apollo;
 
@@ -62,7 +63,12 @@ export default class InquiryNewFormComponent extends Component {
   *updateSearch(e) {
     e.preventDefault();
 
-    yield timeout(500);
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      yield timeout(500);
+    }
 
     this.args.onChangeSearch(e.target.value);
   }
@@ -74,26 +80,16 @@ export default class InquiryNewFormComponent extends Component {
     if (!this.selectedGroups.length) return;
 
     try {
-      // get create inquiry work item to complete, this will not trigger a
-      // network request since it's already fetch in the controls
-      const controlsData = yield this.apollo.watchQuery(
-        {
-          query: controlWorkItemsQuery,
-          variables: {
-            caseId: this.args.caseId,
-            currentGroup: String(this.calumaOptions.currentGroupId),
-            createTask: this.config.controls.createTask,
-            completeTask: this.config.controls.completeTask,
-          },
-        },
-        "create.edges"
+      // get create inquiry work item to complete
+      const createId = decodeId(
+        this.controls.workItems.value?.create.edges[0].node.id
       );
 
       // create new inquiries
       yield this.apollo.mutate({
         mutation: createInquiryMutation,
         variables: {
-          id: decodeId(controlsData[0].node.id),
+          id: createId,
           context: JSON.stringify({
             addressed_groups: this.selectedGroups.map(String),
           }),
@@ -118,10 +114,14 @@ export default class InquiryNewFormComponent extends Component {
       );
 
       // transition to last added inquiry
-      this.router.transitionTo("distribution.inquiry", {
-        from: navigationData[0].node.controllingGroups[0],
-        to: navigationData[0].node.addressedGroups[0],
-      });
+      this.router.transitionTo(
+        "inquiry.detail.index",
+        {
+          from: navigationData[0].node.controllingGroups[0],
+          to: navigationData[0].node.addressedGroups[0],
+        },
+        decodeId(navigationData[0].node.id)
+      );
     } catch (e) {
       this.notification.danger(
         this.intl.t("caluma.distribution.new.error", {

package/addon/components/notfound.hbs

@@ -0,0 +1,12 @@
+<div class="uk-text-center">
+  <h1 class="uk-heading-xlarge">
+    {{t "caluma.distribution.notfound.title"}}
+  </h1>
+  <h2 class="uk-heading-small uk-margin-remove-top uk-text-muted">
+    {{t "caluma.distribution.notfound.subtitle"}}
+  </h2>
+  <p class="uk-text-muted">
+    {{t "caluma.distribution.notfound.back"}}
+    <LinkTo @route="index">{{t "caluma.distribution.notfound.link"}}</LinkTo>
+  </p>
+</div>

package/addon/config.js

@@ -15,6 +15,7 @@ export default function config(target, property) {
     get() {
       return merge(
         {
+          ui: { stack: false, small: false },
           controls: {
             createTask: "create-inquiry",
             completeTask: "complete-distribution",

package/addon/controllers/application.js

@@ -0,0 +1,7 @@
+import Controller from "@ember/controller";
+
+import config from "@projectcaluma/ember-distribution/config";
+
+export default class ApplicationController extends Controller {
+  @config config;
+}

package/addon/controllers/{distribution/new.js → new.js}

@@ -3,7 +3,7 @@ import { dedupeTracked, cached } from "tracked-toolbox";
 
 import config from "@projectcaluma/ember-distribution/config";
 
-export default class DistributionNewController extends Controller {
+export default class NewController extends Controller {
   @config config;
 
   queryParams = ["types", "search"];

package/addon/gql/queries/control-work-items.graphql

@@ -1,6 +1,7 @@
 query ControlWorkItems(
   $createTask: ID!
   $completeTask: ID!
+  $inquiryTask: ID!
   $caseId: ID!
   $currentGroup: String!
 ) {
@@ -11,11 +12,11 @@ query ControlWorkItems(
       { status: READY }
       { addressedGroups: [$currentGroup] }
     ]
-    first: 1
   ) {
     edges {
       node {
         id
+        status
       }
     }
   }
@@ -26,11 +27,26 @@ query ControlWorkItems(
       { status: READY }
       { addressedGroups: [$currentGroup] }
     ]
-    first: 1
   ) {
     edges {
       node {
         id
+        status
+      }
+    }
+  }
+  send: allWorkItems(
+    filter: [
+      { case: $caseId }
+      { task: $inquiryTask }
+      { status: SUSPENDED }
+      { controllingGroups: [$currentGroup] }
+    ]
+  ) {
+    edges {
+      node {
+        id
+        status
       }
     }
   }

package/addon/modifiers/pikaday.js

@@ -0,0 +1,2 @@
+import "ember-pikaday/pikaday.css";
+export { default } from "ember-pikaday/modifiers/pikaday";

package/addon/routes/{distribution.js → application.js}

@@ -1,6 +1,6 @@
 import Route from "@ember/routing/route";
 
-export default class DistributionRoute extends Route {
+export default class ApplicationRoute extends Route {
   model(params) {
     return params.case;
   }

package/addon/routes/{distribution/index.js → index.js}

@@ -6,7 +6,7 @@ import config from "@projectcaluma/ember-distribution/config";
 import inquiryNavigationQuery from "@projectcaluma/ember-distribution/gql/queries/inquiry-navigation.graphql";
 import uniqueByGroups from "@projectcaluma/ember-distribution/utils/unique-by-groups";
 
-export default class DistributionIndexRoute extends Route {
+export default class IndexRoute extends Route {
   @service router;
   @service calumaOptions;
 
@@ -35,7 +35,7 @@ export default class DistributionIndexRoute extends Route {
     }, {});
 
     if (models.length) {
-      return this.router.replaceWith("distribution.inquiry", models[0]);
+      return this.router.replaceWith("inquiry", models[0]);
     }
   }
 }

package/addon/routes/inquiry/detail/answer.js

@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class InquiryDetailAnswerRoute extends Route {
+  model() {
+    return this.modelFor("inquiry.detail");
+  }
+}

package/addon/routes/inquiry/detail/index.js

@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class InquiryDetailIndexRoute extends Route {
+  model() {
+    return this.modelFor("inquiry.detail");
+  }
+}

package/addon/routes/{distribution/inquiry → inquiry}/detail.js

@@ -1,6 +1,6 @@
 import Route from "@ember/routing/route";
 
-export default class DistributionInquiryDetailRoute extends Route {
+export default class InquiryDetailRoute extends Route {
   model({ inquiry }) {
     return inquiry;
   }

package/addon/routes/inquiry/index.js

@@ -0,0 +1,10 @@
+import Route from "@ember/routing/route";
+
+export default class InquiryIndexRoute extends Route {
+  model() {
+    return {
+      ...this.modelFor("inquiry"),
+      case: this.modelFor("application"),
+    };
+  }
+}

package/addon/routes/{distribution/inquiry.js → inquiry.js}

@@ -1,6 +1,6 @@
 import Route from "@ember/routing/route";
 
-export default class DistributionInquiryRoute extends Route {
+export default class InquiryRoute extends Route {
   model({ from, to }) {
     return { from, to };
   }

package/addon/routes/new.js

@@ -0,0 +1,7 @@
+import Route from "@ember/routing/route";
+
+export default class NewRoute extends Route {
+  model() {
+    return this.modelFor("application");
+  }
+}

package/addon/routes/notfound.js

@@ -0,0 +1,3 @@
+import Route from "@ember/routing/route";
+
+export default class NotfoundRoute extends Route {}

package/addon/routes.js

@@ -1,12 +1,11 @@
 import buildRoutes from "ember-engines/routes";
 
 export default buildRoutes(function () {
-  this.route("distribution", { path: "/case/:case" }, function () {
-    this.route("new");
-    this.route("inquiry", { path: "/from/:from/to/:to" }, function () {
-      this.route("detail", { path: "/detail/:inquiry" }, function () {
-        this.route("answer");
-      });
+  this.route("new");
+  this.route("inquiry", { path: "/from/:from/to/:to" }, function () {
+    this.route("detail", { path: "/:inquiry" }, function () {
+      this.route("answer");
     });
   });
+  this.route("notfound", { path: "/*path" });
 });

package/addon/services/caluma-distribution-controls.js

@@ -0,0 +1,37 @@
+import { getOwner } from "@ember/application";
+import Service, { inject as service } from "@ember/service";
+import { queryManager } from "ember-apollo-client";
+import { dropTask } from "ember-concurrency";
+import { useTask } from "ember-resources";
+
+import config from "@projectcaluma/ember-distribution/config";
+import controlWorkItemsQuery from "@projectcaluma/ember-distribution/gql/queries/control-work-items.graphql";
+
+export default class CalumaDistributionControlsService extends Service {
+  @service calumaOptions;
+  @service router;
+
+  @queryManager apollo;
+
+  @config config;
+
+  get caseId() {
+    return getOwner(this).lookup("route:application").currentModel;
+  }
+
+  workItems = useTask(this, this.fetchWorkItems, () => [this.caseId]);
+
+  @dropTask
+  *fetchWorkItems(caseId) {
+    return yield this.apollo.watchQuery({
+      query: controlWorkItemsQuery,
+      variables: {
+        caseId,
+        currentGroup: String(this.calumaOptions.currentGroupId),
+        createTask: this.config.controls.createTask,
+        completeTask: this.config.controls.completeTask,
+        inquiryTask: this.config.inquiry.task,
+      },
+    });
+  }
+}

package/addon/templates/application.hbs

@@ -0,0 +1,8 @@
+<div uk-grid class={{if this.config.ui.stack "uk-grid-small"}}>
+  <div class={{if this.config.ui.stack "uk-width-1-1" "uk-width-1-3"}}>
+    <DistributionNavigation @caseId={{@model}} />
+  </div>
+  <div class={{if this.config.ui.stack "uk-width-1-1" "uk-width-2-3"}}>
+    {{outlet}}
+  </div>
+</div>

package/addon/templates/index.hbs

@@ -0,0 +1,8 @@
+<div class="uk-text-center">
+  <p class="uk-text-muted">{{t "caluma.distribution.empty"}}</p>
+  {{#if (can "create inquiry of distribution")}}
+    <LinkTo @route="new" class="uk-margin-top">
+      {{t "caluma.distribution.create"}}
+    </LinkTo>
+  {{/if}}
+</div>

package/addon/templates/notfound.hbs

@@ -0,0 +1 @@
+<Notfound />

package/addon/utils/inquiry-deadline.js

@@ -1,6 +1,6 @@
 import { assert } from "@ember/debug";
 import { get } from "@ember/object";
-import moment from "moment";
+import { DateTime } from "luxon";
 
 import { createDecorator } from "@projectcaluma/ember-distribution/-private/decorator";
 
@@ -21,13 +21,12 @@ function decorator(
       const value = inquiry.document?.deadline.edges[0]?.node.value;
       const isAnswered = inquiry.status === "COMPLETED";
 
-      const deadline = moment.utc(value);
-      const now = moment.utc();
+      const deadline = DateTime.fromISO(value).startOf("day");
+      const now = DateTime.now().startOf("day");
 
-      const isOverdue = !isAnswered && now.isAfter(deadline, "day");
+      const isOverdue = !isAnswered && now > deadline;
       const isWarning =
-        !isAnswered &&
-        now.add(this.config.warningPeriod, "days").isAfter(deadline, "day");
+        !isAnswered && now.plus({ days: this.config.warningPeriod }) > deadline;
 
       return {
         value,

package/app/abilities/distribution.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-distribution/abilities/distribution";

package/app/components/notfound.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-distribution/components/notfound";

package/app/services/caluma-distribution-controls.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-distribution/services/caluma-distribution-controls";

package/app/styles/_inquiry-divider.scss

@@ -3,6 +3,9 @@
 $size: 36px;
 $iconSize: $size * 0.6;
 
+$sizeSmall: 24px;
+$iconSizeSmall: $sizeSmall * 0.6;
+
 $colors: (
   muted: $text-muted-color,
   emphasis: $text-emphasis-color,
@@ -47,3 +50,22 @@ $colors: (
     }
   }
 }
+.inquiry-divider--small {
+  &::before,
+  &::after {
+    height: 1px;
+    width: calc(50% - #{$sizeSmall * 0.5});
+  }
+
+  .inquiry-divider__icon {
+    width: $sizeSmall;
+    height: $sizeSmall;
+
+    border-width: 1px;
+
+    > svg {
+      width: $iconSizeSmall;
+      height: $iconSizeSmall;
+    }
+  }
+}