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 hide hidden fields
if (!$this->showHiddenFields) { if (!$this->showHiddenFields) {
if (FormLogicPropertyResolver::isHidden($field, $this->idFormData)) { if (FormLogicPropertyResolver::isHidden($field, $this->idFormData ?? [])) {
continue; continue;
} }
} }

View File

@ -41,6 +41,10 @@
<loader v-if="!form || isLoading" class="h-6 w-6 text-nt-blue mx-auto"/> <loader v-if="!form || isLoading" class="h-6 w-6 text-nt-blue mx-auto"/>
<div v-else> <div v-else>
<div class="m-auto w-64">
<text-input :form="searchForm" name="search" placeholder="Search..." />
</div>
<scroll-shadow <scroll-shadow
ref="shadows" ref="shadows"
class="border max-h-full h-full notion-database-renderer" class="border max-h-full h-full notion-database-renderer"
@ -50,7 +54,7 @@
<open-table <open-table
ref="table" ref="table"
class="max-h-full" class="max-h-full"
:data="tableData" :data="filteredData"
:loading="isLoading" :loading="isLoading"
@resize="dataChanged()" @resize="dataChanged()"
@deleted="onDeleteRecord()" @deleted="onDeleteRecord()"
@ -63,6 +67,8 @@
<script> <script>
import axios from 'axios' import axios from 'axios'
import Fuse from 'fuse.js'
import Form from 'vform'
import ScrollShadow from '../../../common/ScrollShadow.vue' import ScrollShadow from '../../../common/ScrollShadow.vue'
import OpenTable from '../../tables/OpenTable.vue' import OpenTable from '../../tables/OpenTable.vue'
import clonedeep from "clone-deep"; import clonedeep from "clone-deep";
@ -83,6 +89,9 @@ export default {
properties: [], properties: [],
removed_properties: [], removed_properties: [],
displayColumns: {}, displayColumns: {},
searchForm: new Form({
search: ''
})
} }
}, },
mounted() { mounted() {
@ -112,6 +121,24 @@ export default {
return '' return ''
} }
return '/api/open/forms/' + this.form.id + '/submissions/export' 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: { methods: {
@ -178,8 +205,10 @@ export default {
}) })
}, },
dataChanged() { dataChanged() {
if (this.$refs.shadows) {
this.$refs.shadows.toggleShadow() this.$refs.shadows.toggleShadow()
this.$refs.shadows.calcDimensions() this.$refs.shadows.calcDimensions()
}
}, },
onChangeDisplayColumns() { onChangeDisplayColumns() {
window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns)) 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"> <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" <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" class="n-table-cell p-0 relative"
@resize-width="resizeCol(col, $event)" @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}"> <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" <td v-for="col, colIndex in form.properties"
:key="col.id" :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="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}, :class="[{'border-b': index !== data.length - 1, 'border-r': colIndex !== form.properties.length - 1 || hasActions},
colClasses(col)]" colClasses(col)]"
@ -213,10 +213,10 @@ export default {
return [colAlign, colColor, colWrap, colFontWeight] return [colAlign, colColor, colWrap, colFontWeight]
}, },
onStructureChange() { onStructureChange() {
if (this.form.properties) { if (this.form && this.form.properties) {
this.$nextTick(() => { this.$nextTick(() => {
this.form.properties.forEach(col => { 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)) { if (this.allowResize && this.form !== null && document.getElementById('table-head-cell-' + col.id)) {
// Within editor // Within editor
this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth) this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
@ -230,7 +230,7 @@ export default {
if (!this.form) return if (!this.form) return
const columns = clonedeep(this.form.properties) const columns = clonedeep(this.form.properties)
const index = this.form.properties.findIndex(c => c.id === col.id) 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.$set(this.form, 'properties', columns)
this.$nextTick(() => { this.$nextTick(() => {
this.$emit('resize') this.$emit('resize')