Submissions table improvements (#203)

* Submissions table improvements

* expoert csv fixes

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

app/Service/Forms/FormSubmissionFormatter.php

@@ -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;
                 }
             }

resources/js/components/open/forms/components/FormSubmissions.vue

@@ -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() {
-      this.$refs.shadows.toggleShadow()
+      if (this.$refs.shadows) {
-      this.$refs.shadows.calcDimensions()
+        this.$refs.shadows.toggleShadow()
+        this.$refs.shadows.calcDimensions()
+      }
     },
     onChangeDisplayColumns() {
       window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))

resources/js/components/open/tables/OpenTable.vue

@@ -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')