@projectcaluma/ember-form 11.0.0-beta.2 → 11.0.0-beta.20

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

@@ -1,29 +1,27 @@
-{{#let (component this.componentName) as |DynamicSelect|}}
-  <DynamicSelect
-    @options={{@field.options}}
-    @selected={{@field.selected}}
-    @disabled={{@disabled}}
-    @allowClear={{true}}
-    @preventScroll={{true}}
-    @searchEnabled={{this.searchEnabled}}
-    @searchField="label"
-    @triggerId={{@field.pk}}
-    @renderInPlace={{true}}
-    @placeholder={{this.placeholder}}
-    @loadingMessage={{t "caluma.form.power-select.options-loading"}}
-    @searchMessage={{t "caluma.form.power-select.options-empty"}}
-    @searchPlaceholder={{t "caluma.form.power-select.search-placeholder"}}
-    @noMatchesMessage={{t "caluma.form.power-select.search-empty"}}
-    @onChange={{this.change}}
-    as |option|
-  >
-    {{#if (and option.disabled (not @disabled))}}
-      <del
-        class="uk-text-muted"
-        title={{t "caluma.form.optionNotAvailable"}}
-      >{{option.label}}</del>
-    {{else}}
-      {{option.label}}
-    {{/if}}
-  </DynamicSelect>
-{{/let}}
+<this.selectComponent
+  @options={{@field.options}}
+  @selected={{@field.selected}}
+  @disabled={{@disabled}}
+  @allowClear={{true}}
+  @preventScroll={{true}}
+  @searchEnabled={{this.searchEnabled}}
+  @searchField="label"
+  @triggerId={{@field.pk}}
+  @renderInPlace={{true}}
+  @placeholder={{this.placeholder}}
+  @loadingMessage={{t "caluma.form.power-select.options-loading"}}
+  @searchMessage={{t "caluma.form.power-select.options-empty"}}
+  @searchPlaceholder={{t "caluma.form.power-select.search-placeholder"}}
+  @noMatchesMessage={{t "caluma.form.power-select.search-empty"}}
+  @onChange={{this.change}}
+  as |option|
+>
+  {{#if (and option.disabled (not @disabled))}}
+    <del
+      class="uk-text-muted"
+      title={{t "caluma.form.optionNotAvailable"}}
+    >{{option.label}}</del>
+  {{else}}
+    {{option.label}}
+  {{/if}}
+</this.selectComponent>

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

@@ -1,7 +1,10 @@
 import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { ensureSafeComponent } from "@embroider/util";
 import Component from "@glimmer/component";
+import PowerSelectComponent from "ember-power-select/components/power-select";
+import PowerSelectMultipleComponent from "ember-power-select/components/power-select-multiple";
 
 /**
  * Dropdown component for the single and multiple choice question type
@@ -16,8 +19,11 @@ export default class CfFieldInputPowerselectComponent extends Component {
     return this.args.field?.question.isMultipleChoice;
   }
 
-  get componentName() {
-    return this.multiple ? "power-select-multiple" : "power-select";
+  get selectComponent() {
+    return ensureSafeComponent(
+      this.multiple ? PowerSelectMultipleComponent : PowerSelectComponent,
+      this
+    );
   }
 
   get searchEnabled() {

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

@@ -1,5 +1,5 @@
 {{#each @field.options as |option i|}}
-  {{#if (gt i 0)}}<br />{{/if}}
+  {{#if (and (gt i 0) (not @field.raw.question.meta.vertical))}}<br />{{/if}}
   <label
     class="{{if @field.isInvalid 'uk-form-danger'}}
       {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
@@ -10,7 +10,7 @@
       name={{@field.pk}}
       value={{option.slug}}
       checked={{eq option.slug @field.answer.value}}
-      disabled={{@disabled}}
+      disabled={{or option.disabled @disabled}}
       {{on "change" (fn @onSave option.slug)}}
     />
     {{#if (and option.disabled (not @disabled))}}

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 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 table-controls"
+              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 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 table-controls"
+                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|
   >
@@ -83,15 +83,16 @@
         @document={{this.documentToEdit}}
         @fieldset={{object-at 0 this.documentToEdit.fieldsets}}
         @disabled={{@disabled}}
+        @context={{@context}}
       />
     </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 +100,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 +115,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

@@ -5,22 +5,12 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
-import UIkit from "uikit";
+import { confirm } from "ember-uikit";
 
 import removeDocumentMutation from "@projectcaluma/ember-form/gql/mutations/remove-document.graphql";
 import saveDocumentMutation from "@projectcaluma/ember-form/gql/mutations/save-document.graphql";
 import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
 
-async function confirm(text) {
-  try {
-    await UIkit.modal.confirm(text);
-
-    return true;
-  } catch (error) {
-    return false;
-  }
-}
-
 export default class CfFieldInputTableComponent extends Component {
   @service notification;
   @service intl;

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

@@ -1,21 +1,8 @@
-{{#if this.type}}
-  {{#let (component (concat "cf-field/input/" this.type)) as |InputComponent|}}
-    <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}}
-        @onSave={{@onSave}}
-        @context={{@context}}
-      />
-    </div>
-  {{/let}}
-{{/if}}
+<div class="uk-form-controls">
+  <this.inputComponent
+    @field={{@field}}
+    @disabled={{@disabled}}
+    @onSave={{@onSave}}
+    @context={{@context}}
+  />
+</div>

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

@@ -1,12 +1,33 @@
-import { dasherize } from "@ember/string";
+import { ensureSafeComponent } from "@embroider/util";
 import Component from "@glimmer/component";
 
-const mapping = {
-  MultipleChoiceQuestion: "checkbox",
-  ChoiceQuestion: "radio",
-  DynamicMultipleChoiceQuestion: "checkbox",
-  DynamicChoiceQuestion: "radio",
-  CalculatedFloatQuestion: "float",
+import ActionButtonComponent from "@projectcaluma/ember-form/components/cf-field/input/action-button";
+import CheckboxComponent from "@projectcaluma/ember-form/components/cf-field/input/checkbox";
+import DateComponent from "@projectcaluma/ember-form/components/cf-field/input/date";
+import FileComponent from "@projectcaluma/ember-form/components/cf-field/input/file";
+import FloatComponent from "@projectcaluma/ember-form/components/cf-field/input/float";
+import IntegerComponent from "@projectcaluma/ember-form/components/cf-field/input/integer";
+import RadioComponent from "@projectcaluma/ember-form/components/cf-field/input/radio";
+import StaticComponent from "@projectcaluma/ember-form/components/cf-field/input/static";
+import TableComponent from "@projectcaluma/ember-form/components/cf-field/input/table";
+import TextComponent from "@projectcaluma/ember-form/components/cf-field/input/text";
+import TextareaComponent from "@projectcaluma/ember-form/components/cf-field/input/textarea";
+
+const COMPONENT_MAPPING = {
+  ActionButtonQuestion: ActionButtonComponent,
+  CalculatedFloatQuestion: FloatComponent,
+  ChoiceQuestion: RadioComponent,
+  DateQuestion: DateComponent,
+  DynamicChoiceQuestion: RadioComponent,
+  DynamicMultipleChoiceQuestion: CheckboxComponent,
+  FileQuestion: FileComponent,
+  FloatQuestion: FloatComponent,
+  IntegerQuestion: IntegerComponent,
+  MultipleChoiceQuestion: CheckboxComponent,
+  StaticQuestion: StaticComponent,
+  TableQuestion: TableComponent,
+  TextareaQuestion: TextareaComponent,
+  TextQuestion: TextComponent,
 };
 
 /**
@@ -16,17 +37,14 @@ const mapping = {
  */
 export default class CfFieldInputComponent extends Component {
   /**
-   * The input component type
+   * The input component
    *
-   * @property {String} type
+   * @property {Component} inputComponent
    * @accessor
    */
-  get type() {
+  get inputComponent() {
     const typename = this.args.field?.question.raw.__typename;
 
-    return (
-      typename &&
-      (mapping[typename] || dasherize(typename.replace(/Question$/, "")))
-    );
+    return ensureSafeComponent(COMPONENT_MAPPING[typename], this);
   }
 }

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

@@ -1,11 +1,13 @@
-<label class="uk-form-label" for={{@field.pk}}>
+<label class="uk-form-label" for={{@field.pk}} ...attributes>
   <span class="uk-text-bold">
     {{@field.question.raw.label}}
   </span>
 
-  {{#if this.optional}}
+  {{#if (and (not @field.question.isCalculated) @field.optional)}}
     <span
       class="uk-margin-small-left uk-text-muted uk-text-lowercase uk-text-normal"
     >({{t "caluma.form.optional"}})</span>
   {{/if}}
+
+  {{yield}}
 </label>

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,12 +1,23 @@
 {{#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}}
 
     <div class="uk-flex">
       <div class="uk-width-expand">
-        {{#let (component (get-widget @field.question)) as |FieldComponent|}}
+        {{#let
+          (component (ensure-safe-component (get-widget @field.question)))
+          as |FieldComponent|
+        }}
           <FieldComponent
             @field={{@field}}
             @disabled={{@disabled}}
@@ -24,17 +35,39 @@
         <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)}}
-            <UkIcon @icon="warning" class="uk-animation-fade uk-text-danger" />
-          {{else if @field.save.last.isSuccessful}}
+          {{else if (or this.save.last.isError @field.isInvalid)}}
+            <div class="uk-flex-inline">
+              <UkIcon
+                @icon="warning"
+                class="uk-animation-fade uk-text-danger"
+              />
+              {{#if this.save.last.error}}
+                <div uk-dropdown="pos: bottom-left" class="uk-padding-small">
+                  <div class="uk-alert uk-alert-danger uk-margin-small">
+                    {{t "caluma.form.error.intro"}}
+                  </div>
+                  <p class="uk-text-meta uk-margin-small">
+                    {{t "caluma.form.error.details"}}
+                  </p>
+                  <pre class="uk-margin-remove">
+                    {{~format-graphql-error this.save.last.error~}}
+                  </pre>
+                </div>
+              {{/if}}
+            </div>
+          {{else if this.save.last.isSuccessful}}
             <UkIcon @icon="check" class="uk-animation-fade uk-text-success" />
           {{/if}}
         </div>
       {{/if}}
     </div>
 
+    {{#if (and @field.question.raw.hintText this.hintTextVisible)}}
+      <CfField::hint @field={{@field}} />
+    {{/if}}
+
     {{#if @field.errors.length}}
       <CfField::errors @field={{@field}} />
     {{/if}}

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 { macroCondition, isTesting } from "@embroider/macros";
 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 &&
@@ -36,35 +46,45 @@ export default class CfFieldComponent extends Component {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }
 
+  get hintTextVisible() {
+    return !hasQuestionType(
+      this.args.field?.question,
+      "action-button",
+      "static",
+      "form"
+    );
+  }
+
   get saveIndicatorVisible() {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }
 
   /**
-   * 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
+   * @param {String|Number|String[]} value The new value to save to the field
+   * @param {Boolean} bypassTimeout Whether to bypass the timeout
    */
   @restartableTask
-  *save(value) {
-    const { environment } =
-      getOwner(this).resolveRegistration("config:environment");
-
+  *save(value, bypassTimeout = false) {
     /* istanbul ignore next */
-    if (environment !== "test") {
-      yield timeout(500);
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      if (!bypassTimeout) {
+        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 {
-      return yield this.args.field.save.unlinked().perform();
-    } catch (e) {
-      // that's ok
-    }
+    return yield this.args.field.save.unlinked().perform();
   }
 }

package/addon/components/cf-form-wrapper.hbs

@@ -1,6 +1,8 @@
 {{#let
   (component
-    (get-widget @fieldset.field.question @fieldset.form default="cf-form")
+    (ensure-safe-component
+      (get-widget @fieldset.field.question @fieldset.form default="cf-form")
+    )
   )
   as |FormComponent|
 }}

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();
     }