@projectcaluma/ember-form 14.13.0 → 14.14.0

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,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "14.13.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.13.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.13.0",
-    "@projectcaluma/ember-workflow": "14.13.0"
+    "@projectcaluma/ember-testing": "14.14.0",
+    "@projectcaluma/ember-workflow": "14.14.0"
   },
   "peerDependencies": {
     "ember-source": ">= 4.0.0",
-    "@projectcaluma/ember-workflow": "^14.13.0"
+    "@projectcaluma/ember-workflow": "^14.14.0"
   },
   "dependenciesMeta": {
     "@projectcaluma/ember-core": {