@projectcaluma/ember-distribution 1.0.0-beta.1 → 1.0.0-beta.12

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

@@ -0,0 +1,11 @@
+import Component from "@glimmer/component";
+
+import config from "@projectcaluma/ember-distribution/config";
+
+export default class CdInquiryDialogInquiryComponent extends Component {
+  @config config;
+
+  get hasAnswer() {
+    return this.args.inquiry.status === "COMPLETED";
+  }
+}

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

@@ -0,0 +1,30 @@
+{{#if this._inquiries.isRunning}}
+  <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
+{{else if this.inquiries.length}}
+  {{#if
+    (and (can "create inquiry of distribution") this.currentGroupIsCreator)
+  }}
+    <div class="uk-text-center uk-margin">
+      <button
+        type="button"
+        class="uk-icon-button"
+        title={{t "caluma.distribution.new.title"}}
+        data-test-new-inquiry
+        {{on "click" (perform this.createInquiry)}}
+      >
+        {{#if this.createInquiry.isRunning}}
+          <UkSpinner @ratio={{0.6}} />
+        {{else}}
+          <UkIcon @icon="plus" />
+        {{/if}}
+      </button>
+    </div>
+  {{/if}}
+  <section>
+    {{#each this.inquiries as |inquiry|}}
+      <CdInquiryDialog::Inquiry @inquiry={{inquiry}} />
+    {{/each}}
+  </section>
+{{else}}
+  <CdNotfound />
+{{/if}}

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

@@ -0,0 +1,94 @@
+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 { 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 = trackedTask(this, this.fetchDialog, () => [
+    this.args.from,
+    this.args.to,
+    this.args.caseId,
+    this.config,
+  ]);
+
+  @dropTask
+  *fetchDialog() {
+    const response = yield this.apollo.watchQuery({
+      query: inquiryDialogQuery,
+      variables: {
+        from: this.args.from,
+        to: this.args.to,
+        caseId: this.args.caseId,
+        task: this.config.inquiry.task,
+        infoQuestion: this.config.inquiry.infoQuestion,
+        deadlineQuestion: this.config.inquiry.deadlineQuestion,
+        statusQuestion: this.config.inquiry.answer.statusQuestion,
+        answerInfoQuestions: this.config.inquiry.answer.infoQuestions,
+        buttonTasks: Object.keys(this.config.inquiry.answer.buttons),
+        includeNavigationData: true,
+      },
+    });
+
+    /**
+     * Sadly this is necessary to handle what happens after the withdraw task in
+     * the inquiry part component because the mutation triggers a refresh of the
+     * query above in the same runloop instead of the next one.  This causes
+     * `this.inquiries` to be recomputed which then triggers a rerender of the
+     * component and therefore cancels the withdraw task before we can do a
+     * transition.
+     *
+     * TODO: If https://github.com/ember-graphql/ember-apollo-client/pull/421 is
+     * merged and released, we can rewrite this into an action that is triggered
+     * in the withdraw task of the child component.
+     */
+    getObservable(response).subscribe(({ data: { allWorkItems } }) => {
+      if (allWorkItems.edges.every((edge) => edge.node.status === "CANCELED")) {
+        this.router.transitionTo("index");
+      }
+    });
+
+    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

@@ -0,0 +1,44 @@
+<CfContent
+  @documentId={{decode-id this.inquiry.document.id}}
+  @disabled={{cannot "edit inquiry" this.inquiry}}
+  @loading={{this._inquiry.isRunning}}
+>
+  <:default as |content|>
+    <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 (cannot "send inquiry" this.inquiry)}}
+      <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 />
+
+    {{#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/{inquiry-edit-form.js → cd-inquiry-edit-form.js}

@@ -2,21 +2,22 @@ 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";
 import inquiryEditQuery from "@projectcaluma/ember-distribution/gql/queries/inquiry-edit.graphql";
 
-export default class InquiryEditFormComponent extends Component {
+export default class CdInquiryEditFormComponent extends Component {
   @service notification;
   @service router;
+  @service intl;
 
   @config config;
 
   @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;
@@ -43,7 +44,7 @@ export default class InquiryEditFormComponent extends Component {
         variables: { workItem: this.args.inquiry },
       });
 
-      yield this.router.transitionTo("distribution.inquiry.index");
+      yield this.router.transitionTo("inquiry.index");
     } catch (error) {
       this.notification.danger(
         this.intl.t("caluma.distribution.edit.send-error")

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

@@ -0,0 +1,125 @@
+{{#if this.controls.workItems.isRunning}}
+  <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
+{{else if (can "create inquiry of distribution")}}
+  <p class="uk-text-large">{{t "caluma.distribution.new.title"}}</p>
+
+  <hr />
+
+  {{#if this.selectedGroups.length}}
+    <div class="uk-flex uk-flex-middle">
+      <div class="uk-width-expand">
+        <a href="">
+          {{t
+            "caluma.distribution.new.groups"
+            count=this.selectedGroups.length
+          }}
+        </a>
+        <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>
+    </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>
+
+  <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>
+
+  {{#if this.groups.isRunning}}
+    <div class="uk-text-center uk-margin">
+      <UkSpinner @ratio={{2}} />
+    </div>
+  {{else if this.groups.value.length}}
+    <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" />
+      <p class="uk-text-muted">
+        {{t "caluma.distribution.new.empty"}}
+      </p>
+    </div>
+  {{/if}}
+{{else}}
+  <CdNotfound />
+{{/if}}

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

@@ -0,0 +1,114 @@
+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";
+import { timeout, restartableTask, dropTask, task } from "ember-concurrency";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
+
+import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
+import config from "@projectcaluma/ember-distribution/config";
+
+const toggle = (value, array) => {
+  const set = new Set(array);
+
+  set.delete(value) || set.add(value);
+
+  return [...set];
+};
+
+export default class CdInquiryNewFormComponent extends Component {
+  @service calumaOptions;
+  @service notification;
+  @service intl;
+  @service router;
+  @service distribution;
+
+  @queryManager apollo;
+
+  @config config;
+
+  @tracked selectedGroups = [];
+
+  groups = trackedTask(this, this.fetchGroups, () => [
+    this.args.selectedTypes,
+    this.args.search,
+  ]);
+
+  @action
+  updateSelectedTypes(type, e) {
+    e.preventDefault();
+
+    this.args.onChangeSelectedTypes(toggle(type, this.args.selectedTypes));
+  }
+
+  @action
+  updateSelectedGroups(identifier) {
+    this.selectedGroups = toggle(identifier, this.selectedGroups);
+  }
+
+  @action
+  clearSelectedGroups(e) {
+    e.preventDefault();
+
+    this.selectedGroups = [];
+  }
+
+  @restartableTask
+  *updateSearch(e) {
+    e.preventDefault();
+
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      yield timeout(500);
+    }
+
+    this.args.onChangeSearch(e.target.value);
+  }
+
+  @dropTask
+  *submit(e) {
+    e.preventDefault();
+
+    if (!this.selectedGroups.length) return;
+
+    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
+  *fetchGroups(types, search) {
+    // https://github.com/ember-cli/eslint-plugin-ember/issues/1413
+    yield Promise.resolve();
+
+    const typedGroups = yield this.calumaOptions.fetchTypedGroups(
+      types,
+      search
+    );
+
+    return Object.entries(typedGroups)
+      .flatMap(([type, groups]) => {
+        return groups.map((group) => ({
+          identifier: group[this.calumaOptions.groupIdentifierProperty],
+          name: group[this.calumaOptions.groupNameProperty],
+          config: this.config.new.types[type],
+        }));
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }
+}

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

@@ -0,0 +1,41 @@
+<div class="uk-text-center uk-margin-small-top">
+  {{#if (can "create inquiry of distribution")}}
+    <LinkTo
+      @route="new"
+      class="uk-icon-button"
+      title={{t "caluma.distribution.new.title"}}
+    >
+      <UkIcon @icon="plus" />
+    </LinkTo>
+  {{/if}}
+  {{#if (can "send inquiries of distribution")}}
+    <button
+      type="button"
+      class="uk-icon-button"
+      title={{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")}}
+    <button
+      type="button"
+      class="uk-icon-button"
+      title={{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}}
+</div>

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

@@ -0,0 +1,95 @@
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { queryManager } from "ember-apollo-client";
+import { dropTask } from "ember-concurrency";
+import { confirm } from "ember-uikit";
+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 incompleteInquiriesQuery from "@projectcaluma/ember-distribution/gql/queries/incomplete-inquiries.graphql";
+
+export default class CdNavigationControlsComponent extends Component {
+  @service distribution;
+  @service intl;
+  @service notification;
+  @service router;
+
+  @queryManager apollo;
+  @config config;
+
+  @dropTask
+  *completeDistribution() {
+    try {
+      const incompleteInquiries = yield this.apollo.query(
+        {
+          query: incompleteInquiriesQuery,
+          variables: {
+            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,
+          })
+        ))
+      ) {
+        return;
+      }
+
+      const completeDistributionWorkItem =
+        this.distribution.controls.value.complete.edges?.[0]?.node.id;
+
+      yield this.apollo.mutate({
+        mutation: completeWorkItemMutation,
+        variables: {
+          workItem: completeDistributionWorkItem,
+        },
+      });
+
+      yield this.distribution.refetch();
+      this.router.transitionTo("index");
+    } catch (e) {
+      this.notification.danger(
+        this.intl.t("caluma.distribution.complete-error")
+      );
+    }
+  }
+
+  @dropTask
+  *sendInquiries() {
+    if (!(yield confirm(this.intl.t("caluma.distribution.send-confirm")))) {
+      return;
+    }
+
+    try {
+      const ids = this.distribution.controls.value.send.edges.map((edge) =>
+        decodeId(edge.node.id)
+      );
+
+      const mutations = ids.map(
+        (id, index) => `
+        sendInquiry${index}: resumeWorkItem(input: { id: "${id}" }) {
+          workItem {
+            id
+            status
+          }
+        }
+      `
+      );
+
+      const mutation = gql`mutation SendInquiries {${mutations.join("\n")}}`;
+
+      yield this.apollo.mutate({ mutation });
+    } catch (e) {
+      this.notification.danger(this.intl.t("caluma.distribution.send-error"));
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+<li class="uk-width-auto {{if this.isActive 'uk-active'}}">
+  <LinkTo @route="inquiry" @model={{this.model}}>
+    {{#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}} />
+  </LinkTo>
+</li>

package/addon/components/{distribution-navigation → cd-navigation}/item.js

@@ -1,7 +1,7 @@
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 
-export default class DistributionNavigationItemComponent extends Component {
+export default class CdNavigationItemComponent extends Component {
   @service router;
 
   get model() {
@@ -12,6 +12,6 @@ export default class DistributionNavigationItemComponent extends Component {
   }
 
   get isActive() {
-    return this.router.isActive("distribution.inquiry", this.model);
+    return this.router.isActive("inquiry", this.model);
   }
 }

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

@@ -0,0 +1,26 @@
+<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>
+    {{#if this.expanded}}
+      <UkIcon @icon="chevron-down" />
+    {{else}}
+      <UkIcon @icon="chevron-right" />
+    {{/if}}
+  </a>
+
+  {{#if this.expanded}}
+    {{#if @inquiries.length}}
+      <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}}
+      </ul>
+    {{/if}}
+
+    {{#if (eq @type "controlling")}}
+      <CdNavigation::Controls />
+    {{/if}}
+  {{/if}}
+</li>

package/addon/components/{distribution-navigation → cd-navigation}/section.js

@@ -2,7 +2,7 @@ import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
-export default class DistributionNavigationSectionComponent extends Component {
+export default class CdNavigationSectionComponent extends Component {
   @tracked expanded = true;
 
   @action

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

@@ -0,0 +1,13 @@
+{{#if this.showDeadlineIndicator}}
+  <UkIcon
+    @icon="clock"
+    class="uk-margin-small-right uk-text-{{this.deadline.color}}"
+    title={{format-date this.deadline.value}}
+  />
+{{/if}}
+
+<UkIcon
+  @icon={{this.status.icon}}
+  class="uk-text-{{this.status.color}}"
+  title={{this.status.label}}
+/>