@projectcaluma/ember-form 11.0.0-beta.3 → 11.0.0-beta.30

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/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"
+            @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>
@@ -83,10 +83,11 @@
         @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"}}

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,9 +1,24 @@
-{{#if this.value.fileAnswerId}}
-  <UkButton
-    @color="link"
-    @label={{this.value.label}}
-    @onClick={{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 "files")}}
+  {{#each @field.answer.value as |file|}}
+    <UkButton
+      @color="link"
+      @label={{file.name}}
+      @onClick={{fn this.download file.id}}
+    />
+  {{/each}}
 {{else}}
-  {{this.value.label}}
+  {{@field.answer.value}}
 {{/if}}

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

@@ -1,50 +1,26 @@
 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";
+import getFilesAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/filesanswer-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 } },
-      "node.fileValue"
+    const files = await this.apollo.query(
+      {
+        query: getFilesAnswerInfoQuery,
+        variables: { id: this.args.field.answer.raw.id },
+        fetchPolicy: "network-only",
+      },
+      "node.value"
     );
 
-    window.open(downloadUrl, "_blank");
+    const { downloadUrl } = files?.find((file) => file.id === id);
+    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}} />
+      <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}}
@@ -17,26 +28,48 @@
       </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}}
         <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}} />
+      <CfField::Errors @field={{@field}} />
     {{/if}}
   </div>
 {{/if}}