From 7348605327441e46ee5ef0c7ba16f65df39629b9 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Tue, 30 Jan 2024 09:42:33 +0100
Subject: [PATCH] Fix submissions download

---
 .../open/forms/components/FormSubmissions.vue | 74 +++++++++++--------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/client/components/open/forms/components/FormSubmissions.vue b/client/components/open/forms/components/FormSubmissions.vue
index 63ee58b..9e545e9 100644
--- a/client/components/open/forms/components/FormSubmissions.vue
+++ b/client/components/open/forms/components/FormSubmissions.vue
@@ -10,8 +10,12 @@
     <modal :show="showColumnsModal" @close="showColumnsModal=false">
       <template #icon>
         <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M16 5H8C4.13401 5 1 8.13401 1 12C1 15.866 4.13401 19 8 19H16C19.866 19 23 15.866 23 12C23 8.13401 19.866 5 16 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-          <path d="M8 15C9.65685 15 11 13.6569 11 12C11 10.3431 9.65685 9 8 9C6.34315 9 5 10.3431 5 12C5 13.6569 6.34315 15 8 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          <path
+            d="M16 5H8C4.13401 5 1 8.13401 1 12C1 15.866 4.13401 19 8 19H16C19.866 19 23 15.866 23 12C23 8.13401 19.866 5 16 5Z"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path
+            d="M8 15C9.65685 15 11 13.6569 11 12C11 10.3431 9.65685 9 8 9C6.34315 9 5 10.3431 5 12C5 13.6569 6.34315 15 8 15Z"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       </template>
       <template #title>
@@ -24,11 +28,13 @@
             Form Fields
           </h4>
           <div class="border border-gray-300 rounded-md">
-            <div v-for="(field,index) in form.properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
+            <div v-for="(field,index) in form.properties" :key="field.id" class="p-2 border-gray-300 flex items-center"
+                 :class="{'border-t':index!=0}">
               <p class="flex-grow truncate">
-              {{ field.name }}
+                {{ field.name }}
               </p>
-              <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
+              <v-switch v-model="displayColumns[field.id]" class="float-right"
+                        @update:model-value="onChangeDisplayColumns"/>
             </div>
           </div>
         </template>
@@ -37,22 +43,24 @@
             Removed Fields
           </h4>
           <div class="border border-gray-300 rounded-md">
-            <div v-for="(field,index) in removed_properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
+            <div v-for="(field,index) in removed_properties" :key="field.id"
+                 class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
               <p class="flex-grow truncate">
                 {{ field.name }}
               </p>
-              <v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
+              <v-switch v-model="displayColumns[field.id]" class="float-right"
+                        @update:model-value="onChangeDisplayColumns"/>
             </div>
           </div>
         </template>
       </div>
     </modal>
 
-    <Loader v-if="!form || !formInitDone" class="h-6 w-6 text-nt-blue mx-auto" />
+    <Loader v-if="!form || !formInitDone" class="h-6 w-6 text-nt-blue mx-auto"/>
     <div v-else>
       <div v-if="form && tableData.length > 0" class="flex flex-wrap items-end">
         <div class="flex-grow">
-          <text-input class="w-64" :form="searchForm" name="search" placeholder="Search..." />
+          <text-input class="w-64" :form="searchForm" name="search" placeholder="Search..."/>
         </div>
         <div class="font-semibold flex gap-4">
           <p class="float-right text-xs uppercase mb-2">
@@ -94,13 +102,14 @@ import Fuse from 'fuse.js'
 import clonedeep from 'clone-deep'
 import VSwitch from '../../../forms/components/VSwitch.vue'
 import OpenTable from '../../tables/OpenTable.vue'
+import {now} from "@vueuse/core";
 
 export default {
   name: 'FormSubmissions',
-  components: { OpenTable, VSwitch },
+  components: {OpenTable, VSwitch},
   props: {},
 
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
     return {
       workingFormStore,
@@ -108,7 +117,7 @@ export default {
     }
   },
 
-  data () {
+  data() {
     return {
       formInitDone: false,
       isLoading: false,
@@ -126,20 +135,20 @@ export default {
   },
   computed: {
     form: {
-      get () {
+      get() {
         return this.workingFormStore.content
       },
-      set (value) {
+      set(value) {
         this.workingFormStore.set(value)
       }
     },
-    exportUrl () {
+    exportUrl() {
       if (!this.form) {
         return ''
       }
       return this.runtimeConfig.public.apiBase + '/open/forms/' + this.form.id + '/submissions/export'
     },
-    filteredData () {
+    filteredData() {
       if (!this.tableData) return []
 
       const filteredData = clonedeep(this.tableData)
@@ -159,7 +168,7 @@ export default {
     }
   },
   watch: {
-    'form.id' () {
+    'form.id'() {
       if (this.form === null) {
         return
       }
@@ -167,12 +176,12 @@ export default {
       this.getSubmissionsData()
     }
   },
-  mounted () {
+  mounted() {
     this.initFormStructure()
     this.getSubmissionsData()
   },
   methods: {
-    initFormStructure () {
+    initFormStructure() {
       if (!this.form || !this.form.properties || this.formInitDone) {
         return
       }
@@ -183,7 +192,7 @@ export default {
         if (property.id === 'created_at') {
           return true
         }
-      }) ) {
+      })) {
         // Add a "created at" column
         this.properties.push({
           name: 'Created at',
@@ -206,7 +215,7 @@ export default {
         })
       }
     },
-    getSubmissionsData () {
+    getSubmissionsData() {
       if (!this.form || this.fullyLoaded) {
         return
       }
@@ -227,7 +236,7 @@ export default {
         this.isLoading = false
       })
     },
-    dataChanged () {
+    dataChanged() {
       if (this.$refs.shadows) {
         this.$refs.shadows.toggleShadow()
         this.$refs.shadows.calcDimensions()
@@ -236,24 +245,31 @@ export default {
     onColumnUpdated(columns) {
       this.properties = columns
     },
-    onChangeDisplayColumns () {
+    onChangeDisplayColumns() {
       if (!process.client) return
       window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
       this.properties = clonedeep(this.form.properties).concat(this.removed_properties).filter((field) => {
         return this.displayColumns[field.id] === true
       })
     },
-    onDeleteRecord () {
+    onDeleteRecord() {
       this.fullyLoaded = false
       this.tableData = []
       this.getSubmissionsData()
     },
     downloadAsCsv() {
-      opnFetch(this.exportUrl, { responseType: "blob" })
-        .then( blob => {
-          var file = window.URL.createObjectURL(blob);
-          window.location.assign(file);
-        }).catch((error)=>{
+      opnFetch(this.exportUrl, {responseType: "blob"})
+        .then(blob => {
+          const filename = `${this.form.slug}-${Date.now()}-submissions.csv`
+          let a = document.createElement("a")
+          document.body.appendChild(a)
+          a.style = "display: none"
+          const url = window.URL.createObjectURL(blob)
+          a.href = url
+          a.download = filename
+          a.click()
+          window.URL.revokeObjectURL(url)
+        }).catch((error) => {
         console.error(error)
       })
     }