Submissions table improvements (#203)

* Submissions table improvements

* expoert csv fixes

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
formsdev 2023-09-18 18:48:37 +05:30 committed by GitHub
parent 081fc56cbe
commit adcb20b715
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 9 deletions

View File

@ -96,7 +96,7 @@ class FormSubmissionFormatter
// If hide hidden fields
if (!$this->showHiddenFields) {
if (FormLogicPropertyResolver::isHidden($field, $this->idFormData)) {
if (FormLogicPropertyResolver::isHidden($field, $this->idFormData ?? [])) {
continue;
}
}

View File

@ -41,6 +41,10 @@
<loader v-if="!form || isLoading" class="h-6 w-6 text-nt-blue mx-auto"/>
<div v-else>
<div class="m-auto w-64">
<text-input :form="searchForm" name="search" placeholder="Search..." />
</div>
<scroll-shadow
ref="shadows"
class="border max-h-full h-full notion-database-renderer"
@ -50,7 +54,7 @@
<open-table
ref="table"
class="max-h-full"
:data="tableData"
:data="filteredData"
:loading="isLoading"
@resize="dataChanged()"
@deleted="onDeleteRecord()"
@ -63,6 +67,8 @@
<script>
import axios from 'axios'
import Fuse from 'fuse.js'
import Form from 'vform'
import ScrollShadow from '../../../common/ScrollShadow.vue'
import OpenTable from '../../tables/OpenTable.vue'
import clonedeep from "clone-deep";
@ -83,6 +89,9 @@ export default {
properties: [],
removed_properties: [],
displayColumns: {},
searchForm: new Form({
search: ''
})
}
},
mounted() {
@ -112,6 +121,24 @@ export default {
return ''
}
return '/api/open/forms/' + this.form.id + '/submissions/export'
},
filteredData () {
if(!this.tableData) return []
let filteredData = clonedeep(this.tableData)
if (this.searchForm.search === '' || this.searchForm.search === null) {
return filteredData
}
// Fuze search
const fuzeOptions = {
keys: this.form.properties.map((field) => field.id)
}
const fuse = new Fuse(filteredData, fuzeOptions)
return fuse.search(this.searchForm.search).map((res) => {
return res.item
})
}
},
methods: {
@ -178,8 +205,10 @@ export default {
})
},
dataChanged() {
if (this.$refs.shadows) {
this.$refs.shadows.toggleShadow()
this.$refs.shadows.calcDimensions()
}
},
onChangeDisplayColumns() {
window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))

View File

@ -9,7 +9,7 @@
>
<tr class="n-table-row overflow-x-hidden">
<resizable-th v-for="col, index in form.properties" :id="'table-head-cell-' + col.id" :key="col.id"
scope="col" :allow-resize="allowResize" :width="(col.width ? col.width + 'px':'auto')"
scope="col" :allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px':'auto')"
class="n-table-cell p-0 relative"
@resize-width="resizeCol(col, $event)"
>
@ -42,7 +42,7 @@
<tr v-for="row, index in data" :key="index" class="n-table-row" :class="{'first':index===0}">
<td v-for="col, colIndex in form.properties"
:key="col.id"
:style="{width: col.width + 'px'}"
:style="{width: col.cell_width + 'px'}"
class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden"
:class="[{'border-b': index !== data.length - 1, 'border-r': colIndex !== form.properties.length - 1 || hasActions},
colClasses(col)]"
@ -213,10 +213,10 @@ export default {
return [colAlign, colColor, colWrap, colFontWeight]
},
onStructureChange() {
if (this.form.properties) {
if (this.form && this.form.properties) {
this.$nextTick(() => {
this.form.properties.forEach(col => {
if (!col.hasOwnProperty('width')) {
if (!col.hasOwnProperty('cell_width')) {
if (this.allowResize && this.form !== null && document.getElementById('table-head-cell-' + col.id)) {
// Within editor
this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
@ -230,7 +230,7 @@ export default {
if (!this.form) return
const columns = clonedeep(this.form.properties)
const index = this.form.properties.findIndex(c => c.id === col.id)
columns[index].width = width
columns[index].cell_width = width
this.$set(this.form, 'properties', columns)
this.$nextTick(() => {
this.$emit('resize')