fix(table): render download links for file questions in tables (#187)

addon/components/cf-field-value.js

@@ -1,34 +1,63 @@
 import Component from "@ember/component";
 import layout from "../templates/components/cf-field-value";
 import { computed } from "@ember/object";
+import { inject as service } from "@ember/service";
+import getFileAnswerInfoQuery from "ember-caluma/gql/queries/get-fileanswer-info";
 
 export default Component.extend({
   layout,
 
+  apollo: service(),
+
   tagName: "span",
 
-  renderValue: computed("field.answer.value", function() {
+  value: computed("field.answer.value", function() {
     const field = this.get("field");
 
     switch (field.question.__typename) {
       case "ChoiceQuestion": {
         const option = field.question.choiceOptions.edges.find(
           edge => edge.node.slug === field.answer.value
         );
-        return option ? option.node.label : field.answer.value;
+        return { label: option ? option.node.label : field.answer.value };
       }
       case "MultipleChoiceQuestion": {
         const answerValue = field.answer.value || [];
         const options = field.question.multipleChoiceOptions.edges.filter(
           edge => answerValue.includes(edge.node.slug)
         );
-        return options && options.length
-          ? options.map(edge => edge.node.label).join(", ")
-          : answerValue.join(", ");
+        return {
+          label:
+            options && options.length
+              ? options.map(edge => edge.node.label).join(", ")
+              : answerValue.join(", ")
+        };
+      }
+      case "FileQuestion": {
+        const answerValue = field.answer.value;
+        return {
+          fileAnswerId: answerValue && field.answer.id,
+          label: answerValue && answerValue.name
+        };
       }
 
       default:
-        return field.answer.value;
+        return {
+          label: field.answer.value
+        };
+    }
+  }),
+  actions: {
+    async download(fileAnswerId) {
+      const { downloadUrl } = await this.apollo.watchQuery(
+        {
+          query: getFileAnswerInfoQuery,
+          variables: { id: fileAnswerId },
+          fetchPolicy: "cache-and-network"
+        },
+        "node.fileValue"
+      );
+      window.open(downloadUrl, "_blank");
     }
-  })
+  }
 });

addon/gql/fragments/field-answer.graphql

@@ -17,6 +17,14 @@ fragment SimpleAnswer on Answer {
   ... on ListAnswer {
     listValue: value
   }
+  ... on FileAnswer {
+    fileValue: value {
+      uploadUrl
+      downloadUrl
+      metadata
+      name
+    }
+  }
 }
 
 fragment FieldAnswer on Answer {
@@ -43,13 +51,4 @@ fragment FieldAnswer on Answer {
       }
     }
   }
-
-  ... on FileAnswer {
-    fileValue: value {
-      uploadUrl
-      downloadUrl
-      metadata
-      name
-    }
-  }
 }

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

@@ -1 +1,7 @@
-{{renderValue}}
+{{#if value.fileAnswerId}}
+  {{#uk-button color="link" on-click=(action "download" value.fileAnswerId)}}
+    {{value.label}}
+  {{/uk-button}}
+{{else}}
+  {{value.label}}
+{{/if}}

translations/de-de.yaml

@@ -31,7 +31,7 @@ caluma:
       greaterThanOrEqualTo: "Die Eingabe in diesem Feld darf nicht kleiner als {gte} sein"
       lessThanOrEqualTo: "Die Eingebae in diesem Feld darf nicht grösser als {lte} sein"
       notAnInteger: "Bitte geben Sie eine ganze Zahl ein"
-      inclusion: "'{value}' ist keine gültiger Wert für dieses Feld"
+      inclusion: "'{value}' ist kein gültiger Wert für dieses Feld"
       uploadFailed: "Beim Hochladen ist ein Fehler aufgetreten."
 
   form-builder: