@projectcaluma/ember-form 11.0.0-beta.4 → 11.0.0-beta.5

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [@projectcaluma/ember-form-v11.0.0-beta.5](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.4...@projectcaluma/ember-form-v11.0.0-beta.5) (2022-02-01)
+
+
+### Bug Fixes
+
+* **document-validity:** wait to validate until the UI has finished saving values ([9ec5330](https://github.com/projectcaluma/ember-caluma/commit/9ec5330905046604f95ab42985a29a5e0dc369a4))
+* **form:** use component save task instead of field for loading indicator ([6de510d](https://github.com/projectcaluma/ember-caluma/commit/6de510d19a3608b7cd40092908d562a152ef03bd))
+
 # [@projectcaluma/ember-form-v11.0.0-beta.4](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.3...@projectcaluma/ember-form-v11.0.0-beta.4) (2022-02-01)
 
 

package/addon/components/cf-field.hbs

@@ -1,5 +1,9 @@
 {{#if this.visible}}
-  <div class="uk-margin">
+  <div
+    class="uk-margin"
+    {{did-insert this.registerComponent}}
+    {{will-destroy this.unregisterComponent}}
+  >
     {{#if this.labelVisible}}
       <CfField::label @field={{@field}} />
     {{/if}}
@@ -24,11 +28,11 @@
         <div
           class="cf-field__icon uk-padding-remove-vertical uk-flex uk-flex-middle uk-flex-center"
         >
-          {{#if @field.save.isRunning}}
+          {{#if this.save.isRunning}}
             <UkSpinner class="uk-animation-fade" />
-          {{else if (or @field.save.last.isError @field.isInvalid)}}
+          {{else if (or this.save.last.isError @field.isInvalid)}}
             <UkIcon @icon="warning" class="uk-animation-fade uk-text-danger" />
-          {{else if @field.save.last.isSuccessful}}
+          {{else if this.save.last.isSuccessful}}
             <UkIcon @icon="check" class="uk-animation-fade uk-text-success" />
           {{/if}}
         </div>

package/addon/components/cf-field.js

@@ -1,5 +1,5 @@
 import { getOwner } from "@ember/application";
-import { set } from "@ember/object";
+import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { timeout, restartableTask } from "ember-concurrency";
 
@@ -18,6 +18,16 @@ import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-
  * @argument {Field} field The field data model to render
  */
 export default class CfFieldComponent extends Component {
+  @action
+  registerComponent() {
+    this.args.field._components.add(this);
+  }
+
+  @action
+  unregisterComponent() {
+    this.args.field._components.delete(this);
+  }
+
   get visible() {
     return (
       !this.args.field?.hidden &&
@@ -41,8 +51,9 @@ export default class CfFieldComponent extends Component {
   }
 
   /**
-   * Task to save a field. This will set the passed value to the answer and
-   * save the field to the API after a timeout off 500 milliseconds.
+   * Task to save a field. This will set the passed value to the answer and save
+   * the field to the API after a timeout of 500 milliseconds which intends to
+   * reduce the amount of saved values when changed rapidly.
    *
    * @method save
    * @param {String|Number|String[]} value
@@ -57,14 +68,18 @@ export default class CfFieldComponent extends Component {
       yield timeout(500);
     }
 
-    set(this.args.field.answer, "value", value);
+    if (this.args.field.answer) {
+      this.args.field.answer.value = value;
+    }
 
     yield this.args.field.validate.perform();
 
     try {
+      // Save the new field value unlinked so the fields save task is not
+      // aborted when this component is destroyed
       return yield this.args.field.save.unlinked().perform();
     } catch (e) {
-      // that's ok
+      // The component was destroyed before the fields save task was finished
     }
   }
 }

package/addon/components/document-validity.js

@@ -1,6 +1,7 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { restartableTask } from "ember-concurrency";
+import { cached } from "tracked-toolbox";
 
 /**
  * Component to check the validity of a document
@@ -31,12 +32,26 @@ export default class DocumentValidity extends Component {
    * @argument {Boolean} validateOnEnter
    */
 
+  @cached
   get isValid() {
-    return this.args.document.fields.every((f) => f.isValid);
+    return this.args.document.fields
+      .filter((f) => !f.hidden)
+      .every((f) => f.isValid);
   }
 
   @restartableTask
   *_validate() {
+    const saveTasks = this.args.document.fields
+      .flatMap((field) => [
+        ...[...(field._components ?? [])].map((c) => c.save.last),
+        field.save?.last,
+      ])
+      .filter(Boolean);
+
+    // Wait until all currently running save tasks in the UI and in the field
+    // itself are finished
+    yield Promise.all(saveTasks);
+
     for (const field of this.args.document.fields) {
       yield field.validate.linked().perform();
     }

package/addon/lib/field.js

@@ -152,6 +152,16 @@ export default class Field extends Base {
    */
   @tracked _errors = [];
 
+  /**
+   * Currently rendered field components that use this field. This is used in
+   * the document validity component to await all current save tasks before
+   * validating.
+   *
+   * @property {Set} _components
+   * @private
+   */
+  _components = new Set();
+
   /**
    * The primary key of the field. Consists of the document and question primary
    * keys.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.4",
+  "version": "11.0.0-beta.5",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -45,7 +45,7 @@
     "@embroider/test-setup": "1.0.0",
     "@faker-js/faker": "6.0.0-alpha.5",
     "@projectcaluma/ember-testing": "10.2.0-beta.2",
-    "@projectcaluma/ember-workflow": "11.0.0-beta.2",
+    "@projectcaluma/ember-workflow": "11.0.0-beta.3",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "3.28.5",
     "ember-cli-code-coverage": "1.0.3",