feat(distribution): enable configurable inquiry answer details

Display configurable inquiry details on the answer form in a side-bar and include the assigned user on the inquiry answer dialog.
projectcaluma · Oct 21, 2022 · 10619bf · 10619bf
1 parent e86d429
commit 10619bf
Show file tree

Hide file tree

Showing 18 changed files with 342 additions and 202 deletions.
diff --git a/packages/distribution/addon/components/cd-document-header.hbs b/packages/distribution/addon/components/cd-document-header.hbs
@@ -9,15 +9,4 @@
     {{/if}}
   </div>
   {{yield}}
-</p>
-
-{{#if (and @modifiedBy @modifiedAt)}}
-  <p class="uk-text-meta uk-margin-remove-bottom uk-margin-small-top">
-    {{t
-      "caluma.distribution.last-modified"
-      user=(user-name @modifiedBy)
-      date=(format-date @modifiedAt)
-      time=(format-time @modifiedAt hour="2-digit" minute="2-digit")
-    }}
-  </p>
-{{/if}}
+</p>
diff --git a/packages/distribution/addon/components/cd-inquiry-answer-form.hbs b/packages/distribution/addon/components/cd-inquiry-answer-form.hbs
@@ -5,92 +5,157 @@
 >
   <:default as |content|>
 
-    <CdDocumentHeader
-      @name={{content.document.rootForm.raw.name}}
-      @status={{if (eq this.inquiry.status "READY") this.answerStatus}}
-      @modifiedAt={{this.inquiry.childCase.document.modifiedContentAt}}
-      @modifiedBy={{this.inquiry.childCase.document.modifiedContentByUser}}
-    >
-      <CdInquiryDialog::InquiryDeadline @inquiry={{this.inquiry}} />
-    </CdDocumentHeader>
+    <div uk-grid class="uk-grid uk-grid-small uk-grid-divider">
+      <div class="uk-width-expand">
+        <CdDocumentHeader
+          @name={{content.document.rootForm.raw.name}}
+          @status={{if (eq this.inquiry.status "READY") this.answerStatus}}
+        >
+          <div class="uk-flex uk-flex-middle">
+            <CdInquiryDialog::InquiryDeadline @inquiry={{this.inquiry}} />
 
-    <hr />
+            {{#if this.inquiryDetails.length}}
+              <a
+                href=""
+                class="uk-margin-small-left uk-link-reset"
+                {{uk-tooltip
+                  (if
+                    this.isExpanded
+                    (t "caluma.distribution.answer.details.hide")
+                    (t "caluma.distribution.answer.details.show")
+                  )
+                }}
+                {{on "click" this.toggle}}
+              >
+                <UkIcon
+                  @icon={{if
+                    this.isExpanded
+                    "chevron-double-right"
+                    "chevron-double-left"
+                  }}
+                />
+              </a>
+            {{/if}}
+          </div>
 
-    <div class="uk-margin uk-text-italic inquiry-answer-form__request">
-      <CdInquiryDialog::InquiryPart
-        @inquiry={{this.inquiry}}
-        @type="request"
-        @disabled={{true}}
-      />
-    </div>
+        </CdDocumentHeader>
 
-    {{#if
-      (and
-        (not this.buttons.length)
-        (can "edit answer form of inquiry" this.inquiry)
-      )
-    }}
-      <div class="uk-alert uk-alert-warning uk-flex uk-flex-middle">
-        <UkIcon @icon="warning" class="uk-margin-small-right uk-flex-none" />
-        {{t "caluma.distribution.answer.complete-not-allowed"}}
-        {{t "caluma.distribution.not-allowed-hint"}}
-      </div>
-    {{/if}}
+        <hr />
+
+        <div class="uk-margin uk-text-italic inquiry-answer-form__request">
+          <CdInquiryDialog::InquiryPart
+            @inquiry={{this.inquiry}}
+            @type="request"
+            @disabled={{true}}
+          />
+        </div>
 
-    <content.form />
+        {{#if
+          (and
+            (not this.buttons.length)
+            (can "edit answer form of inquiry" this.inquiry)
+          )
+        }}
+          <div class="uk-alert uk-alert-warning uk-flex uk-flex-middle">
+            <UkIcon
+              @icon="warning"
+              class="uk-margin-small-right uk-flex-none"
+            />
+            {{t "caluma.distribution.answer.complete-not-allowed"}}
+            {{t "caluma.distribution.not-allowed-hint"}}
+          </div>
+        {{/if}}
 
-    {{#each this.buttons as |buttonConfig|}}
-      {{#if buttonConfig.isFormButton}}
-        <DocumentValidity @document={{content.document}} as |isValid validate|>
-          <UkButton
-            @type="submit"
-            @color={{buttonConfig.color}}
-            @disabled={{or
-              (not isValid)
-              (and
+        <content.form />
+
+        {{#each this.buttons as |buttonConfig|}}
+          {{#if buttonConfig.isFormButton}}
+            <DocumentValidity
+              @document={{content.document}}
+              as |isValid validate|
+            >
+              <UkButton
+                @type="submit"
+                @color={{buttonConfig.color}}
+                @disabled={{or
+                  (not isValid)
+                  (and
+                    this.completeWorkItem.isRunning
+                    (includes
+                      buttonConfig.workItemId
+                      this.completeWorkItem.lastRunning.args
+                    )
+                  )
+                }}
+                @loading={{and
+                  this.completeWorkItem.isRunning
+                  (includes
+                    buttonConfig.workItemId
+                    this.completeWorkItem.lastRunning.args
+                  )
+                }}
+                @onClick={{fn
+                  (perform this.completeWorkItem)
+                  buttonConfig.workItemId
+                  validate
+                }}
+              >{{buttonConfig.label}}</UkButton>
+            </DocumentValidity>
+          {{else}}
+            <UkButton
+              @type="button"
+              @color={{buttonConfig.color}}
+              @disabled={{and
+                this.completeWorkItem.isRunning
+                (includes
+                  buttonConfig.workItemId this.completeWorkItem.lastRunning.args
+                )
+              }}
+              @loading={{and
                 this.completeWorkItem.isRunning
                 (includes
                   buttonConfig.workItemId this.completeWorkItem.lastRunning.args
                 )
-              )
-            }}
-            @loading={{and
-              this.completeWorkItem.isRunning
-              (includes
-                buttonConfig.workItemId this.completeWorkItem.lastRunning.args
-              )
-            }}
-            @onClick={{fn
-              (perform this.completeWorkItem)
-              buttonConfig.workItemId
-              validate
-            }}
-          >{{buttonConfig.label}}</UkButton>
-        </DocumentValidity>
-      {{else}}
-        <UkButton
-          @type="button"
-          @color={{buttonConfig.color}}
-          @disabled={{and
-            this.completeWorkItem.isRunning
-            (includes
-              buttonConfig.workItemId this.completeWorkItem.lastRunning.args
-            )
-          }}
-          @loading={{and
-            this.completeWorkItem.isRunning
-            (includes
-              buttonConfig.workItemId this.completeWorkItem.lastRunning.args
-            )
-          }}
-          @onClick={{fn
-            (perform this.completeWorkItem)
-            buttonConfig.workItemId
-            null
-          }}
-        >{{buttonConfig.label}}</UkButton>
+              }}
+              @onClick={{fn
+                (perform this.completeWorkItem)
+                buttonConfig.workItemId
+                null
+              }}
+            >{{buttonConfig.label}}</UkButton>
+          {{/if}}
+        {{/each}}
+      </div>
+
+      {{#if (and this.isExpanded this.inquiryDetails.length)}}
+        <div class="inquiry-answer-form__side-bar">
+          <dl
+            class="uk-description-list uk-text-break
+              {{unless
+                this.config.ui.small
+                'uk-margin-small-left uk-margin-small-right'
+              }}"
+          >
+            {{#each this.inquiryDetails as |data|}}
+              <dt>{{t data.label}}</dt>
+              <dd>
+                {{#if (not data.value)}}
+                  -
+                {{else if (eq data.type "date")}}
+                  {{format-date data.value}}
+                  {{format-time data.value hour="2-digit" minute="2-digit"}}
+                {{else if (eq data.type "user")}}
+                  {{user-name data.value}}
+                {{else}}
+                  {{data.value}}
+                {{/if}}
+              </dd>
+            {{/each}}
+          </dl>
+        </div>
       {{/if}}
-    {{/each}}
+
+    </div>
   </:default>
   <:notfound><CdNotfound /></:notfound>
 </CfContent>
diff --git a/packages/distribution/addon/components/cd-inquiry-answer-form.js b/packages/distribution/addon/components/cd-inquiry-answer-form.js
@@ -1,5 +1,7 @@
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { queryManager, getObservable } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
 import { trackedTask } from "ember-resources/util/ember-concurrency";
@@ -22,6 +24,7 @@ export default class CdInquiryAnswerFormComponent extends Component {
   @queryManager apollo;
 
   @inquiryAnswerStatus({ inquiryProperty: "inquiry" }) answerStatus;
+  @tracked isExpanded = !this.config.ui.small;
 
   _inquiry = trackedTask(this, this.fetchInquiryAnswer, () => [
     this.args.inquiry,
@@ -31,8 +34,13 @@ export default class CdInquiryAnswerFormComponent extends Component {
     return this._inquiry.value?.[0]?.node;
   }
 
+  get inquiryDetails() {
+    return this.config.inquiry.answer.details?.(this.inquiry);
+  }
+
   get buttons() {
     return this.inquiry?.childCase.workItems.edges
+      .filter((edge) => edge.node.status === "READY")
       .map((edge) => {
         const config = this.config.inquiry.answer.buttons[edge.node.task.slug];
 
@@ -53,6 +61,12 @@ export default class CdInquiryAnswerFormComponent extends Component {
       .filter(Boolean);
   }
 
+  @action
+  toggle(e) {
+    e.preventDefault();
+    this.isExpanded = !this.isExpanded;
+  }
+
   @dropTask
   *fetchInquiryAnswer(inquiry) {
     return yield this.apollo.watchQuery(

diff --git a/packages/distribution/addon/components/cd-inquiry-dialog/inquiry-deadline.hbs b/packages/distribution/addon/components/cd-inquiry-dialog/inquiry-deadline.hbs
@@ -1,6 +1,7 @@
 {{#if this.deadline.value}}
   <div
     class="uk-flex-inline uk-flex-middle uk-text-{{this.deadline.color}}"
+    {{uk-tooltip (t "caluma.distribution.inquiry.deadline")}}
     data-test-deadline
     ...attributes
   >