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

package/addon/components/cf-content.hbs

@@ -1,41 +1,41 @@
-{{#if @documentId}}
-  {{#if this.loading}}
-    <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
-  {{else if this.document}}
-    {{#let
-      (hash
+{{#if this.loading}}
+  <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
+{{else if this.document}}
+  {{#let
+    (hash
+      document=this.document
+      navigation=(component
+        "cf-navigation"
+        navigation=this.navigation
+        useAsHeading=(or @useAsHeading false)
+        headingBaseLevel=(or @headingBaseLevel 1)
+      )
+      pagination=(component "cf-pagination" navigation=this.navigation)
+      form=(component
+        "cf-form-wrapper"
         document=this.document
-        navigation=(component
-          "cf-navigation"
-          navigation=this.navigation
-          useAsHeading=(or @useAsHeading false)
-          headingBaseLevel=(or @headingBaseLevel 1)
-        )
-        pagination=(component "cf-pagination" navigation=this.navigation)
-        form=(component
-          "cf-form-wrapper"
-          document=this.document
-          fieldset=this.fieldset
-          context=@context
-          disabled=@disabled
-        )
+        fieldset=this.fieldset
+        context=@context
+        disabled=@disabled
       )
-      as |content|
-    }}
-      {{#if (has-block)}}
-        {{yield content}}
-      {{else if (gt this.document.fieldsets.length 1)}}
-        <div uk-grid>
-          <div class="uk-width-1-1 uk-width-1-3@m"><content.navigation /></div>
-          <div class="uk-width-1-1 uk-width-2-3@m">
-            <content.form />
-            <hr />
-            <content.pagination />
-          </div>
+    )
+    as |content|
+  }}
+    {{#if (has-block)}}
+      {{yield content}}
+    {{else if (gt this.document.fieldsets.length 1)}}
+      <div uk-grid>
+        <div class="uk-width-1-1 uk-width-1-3@m"><content.navigation /></div>
+        <div class="uk-width-1-1 uk-width-2-3@m">
+          <content.form />
+          <hr />
+          <content.pagination />
         </div>
-      {{else}}
-        <content.form />
-      {{/if}}
-    {{/let}}
-  {{/if}}
+      </div>
+    {{else}}
+      <content.form />
+    {{/if}}
+  {{/let}}
+{{else}}
+  {{yield to="notfound"}}
 {{/if}}

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/action-button.hbs

@@ -1,19 +1,17 @@
-{{#unless @disabled}}
-  <DocumentValidity
-    @document={{@field.document}}
-    @validateOnEnter={{this.validateOnEnter}}
-    as |isValid validate|
-  >
-    <WorkItemButton
-      @workItemId={{this.workItem}}
-      @mutation={{this.action}}
-      @label={{@field.question.raw.label}}
-      @disabled={{and (not-eq isValid null) (not isValid)}}
-      @color={{this.color}}
-      @beforeMutate={{fn this.beforeMutate validate}}
-      @onSuccess={{this.onSuccess}}
-      @onError={{this.onError}}
-      @type={{this.type}}
-    />
-  </DocumentValidity>
-{{/unless}}
+<DocumentValidity
+  @document={{@field.document}}
+  @validateOnEnter={{this.validateOnEnter}}
+  as |isValid validate|
+>
+  <WorkItemButton
+    @workItemId={{this.workItem}}
+    @mutation={{this.action}}
+    @label={{@field.question.raw.label}}
+    @disabled={{or (and (not-eq isValid null) (not isValid)) @disabled}}
+    @color={{this.color}}
+    @beforeMutate={{fn this.beforeMutate validate}}
+    @onSuccess={{this.onSuccess}}
+    @onError={{this.onError}}
+    class={{if @disabled "uk-hidden"}}
+  />
+</DocumentValidity>

package/addon/components/cf-field/input/action-button.js

@@ -38,12 +38,6 @@ export default class CfFieldInputActionButtonComponent extends Component {
     return this.args.field.question.raw.color.toLowerCase();
   }
 
-  get type() {
-    return this.args.field.question.raw.action === "COMPLETE"
-      ? "submit"
-      : "button";
-  }
-
   get validateOnEnter() {
     return (
       this.args.field.question.raw.action === "COMPLETE" &&

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/date.hbs

@@ -13,13 +13,17 @@
     readonly
   />
 {{else}}
-  <PikadayInput
+  <input
     class="uk-input"
+    type="text"
     name={{@field.pk}}
     id={{@field.pk}}
-    @format="L"
-    @onSelection={{this.onChange}}
-    @useUTC={{true}}
-    @value={{@field.answer.value}}
+    {{pikaday
+      firstDay=1
+      toString=this.formatDate
+      i18n=this.pikadayTranslations
+      value=@field.answer.value
+      onSelect=this.onChange
+    }}
   />
 {{/if}}

package/addon/components/cf-field/input/date.js

@@ -1,19 +1,40 @@
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
-import moment from "moment";
+import { DateTime, Info } from "luxon";
+import { cached } from "tracked-toolbox";
+
+// put the last element to the front of the array
+const shift = (array) => [...array.slice(-1), ...array.slice(0, -1)];
 
 export default class CfFieldInputDateComponent extends Component {
+  @service intl;
+
   @action
   onChange(date) {
     // Change Javascript date to ISO string if not null.
-    this.args.onSave(
-      date
-        ? moment({
-            day: date.getUTCDate(),
-            month: date.getUTCMonth(),
-            year: date.getUTCFullYear(),
-          }).format(moment.HTML5_FMT.DATE)
-        : null
-    );
+    this.args.onSave(date ? DateTime.fromJSDate(date).toISODate() : null);
+  }
+
+  @action
+  formatDate(date) {
+    return this.intl.formatDate(date, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  }
+
+  @cached
+  get pikadayTranslations() {
+    const locale = this.intl.primaryLocale;
+
+    return {
+      previousMonth: this.intl.t("caluma.form.pikaday.month-previous"),
+      nextMonth: this.intl.t("caluma.form.pikaday.month-next"),
+      months: Info.months("long", { locale }),
+      weekdays: shift(Info.weekdays("long", { locale })),
+      weekdaysShort: shift(Info.weekdays("short", { locale })),
+    };
   }
 }

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

@@ -8,7 +8,7 @@
       disabled={{@disabled}}
       {{on "change" this.save}}
     />
-    <UkButton @color="primary" @disabled={{@disabled}}>
+    <UkButton disabled={{@disabled}}>
       {{t "caluma.form.selectFile"}}
     </UkButton>
   </div>
@@ -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/file.js

@@ -22,11 +22,11 @@ export default class CfFieldInputFileComponent extends Component {
 
   @action
   async download() {
-    const { downloadUrl } = await this.apollo.watchQuery(
+    const { downloadUrl } = await this.apollo.query(
       {
         query: getFileAnswerInfoQuery,
         variables: { id: this.args.field.answer.raw.id },
-        fetchPolicy: "cache-and-network",
+        fetchPolicy: "network-only",
       },
       "node.fileValue"
     );

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/static.hbs

@@ -1,4 +1,4 @@
 <MarkdownToHtml
-  @markdown={{@field.question.staticContent}}
+  @markdown={{@field.question.raw.staticContent}}
   @openLinksInNewWindow={{true}}
 />

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/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

@@ -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,50 +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/fileanswer-info.graphql";
 
 export default class CfFieldValueComponent extends Component {
   @queryManager apollo;
 
-  get value() {
-    const field = this.args.field;
-
-    switch (field.questionType) {
-      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.raw.id,
-          label: answerValue?.name,
-        };
-      }
-      case "DateQuestion": {
-        return {
-          label: field.answer.value && moment(field.answer.value).format("L"),
-        };
-      }
-
-      default:
-        return { label: field.answer.value };
-    }
-  }
-
   @action
   async download(id) {
     const { downloadUrl } = await this.apollo.query(
-      { query: getFileAnswerInfoQuery, variables: { id } },
+      {
+        query: getFileAnswerInfoQuery,
+        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}}
@@ -24,11 +32,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}}