Skip to content

Commit 7348605

Browse files
JhumanJJhumanJ
committed
Fix submissions download
1 parent d0a7c4d commit 7348605

File tree

1 file changed

+45
-29
lines changed

1 file changed

+45
-29
lines changed

‎client/components/open/forms/components/FormSubmissions.vue

+45-29
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@
1010
<modal :show="showColumnsModal" @close="showColumnsModal=false">
1111
<template #icon>
1212
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
13-
<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" />
14-
<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" />
13+
<path
14+
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"
15+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
16+
<path
17+
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"
18+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1519
</svg>
1620
</template>
1721
<template #title>
@@ -24,11 +28,13 @@
2428
Form Fields
2529
</h4>
2630
<div class="border border-gray-300 rounded-md">
27-
<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}">
31+
<div v-for="(field,index) in form.properties" :key="field.id" class="p-2 border-gray-300 flex items-center"
32+
:class="{'border-t':index!=0}">
2833
<p class="flex-grow truncate">
29-
{{ field.name }}
34+
{{ field.name }}
3035
</p>
31-
<v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
36+
<v-switch v-model="displayColumns[field.id]" class="float-right"
37+
@update:model-value="onChangeDisplayColumns"/>
3238
</div>
3339
</div>
3440
</template>
@@ -37,22 +43,24 @@
3743
Removed Fields
3844
</h4>
3945
<div class="border border-gray-300 rounded-md">
40-
<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}">
46+
<div v-for="(field,index) in removed_properties" :key="field.id"
47+
class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
4148
<p class="flex-grow truncate">
4249
{{ field.name }}
4350
</p>
44-
<v-switch v-model="displayColumns[field.id]" class="float-right" @update:model-value="onChangeDisplayColumns" />
51+
<v-switch v-model="displayColumns[field.id]" class="float-right"
52+
@update:model-value="onChangeDisplayColumns"/>
4553
</div>
4654
</div>
4755
</template>
4856
</div>
4957
</modal>
5058

51-
<Loader v-if="!form || !formInitDone" class="h-6 w-6 text-nt-blue mx-auto" />
59+
<Loader v-if="!form || !formInitDone" class="h-6 w-6 text-nt-blue mx-auto"/>
5260
<div v-else>
5361
<div v-if="form && tableData.length > 0" class="flex flex-wrap items-end">
5462
<div class="flex-grow">
55-
<text-input class="w-64" :form="searchForm" name="search" placeholder="Search..." />
63+
<text-input class="w-64" :form="searchForm" name="search" placeholder="Search..."/>
5664
</div>
5765
<div class="font-semibold flex gap-4">
5866
<p class="float-right text-xs uppercase mb-2">
@@ -94,21 +102,22 @@ import Fuse from 'fuse.js'
94102
import clonedeep from 'clone-deep'
95103
import VSwitch from '../../../forms/components/VSwitch.vue'
96104
import OpenTable from '../../tables/OpenTable.vue'
105+
import {now} from "@vueuse/core";
97106
98107
export default {
99108
name: 'FormSubmissions',
100-
components: { OpenTable, VSwitch },
109+
components: {OpenTable, VSwitch},
101110
props: {},
102111
103-
setup () {
112+
setup() {
104113
const workingFormStore = useWorkingFormStore()
105114
return {
106115
workingFormStore,
107116
runtimeConfig: useRuntimeConfig()
108117
}
109118
},
110119
111-
data () {
120+
data() {
112121
return {
113122
formInitDone: false,
114123
isLoading: false,
@@ -126,20 +135,20 @@ export default {
126135
},
127136
computed: {
128137
form: {
129-
get () {
138+
get() {
130139
return this.workingFormStore.content
131140
},
132-
set (value) {
141+
set(value) {
133142
this.workingFormStore.set(value)
134143
}
135144
},
136-
exportUrl () {
145+
exportUrl() {
137146
if (!this.form) {
138147
return ''
139148
}
140149
return this.runtimeConfig.public.apiBase + '/open/forms/' + this.form.id + '/submissions/export'
141150
},
142-
filteredData () {
151+
filteredData() {
143152
if (!this.tableData) return []
144153
145154
const filteredData = clonedeep(this.tableData)
@@ -159,20 +168,20 @@ export default {
159168
}
160169
},
161170
watch: {
162-
'form.id' () {
171+
'form.id'() {
163172
if (this.form === null) {
164173
return
165174
}
166175
this.initFormStructure()
167176
this.getSubmissionsData()
168177
}
169178
},
170-
mounted () {
179+
mounted() {
171180
this.initFormStructure()
172181
this.getSubmissionsData()
173182
},
174183
methods: {
175-
initFormStructure () {
184+
initFormStructure() {
176185
if (!this.form || !this.form.properties || this.formInitDone) {
177186
return
178187
}
@@ -183,7 +192,7 @@ export default {
183192
if (property.id === 'created_at') {
184193
return true
185194
}
186-
}) ) {
195+
})) {
187196
// Add a "created at" column
188197
this.properties.push({
189198
name: 'Created at',
@@ -206,7 +215,7 @@ export default {
206215
})
207216
}
208217
},
209-
getSubmissionsData () {
218+
getSubmissionsData() {
210219
if (!this.form || this.fullyLoaded) {
211220
return
212221
}
@@ -227,7 +236,7 @@ export default {
227236
this.isLoading = false
228237
})
229238
},
230-
dataChanged () {
239+
dataChanged() {
231240
if (this.$refs.shadows) {
232241
this.$refs.shadows.toggleShadow()
233242
this.$refs.shadows.calcDimensions()
@@ -236,24 +245,31 @@ export default {
236245
onColumnUpdated(columns) {
237246
this.properties = columns
238247
},
239-
onChangeDisplayColumns () {
248+
onChangeDisplayColumns() {
240249
if (!process.client) return
241250
window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
242251
this.properties = clonedeep(this.form.properties).concat(this.removed_properties).filter((field) => {
243252
return this.displayColumns[field.id] === true
244253
})
245254
},
246-
onDeleteRecord () {
255+
onDeleteRecord() {
247256
this.fullyLoaded = false
248257
this.tableData = []
249258
this.getSubmissionsData()
250259
},
251260
downloadAsCsv() {
252-
opnFetch(this.exportUrl, { responseType: "blob" })
253-
.then( blob => {
254-
var file = window.URL.createObjectURL(blob);
255-
window.location.assign(file);
256-
}).catch((error)=>{
261+
opnFetch(this.exportUrl, {responseType: "blob"})
262+
.then(blob => {
263+
const filename = `${this.form.slug}-${Date.now()}-submissions.csv`
264+
let a = document.createElement("a")
265+
document.body.appendChild(a)
266+
a.style = "display: none"
267+
const url = window.URL.createObjectURL(blob)
268+
a.href = url
269+
a.download = filename
270+
a.click()
271+
window.URL.revokeObjectURL(url)
272+
}).catch((error) => {
257273
console.error(error)
258274
})
259275
}

0 commit comments

Comments
 (0)