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

package/addon/components/cf-content.js

@@ -120,17 +120,9 @@ export default class CfContentComponent extends Component {
       this.router.currentRoute?.queryParams.displayedForm ||
       this.document?.raw.form.slug;
 
-    const fieldset = this.document.fieldsets.find(
+    return this.document.fieldsets.find(
       (fieldset) => fieldset.form.slug === slug
     );
-
-    if (!fieldset) {
-      this.router.replaceWith({
-        queryParams: { displayedForm: "" },
-      });
-    }
-
-    return fieldset;
   }
 
   data = useTask(this, this.fetchData, () => [this.args.documentId]);

package/addon/components/cf-field/info.hbs

@@ -4,7 +4,7 @@
     class="uk-icon-button"
     uk-icon="info"
     title={{t "caluma.form.info"}}
-    {{on "click" this.showModal}}
+    {{on "click" (fn (mut this.modalVisible) true)}}
   >
     <span class="uk-hidden">{{t "caluma.form.info"}}</span>
   </button>
@@ -12,7 +12,7 @@
   <UkModal
     @visible={{this.modalVisible}}
     @stack={{true}}
-    @on-hide={{this.hideModal}}
+    @onHide={{fn (mut this.modalVisible) false}}
     as |modal|
   >
     <modal.body>

package/addon/components/cf-field/info.js

@@ -1,21 +1,6 @@
-import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
 export default class CfFieldInfoComponent extends Component {
   @tracked modalVisible = false;
-
-  @action
-  showModal(e) {
-    e.preventDefault();
-
-    this.modalVisible = true;
-  }
-
-  @action
-  hideModal(e) {
-    e.preventDefault();
-
-    this.modalVisible = false;
-  }
 }

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

@@ -1,6 +1,10 @@
 {{#each @field.options as |option i|}}
   {{#if (gt i 0)}}<br />{{/if}}
-  <label class="cf-checkbox_label {{if @field.isInvalid 'uk-form-danger'}}">
+  <label
+    class="cf-checkbox_label
+      {{if @field.isInvalid 'uk-form-danger'}}
+      {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
+  >
     <input
       class="uk-checkbox uk-margin-small-right"
       type="checkbox"

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

@@ -17,7 +17,7 @@
       <UkButton
         data-test-download-link
         @color="link"
-        @on-click={{this.download}}
+        @onClick={{this.download}}
       >
         {{this.downloadName}}
       </UkButton>

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

@@ -1,6 +1,9 @@
 {{#each @field.options as |option i|}}
   {{#if (gt i 0)}}<br />{{/if}}
-  <label class={{if @field.isInvalid "uk-form-danger"}}>
+  <label
+    class="{{if @field.isInvalid 'uk-form-danger'}}
+      {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
+  >
     <input
       class="uk-radio uk-margin-small-right"
       type="radio"

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

@@ -28,7 +28,7 @@
             <button
               data-test-edit-row
               type="button"
-              class="uk-button-link uk-flex-inline uk-margin-small-left"
+              class="uk-button uk-button-link uk-flex-inline uk-margin-small-left"
               title={{t "caluma.form.edit"}}
               {{on "click" (fn this.edit document)}}
             >
@@ -39,7 +39,7 @@
               <button
                 data-test-delete-row
                 type="button"
-                class="uk-button-link uk-flex-inline uk-margin-small-left"
+                class="uk-button uk-button-link uk-flex-inline uk-margin-small-left"
                 title={{t "caluma.form.delete"}}
                 {{on "click" (fn (perform this.delete) document)}}
               >
@@ -58,8 +58,7 @@
         <td colspan={{add this.columns.length 1}} class="uk-text-center">
           <UkButton
             @size="small"
-            @color="default"
-            @on-click={{perform this.add}}
+            @onClick={{perform this.add}}
             data-test-add-row
           >
             <UkIcon @icon="plus" />
@@ -74,7 +73,7 @@
 {{#if this.documentToEdit}}
   <UkModal
     @visible={{this.showAddModal}}
-    @on-hide={{perform this.closeModal}}
+    @onHide={{perform this.close}}
     @bgClose={{false}}
     as |modal|
   >
@@ -91,7 +90,7 @@
         <UkButton
           @label={{t "caluma.form.close"}}
           @color="primary"
-          @on-click={{perform this.close}}
+          @onClick={{perform this.close}}
           @disabled={{this.close.isRunning}}
           @loading={{this.close.isRunning}}
           data-test-close
@@ -99,7 +98,7 @@
       {{else}}
         <UkButton
           @label={{t "caluma.form.cancel"}}
-          @on-click={{perform this.close}}
+          @onClick={{perform this.close}}
           @disabled={{this.close.isRunning}}
           @loading={{this.close.isRunning}}
           data-test-cancel
@@ -114,7 +113,7 @@
             @type="submit"
             @disabled={{or this.save.isRunning (not isValid)}}
             @loading={{this.save.isRunning}}
-            @on-click={{fn (perform this.save) validate}}
+            @onClick={{fn (perform this.save) validate}}
             data-test-save
           />
         </DocumentValidity>

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

@@ -9,4 +9,5 @@
   maxlength={{@field.question.raw.textareaMaxLength}}
   readonly={{@disabled}}
   {{on "input" this.input}}
+  {{autoresize mode="height"}}
 >{{@field.answer.value}}</textarea>

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

@@ -1,6 +1,15 @@
 {{#if this.type}}
   {{#let (component (concat "cf-field/input/" this.type)) as |InputComponent|}}
-    <div class="uk-form-controls">
+    <div
+      class="uk-form-controls
+        {{if
+          (and
+            (has-question-type @field.question 'multiple-choice' 'choice')
+            @field.question.raw.meta.vertical
+          )
+          'uk-flex'
+        }}"
+    >
       <InputComponent
         @field={{@field}}
         @disabled={{@disabled}}

package/addon/components/cf-field-value.hbs

@@ -2,7 +2,7 @@
   <UkButton
     @color="link"
     @label={{this.value.label}}
-    @on-click={{fn this.download this.value.fileAnswerId}}
+    @onClick={{fn this.download this.value.fileAnswerId}}
   />
 {{else}}
   {{this.value.label}}

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/cf-navigation.hbs

@@ -1,4 +1,7 @@
-<ul class="uk-tab uk-tab-left uk-width-auto" {{did-insert this.goToNextItem}}>
+<ul
+  class="uk-tab uk-tab-left uk-width-auto"
+  {{did-insert @navigation.goToNextItemIfNonNavigable}}
+>
   {{#each @navigation.rootItems as |item|}}
     <CfNavigationItem
       @item={{item}}

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/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/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.5",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -16,21 +16,23 @@
   "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.2",
     "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-fetch": "^8.1.1",
     "ember-in-viewport": "^4.0.0",
     "ember-intl": "^5.7.2",
-    "ember-math-helpers": "^2.18.0",
+    "ember-math-helpers": "^2.18.1",
     "ember-pikaday": "^3.0.0",
     "ember-power-select": "^5.0.3",
-    "ember-resources": "^4.1.3",
-    "ember-uikit": "^4.0.0",
+    "ember-resources": "^4.2.0",
+    "ember-uikit": "^5.0.0-beta.9",
+    "ember-validators": "^4.1.0",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
@@ -40,15 +42,16 @@
   "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.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.3",
     "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 +63,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-dom": "2.0.0",
     "uuid": "8.3.2",
-    "webpack": "5.65.0"
+    "webpack": "5.68.0"
   },
   "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();
-  }
-}