@projectcaluma/ember-distribution 1.0.0-beta.7 → 11.0.0-beta.24

package/addon/components/cd-inquiry-dialog.js

@@ -2,23 +2,32 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager, getObservable } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
-import { useTask } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
+import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import config from "@projectcaluma/ember-distribution/config";
 import inquiryDialogQuery from "@projectcaluma/ember-distribution/gql/queries/inquiry-dialog.graphql";
 
 export default class CdInquiryDialogComponent extends Component {
+  @service intl;
   @service router;
+  @service distribution;
+  @service notification;
+  @service calumaOptions;
 
   @config config;
 
   @queryManager apollo;
 
+  get currentGroupIsCreator() {
+    return String(this.calumaOptions.currentGroupId) === this.args.from;
+  }
+
   get inquiries() {
     return this._inquiries.value?.allWorkItems.edges.map((edge) => edge.node);
   }
 
-  _inquiries = useTask(this, this.fetchDialog, () => [
+  _inquiries = trackedTask(this, this.fetchDialog, () => [
     this.args.from,
     this.args.to,
     this.args.caseId,
@@ -37,7 +46,8 @@ export default class CdInquiryDialogComponent extends Component {
         infoQuestion: this.config.inquiry.infoQuestion,
         deadlineQuestion: this.config.inquiry.deadlineQuestion,
         statusQuestion: this.config.inquiry.answer.statusQuestion,
-        answerInfoQuestion: this.config.inquiry.answer.infoQuestion,
+        answerInfoQuestions: this.config.inquiry.answer.infoQuestions,
+        buttonTasks: Object.keys(this.config.inquiry.answer.buttons),
         includeNavigationData: true,
       },
     });
@@ -62,4 +72,23 @@ export default class CdInquiryDialogComponent extends Component {
 
     return response;
   }
+
+  @dropTask
+  *createInquiry(e) {
+    e.preventDefault();
+
+    yield this.distribution.createInquiry.perform([this.args.to]);
+
+    // refetch dialog data
+    yield getObservable(this._inquiries.value).refetch();
+
+    this.router.transitionTo(
+      "inquiry.detail.index",
+      {
+        from: this.args.from,
+        to: this.args.to,
+      },
+      decodeId(this.inquiries[0].id)
+    );
+  }
 }

package/addon/components/cd-inquiry-edit-form.hbs

@@ -4,26 +4,45 @@
   @loading={{this._inquiry.isRunning}}
 >
   <:default as |content|>
-    <h1 class="uk-flex uk-flex-middle">
-      {{t "caluma.distribution.edit.title"}}
-      {{#if (eq this.inquiry.status "RUNNING")}}
-        <UkLabel
-          class="uk-margin-left"
-          @label={{t "caluma.distribution.status.draft"}}
-        />
-      {{/if}}
-    </h1>
+    <CdDocumentHeader
+      @name={{content.document.rootForm.raw.name}}
+      @status={{if
+        (eq this.inquiry.status "SUSPENDED")
+        (t "caluma.distribution.status.draft")
+      }}
+      @modifiedAt={{this.inquiry.document.modifiedContentAt}}
+      @modifiedBy={{this.inquiry.document.modifiedContentByUser}}
+    />
+
+    <hr />
+    {{#if
+      (and
+        (cannot "send inquiry" this.inquiry)
+        (eq this.inquiry.status "SUSPENDED")
+      )
+    }}
+      <div class="uk-alert uk-alert-warning uk-flex uk-flex-middle">
+        <UkIcon @icon="warning" class="uk-margin-small-right" />
+        {{t "caluma.distribution.edit.send-not-allowed"}}
+        {{t "caluma.distribution.not-allowed-hint"}}
+      </div>
+    {{/if}}
 
     <content.form />
 
-    <DocumentValidity @document={{content.document}} as |isValid validate|>
-      <UkButton
-        @type="submit"
-        @color="primary"
-        @disabled={{or (not isValid) this.send.isRunning}}
-        @onClick={{perform this.send validate}}
-      >{{t "caluma.distribution.edit.send"}}</UkButton>
-    </DocumentValidity>
+    {{#if
+      (and (can "edit inquiry" this.inquiry) (can "send inquiry" this.inquiry))
+    }}
+      <DocumentValidity @document={{content.document}} as |isValid validate|>
+        <UkButton
+          @type="submit"
+          @color="primary"
+          @disabled={{or (not isValid) this.send.isRunning}}
+          @onClick={{perform this.send validate}}
+          @loading={{this.send.isRunning}}
+        >{{t "caluma.distribution.edit.send"}}</UkButton>
+      </DocumentValidity>
+    {{/if}}
   </:default>
   <:notfound><CdNotfound /></:notfound>
 </CfContent>

package/addon/components/cd-inquiry-edit-form.js

@@ -2,7 +2,7 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
-import { useTask } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 import config from "@projectcaluma/ember-distribution/config";
 import resumeWorkItemMutation from "@projectcaluma/ember-distribution/gql/mutations/resume-work-item.graphql";
@@ -17,7 +17,7 @@ export default class CdInquiryEditFormComponent extends Component {
 
   @queryManager apollo;
 
-  _inquiry = useTask(this, this.fetchInquiry, () => [this.args.inquiry]);
+  _inquiry = trackedTask(this, this.fetchInquiry, () => [this.args.inquiry]);
 
   get inquiry() {
     return this._inquiry.value?.[0]?.node;

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

@@ -1,7 +1,9 @@
 {{#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>
+  <p class="uk-text-large">{{t "caluma.distribution.new.title"}}</p>
+
+  <hr />
 
   {{#if this.selectedGroups.length}}
     <div class="uk-flex uk-flex-middle">
@@ -78,36 +80,38 @@
       <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>
+    <table
+      class="uk-table uk-table-striped uk-table-hover uk-table-small uk-table-middle group-list"
+    >
+      <tbody>
+        {{#each this.groups.value as |group|}}
+          {{! template-lint-disable require-presentational-children }}
+          <tr
+            role="checkbox"
+            data-test-group={{group.identifier}}
+            {{on "click" (fn this.updateSelectedGroups group.identifier)}}
+          >
+            <td class="uk-padding-remove-right">
+              {{! template-lint-disable require-input-label no-nested-interactive }}
+              <input
+                type="checkbox"
+                class="uk-checkbox"
+                checked={{includes group.identifier this.selectedGroups}}
+              />
+            </td>
+            <td class="uk-width-expand">{{group-name group.identifier}}</td>
+            <td class="uk-text-right">
+              {{#if group.config.icon}}
+                <UkIcon
+                  @icon={{group.config.icon}}
+                  class="uk-display-block uk-text-{{group.config.iconColor}}"
+                />
+              {{/if}}
+            </td>
+          </tr>
+        {{/each}}
+      </tbody>
+    </table>
   {{else}}
     <div class="uk-text-center">
       <UkIcon @icon="search" @ratio={{10}} class="uk-margin-top" />

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

@@ -5,11 +5,10 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
 import { timeout, restartableTask, dropTask, task } from "ember-concurrency";
-import { useTask } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 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";
 
 const toggle = (value, array) => {
   const set = new Set(array);
@@ -32,7 +31,7 @@ export default class CdInquiryNewFormComponent extends Component {
 
   @tracked selectedGroups = [];
 
-  groups = useTask(this, this.fetchGroups, () => [
+  groups = trackedTask(this, this.fetchGroups, () => [
     this.args.selectedTypes,
     this.args.search,
   ]);
@@ -45,9 +44,7 @@ export default class CdInquiryNewFormComponent extends Component {
   }
 
   @action
-  updateSelectedGroups(identifier, e) {
-    e.preventDefault();
-
+  updateSelectedGroups(identifier) {
     this.selectedGroups = toggle(identifier, this.selectedGroups);
   }
 
@@ -78,45 +75,20 @@ export default class CdInquiryNewFormComponent extends Component {
 
     if (!this.selectedGroups.length) return;
 
-    try {
-      // get create inquiry work item to complete
-      const createId = decodeId(
-        this.distribution.controls.value?.create.edges[0].node.id
-      );
-
-      // create new inquiries
-      yield this.apollo.mutate({
-        mutation: createInquiryMutation,
-        variables: {
-          id: createId,
-          context: JSON.stringify({
-            addressed_groups: this.selectedGroups.map(String),
-          }),
-        },
-      });
-
-      // refetch navigation and controls data
-      yield this.distribution.refetch();
-
-      const lastControlling =
-        this.distribution.navigation.value.controlling.edges[0].node;
-
-      // transition to last added inquiry
-      this.router.transitionTo(
-        "inquiry.detail.index",
-        {
-          from: lastControlling.controllingGroups[0],
-          to: lastControlling.addressedGroups[0],
-        },
-        decodeId(lastControlling.id)
-      );
-    } catch (e) {
-      this.notification.danger(
-        this.intl.t("caluma.distribution.new.error", {
-          count: this.selectedGroups.length,
-        })
-      );
-    }
+    yield this.distribution.createInquiry.perform(this.selectedGroups);
+
+    const lastControlling =
+      this.distribution.navigation.value.controlling.edges[0].node;
+
+    // transition to last added inquiry
+    this.router.transitionTo(
+      "inquiry.detail.index",
+      {
+        from: lastControlling.controllingGroups[0],
+        to: lastControlling.addressedGroups[0],
+      },
+      decodeId(lastControlling.id)
+    );
   }
 
   @task

package/addon/components/cd-navigation/controls.hbs

@@ -1,28 +1,57 @@
 <div class="uk-text-center uk-margin-small-top">
   {{#if (can "create inquiry of distribution")}}
-    <CdIconButton @route="new" @icon="plus" />
+    <LinkTo
+      @route="new"
+      class="uk-icon-button"
+      uk-tooltip={{t "caluma.distribution.new.title"}}
+      data-test-new-inquiry
+    >
+      <UkIcon @icon="plus" />
+    </LinkTo>
   {{/if}}
   {{#if (can "send inquiries of distribution")}}
-    <CdIconButton
-      @title={{t "caluma.distribution.send"}}
-      @icon="paper-plane-outline"
-      @fromSvgJar={{true}}
-      @gutterTop={{4}}
-      @gutterRight={{6}}
-      @gutterLeft={{4}}
-      @gutterBottom={{4}}
-      @onClick={{perform this.sendInquiries}}
-      @loading={{this.sendInquiries.isRunning}}
+    <button
+      type="button"
+      class="uk-icon-button"
+      uk-tooltip={{t "caluma.distribution.send"}}
       data-test-send-pending-inquiries
-    />
+      {{on "click" (perform this.sendInquiries)}}
+    >
+      {{#if this.sendInquiries.isRunning}}
+        <UkSpinner @ratio={{0.6}} />
+      {{else}}
+        <UkIcon @icon="comment" />
+      {{/if}}
+    </button>
   {{/if}}
   {{#if (can "complete distribution")}}
-    <CdIconButton
-      @icon="lock-closed-outline"
-      @fromSvgJar={{true}}
-      @onClick={{perform this.completeDistribution}}
-      @loading={{this.completeDistribution.isRunning}}
+    <button
+      type="button"
+      class="uk-icon-button"
+      uk-tooltip={{t "caluma.distribution.complete"}}
       data-test-complete-distribution
-    />
+      {{on "click" (perform this.completeDistribution)}}
+    >
+      {{#if this.completeDistribution.isRunning}}
+        <UkSpinner @ratio={{0.6}} />
+      {{else}}
+        <UkIcon @icon="lock" />
+      {{/if}}
+    </button>
+  {{/if}}
+  {{#if (can "reopen distribution")}}
+    <button
+      type="button"
+      class="uk-icon-button"
+      uk-tooltip={{t "caluma.distribution.reopen"}}
+      data-test-reopen-distribution
+      {{on "click" (perform this.reopenDistribution)}}
+    >
+      {{#if this.reopenDistribution.isRunning}}
+        <UkSpinner @ratio={{0.6}} />
+      {{else}}
+        <UkIcon @icon="refresh" />
+      {{/if}}
+    </button>
   {{/if}}
 </div>

package/addon/components/cd-navigation/controls.js

@@ -8,6 +8,7 @@ import { gql } from "graphql-tag";
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import config from "@projectcaluma/ember-distribution/config";
 import completeWorkItemMutation from "@projectcaluma/ember-distribution/gql/mutations/complete-work-item.graphql";
+import redoWorkItemMutation from "@projectcaluma/ember-distribution/gql/mutations/redo-work-item.graphql";
 import incompleteInquiriesQuery from "@projectcaluma/ember-distribution/gql/queries/incomplete-inquiries.graphql";
 
 export default class CdNavigationControlsComponent extends Component {
@@ -26,21 +27,21 @@ export default class CdNavigationControlsComponent extends Component {
         {
           query: incompleteInquiriesQuery,
           variables: {
-            caseId: this.args.caseId,
+            caseId: this.distribution.caseId,
             task: this.config.inquiry.task,
           },
         },
         "allWorkItems.totalCount"
       );
 
-      if (
-        incompleteInquiries > 0 &&
-        !(yield confirm(
-          this.intl.t("caluma.distribution.complete-confirm", {
-            count: incompleteInquiries,
-          })
-        ))
-      ) {
+      const confirmText =
+        incompleteInquiries === 0
+          ? this.intl.t("caluma.distribution.complete-confirm-empty")
+          : this.intl.t("caluma.distribution.complete-confirm", {
+              count: incompleteInquiries,
+            });
+
+      if (!(yield confirm(confirmText))) {
         return;
       }
 
@@ -63,6 +64,30 @@ export default class CdNavigationControlsComponent extends Component {
     }
   }
 
+  @dropTask
+  *reopenDistribution() {
+    try {
+      if (!(yield confirm(this.intl.t("caluma.distribution.reopen-confirm")))) {
+        return;
+      }
+
+      const distributionWorkItemId = decodeId(
+        this.distribution.controls.value?.case.edges[0]?.node.parentWorkItem.id
+      );
+
+      yield this.apollo.mutate({
+        mutation: redoWorkItemMutation,
+        variables: {
+          workItem: distributionWorkItemId,
+        },
+      });
+
+      yield this.distribution.refetchControls();
+    } catch (e) {
+      this.notification.danger(this.intl.t("caluma.distribution.reopen-error"));
+    }
+  }
+
   @dropTask
   *sendInquiries() {
     if (!(yield confirm(this.intl.t("caluma.distribution.send-confirm")))) {

package/addon/components/cd-navigation/item.hbs

@@ -1,15 +1,18 @@
-<li class={{if this.isActive "uk-active"}}>
+<li class="uk-width-auto {{if this.isActive 'uk-active'}}">
   <LinkTo @route="inquiry" @model={{this.model}}>
-    <div class="uk-flex uk-flex-middle uk-width-1-1">
-      <div class="uk-width-expand uk-text-truncate">
-        {{#if (eq @type "addressed")}}
-          {{@inquiry.controllingGroupName}}
-        {{else}}
-          {{@inquiry.addressedGroupName}}
-        {{/if}}
-      </div>
+    {{#let
+      (if
+        (eq @type "addressed")
+        @inquiry.controllingGroupName
+        @inquiry.addressedGroupName
+      )
+      as |name|
+    }}
+      <span class="uk-width-expand uk-text-truncate" title={{name}}>
+        {{name}}
+      </span>
+    {{/let}}
 
-      <CdNavigation::StatusIndicator @inquiry={{@inquiry}} @type={{@type}} />
-    </div>
+    <CdNavigation::StatusIndicator @inquiry={{@inquiry}} @type={{@type}} />
   </LinkTo>
 </li>

package/addon/components/cd-navigation/section.hbs

@@ -1,5 +1,5 @@
-<li class="uk-margin-small-bottom">
-  <a href="" class="uk-margin-small-bottom" {{on "click" this.toggle}}>
+<li class="uk-margin-small-bottom uk-width-auto">
+  <a href="" {{on "click" this.toggle}}>
     <span class="uk-width-expand">
       {{t (concat "caluma.distribution.types." @type)}}
     </span>
@@ -12,7 +12,7 @@
 
   {{#if this.expanded}}
     {{#if @inquiries.length}}
-      <ul class="uk-tab uk-tab-left uk-margin-left">
+      <ul class="uk-tab uk-tab-left uk-margin-left uk-width-auto">
         {{#each this.inquiries as |inquiry|}}
           <CdNavigation::Item @inquiry={{inquiry}} @type={{@type}} />
         {{/each}}
@@ -20,7 +20,7 @@
     {{/if}}
 
     {{#if (eq @type "controlling")}}
-      <CdNavigation::Controls @caseId={{@caseId}} />
+      <CdNavigation::Controls />
     {{/if}}
   {{/if}}
 </li>

package/addon/components/cd-navigation/status-indicator.hbs

@@ -1,18 +1,13 @@
 {{#if this.showDeadlineIndicator}}
-  <div
-    class="deadline-indicator uk-flex uk-flex-middle uk-flex-center uk-margin-small-left uk-text-{{this.deadline.color}}"
-  >
-    {{svg-jar
-      "notifications-outline"
-      height=16
-      width=16
-      title=(format-date this.deadline.value)
-    }}
-  </div>
+  <UkIcon
+    @icon="clock"
+    class="uk-margin-small-right uk-text-{{this.deadline.color}}"
+    uk-tooltip={{format-date this.deadline.value}}
+  />
 {{/if}}
 
-<div
-  class="status-indicator uk-flex uk-flex-middle uk-flex-center uk-margin-small-left uk-text-{{this.status.color}}"
->
-  {{svg-jar this.status.icon title=this.status.label}}
-</div>
+<UkIcon
+  @icon={{this.status.icon}}
+  class="uk-text-{{this.status.color}}"
+  uk-tooltip={{this.status.label}}
+/>

package/addon/components/cd-navigation.hbs

@@ -1,14 +1,11 @@
-<aside>
-  <ul class="uk-tab uk-tab-left uk-margin-remove-bottom">
-    <CdNavigation::Section
-      @type="controlling"
-      @inquiries={{this.inquiries.controlling}}
-      @caseId={{@caseId}}
-    />
-    <CdNavigation::Section
-      @type="addressed"
-      @inquiries={{this.inquiries.addressed}}
-    />
-    <CdNavigation::Section @type="more" @inquiries={{this.inquiries.more}} />
-  </ul>
-</aside>
+<ul class="uk-tab uk-tab-left uk-margin-remove-bottom uk-width-auto">
+  <CdNavigation::Section
+    @type="controlling"
+    @inquiries={{this.inquiries.controlling}}
+  />
+  <CdNavigation::Section
+    @type="addressed"
+    @inquiries={{this.inquiries.addressed}}
+  />
+  <CdNavigation::Section @type="more" @inquiries={{this.inquiries.more}} />
+</ul>

package/addon/components/cd-truncated.hbs

@@ -0,0 +1,8 @@
+<p class="cd-truncated" ...attributes>
+  {{~this.displayedText~}}
+  {{#if this.truncate}}
+    <a href="" {{on "click" this.toggleExpand}}>
+      {{~t (concat "caluma.distribution." (if this.expand "less" "more"))~}}
+    </a>
+  {{/if}}
+</p>

package/addon/components/cd-truncated.js

@@ -0,0 +1,32 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class CdTruncatedComponent extends Component {
+  @tracked expand = false;
+
+  get length() {
+    return parseInt(this.args.length);
+  }
+
+  get displayedText() {
+    if (this.truncate && !this.expand) {
+      // strip input string to the passed length minus 3 to make sure the output
+      // including the 3 dots doesn't exceed the expected length
+      return `${this.args.text.substring(0, this.length - 3).trim()}...`;
+    }
+
+    return this.args.text;
+  }
+
+  get truncate() {
+    return this.args.text.length > this.length;
+  }
+
+  @action
+  toggleExpand(e) {
+    e.preventDefault();
+
+    this.expand = !this.expand;
+  }
+}