Fix submissions download
This commit is contained in:
parent
d0a7c4d2c3
commit
7348605327
|
@ -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)
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue