@projectcaluma/ember-form 10.0.1 → 11.0.0-beta.10

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

@@ -1,4 +1,4 @@
-<table class="uk-table uk-table-divider">
+<table class="uk-table uk-table-divider uk-margin-remove-vertical">
   <thead>
     <tr>
       {{#each this.columns as |column|}}
@@ -25,27 +25,27 @@
                 class="uk-animation-fade uk-text-danger"
               />
             {{/if}}
-            <button
-              data-test-edit-row
-              type="button"
-              class="uk-button-link uk-flex-inline uk-margin-small-left"
+            <UkButton
+              @color="link"
+              @onClick={{fn this.edit document}}
               title={{t "caluma.form.edit"}}
-              {{on "click" (fn this.edit document)}}
+              class="uk-flex-inline uk-margin-small-left"
+              data-test-edit-row
             >
               <UkIcon @icon="pencil" />
-              <span class="uk-hidden">{{t "caluma.form.edit"}}</span>
-            </button>
+              <span hidden>{{t "caluma.form.edit"}}</span>
+            </UkButton>
             {{#unless @disabled}}
-              <button
-                data-test-delete-row
-                type="button"
-                class="uk-button-link uk-flex-inline uk-margin-small-left"
+              <UkButton
+                @color="link"
+                @onClick={{fn (perform this.delete) document}}
                 title={{t "caluma.form.delete"}}
-                {{on "click" (fn (perform this.delete) document)}}
+                class="uk-flex-inline uk-margin-small-left"
+                data-test-delete-row
               >
                 <UkIcon @icon="trash" />
-                <span class="uk-hidden">{{t "caluma.form.delete"}}</span>
-              </button>
+                <span hidden>{{t "caluma.form.delete"}}</span>
+              </UkButton>
             {{/unless}}
           </div>
         </td>
@@ -57,13 +57,13 @@
       <tr>
         <td colspan={{add this.columns.length 1}} class="uk-text-center">
           <UkButton
-            @size="small"
-            @color="default"
-            @on-click={{perform this.add}}
+            @color="link"
+            @onClick={{perform this.add}}
+            title={{t "caluma.form.addRow"}}
             data-test-add-row
           >
             <UkIcon @icon="plus" />
-            <span class="uk-hidden">{{t "caluma.form.addRow"}}</span>
+            <span hidden>{{t "caluma.form.addRow"}}</span>
           </UkButton>
         </td>
       </tr>
@@ -74,7 +74,7 @@
 {{#if this.documentToEdit}}
   <UkModal
     @visible={{this.showAddModal}}
-    @on-hide={{perform this.closeModal}}
+    @onHide={{perform this.close}}
     @bgClose={{false}}
     as |modal|
   >
@@ -86,12 +86,12 @@
       />
     </modal.body>
 
-    <modal.footer @class="uk-text-right">
+    <modal.footer class="uk-text-right">
       {{#if @disabled}}
         <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 +99,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 +114,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/table.js

@@ -4,7 +4,7 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import { dropTask } from "ember-concurrency-decorators";
+import { dropTask } from "ember-concurrency";
 import UIkit from "uikit";
 
 import removeDocumentMutation from "@projectcaluma/ember-form/gql/mutations/remove-document.graphql";
@@ -37,13 +37,13 @@ export default class CfFieldInputTableComponent extends Component {
   }
 
   get questions() {
-    return this.args.field.question.rowForm.questions.edges.map(
+    return this.args.field.question.raw.rowForm.questions.edges.map(
       (edge) => edge.node
     );
   }
 
   get columns() {
-    const config = this.args.field.question.meta.columnsToDisplay;
+    const config = this.args.field.question.raw.meta.columnsToDisplay;
 
     if (config?.length) {
       return this.questions.filter((question) =>
@@ -59,17 +59,19 @@ export default class CfFieldInputTableComponent extends Component {
     const raw = yield this.apollo.mutate(
       {
         mutation: saveDocumentMutation,
-        variables: { input: { form: this.args.field.question.rowForm.slug } },
+        variables: {
+          input: { form: this.args.field.question.raw.rowForm.slug },
+        },
       },
       "saveDocument.document"
     );
 
-    const newDocument = getOwner(this)
-      .factoryFor("caluma-model:document")
-      .create({
-        raw: this.parseDocument(raw),
-        parentDocument: this.args.field.document,
-      });
+    const owner = getOwner(this);
+    const newDocument = new (owner.factoryFor("caluma-model:document").class)({
+      raw: this.parseDocument(raw),
+      parentDocument: this.args.field.document,
+      owner,
+    });
 
     this.documentToEditIsNew = true;
     this.documentToEdit = newDocument;

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

@@ -1,14 +1,14 @@
 <input
   type="text"
   class="uk-input
-    {{if @field.isInvalid "uk-form-danger"}}
-    {{if @disabled "uk-disabled"}}"
+    {{if @field.isInvalid 'uk-form-danger'}}
+    {{if @disabled 'uk-disabled'}}"
   name={{@field.pk}}
   id={{@field.pk}}
   value={{@field.answer.value}}
-  placeholder={{@field.question.placeholder}}
+  placeholder={{@field.question.raw.placeholder}}
   readonly={{@disabled}}
-  minlength={{@field.question.textMinLength}}
-  maxlength={{@field.question.textMaxLength}}
+  minlength={{@field.question.raw.textMinLength}}
+  maxlength={{@field.question.raw.textMaxLength}}
   {{on "input" this.input}}
 />

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

@@ -1,12 +1,13 @@
 <textarea
   class="uk-textarea
-    {{if @field.isInvalid "uk-form-danger"}}
-    {{if @disabled "uk-disabled"}}"
+    {{if @field.isInvalid 'uk-form-danger'}}
+    {{if @disabled 'uk-disabled'}}"
   name={{@field.pk}}
   id={{@field.pk}}
-  placeholder={{@field.question.placeholder}}
-  minlength={{@field.question.textareaMinLength}}
-  maxlength={{@field.question.textareaMaxLength}}
+  placeholder={{@field.question.raw.placeholder}}
+  minlength={{@field.question.raw.textareaMinLength}}
+  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/input.js

@@ -22,7 +22,7 @@ export default class CfFieldInputComponent extends Component {
    * @accessor
    */
   get type() {
-    const typename = this.args.field?.question.__typename;
+    const typename = this.args.field?.question.raw.__typename;
 
     return (
       typename &&

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

@@ -1,6 +1,6 @@
 <label class="uk-form-label" for={{@field.pk}}>
   <span class="uk-text-bold">
-    {{@field.question.label}}
+    {{@field.question.raw.label}}
   </span>
 
   {{#if this.optional}}

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

@@ -1,9 +1,24 @@
-{{#if this.value.fileAnswerId}}
-  <UkButton
-    @color="link"
-    @label={{this.value.label}}
-    @on-click={{fn this.download this.value.fileAnswerId}}
-  />
+{{#if (has-question-type @field.question "choice" "dynamic-choice")}}
+  {{@field.selected.label}}
+{{else if (has-question-type
+  @field.question "multiple-choice" "multiple-dynamic-choice"
+)}}
+  {{#each @field.selected as |opt i|}}{{if (gt i 0) ", "}}{{opt.label}}{{/each}}
+{{else if (has-question-type @field.question "date")}}
+  {{format-date
+    @field.answer.value
+    day="2-digit"
+    month="2-digit"
+    year="numeric"
+  }}
+{{else if (has-question-type @field.question "file")}}
+  {{#if @field.answer.value}}
+    <UkButton
+      @color="link"
+      @label={{@field.answer.value.name}}
+      @onClick={{fn this.download @field.answer.raw.id}}
+    />
+  {{/if}}
 {{else}}
-  {{this.value.label}}
+  {{@field.answer.value}}
 {{/if}}

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

@@ -1,55 +1,25 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
-import moment from "moment";
 
-import getFileAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/get-fileanswer-info.graphql";
+import getFileAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/fileanswer-info.graphql";
 
 export default class CfFieldValueComponent extends Component {
   @queryManager apollo;
 
-  get value() {
-    const field = this.args.field;
-
-    switch (field.question.__typename) {
-      case "ChoiceQuestion":
-      case "DynamicChoiceQuestion": {
-        return field.selected;
-      }
-      case "MultipleChoiceQuestion":
-      case "DynamicMultipleChoiceQuestion": {
-        return { label: field.selected.map(({ label }) => label).join(", ") };
-      }
-      case "FileQuestion": {
-        const answerValue = field.answer.value;
-        return {
-          fileAnswerId: answerValue && field.answer.id,
-          label: answerValue && answerValue.name,
-        };
-      }
-      case "DateQuestion": {
-        return {
-          label: field.answer.value && moment(field.answer.value).format("L"),
-        };
-      }
-
-      default:
-        return {
-          label: field.answer.value,
-        };
-    }
-  }
-
   @action
-  async download(fileAnswerId) {
+  async download(id) {
     const { downloadUrl } = await this.apollo.query(
       {
         query: getFileAnswerInfoQuery,
-        variables: { id: fileAnswerId },
-        fetchPolicy: "cache-and-network",
+        variables: { id },
+        fetchPolicy: "network-only",
       },
       "node.fileValue"
     );
-    window.open(downloadUrl, "_blank");
+
+    if (downloadUrl) {
+      window.open(downloadUrl, "_blank");
+    }
   }
 }

package/addon/components/cf-field.hbs

@@ -1,5 +1,13 @@
 {{#if this.visible}}
-  <div class="uk-margin">
+  <div
+    class="uk-margin
+      {{if
+        (and @disabled (has-question-type @field.question 'action-button'))
+        'uk-hidden'
+      }}"
+    {{did-insert this.registerComponent}}
+    {{will-destroy this.unregisterComponent}}
+  >
     {{#if this.labelVisible}}
       <CfField::label @field={{@field}} />
     {{/if}}
@@ -16,19 +24,19 @@
         {{/let}}
       </div>
 
-      {{#if (and @field.question.infoText this.infoTextVisible)}}
-        <CfField::info @text={{@field.question.infoText}} />
+      {{#if (and @field.question.raw.infoText this.infoTextVisible)}}
+        <CfField::info @text={{@field.question.raw.infoText}} />
       {{/if}}
 
       {{#if this.saveIndicatorVisible}}
         <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,8 +1,7 @@
 import { getOwner } from "@ember/application";
-import { set } from "@ember/object";
+import { action } from "@ember/object";
 import Component from "@glimmer/component";
-import { timeout } from "ember-concurrency";
-import { restartableTask } from "ember-concurrency-decorators";
+import { timeout, restartableTask } from "ember-concurrency";
 
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 
@@ -19,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 &&
@@ -28,7 +37,7 @@ export default class CfFieldComponent extends Component {
 
   get labelVisible() {
     return (
-      !this.args.field?.question.meta.hideLabel &&
+      !this.args.field?.question.raw.meta.hideLabel &&
       !hasQuestionType(this.args.field?.question, "static", "action-button")
     );
   }
@@ -42,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
@@ -58,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-item.hbs

@@ -1,6 +1,6 @@
 <li
   class="cf-navigation__item uk-width-auto
-    {{if (or @item.active @item.childrenActive) "uk-active"}}"
+    {{if (or @item.active @item.childrenActive) 'uk-active'}}"
 >
   <LinkTo @query={{hash displayedForm=@item.slug}}>
     {{#if (and @useAsHeading this.active)}}
@@ -19,7 +19,7 @@
     {{/if}}
     <span
       class="cf-navigation__item__icon cf-navigation__item__icon--{{@item.state}}
-        {{if @item.dirty "cf-navigation__item__icon--dirty"}}"
+        {{if @item.dirty 'cf-navigation__item__icon--dirty'}}"
     ></span>
   </LinkTo>
 

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-decorators";
+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

@@ -1,4 +1,10 @@
+# We can not symlink this file so an exact copy exists in another package:
+# packages/form-builder/addon/gql/fragments/field.graphql
+#
+# When changing this file the other must also receive the same changes.
+
 fragment SimpleQuestion on Question {
+  id
   slug
   label
   isRequired
@@ -9,22 +15,43 @@ fragment SimpleQuestion on Question {
     textMinLength: minLength
     textMaxLength: maxLength
     textDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
     textareaMaxLength: maxLength
     textareaDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
   }
   ... on IntegerQuestion {
     integerMinValue: minValue
     integerMaxValue: maxValue
     integerDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -33,6 +60,7 @@ fragment SimpleQuestion on Question {
     floatMinValue: minValue
     floatMaxValue: maxValue
     floatDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -41,6 +69,7 @@ fragment SimpleQuestion on Question {
     choiceOptions: options {
       edges {
         node {
+          id
           slug
           label
           isArchived
@@ -48,6 +77,7 @@ fragment SimpleQuestion on Question {
       }
     }
     choiceDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
@@ -55,6 +85,7 @@ fragment SimpleQuestion on Question {
     multipleChoiceOptions: options {
       edges {
         node {
+          id
           slug
           label
           isArchived
@@ -62,11 +93,13 @@ fragment SimpleQuestion on Question {
       }
     }
     multipleChoiceDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
   ... on DateQuestion {
     dateDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
@@ -84,8 +117,10 @@ fragment SimpleQuestion on Question {
 }
 
 fragment FieldTableQuestion on Question {
+  id
   ... on TableQuestion {
     rowForm {
+      id
       slug
       questions {
         edges {
@@ -96,6 +131,7 @@ fragment FieldTableQuestion on Question {
       }
     }
     tableDefaultAnswer: defaultAnswer {
+      id
       value {
         id
         answers {
@@ -103,6 +139,7 @@ fragment FieldTableQuestion on Question {
             node {
               id
               question {
+                id
                 slug
               }
               ... on StringAnswer {
@@ -129,10 +166,12 @@ fragment FieldTableQuestion on Question {
 }
 
 fragment FieldQuestion on Question {
+  id
   ...SimpleQuestion
   ...FieldTableQuestion
   ... on FormQuestion {
     subForm {
+      id
       slug
       name
       questions {
@@ -140,10 +179,12 @@ fragment FieldQuestion on Question {
           node {
             # This part here limits our query to 2 level deep nested forms. This
             # has to be solved in another way!
+            id
             ...SimpleQuestion
             ...FieldTableQuestion
             ... on FormQuestion {
               subForm {
+                id
                 slug
                 name
                 questions {
@@ -166,6 +207,7 @@ fragment FieldQuestion on Question {
 fragment SimpleAnswer on Answer {
   id
   question {
+    id
     slug
   }
   ... on StringAnswer {
@@ -182,6 +224,7 @@ fragment SimpleAnswer on Answer {
   }
   ... on FileAnswer {
     fileValue: value {
+      id
       uploadUrl
       downloadUrl
       metadata
@@ -194,11 +237,13 @@ fragment SimpleAnswer on Answer {
 }
 
 fragment FieldAnswer on Answer {
+  id
   ...SimpleAnswer
   ... on TableAnswer {
     tableValue: value {
       id
       form {
+        id
         slug
         questions {
           edges {