@projectcaluma/ember-form 14.8.1 → 14.8.3

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

@@ -118,6 +118,7 @@
         />
         <DocumentValidity
           @document={{this.documentToEdit}}
+          @skipBackendValidation={{true}}
           as |isValid validate|
         >
           <UkButton

package/addon/components/document-validity.js

@@ -1,4 +1,5 @@
 import { action } from "@ember/object";
+import { service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { task } from "ember-concurrency";
@@ -25,6 +26,8 @@ import documentValidityQuery from "@projectcaluma/ember-form/gql/queries/documen
 export default class DocumentValidity extends Component {
   @queryManager apollo;
 
+  @service calumaStore;
+
   /**
    * The document to be validated
    *
@@ -67,31 +70,7 @@ export default class DocumentValidity extends Component {
         ),
       );
 
-      const { isValid, errors } = await this.apollo.query(
-        {
-          query: documentValidityQuery,
-          fetchPolicy: "network-only",
-          variables: { id: this.args.document.uuid },
-        },
-        "documentValidity.edges.0.node",
-      );
-
-      if (!isValid) {
-        errors
-          .filter(({ errorCode }) => errorCode === "format_validation_failed")
-          .forEach(({ slug, errorMsg }) => {
-            const field = this.args.document.findField(slug);
-
-            field._errors = [
-              ...field._errors,
-              {
-                type: "format",
-                context: { errorMsg },
-                value: field.value,
-              },
-            ];
-          });
-      }
+      await this.#runBackendValidation();
 
       if (this.isValid) {
         this.args.onValid?.();
@@ -105,6 +84,39 @@ export default class DocumentValidity extends Component {
     }
   });
 
+  async #runBackendValidation() {
+    if (this.args.skipBackendValidation) return;
+
+    const { isValid, errors } = await this.apollo.query(
+      {
+        query: documentValidityQuery,
+        fetchPolicy: "network-only",
+        variables: { id: this.args.document.uuid },
+      },
+      "documentValidity.edges.0.node",
+    );
+
+    if (!isValid) {
+      errors
+        .filter(({ errorCode }) => errorCode === "format_validation_failed")
+        .forEach(({ slug, errorMsg, documentId }) => {
+          const pk = `Document:${documentId}:Question:${slug}`;
+          const field = this.calumaStore.findByPk(pk);
+          const parentField = field.document.parentField;
+
+          // Add the error manually as the frontend does not validate format
+          // validators - only the backend.
+          field.addManualError("format", { errorMsg }, field.value);
+
+          if (parentField) {
+            // If the affected field is in a table row, we need to mark the
+            // table answer as invalid as well.
+            parentField.addManualError("table", {}, null);
+          }
+        });
+    }
+  }
+
   @action
   validate() {
     return this._validate.perform();

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

@@ -8,6 +8,7 @@ query DocumentValidity($id: ID!, $dataSourceContext: JSONString) {
           slug
           errorMsg
           errorCode
+          documentId
         }
       }
     }

package/addon/lib/answer.js

@@ -136,6 +136,7 @@ export default class Answer extends Base {
           new Document({
             raw: parseDocument(document),
             parentDocument: this.field.document,
+            parentField: this.field,
             owner,
           })
         );

package/addon/lib/document.js

@@ -22,7 +22,13 @@ const sum = (nums) => nums.reduce((num, base) => base + num, 0);
  * @class Document
  */
 export default class Document extends Base {
-  constructor({ raw, parentDocument, dataSourceContext, ...args }) {
+  constructor({
+    raw,
+    parentDocument,
+    parentField,
+    dataSourceContext,
+    ...args
+  }) {
     assert(
       "A graphql document `raw` must be passed",
       raw?.__typename === "Document",
@@ -31,6 +37,7 @@ export default class Document extends Base {
     super({ raw, ...args });
 
     this.parentDocument = parentDocument;
+    this.parentField = parentField;
     this.dataSourceContext =
       dataSourceContext ?? parentDocument?.dataSourceContext;
 
@@ -75,6 +82,14 @@ export default class Document extends Base {
    */
   parentDocument = null;
 
+  /**
+   * The parent field of this document. If this is set, the document is most
+   * likely a table row.
+   *
+   * @property {Field} parentField
+   */
+  parentField = null;
+
   /**
    * The root form of this document
    *

package/addon/lib/field.js

@@ -665,14 +665,11 @@ export default class Field extends Base {
       await this.onSaveError(e);
 
       if (validationError) {
-        this._errors = [
-          ...this._errors,
-          {
-            type: "format",
-            context: { errorMsg: validationError.message },
-            value,
-          },
-        ];
+        this.addManualError(
+          "format",
+          { errorMsg: validationError.message },
+          value,
+        );
       } else {
         throw e;
       }
@@ -704,6 +701,18 @@ export default class Field extends Base {
   // eslint-disable-next-line no-unused-vars
   async onSaveError(error) {}
 
+  /**
+   * Add manual validation error message
+   *
+   * @method addManualError
+   * @param {String} type The error type (e.g. "table" or "format")
+   * @param {Object} context The error context object - mostly consists of `errorMsg`
+   * @param {*} value The invalid value
+   */
+  addManualError(type, context = null, value = null) {
+    this._errors = [...this._errors, { type, context, value }];
+  }
+
   /**
    * The translated error messages
    *

package/addon/services/caluma-store.js

@@ -37,6 +37,10 @@ export default class CalumaStoreService extends Service {
     return this._store.get(storeKey) || null;
   }
 
+  findByPk(pk) {
+    return this._store.values().find((item) => item.pk === pk);
+  }
+
   delete(storeKey) {
     this._store.delete(storeKey);
   }

package/package.json

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