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

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

@@ -1,32 +1,57 @@
 <div class="uk-text-center uk-margin-small-top">
   {{#if (can "create inquiry of distribution")}}
-    <CdIconButton
-      @title={{t "caluma.distribution.new.title"}}
-      @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/config.js

@@ -4,6 +4,7 @@ import { cached } from "tracked-toolbox";
 
 export const INQUIRY_STATUS = {
   DRAFT: "draft",
+  SKIPPED: "skipped",
   SENT: "sent",
   POSITIVE: "positive",
   NEGATIVE: "negative",
@@ -15,7 +16,7 @@ export default function config(target, property) {
     get() {
       return merge(
         {
-          ui: { stack: false, small: false },
+          ui: { stack: false, small: false, readonly: false },
           controls: {
             createTask: "create-inquiry",
             completeTask: "complete-distribution",
@@ -37,20 +38,22 @@ export default function config(target, property) {
               buttons: {
                 "compose-inquiry-answer": {
                   color: "primary",
-                  label: "caluma.distribution.answer.release-for-review",
+                  label: "caluma.distribution.answer.buttons.compose.label",
+                  status: "caluma.distribution.answer.buttons.compose.status",
                 },
                 "confirm-inquiry-answer": {
                   color: "primary",
-                  label: "caluma.distribution.answer.confirm",
+                  label: "caluma.distribution.answer.buttons.confirm.label",
+                  status: "caluma.distribution.answer.buttons.confirm.status",
                 },
                 "revise-inquiry-answer": {
                   color: "default",
-                  label: "caluma.distribution.answer.revise",
+                  label: "caluma.distribution.answer.buttons.revise.label",
                 },
                 "adjust-inquiry-answer": {
                   color: "primary",
-                  label:
-                    "caluma.distribution.answer.release-adjustment-for-review",
+                  label: "caluma.distribution.answer.buttons.adjust.label",
+                  status: "caluma.distribution.answer.buttons.adjust.status",
                 },
               },
             },
@@ -60,11 +63,12 @@ export default function config(target, property) {
             types: {
               suggestions: {
                 label: "caluma.distribution.new.suggestions",
-                icon: "bulb-outline",
+                icon: "star",
                 iconColor: "warning",
               },
             },
           },
+          permissions: {},
         },
         getOwner(this).lookup("service:calumaOptions")?.distribution ?? {}
       );

package/addon/engine.js

@@ -16,7 +16,9 @@ export default class DistributionEngine extends Engine {
       "notification",
       "intl",
       "caluma-options",
-      "store", // this is just in case that a custom form widget uses the store
+      // this is just in case that a custom form widget uses the store or fetch service
+      "store",
+      "fetch",
     ],
   };
 }

package/addon/gql/fragments/inquiry.graphql

@@ -1,6 +1,21 @@
+fragment InquiryAnswerButtons on Case {
+  workItems(filter: [{ tasks: $buttonTasks }, { status: READY }]) {
+    edges {
+      node {
+        id
+        status
+        task {
+          id
+          slug
+        }
+      }
+    }
+  }
+}
+
 fragment InquiryDeadlineDocument on Document {
   id
-  deadline: answers(question: $deadlineQuestion) {
+  deadline: answers(filter: [{ question: $deadlineQuestion }]) {
     edges {
       node {
         id
@@ -14,7 +29,7 @@ fragment InquiryDeadlineDocument on Document {
 
 fragment InquiryStatusDocument on Document {
   id
-  status: answers(question: $statusQuestion) {
+  status: answers(filter: [{ question: $statusQuestion }]) {
     edges {
       node {
         id
@@ -33,7 +48,7 @@ fragment InquiryStatusDocument on Document {
 fragment InquiryRequest on Document {
   id
   ...InquiryDeadlineDocument
-  info: answers(question: $infoQuestion) {
+  info: answers(filter: [{ question: $infoQuestion }]) {
     edges {
       node {
         id
@@ -61,15 +76,17 @@ fragment InquiryDialog on WorkItem {
   }
   childCase {
     id
+    ...InquiryAnswerButtons
     document {
       ...InquiryStatusDocument
-      info: answers(questions: $answerInfoQuestions) {
+      info: answers(filter: [{ questions: $answerInfoQuestions }]) {
         edges {
           node {
             id
             question {
               id
               label
+              slug
             }
             ... on StringAnswer {
               value

package/addon/gql/mutations/complete-inquiry-work-item.graphql

@@ -15,7 +15,7 @@ mutation CompleteInquiryWorkItem(
           id
           ...InquiryStatusDocument
         }
-        workItems(tasks: $buttonTasks, status: READY) {
+        workItems(filter: [{ tasks: $buttonTasks }, { status: READY }]) {
           edges {
             node {
               id

package/addon/gql/mutations/redo-work-item.graphql

@@ -0,0 +1,8 @@
+mutation RedoWorkItem($workItem: ID!) {
+  redoWorkItem(input: { id: $workItem }) {
+    workItem {
+      id
+      isRedoable
+    }
+  }
+}

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

@@ -50,4 +50,15 @@ query ControlWorkItems(
       }
     }
   }
+  case: allCases(filter: [{ id: $caseId }]) {
+    edges {
+      node {
+        id
+        parentWorkItem {
+          id
+          isRedoable
+        }
+      }
+    }
+  }
 }

package/addon/gql/queries/inquiry-answer.graphql

@@ -1,4 +1,4 @@
-#import InquiryDeadlineDocument, InquiryRequest from '../fragments/inquiry.graphql'
+#import InquiryAnswerButtons, InquiryDeadlineDocument, InquiryRequest from '../fragments/inquiry.graphql'
 
 query InquiryAnswer(
   $inquiry: ID!
@@ -14,6 +14,7 @@ query InquiryAnswer(
         addressedGroups
         controllingGroups
         createdAt
+        closedAt
         task {
           id
           slug
@@ -29,17 +30,7 @@ query InquiryAnswer(
             modifiedContentAt
             modifiedContentByUser
           }
-          workItems(tasks: $buttonTasks, status: READY) {
-            edges {
-              node {
-                id
-                task {
-                  id
-                  slug
-                }
-              }
-            }
-          }
+          ...InquiryAnswerButtons
         }
       }
     }

package/addon/gql/queries/inquiry-dialog.graphql

@@ -1,7 +1,8 @@
-#import InquiryDialog, InquiryDeadlineDocument, InquiryStatusDocument, InquiryRequest from '../fragments/inquiry.graphql'
+#import InquiryAnswerButtons, InquiryDialog, InquiryDeadlineDocument, InquiryStatusDocument, InquiryRequest from '../fragments/inquiry.graphql'
 
 query InquiryDialog(
   $task: ID!
+  $buttonTasks: [String]!
   $statusQuestion: ID!
   $deadlineQuestion: ID!
   $infoQuestion: ID!

package/addon/services/distribution.js

@@ -29,10 +29,18 @@ export default class DistributionService extends Service {
   navigation = trackedTask(this, this.fetchNavigation, () => [this.caseId]);
 
   async refetch() {
-    await getObservable(this.controls.value)?.refetch();
+    await this.refetchControls();
+    await this.refetchNavigation();
+  }
+
+  async refetchNavigation() {
     await getObservable(this.navigation.value)?.refetch();
   }
 
+  async refetchControls() {
+    await getObservable(this.controls.value)?.refetch();
+  }
+
   @dropTask
   *fetchControls(caseId) {
     return yield this.apollo.watchQuery({

package/addon/templates/application.hbs

@@ -11,6 +11,7 @@
     <div class={{if this.config.ui.stack "uk-width-1-1" "uk-width-1-3"}}>
       <CdNavigation @caseId={{@model}} />
     </div>
+    {{#if this.config.ui.stack}}<div class="uk-width-1-1"><hr /></div>{{/if}}
     <div class={{if this.config.ui.stack "uk-width-1-1" "uk-width-2-3"}}>
       {{outlet}}
     </div>

package/addon/utils/inquiry-answer-status.js

@@ -0,0 +1,34 @@
+import { assert } from "@ember/debug";
+import { get } from "@ember/object";
+
+import { createDecorator } from "@projectcaluma/ember-distribution/-private/decorator";
+
+function decorator(
+  target,
+  key,
+  desc,
+  { inquiryProperty = "args.inquiry" } = {}
+) {
+  assert(
+    `The @projectcaluma/ember-distribution config must be injected in order to use @inquiryAnswerStatus: \`@config config\``,
+    Object.prototype.hasOwnProperty.call(target, "config")
+  );
+
+  return {
+    get() {
+      const inquiry = get(this, inquiryProperty);
+      const readyWorkItems =
+        inquiry.childCase?.workItems.edges
+          .filter((edge) => edge.node.status === "READY")
+          .map((edge) => edge.node.task.slug) ?? [];
+
+      const buttonConfig = Object.entries(
+        this.config.inquiry.answer.buttons
+      ).find(([task]) => readyWorkItems.includes(task))?.[1];
+
+      return buttonConfig?.status ? this.intl.t(buttonConfig.status) : null;
+    },
+  };
+}
+
+export default createDecorator(decorator);

package/addon/utils/inquiry-deadline.js

@@ -19,18 +19,18 @@ function decorator(
     get() {
       const inquiry = get(this, inquiryProperty);
       const value = inquiry.document?.deadline.edges[0]?.node.value;
-      const isAnswered = inquiry.status === "COMPLETED";
+      const isDone = ["COMPLETED", "SKIPPED"].includes(inquiry.status);
 
       const { days: diff } = DateTime.fromISO(value).diffNow("days").toObject();
 
-      const isOverdue = !isAnswered && diff <= 0;
-      const isWarning = !isAnswered && diff <= this.config.warningPeriod;
+      const isOverdue = !isDone && diff <= 0;
+      const isWarning = !isDone && diff <= this.config.warningPeriod;
 
       return {
         value,
         isOverdue,
         isWarning,
-        color: isAnswered
+        color: isDone
           ? "muted"
           : isOverdue
           ? "danger"

package/addon/utils/inquiry-status.js

@@ -5,15 +5,17 @@ import { createDecorator } from "@projectcaluma/ember-distribution/-private/deco
 import { INQUIRY_STATUS } from "@projectcaluma/ember-distribution/config";
 
 export const ICON_MAP = {
-  [INQUIRY_STATUS.DRAFT]: "pencil-outline",
-  [INQUIRY_STATUS.SENT]: "paper-plane-outline",
-  [INQUIRY_STATUS.POSITIVE]: "checkmark-outline",
-  [INQUIRY_STATUS.NEGATIVE]: "close-outline",
-  [INQUIRY_STATUS.NEEDS_INTERACTION]: "repeat-outline",
+  [INQUIRY_STATUS.DRAFT]: "commenting",
+  [INQUIRY_STATUS.SKIPPED]: "lock",
+  [INQUIRY_STATUS.SENT]: "comment",
+  [INQUIRY_STATUS.POSITIVE]: "check",
+  [INQUIRY_STATUS.NEGATIVE]: "close",
+  [INQUIRY_STATUS.NEEDS_INTERACTION]: "file-text",
 };
 
 export const COLOR_MAP = {
   [INQUIRY_STATUS.DRAFT]: "muted",
+  [INQUIRY_STATUS.SKIPPED]: "muted",
   [INQUIRY_STATUS.SENT]: "emphasis",
   [INQUIRY_STATUS.POSITIVE]: "success",
   [INQUIRY_STATUS.NEGATIVE]: "danger",
@@ -44,9 +46,12 @@ function decorator(
         ? inquiry.status === "READY"
         : inquiry.status === "SUSPENDED";
       const isSent = !isAddressed && inquiry.status === "READY";
+      const isSkipped = inquiry.status === "SKIPPED";
 
       const answer = inquiry.childCase?.document.status.edges[0]?.node;
-      const slug = isDraft
+      const slug = isSkipped
+        ? INQUIRY_STATUS.SKIPPED
+        : isDraft
         ? INQUIRY_STATUS.DRAFT
         : isSent
         ? INQUIRY_STATUS.SENT
@@ -55,7 +60,7 @@ function decorator(
       return {
         slug,
         label:
-          !isDraft && !isSent
+          !isSkipped && !isDraft && !isSent
             ? answer?.selectedOption.label
             : this.intl.t(`caluma.distribution.status.${slug}`),
         color: COLOR_MAP[slug],

package/app/styles/@projectcaluma/ember-distribution.scss

@@ -1,5 +1,4 @@
 @import "../answer-form";
-@import "../icon-button";
+@import "../group-list";
 @import "../inquiry-divider";
-@import "../status-indicator";
 @import "../truncated";

package/app/styles/_group-list.scss

@@ -0,0 +1,7 @@
+.group-list tr {
+  cursor: pointer;
+
+  > td:last-of-type svg {
+    min-width: 20px;
+  }
+}

package/app/styles/_inquiry-divider.scss

@@ -3,7 +3,7 @@
 $size: 36px;
 $iconSize: $size * 0.6;
 
-$sizeSmall: 24px;
+$sizeSmall: 32px;
 $iconSizeSmall: $sizeSmall * 0.6;
 
 $colors: (

package/app/utils/inquiry-answer-status.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-distribution/utils/inquiry-answer-status";

package/index.js

@@ -5,11 +5,6 @@ const { buildEngine } = require("ember-engines/lib/engine-addon");
 
 const name = require("./package").name;
 
-const ioniconAssets = [
-  ...require.resolve("ionicons").split("/").slice(0, -1),
-  "svg",
-].join("/");
-
 const publicAssets = [
   ...require.resolve(name).split("/").slice(0, -1),
   "public",
@@ -19,5 +14,5 @@ const publicAssets = [
 module.exports = buildEngine({
   name,
   lazyLoading: { enabled: false },
-  svgJar: { sourceDirs: [ioniconAssets, publicAssets] },
+  svgJar: { sourceDirs: [publicAssets] },
 });