@projectcaluma/ember-form 14.13.0 → 14.14.1

package/addon/components/cf-content.js

@@ -158,9 +158,9 @@ export default class CfContentComponent extends Component {
     const Document = owner.factoryFor("caluma-model:document").class;
     const Navigation = owner.factoryFor("caluma-model:navigation").class;
 
-    let answerDocument = null;
-    let historicalDocument = null;
-    let jexlContext = null;
+    let answerDocument;
+    let historicalDocument;
+    let jexlContext;
 
     if (!this.args.compare) {
       const data = await this.apollo.query({

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
@@ -80,6 +81,7 @@
               <UkButton
                 @color="link"
                 @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
@@ -100,6 +102,8 @@
           <UkButton
             @color="link"
             @onClick={{this.add.perform}}
+            @disabled={{this.add.isRunning}}
+            @loading={{this.add.isRunning}}
             title={{t "caluma.form.addRow"}}
             data-test-add-row
           >
@@ -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}}
       />
@@ -143,7 +147,7 @@
         <UkButton
           @label={{t "caluma.form.cancel"}}
           @onClick={{this.close.perform}}
-          @disabled={{this.close.isRunning}}
+          @disabled={{or this.close.isRunning this.add.isRunning}}
           @loading={{this.close.isRunning}}
           data-test-cancel
         />

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

@@ -74,22 +74,69 @@ 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 ?? [];
+      this.args.field.answer.value = [...rows, newDocument];
+      await this.args.field.save.perform();
+    } 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 +153,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 +169,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 +193,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/lib/field.js

@@ -467,6 +467,7 @@ export default class Field extends Base {
         } catch (error) {
           throw new Error(
             `Error while evaluating \`isHidden\` expression on Option\`${option.slug}\`: ${error.message}`,
+            { cause: error },
           );
         }
       })
@@ -646,6 +647,7 @@ export default class Field extends Base {
     } catch (error) {
       throw new Error(
         `Error while evaluating \`isHidden\` expression on field \`${this.pk}\`: ${error.message}`,
+        { cause: error },
       );
     }
   }
@@ -681,6 +683,7 @@ export default class Field extends Base {
     } catch (error) {
       throw new Error(
         `Error while evaluating \`isRequired\` expression on field \`${this.pk}\`: ${error.message}`,
+        { cause: error },
       );
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "14.13.0",
+  "version": "14.14.1",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -39,10 +39,10 @@
     "luxon": "^3.5.0",
     "reactiveweb": "^1.3.0",
     "tracked-toolbox": "^2.0.0",
-    "@projectcaluma/ember-core": "^14.13.0"
+    "@projectcaluma/ember-core": "^14.14.1"
   },
   "devDependencies": {
-    "@ember/optional-features": "2.3.0",
+    "@ember/optional-features": "3.0.0",
     "@ember/test-helpers": "4.0.4",
     "@embroider/test-setup": "4.0.0",
     "@faker-js/faker": "10.2.0",
@@ -59,7 +59,7 @@
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-load-initializers": "3.0.1",
-    "ember-qunit": "9.0.4",
+    "ember-qunit": "9.1.0",
     "ember-resolver": "13.1.1",
     "ember-sinon-qunit": "7.5.0",
     "ember-source": "6.1.0",
@@ -67,19 +67,19 @@
     "ember-try": "4.0.0",
     "loader.js": "4.7.0",
     "miragejs": "0.1.48",
-    "qunit": "2.25.0",
-    "qunit-dom": "3.5.0",
-    "sass": "1.97.3",
-    "sinon": "21.0.1",
+    "qunit": "2.26.0",
+    "qunit-dom": "3.6.0",
+    "sass": "1.102.0",
+    "sinon": "22.1.0",
     "uikit": "3.25.6",
-    "uuid": "13.0.0",
-    "webpack": "5.104.1",
-    "@projectcaluma/ember-testing": "14.13.0",
-    "@projectcaluma/ember-workflow": "14.13.0"
+    "uuid": "14.0.1",
+    "webpack": "5.109.2",
+    "@projectcaluma/ember-workflow": "14.14.1",
+    "@projectcaluma/ember-testing": "14.14.1"
   },
   "peerDependencies": {
     "ember-source": ">= 4.0.0",
-    "@projectcaluma/ember-workflow": "^14.13.0"
+    "@projectcaluma/ember-workflow": "^14.14.1"
   },
   "dependenciesMeta": {
     "@projectcaluma/ember-core": {