@projectcaluma/ember-distribution 11.0.0-beta.29 → 11.0.0-beta.31

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

@@ -11,11 +11,8 @@
         (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)
@@ -23,12 +20,23 @@
       )
     }}
       <div class="uk-alert uk-alert-warning uk-flex uk-flex-middle">
-        <UkIcon @icon="warning" class="uk-margin-small-right" />
+        <UkIcon @icon="warning" class="uk-margin-small-right uk-flex-none" />
         {{t "caluma.distribution.edit.send-not-allowed"}}
         {{t "caluma.distribution.not-allowed-hint"}}
       </div>
     {{/if}}
 
+    {{#if
+      (and (can "edit inquiry" this.inquiry) (eq this.inquiry.status "READY"))
+    }}
+      <div class="uk-alert uk-alert-warning uk-flex uk-flex-middle">
+        <UkIcon @icon="warning" class="uk-margin-small-right uk-flex-none" />
+        <p class="uk-margin-remove">
+          {{t "caluma.distribution.edit.edit-sent" htmlSafe=true}}
+        </p>
+      </div>
+    {{/if}}
+
     <content.form />
 
     {{#if

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

@@ -24,11 +24,11 @@ export default class CdInquiryEditFormComponent extends Component {
   }
 
   @dropTask
-  *fetchInquiry() {
+  *fetchInquiry(inquiry) {
     return yield this.apollo.watchQuery(
       {
         query: inquiryEditQuery,
-        variables: { inquiry: this.args.inquiry },
+        variables: { inquiry },
       },
       "allWorkItems.edges"
     );

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

@@ -0,0 +1,20 @@
+{{#if this.document.isLoading}}
+  <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
+{{else if this.document.value}}
+  <CfFormWrapper
+    @document={{this.document.value}}
+    @fieldset={{this.fieldset}}
+    @onSave={{this.saveField}}
+  />
+  <DocumentValidity @document={{this.document.value}} as |isValid validate|>
+    <UkButton
+      @color="primary"
+      @label={{t "caluma.distribution.new.create-draft"}}
+      @type="submit"
+      @loading={{this.submit.isRunning}}
+      @disabled={{or (not isValid) this.submit.isRunning}}
+      @onClick={{perform this.submit validate}}
+      data-test-submit
+    />
+  </DocumentValidity>
+{{/if}}

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

@@ -0,0 +1,116 @@
+import { getOwner } from "@ember/application";
+import { action } from "@ember/object";
+import { guidFor } from "@ember/object/internals";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { queryManager } from "ember-apollo-client";
+import { dropTask } from "ember-concurrency";
+import { trackedFunction } from "ember-resources/util/function";
+import { DateTime } from "luxon";
+
+import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
+import config from "@projectcaluma/ember-distribution/config";
+import inquiryFormQuery from "@projectcaluma/ember-distribution/gql/queries/inquiry-form.graphql";
+import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
+
+export default class CdInquiryNewFormBulkEditComponent extends Component {
+  @service router;
+  @service distribution;
+
+  @queryManager apollo;
+
+  @config config;
+
+  answers = {};
+
+  document = trackedFunction(this, async () => {
+    // Fetch the full form (like in cf-content) of the inquiry task
+    const response = await this.apollo.query({
+      query: inquiryFormQuery,
+      variables: {
+        inquiryTask: this.config.inquiry.task,
+      },
+    });
+    const form = response.allTasks.edges[0].node.form;
+    const answers = { edges: [] };
+
+    // If we configured a default deadline lead time, we need to calculate the
+    // deadline that should be displayed in the form per default and add it to
+    // the fake document data
+    if (this.config.new.defaultDeadlineLeadTime) {
+      const deadline = DateTime.now()
+        .plus({ days: this.config.new.defaultDeadlineLeadTime })
+        .toISODate();
+
+      answers.edges.push({
+        node: {
+          dateValue: deadline,
+          question: {
+            slug: this.config.inquiry.deadlineQuestion,
+          },
+          __typename: "DateAnswer",
+        },
+      });
+
+      this.answers[this.config.inquiry.deadlineQuestion] = deadline;
+    }
+
+    // Generate a parsed raw data object which can be used for creating a caluma
+    // form lib layer document which we need for displaying a form. This is
+    // normally done in the cf-content component which fetches the form (like we
+    // do above) and the document from the backend and then merges it together
+    // with this function. However, since we need a document without existence
+    // in the backend, we need to create this object ourselves.
+    const raw = parseDocument({
+      id: btoa(`Document:inquiry-document-${guidFor(this)}`),
+      __typename: "Document",
+      answers,
+      form,
+    });
+
+    const owner = getOwner(this);
+    const Document = owner.factoryFor("caluma-model:document").class;
+
+    return new Document({ raw, owner });
+  });
+
+  get fieldset() {
+    return this.document.value?.fieldsets[0];
+  }
+
+  @action
+  async saveField(field, value) {
+    field.answer.value = value;
+
+    await field.validate.perform();
+
+    this.answers[field.question.slug] = value;
+  }
+
+  @dropTask
+  *submit(validate, e) {
+    e.preventDefault();
+
+    if (!this.args.selectedGroups.length || !(yield validate())) return;
+
+    yield this.distribution.createInquiry.perform(this.args.selectedGroups, {
+      answers: this.answers,
+    });
+
+    const firstCreated = this.distribution.navigation.value.controlling.edges
+      .map((edge) => edge.node)
+      .find((node) =>
+        node.addressedGroups.includes(String(this.args.selectedGroups[0]))
+      );
+
+    // transition to inquiry addressed to the first selected group
+    this.router.transitionTo(
+      "inquiry.detail.index",
+      {
+        from: firstCreated.controllingGroups[0],
+        to: firstCreated.addressedGroups[0],
+      },
+      decodeId(firstCreated.id)
+    );
+  }
+}

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

@@ -0,0 +1,71 @@
+<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 @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}}

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

@@ -0,0 +1,76 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
+import Component from "@glimmer/component";
+import { timeout, restartableTask } from "ember-concurrency";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
+
+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 CdInquiryNewFormSelectComponent extends Component {
+  @service calumaOptions;
+
+  @config config;
+
+  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.args.onChangeSelectedGroups(
+      toggle(identifier, this.args.selectedGroups)
+    );
+  }
+
+  @restartableTask
+  *updateSearch(e) {
+    e.preventDefault();
+
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      yield timeout(500);
+    }
+
+    this.args.onChangeSearch(e.target.value);
+  }
+
+  @restartableTask
+  *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-inquiry-new-form.hbs

@@ -1,6 +1,4 @@
-{{#if this.controls.workItems.isRunning}}
-  <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
-{{else if (can "create inquiry of distribution")}}
+{{#if (can "create inquiry of distribution")}}
   <p class="uk-text-large">{{t "caluma.distribution.new.title"}}</p>
 
   <hr />
@@ -30,95 +28,40 @@
         }}
       </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
-        />
+        {{#if this.edit}}
+          <UkButton
+            @label={{t "caluma.distribution.new.back"}}
+            @onClick={{fn (mut this.edit) false}}
+          />
+        {{else}}
+          <UkButton
+            @label={{t "caluma.distribution.new.reset"}}
+            @onClick={{this.clearSelectedGroups}}
+            data-test-reset
+          />
+          <UkButton
+            @color="primary"
+            @label={{t "caluma.distribution.new.continue"}}
+            @onClick={{fn (mut this.edit) true}}
+            data-test-continue
+          />
+        {{/if}}
       </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>
+  {{#if this.edit}}
+    <CdInquiryNewForm::BulkEdit @selectedGroups={{this.selectedGroups}} />
   {{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>
+    <CdInquiryNewForm::Select
+      @search={{@search}}
+      @selectedGroups={{this.selectedGroups}}
+      @selectedTypes={{@selectedTypes}}
+      @onChangeSearch={{@onChangeSearch}}
+      @onChangeSelectedGroups={{fn (mut this.selectedGroups)}}
+      @onChangeSelectedTypes={{@onChangeSelectedTypes}}
+    />
   {{/if}}
 {{else}}
   <CdNotfound />

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

@@ -1,114 +1,15 @@
 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 edit = false;
   @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));
-  }
 }