Better submission table
This commit is contained in:
Julien Nahum
@@ -1,84 +1,89 @@
|
||||
<template>
|
||||
<div
|
||||
class="my-4 w-full mx-auto"
|
||||
<div id="table-page"
|
||||
class="w-full flex flex-col"
|
||||
>
|
||||
<h3 class="font-semibold mb-4 text-xl">
|
||||
Form Submissions
|
||||
</h3>
|
||||
<div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4 pt-4">
|
||||
<h3 class="font-semibold mb-4 text-xl">
|
||||
Form Submissions
|
||||
</h3>
|
||||
|
||||
<!-- Table columns modal -->
|
||||
<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"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template #title>
|
||||
Display columns
|
||||
</template>
|
||||
|
||||
<div class="px-4">
|
||||
<template v-if="form.properties.length > 0">
|
||||
<h4 class="font-bold mb-2">
|
||||
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}">
|
||||
<p class="flex-grow truncate">
|
||||
{{ field.name }}
|
||||
</p>
|
||||
<v-switch v-model="displayColumns[field.id]" class="float-right"
|
||||
@update:model-value="onChangeDisplayColumns"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table columns modal -->
|
||||
<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"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template v-if="removed_properties.length > 0">
|
||||
<h4 class="font-bold mb-2 mt-4">
|
||||
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}">
|
||||
<p class="flex-grow truncate">
|
||||
{{ field.name }}
|
||||
</p>
|
||||
<v-switch v-model="displayColumns[field.id]" class="float-right"
|
||||
@update:model-value="onChangeDisplayColumns"/>
|
||||
</div>
|
||||
</div>
|
||||
<template #title>
|
||||
Display columns
|
||||
</template>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
<Loader v-if="!form" 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..."/>
|
||||
<div class="px-4">
|
||||
<template v-if="form.properties.length > 0">
|
||||
<h4 class="font-bold mb-2">
|
||||
Form Fields
|
||||
</h4>
|
||||
<div class="border border-gray-300 rounded-md">
|
||||
<div v-for="(field,index) in candidatesProperties" :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"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="removed_properties.length > 0">
|
||||
<h4 class="font-bold mb-2 mt-4">
|
||||
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}">
|
||||
<p class="flex-grow truncate">
|
||||
{{ field.name }}
|
||||
</p>
|
||||
<v-switch v-model="displayColumns[field.id]" class="float-right"
|
||||
@update:model-value="onChangeDisplayColumns"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="font-semibold flex gap-4">
|
||||
<p class="float-right text-xs uppercase mb-2">
|
||||
<a
|
||||
href="javascript:void(0);" class="text-gray-500" @click="showColumnsModal=true"
|
||||
>Display columns</a>
|
||||
</p>
|
||||
<p class="text-right cursor-pointer text-xs uppercase">
|
||||
<a
|
||||
@click.prevent="downloadAsCsv" href="#"
|
||||
>Export as CSV</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
<Loader v-if="!form" 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..."/>
|
||||
</div>
|
||||
<div class="font-semibold flex gap-4">
|
||||
<p class="float-right text-xs uppercase mb-2">
|
||||
<a
|
||||
href="javascript:void(0);" class="text-gray-500" @click="showColumnsModal=true"
|
||||
>Display columns</a>
|
||||
</p>
|
||||
<p class="text-right cursor-pointer text-xs uppercase">
|
||||
<a
|
||||
@click.prevent="downloadAsCsv" href="#"
|
||||
>Export as CSV</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 pb-4">
|
||||
<scroll-shadow
|
||||
ref="shadows"
|
||||
class="border max-h-full h-full notion-database-renderer"
|
||||
class="border h-full notion-database-renderer"
|
||||
:shadow-top-offset="0"
|
||||
:hide-scrollbar="true"
|
||||
>
|
||||
@@ -88,6 +93,7 @@
|
||||
:columns="properties"
|
||||
:data="filteredData"
|
||||
:loading="isLoading"
|
||||
:scroll-parent="parentPage"
|
||||
@resize="dataChanged()"
|
||||
@deleted="onDeleteRecord"
|
||||
@updated="(submission)=>onUpdateRecord(submission)"
|
||||
@@ -116,7 +122,7 @@ export default {
|
||||
workingFormStore,
|
||||
recordStore,
|
||||
form: storeToRefs(workingFormStore).content,
|
||||
tableData:storeToRefs(recordStore).getAll,
|
||||
tableData: storeToRefs(recordStore).getAll,
|
||||
runtimeConfig: useRuntimeConfig(),
|
||||
slug: useRoute().params.slug
|
||||
}
|
||||
@@ -132,17 +138,28 @@ export default {
|
||||
displayColumns: {},
|
||||
searchForm: useForm({
|
||||
search: ''
|
||||
})
|
||||
}),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
parentPage() {
|
||||
if (process.server) {
|
||||
return null
|
||||
}
|
||||
return window
|
||||
},
|
||||
candidatesProperties() {
|
||||
return clonedeep(this.form.properties).filter((field) => {
|
||||
return !['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image'].includes(field.type)
|
||||
})
|
||||
},
|
||||
exportUrl() {
|
||||
if (!this.form) {
|
||||
return ''
|
||||
}
|
||||
return this.runtimeConfig.public.apiBase + '/open/forms/' + this.form.id + '/submissions/export'
|
||||
},
|
||||
isLoading(){
|
||||
isLoading() {
|
||||
return this.recordStore.loading
|
||||
},
|
||||
filteredData() {
|
||||
@@ -183,7 +200,7 @@ export default {
|
||||
},
|
||||
initFormStructure() {
|
||||
// check if form properties already has a created_at column
|
||||
this.properties = clonedeep(this.form.properties)
|
||||
this.properties = this.candidatesProperties
|
||||
if (!this.properties.find((property) => {
|
||||
if (property.id === 'created_at') {
|
||||
return true
|
||||
@@ -245,7 +262,7 @@ export default {
|
||||
return this.displayColumns[field.id] === true
|
||||
})
|
||||
},
|
||||
onUpdateRecord(submission){
|
||||
onUpdateRecord(submission) {
|
||||
this.recordStore.save(submission);
|
||||
this.dataChanged()
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user