feat!: add multi file upload (#2040)

This replaces the single file upload and will enable the user to upload multiple files at once. BREAKING CHANGE: This requires the caluma backend version v8.0.0-beta.12 or later.
projectcaluma · Aug 5, 2022 · c4fd004 · c4fd004
1 parent 807c280
commit c4fd004
Show file tree

Hide file tree

Showing 34 changed files with 399 additions and 328 deletions.
diff --git a/packages/core/addon/-private/possible-types.js b/packages/core/addon/-private/possible-types.js
@@ -11,7 +11,7 @@ export default {
     "DateQuestion",
     "TableQuestion",
     "FormQuestion",
-    "FileQuestion",
+    "FilesQuestion",
     "StaticQuestion",
     "CalculatedFloatQuestion",
     "ActionButtonQuestion",
@@ -35,15 +35,15 @@ export default {
     "DateQuestion",
     "TableQuestion",
     "FormQuestion",
-    "FileQuestion",
+    "FilesQuestion",
     "StaticQuestion",
     "StringAnswer",
     "ListAnswer",
     "IntegerAnswer",
     "FloatAnswer",
     "DateAnswer",
     "TableAnswer",
-    "FileAnswer",
+    "FilesAnswer",
     "File",
     "CalculatedFloatQuestion",
     "ActionButtonQuestion",
@@ -62,7 +62,7 @@ export default {
     "FloatAnswer",
     "DateAnswer",
     "TableAnswer",
-    "FileAnswer",
+    "FilesAnswer",
   ],
   Task: ["SimpleTask", "CompleteWorkflowFormTask", "CompleteTaskFormTask"],
   DynamicQuestion: ["DynamicChoiceQuestion", "DynamicMultipleChoiceQuestion"],

diff --git a/packages/form-builder/addon/components/cfb-form-editor/question.js b/packages/form-builder/addon/components/cfb-form-editor/question.js
@@ -26,7 +26,7 @@ import saveDefaultStringAnswerMutation from "@projectcaluma/ember-form-builder/g
 import saveDefaultTableAnswerMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-default-table-answer.graphql";
 import saveDynamicChoiceQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-dynamic-choice-question.graphql";
 import saveDynamicMultipleChoiceQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-dynamic-multiple-choice-question.graphql";
-import saveFileQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-file-question.graphql";
+import saveFilesQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-files-question.graphql";
 import saveFloatQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-float-question.graphql";
 import saveFormQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-form-question.graphql";
 import saveIntegerQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-integer-question.graphql";
@@ -53,7 +53,7 @@ export const TYPES = {
   DynamicChoiceQuestion: saveDynamicChoiceQuestionMutation,
   TableQuestion: saveTableQuestionMutation,
   FormQuestion: saveFormQuestionMutation,
-  FileQuestion: saveFileQuestionMutation,
+  FilesQuestion: saveFilesQuestionMutation,
   StaticQuestion: saveStaticQuestionMutation,
   DateQuestion: saveDateQuestionMutation,
   CalculatedFloatQuestion: saveCalculatedFloatQuestionMutation,
@@ -335,7 +335,7 @@ export default class CfbFormEditorQuestion extends Component {
     };
   }
 
-  _getFileQuestionInput(changeset) {
+  _getFilesQuestionInput(changeset) {
     return {
       hintText: changeset.get("hintText"),
     };

diff --git a/packages/form-builder/addon/gql/fragments/field.graphql b/packages/form-builder/addon/gql/fragments/field.graphql
@@ -99,7 +99,7 @@ fragment SimpleQuestion on Question {
     calcExpression
     hintText
   }
-  ... on FileQuestion {
+  ... on FilesQuestion {
     hintText
   }
   ... on ActionButtonQuestion {
@@ -216,8 +216,8 @@ fragment SimpleAnswer on Answer {
   ... on ListAnswer {
     listValue: value
   }
-  ... on FileAnswer {
-    fileValue: value {
+  ... on FilesAnswer {
+    filesValue: value {
       id
       uploadUrl
       downloadUrl

diff --git a/.../gql/mutations/save-file-question.graphql → ...gql/mutations/save-files-question.graphql b/.../gql/mutations/save-file-question.graphql → ...gql/mutations/save-files-question.graphql
@@ -1,11 +1,11 @@
 #import QuestionInfo from '../fragments/question-info.graphql'
 
-mutation SaveFileQuestion($input: SaveFileQuestionInput!) {
-  saveFileQuestion(input: $input) {
+mutation SaveFilesQuestion($input: SaveFilesQuestionInput!) {
+  saveFilesQuestion(input: $input) {
     question {
       id
       ...QuestionInfo
-      ... on FileQuestion {
+      ... on FilesQuestion {
         hintText
       }
     }

diff --git a/packages/form-builder/addon/gql/queries/form-editor-question.graphql b/packages/form-builder/addon/gql/queries/form-editor-question.graphql
@@ -163,7 +163,7 @@ query FormEditorQuestion($slug: String!) {
           calcExpression
           hintText
         }
-        ... on FileQuestion {
+        ... on FilesQuestion {
           hintText
         }
         ... on ActionButtonQuestion {

diff --git a/packages/form-builder/addon/validations/question.js b/packages/form-builder/addon/validations/question.js
@@ -19,7 +19,7 @@ export default {
   hintText: or(
     validateType("FormQuestion", true),
     validateType("StaticQuestion", true),
-    validateType("FileQuestion", true),
+    validateType("FilesQuestion", true),
     validateLength({ max: 1024, allowBlank: true })
   ),
   integerMinValue: or(

diff --git a/packages/form-builder/tests/integration/components/cfb-form-editor/question-test.js b/packages/form-builder/tests/integration/components/cfb-form-editor/question-test.js
@@ -515,7 +515,7 @@ module("Integration | Component | cfb-form-editor/question", function (hooks) {
     this.server.create("form", { slug: "test-form" });
 
     this.set("afterSubmit", (question) => {
-      assert.strictEqual(question.__typename, "FileQuestion");
+      assert.strictEqual(question.__typename, "FilesQuestion");
       assert.strictEqual(question.label, "Label");
       assert.strictEqual(question.slug, "slug");
 
@@ -526,7 +526,7 @@ module("Integration | Component | cfb-form-editor/question", function (hooks) {
       hbs`<CfbFormEditor::Question @form='test-form' @onAfterSubmit={{this.afterSubmit}}/>`
     );
 
-    await fillIn("[name=__typename]", "FileQuestion");
+    await fillIn("[name=__typename]", "FilesQuestion");
     await fillIn("[name=label]", "Label");
     await fillIn("[name=slug]", "slug");
 

diff --git a/packages/form-builder/translations/de.yaml b/packages/form-builder/translations/de.yaml
@@ -103,7 +103,7 @@ caluma:
         TextareaQuestion: "Text (mehrzeilig)"
         TableQuestion: "Tabelle"
         FormQuestion: "Formular"
-        FileQuestion: "Datei"
+        FilesQuestion: "Dateien"
         StaticQuestion: "Nichtinteraktiver Inhalt"
         DateQuestion: "Datum"
         DynamicMultipleChoiceQuestion: "Dynamische Mehrfachauswahl"

diff --git a/packages/form-builder/translations/en.yaml b/packages/form-builder/translations/en.yaml
@@ -103,7 +103,7 @@ caluma:
         TextareaQuestion: "Textarea"
         TableQuestion: "Table"
         FormQuestion: "Form"
-        FileQuestion: "File"
+        FilesQuestion: "Files"
         StaticQuestion: "Non-interactive content"
         DateQuestion: "Date"
         DynamicMultipleChoiceQuestion: "Dynamic choices"

diff --git a/packages/form-builder/translations/fr.yaml b/packages/form-builder/translations/fr.yaml
@@ -102,7 +102,7 @@ caluma:
         TextareaQuestion: "Texte (plusieurs lignes)"
         TableQuestion: "Tableau"
         FormQuestion: "Formulaire"
-        FileQuestion: "Fichier"
+        FilesQuestion: "Fichiers"
         StaticQuestion: "Contenu non interactif"
         DateQuestion: "Date"
         DynamicMultipleChoiceQuestion: "Sélection multiple dynamique"

diff --git a/packages/form/addon/components/cf-field-value.hbs b/packages/form/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}}
diff --git a/packages/form/addon/components/cf-field-value.js b/packages/form/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");
     }

diff --git a/packages/form/addon/components/cf-field/input.js b/packages/form/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,

diff --git a/packages/form/addon/components/cf-field/input/file.hbs b/packages/form/addon/components/cf-field/input/file.hbs
diff --git a/packages/form/addon/components/cf-field/input/file.js b/packages/form/addon/components/cf-field/input/file.js
diff --git a/packages/form/addon/components/cf-field/input/files.hbs b/packages/form/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>