@projectcaluma/ember-form 11.0.0-beta.1 → 11.0.0-beta.12

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/gql/fragments/field.graphql

@@ -19,6 +19,15 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
@@ -28,6 +37,15 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
   }
   ... on IntegerQuestion {
     integerMinValue: minValue

package/addon/lib/field.js

@@ -3,6 +3,7 @@ import { assert } from "@ember/debug";
 import { associateDestroyableChild } from "@ember/destroyable";
 import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
+import { isEmpty } from "@ember/utils";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
 import { restartableTask, lastValue, dropTask } from "ember-concurrency";
@@ -63,7 +64,6 @@ const fieldIsHiddenOrEmpty = (field) => {
  */
 export default class Field extends Base {
   @service intl;
-  @service validator;
 
   @queryManager apollo;
 
@@ -113,6 +113,7 @@ export default class Field extends Base {
 
       answer = new Answer({
         raw: {
+          id: null,
           __typename: answerType,
           question: { slug: this.raw.question.slug },
           [camelize(answerType.replace(/Answer$/, "Value"))]: null,
@@ -152,6 +153,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.
@@ -618,6 +629,35 @@ export default class Field extends Base {
     this._errors = errors;
   }
 
+  /**
+   * Validate the value against the regexes of the given format validators.
+   *
+   * @method _validateFormatValidators
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
+   * @private
+   */
+  _validateFormatValidators() {
+    const validators =
+      this.question.raw.formatValidators?.edges.map((edge) => edge.node) ?? [];
+    const value = this.answer.value;
+
+    if (isEmpty(value)) {
+      // empty values should not be validated since they are handled by the
+      // requiredness validation
+      return validators.map(() => true);
+    }
+
+    return validators.map((validator) => {
+      return (
+        new RegExp(validator.regex).test(value) || {
+          type: "format",
+          context: { errorMsg: validator.errorMsg },
+          value,
+        }
+      );
+    });
+  }
+
   /**
    * Method to validate if a question is required or not.
    *
@@ -637,15 +677,12 @@ export default class Field extends Base {
    * predefined by the question.
    *
    * @method _validateTextQuestion
-   * @return {Promise<Boolean|Object>} A promise which resolves into an object if invalid or true if valid
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
    * @private
    */
-  async _validateTextQuestion() {
+  _validateTextQuestion() {
     return [
-      ...(await this.validator.validate(
-        this.answer.value,
-        this.question.raw.meta.formatValidators ?? []
-      )),
+      ...this._validateFormatValidators(),
       validate("length", this.answer.value, {
         min: this.question.raw.textMinLength || 0,
         max: this.question.raw.textMaxLength || Number.POSITIVE_INFINITY,
@@ -658,15 +695,12 @@ export default class Field extends Base {
    * than predefined by the question.
    *
    * @method _validateTextareaQuestion
-   * @return {Promise<Boolean|Object>} A promise which resolves into an object if invalid or true if valid
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
    * @private
    */
-  async _validateTextareaQuestion() {
+  _validateTextareaQuestion() {
     return [
-      ...(await this.validator.validate(
-        this.answer.value,
-        this.question.raw.meta.formatValidators ?? []
-      )),
+      ...this._validateFormatValidators(),
       validate("length", this.answer.value, {
         min: this.question.raw.textareaMinLength || 0,
         max: this.question.raw.textareaMaxLength || Number.POSITIVE_INFINITY,

package/addon/lib/navigation.js

@@ -1,7 +1,11 @@
 import { getOwner } from "@ember/application";
 import { assert } from "@ember/debug";
-import { associateDestroyableChild } from "@ember/destroyable";
-import { later, once } from "@ember/runloop";
+import {
+  associateDestroyableChild,
+  registerDestructor,
+} from "@ember/destroyable";
+import { action } from "@ember/object";
+import { next, cancel, once } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import { cached } from "tracked-toolbox";
 
@@ -300,7 +304,18 @@ export class Navigation extends Base {
 
     this._createItems();
 
-    this.router.on("routeDidChange", this, "goToNextItemIfNonNavigable");
+    const transitionHandler = () => {
+      this._timer = next(this, "goToNextItemIfNonNavigable");
+    };
+
+    // go to next item in next run loop, this is necessary when the user clicks
+    // on a non navigable item in the navigation
+    this.router.on("routeDidChange", this, transitionHandler);
+
+    registerDestructor(this, () => {
+      cancel(this._timer);
+      this.router.off("routeDidChange", this, transitionHandler);
+    });
   }
 
   /**
@@ -399,31 +414,29 @@ export class Navigation extends Base {
   }
 
   /**
-   * Observer which transitions to the next navigable item if the current item
-   * is not navigable.
+   * Replace the current item with the next navigable item if the current item
+   * is not navigable. This makes sure that only one transition per runloop
+   * happens.
    *
    * @method goToNextItemIfNonNavigable
    */
+  @action
   goToNextItemIfNonNavigable() {
-    if (!this.nextItem?.slug || this.currentItem?.navigable) {
+    if (this.currentItem?.navigable) {
       return;
     }
 
-    later(this, () => once(this, "goToNextItem"));
+    once(this, "_transitionToNextItem");
   }
 
   /**
-   * Replace the current item with the next navigable item
+   * Transition to next item or start (empty displayed form).
    *
-   * @method goToNextItem
+   * @method _transitionToNextItem
    */
-  goToNextItem() {
-    if (!this.nextItem?.slug || this.currentItem?.navigable) {
-      return;
-    }
-
+  _transitionToNextItem() {
     this.router.replaceWith({
-      queryParams: { displayedForm: this.nextItem.slug },
+      queryParams: { displayedForm: this.nextItem?.slug ?? "" },
     });
   }
 }

package/addon/modifiers/autoresize.js

@@ -0,0 +1,16 @@
+import { inject as service } from "@ember/service";
+import AutoresizeModifier from "ember-autoresize-modifier/modifiers/autoresize";
+
+export default class CustomAutoresizeModifier extends AutoresizeModifier {
+  @service inViewport;
+
+  didInstall() {
+    super.didInstall();
+
+    this.inViewport.watchElement(this.element).onEnter(this.resize);
+  }
+
+  willRemove() {
+    this.inViewport.stopWatching(this.element);
+  }
+}

package/app/modifiers/autoresize.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/modifiers/autoresize";

package/blueprints/@projectcaluma/ember-form/index.js

@@ -12,6 +12,7 @@ module.exports = {
         { name: "ember-math-helpers" },
         { name: "ember-pikaday" },
         { name: "ember-power-select" },
+        { name: "ember-autoresize-modifier" },
       ],
     });
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.1",
+  "version": "11.0.0-beta.12",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -16,39 +16,43 @@
   "dependencies": {
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "^11.0.0-beta.1",
+    "@projectcaluma/ember-core": "^11.0.0-beta.4",
     "ember-apollo-client": "^3.2.0",
-    "ember-auto-import": "^2.2.3",
+    "ember-auto-import": "^2.4.0",
+    "ember-autoresize-modifier": "^0.5.0",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-showdown": "^6.0.1",
     "ember-composable-helpers": "^5.0.0",
-    "ember-fetch": "^8.0.4",
+    "ember-concurrency": "^2.2.1",
+    "ember-fetch": "^8.1.1",
     "ember-in-viewport": "^4.0.0",
     "ember-intl": "^5.7.2",
-    "ember-math-helpers": "^2.18.0",
-    "ember-pikaday": "^3.0.0",
-    "ember-power-select": "^5.0.3",
-    "ember-resources": "^4.1.3",
-    "ember-uikit": "^4.0.0",
+    "ember-math-helpers": "^2.18.1",
+    "ember-pikaday": "^4.0.0",
+    "ember-power-select": "^5.0.4",
+    "ember-resources": "^4.3.3",
+    "ember-uikit": "^5.0.0",
+    "ember-validators": "^4.1.2",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
-    "moment": "^2.29.1",
+    "luxon": "^2.3.0",
     "tracked-toolbox": "^1.2.3"
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
     "@ember/test-helpers": "2.6.0",
-    "@embroider/test-setup": "0.49.0",
-    "@projectcaluma/ember-testing": "10.1.0",
-    "@projectcaluma/ember-workflow": "10.0.3",
+    "@embroider/test-setup": "1.2.0",
+    "@faker-js/faker": "6.0.0-alpha.7",
+    "@projectcaluma/ember-testing": "11.0.0-beta.3",
+    "@projectcaluma/ember-workflow": "11.0.0-beta.4",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "3.28.5",
     "ember-cli-code-coverage": "1.0.3",
     "ember-cli-dependency-checker": "3.2.0",
     "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-mirage": "2.2.0",
+    "ember-cli-mirage": "2.4.0",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-disable-prototype-extensions": "1.1.3",
@@ -60,13 +64,13 @@
     "ember-source": "3.28.8",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "2.0.0",
-    "faker": "5.5.3",
     "loader.js": "4.7.0",
+    "miragejs": "0.1.43",
     "npm-run-all": "4.1.5",
-    "qunit": "2.17.2",
+    "qunit": "2.18.0",
     "qunit-dom": "2.0.0",
     "uuid": "8.3.2",
-    "webpack": "5.65.0"
+    "webpack": "5.69.1"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"

package/addon/components/cf-navigation.js

@@ -1,9 +0,0 @@
-import { action } from "@ember/object";
-import Component from "@glimmer/component";
-
-export default class CfNavigationComponent extends Component {
-  @action
-  goToNextItem() {
-    this.args.navigation.goToNextItem();
-  }
-}

package/addon/instance-initializers/setup-pikaday-i18n.js

@@ -1,35 +0,0 @@
-import EmberObject from "@ember/object";
-import { inject as service } from "@ember/service";
-import moment from "moment";
-
-class Translations extends EmberObject {
-  @service intl;
-
-  get previousMonth() {
-    return this.intl.t("caluma.form.pikaday.month-previous");
-  }
-
-  get nextMonth() {
-    return this.intl.t("caluma.form.pikaday.month-next");
-  }
-
-  months = moment.localeData().months();
-  weekdays = moment.localeData().weekdays();
-  weekdaysShort = moment.localeData().weekdaysShort();
-}
-
-export function initialize(applicationInstance) {
-  applicationInstance.register("pikaday-i18n:main", Translations, {
-    singleton: true,
-  });
-  applicationInstance.inject(
-    "component:pikaday-input",
-    "i18n",
-    "pikaday-i18n:main"
-  );
-}
-
-export default {
-  name: "setup-pikaday-i18n",
-  initialize,
-};