@projectcaluma/ember-form 11.0.0-beta.9 → 11.0.1

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

@@ -0,0 +1,113 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
+import Component from "@glimmer/component";
+import { queryManager } from "ember-apollo-client";
+import fetch from "fetch";
+
+import getFilesAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/filesanswer-info.graphql";
+
+export default class CfFieldInputFilesComponent extends Component {
+  @service intl;
+
+  @queryManager apollo;
+
+  get files() {
+    return this.args.field?.answer?.value;
+  }
+
+  @action
+  async download(fileId) {
+    if (!fileId) {
+      return;
+    }
+    const answers = await this.apollo.query(
+      {
+        query: getFilesAnswerInfoQuery,
+        variables: { id: this.args.field.answer.raw.id },
+        fetchPolicy: "network-only",
+      },
+      "node.value"
+    );
+    const { downloadUrl } =
+      answers.find((file) =>
+        // the testing graph-ql setup does a base64 encoding of `__typename: fileID`
+        macroCondition(isTesting())
+          ? file.id === fileId ||
+            atob(file.id).substring(file.__typename.length + 1) === fileId
+          : file.id === fileId
+      ) ?? {};
+    if (downloadUrl) {
+      window.open(downloadUrl, "_blank");
+    }
+  }
+
+  @action
+  async save({ target }) {
+    // store the old list of files
+    // unwrap files from FileList construct
+    let newFiles = Array.from(target.files).map((file) => ({
+      name: file.name,
+      value: file,
+    }));
+
+    const fileList = [...(this.files || []), ...newFiles];
+
+    if (newFiles.length === 0) {
+      return;
+    }
+
+    // trigger save action for file list of old and new files with
+    // reduces properties to match gql format
+    const { filesValue: savedAnswerValue } = await this.args.onSave(
+      fileList.map(({ name, id }) => ({ name, id }))
+    );
+
+    try {
+      // iterate over list of new files and enrich with graphql answer values
+      newFiles = newFiles.map((file) => ({
+        ...savedAnswerValue.find(
+          (value) =>
+            file.name === value.name &&
+            !fileList.find((file) => file.id === value.id)
+        ),
+        value: file.value,
+      }));
+
+      const uploadFunction = async (file) => {
+        const response = await fetch(file.uploadUrl, {
+          method: "PUT",
+          body: file.value,
+        });
+        if (!response.ok) {
+          throw new Error();
+        }
+        return response;
+      };
+
+      // upload the actual file to data storage
+      await Promise.all(newFiles.map((file) => uploadFunction(file)));
+
+      this.args.field.answer.value = savedAnswerValue;
+    } catch (error) {
+      await this.args.onSave([]);
+      this.args.field._errors = [{ type: "uploadFailed" }];
+    } finally {
+      // eslint-disable-next-line require-atomic-updates
+      target.value = "";
+    }
+  }
+
+  @action
+  async delete(fileId) {
+    const remainingFiles = this.files
+      .filter((file) => file.id !== fileId)
+      .map(({ name, id }) => ({ name, id }));
+
+    try {
+      await this.args.onSave(remainingFiles);
+    } catch (error) {
+      this.args.field._errors = [{ type: "deleteFailed" }];
+    }
+  }
+}

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

@@ -29,7 +29,7 @@
               @color="link"
               @onClick={{fn this.edit document}}
               title={{t "caluma.form.edit"}}
-              class="uk-flex-inline uk-margin-small-left"
+              class="uk-flex-inline uk-margin-small-left table-controls"
               data-test-edit-row
             >
               <UkIcon @icon="pencil" />
@@ -40,7 +40,7 @@
                 @color="link"
                 @onClick={{fn (perform this.delete) document}}
                 title={{t "caluma.form.delete"}}
-                class="uk-flex-inline uk-margin-small-left"
+                class="uk-flex-inline uk-margin-small-left table-controls"
                 data-test-delete-row
               >
                 <UkIcon @icon="trash" />
@@ -83,6 +83,7 @@
         @document={{this.documentToEdit}}
         @fieldset={{object-at 0 this.documentToEdit.fieldsets}}
         @disabled={{@disabled}}
+        @context={{@context}}
       />
     </modal.body>
 

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 FilesComponent from "@projectcaluma/ember-form/components/cf-field/input/files";
+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,
+  FilesQuestion: FilesComponent,
+  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,8 +1,10 @@
 {{#if (has-question-type @field.question "choice" "dynamic-choice")}}
   {{@field.selected.label}}
-{{else if (has-question-type
-  @field.question "multiple-choice" "multiple-dynamic-choice"
-)}}
+{{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
@@ -11,14 +13,14 @@
     month="2-digit"
     year="numeric"
   }}
-{{else if (has-question-type @field.question "file")}}
-  {{#if @field.answer.value}}
+{{else if (has-question-type @field.question "files")}}
+  {{#each @field.answer.value as |file|}}
     <UkButton
       @color="link"
-      @label={{@field.answer.value.name}}
-      @onClick={{fn this.download @field.answer.raw.id}}
+      @label={{file.name}}
+      @onClick={{fn this.download file.id}}
     />
-  {{/if}}
+  {{/each}}
 {{else}}
   {{@field.answer.value}}
 {{/if}}

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

@@ -2,22 +2,23 @@ import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 
-import getFileAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/fileanswer-info.graphql";
+import getFilesAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/filesanswer-info.graphql";
 
 export default class CfFieldValueComponent extends Component {
   @queryManager apollo;
 
   @action
   async download(id) {
-    const { downloadUrl } = await this.apollo.query(
+    const files = await this.apollo.query(
       {
-        query: getFileAnswerInfoQuery,
-        variables: { id },
+        query: getFilesAnswerInfoQuery,
+        variables: { id: this.args.field.answer.raw.id },
         fetchPolicy: "network-only",
       },
-      "node.fileValue"
+      "node.value"
     );
 
+    const { downloadUrl } = files?.find((file) => file.id === id);
     if (downloadUrl) {
       window.open(downloadUrl, "_blank");
     }

package/addon/components/cf-field.hbs

@@ -9,12 +9,15 @@
     {{will-destroy this.unregisterComponent}}
   >
     {{#if this.labelVisible}}
-      <CfField::label @field={{@field}} />
+      <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}}
@@ -25,7 +28,7 @@
       </div>
 
       {{#if (and @field.question.raw.infoText this.infoTextVisible)}}
-        <CfField::info @text={{@field.question.raw.infoText}} />
+        <CfField::Info @text={{@field.question.raw.infoText}} />
       {{/if}}
 
       {{#if this.saveIndicatorVisible}}
@@ -35,7 +38,25 @@
           {{#if this.save.isRunning}}
             <UkSpinner class="uk-animation-fade" />
           {{else if (or this.save.last.isError @field.isInvalid)}}
-            <UkIcon @icon="warning" class="uk-animation-fade uk-text-danger" />
+            <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}}
@@ -43,8 +64,12 @@
       {{/if}}
     </div>
 
+    {{#if (and @field.question.raw.hintText this.hintTextVisible)}}
+      <CfField::Hint @field={{@field}} />
+    {{/if}}
+
     {{#if @field.errors.length}}
-      <CfField::errors @field={{@field}} />
+      <CfField::Errors @field={{@field}} />
     {{/if}}
   </div>
 {{/if}}

package/addon/components/cf-field.js

@@ -1,5 +1,5 @@
-import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { timeout, restartableTask } from "ember-concurrency";
 
@@ -9,7 +9,7 @@ import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-
  * Component to display a label and input for a certain field of a document.
  *
  * ```hbs
- * {{cf-field field=someField}}
+ * <CfField @field={{this.someField}} />
  * ```
  *
  * You can disable the field by passing `disabled=true`.
@@ -46,6 +46,15 @@ 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");
   }
@@ -56,16 +65,22 @@ export default class CfFieldComponent extends Component {
    * 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) {
+    if (typeof this.args.onSave === "function") {
+      return yield this.args.onSave(this.args.field, value);
+    }
 
     /* istanbul ignore next */
-    if (environment !== "test") {
-      yield timeout(500);
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      if (!bypassTimeout) {
+        yield timeout(500);
+      }
     }
 
     if (this.args.field.answer) {
@@ -74,12 +89,6 @@ export default class CfFieldComponent extends Component {
 
     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) {
-      // The component was destroyed before the fields save task was finished
-    }
+    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|
 }}
@@ -9,5 +11,6 @@
     @fieldset={{@fieldset}}
     @context={{@context}}
     @disabled={{@disabled}}
+    @onSave={{@onSave}}
   />
 {{/let}}

package/addon/components/cf-form.hbs

@@ -3,7 +3,12 @@
     {{#if (has-block)}}
       {{yield field}}
     {{else}}
-      <CfField @field={{field}} @disabled={{@disabled}} @context={{@context}} />
+      <CfField
+        @field={{field}}
+        @disabled={{@disabled}}
+        @context={{@context}}
+        @onSave={{@onSave}}
+      />
     {{/if}}
   {{/each}}
 </form>