@projectcaluma/ember-form 11.0.0-beta.21 → 11.0.0-beta.22

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [@projectcaluma/ember-form-v11.0.0-beta.22](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.21...@projectcaluma/ember-form-v11.0.0-beta.22) (2022-08-05)
+
+
+* feat!: add multi file upload (#2040) ([c4fd004](https://github.com/projectcaluma/ember-caluma/commit/c4fd0049654b2d2e5ea62e5909a45d89cb888b40)), closes [#2040](https://github.com/projectcaluma/ember-caluma/issues/2040)
+
+
+### BREAKING CHANGES
+
+* This requires the caluma backend version v8.0.0-beta.12
+or later.
+
 # [@projectcaluma/ember-form-v11.0.0-beta.21](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.20...@projectcaluma/ember-form-v11.0.0-beta.21) (2022-06-09)
 
 

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

@@ -0,0 +1,35 @@
+<div class="uk-flex-middle uk-grid-divider uk-grid-column-small" uk-grid>
+  <div uk-form-custom="target: true">
+
+    <input
+      type="file"
+      name={{@field.pk}}
+      id={{@field.pk}}
+      disabled={{@disabled}}
+      multiple
+      {{on "change" this.save}}
+    />
+    <UkButton disabled={{@disabled}}>
+      {{t "caluma.form.selectFile"}}
+    </UkButton>
+  </div>
+  <ul class="uk-list uk-list-collapse" data-test-file-list={{@field.pk}}>
+    {{#each this.files as |file|}}
+      <li class="uk-text-justify uk-text-middle">
+        <UkButton
+          data-test-download-link={{file.id}}
+          @color="link"
+          @onClick={{fn this.download file.id}}
+        >
+          {{file.name}}
+        </UkButton>
+        <UkIcon
+          class="uk-icon-button uk-margin-small-left"
+          role="button"
+          @icon="trash"
+          {{on "click" (fn this.delete file.id)}}
+        />
+      </li>
+    {{/each}}
+  </ul>
+</div>

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.js

@@ -4,7 +4,7 @@ import Component from "@glimmer/component";
 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 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";
@@ -20,7 +20,7 @@ const COMPONENT_MAPPING = {
   DateQuestion: DateComponent,
   DynamicChoiceQuestion: RadioComponent,
   DynamicMultipleChoiceQuestion: CheckboxComponent,
-  FileQuestion: FileComponent,
+  FilesQuestion: FilesComponent,
   FloatQuestion: FloatComponent,
   IntegerQuestion: IntegerComponent,
   MultipleChoiceQuestion: CheckboxComponent,

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

@@ -11,14 +11,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/gql/fragments/field.graphql

@@ -117,7 +117,7 @@ fragment SimpleQuestion on Question {
     calcExpression
     hintText
   }
-  ... on FileQuestion {
+  ... on FilesQuestion {
     hintText
   }
   ... on ActionButtonQuestion {
@@ -234,8 +234,8 @@ fragment SimpleAnswer on Answer {
   ... on ListAnswer {
     listValue: value
   }
-  ... on FileAnswer {
-    fileValue: value {
+  ... on FilesAnswer {
+    filesValue: value {
       id
       uploadUrl
       downloadUrl

package/addon/gql/mutations/save-document-files-answer.graphql

@@ -0,0 +1,9 @@
+#import * from '../fragments/field.graphql'
+
+mutation SaveDocumentFilesAnswer($input: SaveDocumentFilesAnswerInput!) {
+  saveDocumentFilesAnswer(input: $input) {
+    answer {
+      ...FieldAnswer
+    }
+  }
+}

package/addon/gql/queries/{fileanswer-info.graphql → filesanswer-info.graphql}

@@ -1,8 +1,8 @@
-query FileAnswerInfo($id: ID!) {
+query FilesAnswerInfo($id: ID!) {
   node(id: $id) {
-    id
-    ... on FileAnswer {
-      fileValue: value {
+    ... on FilesAnswer {
+      id
+      value {
         id
         uploadUrl
         downloadUrl

package/addon/lib/field.js

@@ -13,7 +13,7 @@ import { cached } from "tracked-toolbox";
 
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import saveDocumentDateAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-date-answer.graphql";
-import saveDocumentFileAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-file-answer.graphql";
+import saveDocumentFilesAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-files-answer.graphql";
 import saveDocumentFloatAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-float-answer.graphql";
 import saveDocumentIntegerAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-integer-answer.graphql";
 import saveDocumentListAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-list-answer.graphql";
@@ -34,7 +34,7 @@ export const TYPE_MAP = {
   DynamicChoiceQuestion: "StringAnswer",
   TableQuestion: "TableAnswer",
   FormQuestion: null,
-  FileQuestion: "FileAnswer",
+  FilesQuestion: "FilesAnswer",
   StaticQuestion: null,
   DateQuestion: "DateAnswer",
 };
@@ -44,7 +44,7 @@ const MUTATION_MAP = {
   IntegerAnswer: saveDocumentIntegerAnswerMutation,
   StringAnswer: saveDocumentStringAnswerMutation,
   ListAnswer: saveDocumentListAnswerMutation,
-  FileAnswer: saveDocumentFileAnswerMutation,
+  FilesAnswer: saveDocumentFilesAnswerMutation,
   DateAnswer: saveDocumentDateAnswerMutation,
   TableAnswer: saveDocumentTableAnswerMutation,
 };
@@ -810,11 +810,11 @@ export default class Field extends Base {
   /**
    * Dummy method for the validation of file uploads.
    *
-   * @method _validateFileQuestion
+   * @method _validateFilesQuestion
    * @return {Boolean} Always returns true
    * @private
    */
-  _validateFileQuestion() {
+  _validateFilesQuestion() {
     return true;
   }
 

package/app/components/cf-field/input/{file.js → files.js}

@@ -1 +1 @@
-export { default } from "@projectcaluma/ember-form/components/cf-field/input/file";
+export { default } from "@projectcaluma/ember-form/components/cf-field/input/files";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.21",
+  "version": "11.0.0-beta.22",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -15,16 +15,16 @@
   },
   "dependencies": {
     "@ember/string": "^3.0.0",
-    "@embroider/macros": "^1.7.1",
-    "@embroider/util": "^1.7.1",
+    "@embroider/macros": "^1.8.3",
+    "@embroider/util": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@projectcaluma/ember-core": "^11.0.0-beta.7",
-    "ember-apollo-client": "^4.0.2",
+    "@projectcaluma/ember-core": "^11.0.0-beta.9",
+    "ember-apollo-client": "~4.0.2",
     "ember-auto-import": "^2.4.2",
     "ember-autoresize-modifier": "^0.5.0",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
+    "ember-cli-htmlbars": "^6.1.0",
     "ember-cli-showdown": "^6.0.1",
     "ember-composable-helpers": "^5.0.0",
     "ember-concurrency": "^2.2.1",
@@ -34,21 +34,21 @@
     "ember-math-helpers": "^2.18.2",
     "ember-pikaday": "^4.0.0",
     "ember-power-select": "^5.0.4",
-    "ember-resources": "^4.8.2",
+    "ember-resources": "^5.1.1",
     "ember-uikit": "^5.1.3",
     "ember-validators": "^4.1.2",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
-    "luxon": "^2.4.0",
+    "luxon": "^3.0.1",
     "tracked-toolbox": "^1.2.3"
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
     "@ember/test-helpers": "2.8.1",
-    "@embroider/test-setup": "1.7.1",
-    "@faker-js/faker": "7.2.0",
-    "@projectcaluma/ember-testing": "11.0.0-beta.9",
+    "@embroider/test-setup": "1.8.3",
+    "@faker-js/faker": "7.3.0",
+    "@projectcaluma/ember-testing": "11.0.0-beta.10",
     "@projectcaluma/ember-workflow": "^11.0.0-beta.7",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "3.28.5",
@@ -73,7 +73,7 @@
     "qunit": "2.19.1",
     "qunit-dom": "2.0.0",
     "uuid": "8.3.2",
-    "webpack": "5.73.0"
+    "webpack": "5.74.0"
   },
   "peerDependencies": {
     "@projectcaluma/ember-workflow": "^11.0.0-beta.7"

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

@@ -1,32 +0,0 @@
-<div class="uk-flex-middle uk-grid-divider uk-grid-column-small" uk-grid>
-  <div uk-form-custom="target: true">
-
-    <input
-      type="file"
-      name={{@field.pk}}
-      id={{@field.pk}}
-      disabled={{@disabled}}
-      {{on "change" this.save}}
-    />
-    <UkButton disabled={{@disabled}}>
-      {{t "caluma.form.selectFile"}}
-    </UkButton>
-  </div>
-  {{#if (and this.downloadUrl this.downloadName)}}
-    <div>
-      <UkButton
-        data-test-download-link
-        @color="link"
-        @onClick={{this.download}}
-      >
-        {{this.downloadName}}
-      </UkButton>
-      <UkIcon
-        class="uk-icon-button uk-margin-small-left"
-        role="button"
-        @icon="trash"
-        {{on "click" this.delete}}
-      />
-    </div>
-  {{/if}}
-</div>

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

@@ -1,89 +0,0 @@
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
-import Component from "@glimmer/component";
-import { queryManager } from "ember-apollo-client";
-import fetch from "fetch";
-
-import removeAnswerMutation from "@projectcaluma/ember-form/gql/mutations/remove-answer.graphql";
-import getFileAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/fileanswer-info.graphql";
-
-export default class CfFieldInputFileComponent extends Component {
-  @service intl;
-
-  @queryManager apollo;
-
-  get downloadUrl() {
-    return this.args.field?.answer?.value?.downloadUrl;
-  }
-
-  get downloadName() {
-    return this.args.field?.answer?.value?.name;
-  }
-
-  @action
-  async download() {
-    const { downloadUrl } = await this.apollo.query(
-      {
-        query: getFileAnswerInfoQuery,
-        variables: { id: this.args.field.answer.raw.id },
-        fetchPolicy: "network-only",
-      },
-      "node.fileValue"
-    );
-
-    if (downloadUrl) {
-      window.open(downloadUrl, "_blank");
-    }
-  }
-
-  @action
-  async save({ target }) {
-    const file = target.files[0];
-
-    if (!file) {
-      return;
-    }
-
-    const { fileValue } = await this.args.onSave(file.name);
-
-    try {
-      const response = await fetch(fileValue.uploadUrl, {
-        method: "PUT",
-        body: file,
-      });
-
-      if (!response.ok) {
-        throw new Error();
-      }
-
-      this.args.field.answer.value = {
-        name: file.name,
-        downloadUrl: fileValue.downloadUrl,
-      };
-    } catch (error) {
-      await this.args.onSave(null);
-      this.args.field._errors = [{ type: "uploadFailed" }];
-    } finally {
-      // eslint-disable-next-line require-atomic-updates
-      target.value = "";
-    }
-  }
-
-  @action
-  async delete() {
-    try {
-      await this.apollo.mutate({
-        mutation: removeAnswerMutation,
-        variables: {
-          input: {
-            answer: this.args.field.answer.uuid,
-          },
-        },
-      });
-
-      await this.args.onSave(null);
-    } catch (error) {
-      this.args.field._errors = [{ type: "deleteFailed" }];
-    }
-  }
-}

package/addon/gql/mutations/remove-answer.graphql

@@ -1,7 +0,0 @@
-mutation RemoveAnswer($input: RemoveAnswerInput!) {
-  removeAnswer(input: $input) {
-    answer {
-      id
-    }
-  }
-}

package/addon/gql/mutations/save-document-file-answer.graphql

@@ -1,9 +0,0 @@
-#import * from '../fragments/field.graphql'
-
-mutation SaveDocumentFileAnswer($input: SaveDocumentFileAnswerInput!) {
-  saveDocumentFileAnswer(input: $input) {
-    answer {
-      ...FieldAnswer
-    }
-  }
-}