@projectcaluma/ember-form 14.12.0 → 14.14.0

package/addon/components/cf-content.js

@@ -160,18 +160,17 @@ export default class CfContentComponent extends Component {
 
     let answerDocument = null;
     let historicalDocument = null;
+    let jexlContext = null;
 
     if (!this.args.compare) {
-      [answerDocument] = (
-        await this.apollo.query(
-          {
-            query: getDocumentAnswersQuery,
-            fetchPolicy: "network-only",
-            variables: { id: this.args.documentId },
-          },
-          "allDocuments.edges",
-        )
-      ).map(({ node }) => node);
+      const data = await this.apollo.query({
+        query: getDocumentAnswersQuery,
+        fetchPolicy: "network-only",
+        variables: { id: this.args.documentId },
+      });
+
+      answerDocument = data.allDocuments.edges[0].node;
+      jexlContext = data.jexlContext;
     } else {
       const { from, to } = this.args.compare;
 
@@ -186,6 +185,7 @@ export default class CfContentComponent extends Component {
       });
       historicalDocument = data.fromRevision;
       answerDocument = data.toRevision;
+      jexlContext = data.jexlContext;
     }
 
     const [form] = (
@@ -199,14 +199,14 @@ export default class CfContentComponent extends Component {
       )
     ).map(({ node }) => node);
 
-    const raw = parseDocument({ ...answerDocument, form });
+    const raw = parseDocument({ ...answerDocument, form, jexlContext });
 
     const document = new Document({
       raw,
       owner,
       dataSourceContext: this.args.context,
       historicalDocument: historicalDocument
-        ? parseDocument({ ...historicalDocument, form })
+        ? parseDocument({ ...historicalDocument, form, jexlContext })
         : null,
       compare: this.args.compare,
     });

package/addon/components/cf-field/input/powerselect.hbs

@@ -1,4 +1,5 @@
 <this.selectComponent
+  @multiple={{this.multiple}}
   @options={{@field.options}}
   @selected={{this.selected}}
   @disabled={{@disabled}}

package/addon/components/cf-field/input/powerselect.js

@@ -3,7 +3,6 @@ import { inject as service } from "@ember/service";
 import { ensureSafeComponent } from "@embroider/util";
 import Component from "@glimmer/component";
 import PowerSelectComponent from "ember-power-select/components/power-select";
-import PowerSelectMultipleComponent from "ember-power-select/components/power-select-multiple";
 
 import getConfig from "@projectcaluma/ember-core/utils/get-config";
 
@@ -33,10 +32,7 @@ export default class CfFieldInputPowerselectComponent extends Component {
   }
 
   get selectComponent() {
-    return ensureSafeComponent(
-      this.multiple ? PowerSelectMultipleComponent : PowerSelectComponent,
-      this,
-    );
+    return ensureSafeComponent(PowerSelectComponent, this);
   }
 
   get searchEnabled() {

package/addon/components/cf-field/input/table.hbs

@@ -70,6 +70,7 @@
               <UkButton
                 @color="link"
                 @onClick={{fn this.edit document}}
+                @disabled={{or this.add.isRunning this.delete.isRunning}}
                 title={{t "caluma.form.edit"}}
                 class="uk-flex-inline uk-margin-small-left table-controls"
                 data-test-edit-row
@@ -79,7 +80,8 @@
               </UkButton>
               <UkButton
                 @color="link"
-                @onClick={{fn (perform this.delete) document}}
+                @onClick={{fn this.delete.perform document}}
+                @disabled={{or this.add.isRunning this.delete.isRunning}}
                 title={{t "caluma.form.delete"}}
                 class="uk-flex-inline uk-margin-small-left table-controls"
                 data-test-delete-row
@@ -99,7 +101,9 @@
         <td colspan={{add this.columns.length 1}} class="uk-text-center">
           <UkButton
             @color="link"
-            @onClick={{perform this.add}}
+            @onClick={{this.add.perform}}
+            @disabled={{this.add.isRunning}}
+            @loading={{this.add.isRunning}}
             title={{t "caluma.form.addRow"}}
             data-test-add-row
           >
@@ -115,7 +119,7 @@
 {{#if this.documentToEdit}}
   <UkModal
     @visible={{this.showAddModal}}
-    @onHide={{perform this.close}}
+    @onHide={{this.close.perform}}
     @bgClose={{false}}
     as |modal|
   >
@@ -123,7 +127,7 @@
       <CfFormWrapper
         @document={{this.documentToEdit}}
         @fieldset={{object-at 0 this.documentToEdit.fieldsets}}
-        @disabled={{@disabled}}
+        @disabled={{or @disabled this.add.isRunning}}
         @context={{@context}}
         @compare={{@compare}}
       />
@@ -134,7 +138,7 @@
         <UkButton
           @label={{t "caluma.form.close"}}
           @color="primary"
-          @onClick={{perform this.close}}
+          @onClick={{this.close.perform}}
           @disabled={{this.close.isRunning}}
           @loading={{this.close.isRunning}}
           data-test-close
@@ -142,8 +146,8 @@
       {{else}}
         <UkButton
           @label={{t "caluma.form.cancel"}}
-          @onClick={{perform this.close}}
-          @disabled={{this.close.isRunning}}
+          @onClick={{this.close.perform}}
+          @disabled={{or this.close.isRunning this.add.isRunning}}
           @loading={{this.close.isRunning}}
           data-test-cancel
         />
@@ -158,7 +162,7 @@
             @type="submit"
             @disabled={{or this.save.isRunning (not isValid)}}
             @loading={{this.save.isRunning}}
-            @onClick={{fn (perform this.save) validate}}
+            @onClick={{fn this.save.perform validate}}
             data-test-save
           />
         </DocumentValidity>

package/addon/components/cf-field/input/table.js

@@ -74,22 +74,68 @@ export default class CfFieldInputTableComponent extends Component {
       owner,
     });
 
+    // Open the modal immediately - attaching the row to the table (below) is
+    // debounced and would otherwise noticeably delay opening the modal. While
+    // this task runs, the row's fields and the cancel button are disabled in
+    // the modal, so no answer can be saved to (and validated by) the backend
+    // and the row cannot be removed again before it is attached to the table.
     this.documentToEditIsNew = true;
     this.documentToEdit = newDocument;
     this.showAddModal = true;
-  });
 
-  delete = task({ drop: true }, async (document) => {
-    if (!(await confirm(this.intl.t("caluma.form.deleteRow")))) {
-      return;
+    // Attach the row document to the table answer, so the backend has the
+    // full context to validate and evaluate the row's fields while editing.
+    // `documentToEditIsNew` marks the row as preliminary, so it will be
+    // removed again if the edit dialog is cancelled.
+    try {
+      const rows = this.args.field.answer.value ?? [];
+      await this.args.onSave([...rows, newDocument]);
+    } catch {
+      this.notification.danger(
+        this.intl.t("caluma.form.notification.table.add.error"),
+      );
+
+      // Attaching failed - remove the preliminary row and close the modal.
+      // `close` cannot be performed here, as it waits for this task to finish.
+      await this.deleteRow(this.documentToEdit);
+      this.documentToEditIsNew = false;
+      this.showAddModal = false;
+      this.documentToEdit = null;
     }
+  });
 
-    const remainingDocuments = this.args.field.answer.value.filter(
+  /**
+   * Delete row without asking. Remove from the table, then remove row document
+   *
+   * @async
+   * @method deleteRow
+   * @param {Document} document The row document to delete
+   * @return {Promise<Void>}
+   */
+  async deleteRow(document) {
+    const remainingDocuments = (this.args.field.answer.value ?? []).filter(
       (doc) => doc.pk !== document.pk,
     );
 
+    // remove row from table
     await this.args.onSave(remainingDocuments);
-    await this.removeOrphan(document);
+
+    // delete row document
+    await this.apollo.mutate({
+      mutation: removeDocumentMutation,
+      variables: { input: { document: document.uuid } },
+    });
+
+    // Remove orphaned document from Caluma store.
+    this.calumaStore.delete(document.pk);
+  }
+
+  delete = task({ drop: true }, async (document) => {
+    if (!(await confirm(this.intl.t("caluma.form.deleteRow")))) {
+      return;
+    }
+
+    await this.deleteRow(document);
   });
 
   save = task({ drop: true }, async (validate) => {
@@ -106,19 +152,13 @@ export default class CfFieldInputTableComponent extends Component {
         return;
       }
 
-      const rows = this.args.field.answer.value ?? [];
-
-      if (!rows.find((doc) => doc.pk === newDocument.pk)) {
-        // add document to table
-        await this.args.onSave([...rows, newDocument]);
-
+      if (this.documentToEditIsNew) {
         this.notification.success(
           this.intl.t("caluma.form.notification.table.add.success"),
         );
+        this.documentToEditIsNew = false;
       }
 
-      this.documentToEditIsNew = false;
-
       await this.close.perform();
     } catch {
       this.notification.danger(
@@ -128,10 +168,20 @@ export default class CfFieldInputTableComponent extends Component {
   });
 
   close = task({ drop: true }, async () => {
-    if (this.documentToEditIsNew) {
-      await this.removeOrphan(this.documentToEdit);
+    // Wait for a pending "add" to finish attaching the new row to the table
+    // before closing - otherwise removing or validating the row would race
+    // with the debounced save of the table answer.
+    if (this.add.isRunning) {
+      await this.add.last;
+    }
 
+    if (this.documentToEditIsNew) {
+      await this.deleteRow(this.documentToEdit);
       this.documentToEditIsNew = false;
+      this.showAddModal = false;
+      this.documentToEdit = null;
+      // No validation for new documents that are deleted
+      return;
     }
 
     if (!this.args.disabled) {
@@ -142,17 +192,6 @@ export default class CfFieldInputTableComponent extends Component {
     this.documentToEdit = null;
   });
 
-  async removeOrphan(calumaDocument) {
-    // Remove orphaned document from database.
-    await this.apollo.mutate({
-      mutation: removeDocumentMutation,
-      variables: { input: { document: calumaDocument.uuid } },
-    });
-
-    // Remove orphaned document from Caluma store.
-    this.calumaStore.delete(calumaDocument.pk);
-  }
-
   @action
   edit(document) {
     this.documentToEdit = document;

package/addon/components/cf-field/input-compare.hbs

@@ -4,7 +4,7 @@
     field=@field
     disabled=true
     context=@context
-    onSave=(perform this.save)
+    onSave=this.save.perform
   )
   as |FieldComponent|
 }}

package/addon/components/cf-field.hbs

@@ -34,7 +34,7 @@
               @field={{@field}}
               @disabled={{or @disabled @field.refreshAnswer.isRunning}}
               @context={{@context}}
-              @onSave={{perform this.save}}
+              @onSave={{this.save.perform}}
             />
           {{/let}}
         {{/if}}

package/addon/gql/queries/document-answers-compare.graphql

@@ -108,6 +108,8 @@ query (
   $to: DateTime!
   $context: JSONString
 ) {
+  jexlContext: documentGlobalJexlContext(id: $documentId)
+
   fromRevision: documentAsOf(id: $documentId, asOf: $from) {
     ...RevisionDocument
     answers: historicalAnswers(asOf: $from, excludeDeleted: true) {

package/addon/gql/queries/document-answers.graphql

@@ -1,31 +1,46 @@
 #import * from '../fragments/field.graphql'
-#import * from '../fragments/case-form-and-workflow.graphql'
 
 query DocumentAnswers($id: ID!) {
+  # Global JEXL context (case & work item) for JEXL evaluations. This will be
+  # enriched with the document depending data in `lib/document.js` and
+  # `lib/field.js` before being passed into the JEXL evaluation
+  jexlContext: documentGlobalJexlContext(id: $id)
+
   allDocuments(filter: [{ id: $id }]) {
     edges {
       node {
         id
+
+        # Basic form information
         form {
           id
           slug
         }
+
+        # All answers of the document, up to three levels deep (top form -> sub
+        # form -> table form)
+        answers {
+          edges {
+            node {
+              ...FieldAnswer
+            }
+          }
+        }
+
+        # Work item and case work items to determine the actionable work item
+        # for action buttons. This is either the direct work item below or a
+        # case work item of the type complete workflow form.
+        # See `workItemUuid` in `lib/document.js`
         workItem {
           id
-          meta
-          task {
-            slug
-          }
-          case {
-            ...CaseFormAndWorkflow
-          }
         }
         case {
-          ...CaseFormAndWorkflow
           workItems {
             edges {
               node {
                 id
+                # `__typename` is what identifies the complete workflow form
+                # work item, the `task` selection is only there to request it
                 task {
                   id
                 }
@@ -33,13 +48,6 @@ query DocumentAnswers($id: ID!) {
             }
           }
         }
-        answers {
-          edges {
-            node {
-              ...FieldAnswer
-            }
-          }
-        }
       }
     }
   }

package/addon/lib/document.js

@@ -232,38 +232,30 @@ export default class Document extends Base {
    * @property {Object} jexlContext
    */
   get jexlContext() {
-    const workItem = this.raw.workItem;
-    const _case = workItem?.case ?? this.raw.case;
+    const globalContext = this.raw.jexlContext ?? {
+      info: {
+        // Expressions rely on these being `null` rather than absent when the
+        // document is not attached to a case or work item.
+        case: null,
+        workItem: null,
+      },
+    };
 
     return (
       this.parentDocument?.jexlContext ?? {
+        ...globalContext,
         // JEXL interprets null in an expression as variable instead of a
         // primitive. This resolves that issue.
         null: null,
+        // The information about the root form needs to be constructed on the
+        // first document as it doesn't depend on the field.
         form: this.rootForm.slug,
         info: {
+          ...globalContext.info,
           root: {
             form: this.rootForm.slug,
             formMeta: this.rootForm.raw.meta,
           },
-          case: _case
-            ? {
-                form: _case.document?.form.slug,
-                workflow: _case.workflow.slug,
-                meta: _case.meta,
-                root: {
-                  form: _case.family.document?.form.slug,
-                  workflow: _case.family.workflow.slug,
-                  meta: _case.family.meta,
-                },
-              }
-            : null,
-          workItem: workItem
-            ? {
-                task: workItem.task.slug,
-                meta: workItem.meta,
-              }
-            : null,
         },
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "14.12.0",
+  "version": "14.14.0",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -39,7 +39,7 @@
     "luxon": "^3.5.0",
     "reactiveweb": "^1.3.0",
     "tracked-toolbox": "^2.0.0",
-    "@projectcaluma/ember-core": "^14.12.0"
+    "@projectcaluma/ember-core": "^14.14.0"
   },
   "devDependencies": {
     "@ember/optional-features": "2.3.0",
@@ -74,12 +74,12 @@
     "uikit": "3.25.6",
     "uuid": "13.0.0",
     "webpack": "5.104.1",
-    "@projectcaluma/ember-testing": "14.12.0",
-    "@projectcaluma/ember-workflow": "14.12.0"
+    "@projectcaluma/ember-testing": "14.14.0",
+    "@projectcaluma/ember-workflow": "14.14.0"
   },
   "peerDependencies": {
     "ember-source": ">= 4.0.0",
-    "@projectcaluma/ember-workflow": "^14.12.0"
+    "@projectcaluma/ember-workflow": "^14.14.0"
   },
   "dependenciesMeta": {
     "@projectcaluma/ember-core": {

package/addon/gql/fragments/case-form-and-workflow.graphql

@@ -1,30 +0,0 @@
-fragment CaseFormAndWorkflow on Case {
-  id
-  meta
-  workflow {
-    id
-    slug
-  }
-  document {
-    id
-    form {
-      id
-      slug
-    }
-  }
-  family {
-    id
-    meta
-    workflow {
-      id
-      slug
-    }
-    document {
-      id
-      form {
-        id
-        slug
-      }
-    }
-  }
-}