From 117ea8d9c1a28be2c190f70c82cfa6dff097584f Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 18 Jan 2024 12:02:09 +0100
Subject: [PATCH] Fix field width bug when editing

---
 .../open/forms/components/FormSubmissions.vue | 33 ++++++++---------
 client/components/open/tables/OpenTable.vue   | 37 +++++++++++--------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/client/components/open/forms/components/FormSubmissions.vue b/client/components/open/forms/components/FormSubmissions.vue
index 08b42db..63ee58b 100644
--- a/client/components/open/forms/components/FormSubmissions.vue
+++ b/client/components/open/forms/components/FormSubmissions.vue
@@ -19,12 +19,12 @@
       </template>
 
       <div class="px-4">
-        <template v-if="properties.length > 0">
+        <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 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 }}
               </p>
@@ -77,10 +77,12 @@
         <open-table
           ref="table"
           class="max-h-full"
+          :columns="properties"
           :data="filteredData"
           :loading="isLoading"
           @resize="dataChanged()"
           @deleted="onDeleteRecord()"
+          @update-columns="onColumnUpdated"
         />
       </scroll-shadow>
     </div>
@@ -148,7 +150,7 @@ export default {
 
       // Fuze search
       const fuzeOptions = {
-        keys: this.form.properties.map((field) => field.id)
+        keys: this.properties.map((field) => field.id)
       }
       const fuse = new Fuse(filteredData, fuzeOptions)
       return fuse.search(this.searchForm.search).map((res) => {
@@ -176,27 +178,21 @@ export default {
       }
 
       // check if form properties already has a created_at column
-      let hasCreatedAt = false
-      this.form.properties.forEach((property) => {
+      this.properties = clonedeep(this.form.properties)
+      if (!this.properties.find((property) => {
         if (property.id === 'created_at') {
-          hasCreatedAt = true
+          return true
         }
-      })
-
-      if (!hasCreatedAt) {
+      }) ) {
         // Add a "created at" column
-        const columns = clonedeep(this.form.properties)
-        columns.push({
+        this.properties.push({
           name: 'Created at',
           id: 'created_at',
           type: 'date',
           width: 140
         })
-        this.form.properties = columns
       }
       this.formInitDone = true
-
-      this.properties = clonedeep(this.form.properties)
       this.removed_properties = (this.form.removed_properties) ? clonedeep(this.form.removed_properties) : []
 
       // Get display columns from local storage
@@ -205,7 +201,7 @@ export default {
         this.displayColumns = JSON.parse(tmpColumns)
         this.onChangeDisplayColumns()
       } else {
-        this.form.properties.forEach((field) => {
+        this.properties.forEach((field) => {
           this.displayColumns[field.id] = true
         })
       }
@@ -237,10 +233,13 @@ export default {
         this.$refs.shadows.calcDimensions()
       }
     },
+    onColumnUpdated(columns) {
+      this.properties = columns
+    },
     onChangeDisplayColumns () {
-      if (process.client)
+      if (!process.client) return
       window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
-      this.form.properties = this.properties.concat(this.removed_properties).filter((field) => {
+      this.properties = clonedeep(this.form.properties).concat(this.removed_properties).filter((field) => {
         return this.displayColumns[field.id] === true
       })
     },
diff --git a/client/components/open/tables/OpenTable.vue b/client/components/open/tables/OpenTable.vue
index fa82743..51c68f5 100644
--- a/client/components/open/tables/OpenTable.vue
+++ b/client/components/open/tables/OpenTable.vue
@@ -8,13 +8,13 @@
            style="will-change: transform; transform: translate3d(0px, 0px, 0px)"
     >
       <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 columns" :id="'table-head-cell-' + col.id" :key="col.id"
                       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)"
         >
           <p
-            :class="{'border-r': index < form.properties.length - 1 || hasActions}"
+            :class="{'border-r': index < columns.length - 1 || hasActions}"
             class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
           >
             {{ col.name }}
@@ -36,16 +36,16 @@
           class="action-row absolute w-full"
           style="will-change: transform; transform: translate3d(0px, 32px, 0px)"
       >
-        <td :colspan="form.properties.length" class="p-1">
+        <td :colspan="columns.length" class="p-1">
           <slot name="actions" />
         </td>
       </tr>
       <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 columns"
             :key="col.id"
             :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},
+            :class="[{'border-b': index !== data.length - 1, 'border-r': colIndex !== columns.length - 1 || hasActions},
                      colClasses(col)]"
         >
           <component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900"
@@ -55,18 +55,18 @@
         <td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
             style="width: 100px"
         >
-          <record-operations :form="form" :structure="form.properties" :rowid="row.id" @deleted="$emit('deleted')" />
+          <record-operations :form="form" :structure="columns" :rowid="row.id" @deleted="$emit('deleted')" />
         </td>
       </tr>
       <tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900">
-        <td :colspan="form.properties.length" class="p-8 w-full">
+        <td :colspan="columns.length" class="p-8 w-full">
           <Loader class="w-4 h-4 mx-auto" />
         </td>
       </tr>
     </tbody>
     <tbody v-else key="body-content" class="n-table-body">
       <tr class="n-table-row loader w-full">
-        <td :colspan="form.properties.length" class="n-table-cell w-full p-8">
+        <td :colspan="columns.length" class="n-table-cell w-full p-8">
           <Loader v-if="loading" class="w-4 h-4 mx-auto" />
           <p v-else class="text-gray-500 text-center">
             No data found.
@@ -92,6 +92,10 @@ import {hash} from "~/lib/utils.js";
 export default {
   components: { ResizableTh, RecordOperations },
   props: {
+    columns: {
+      type: Array,
+      default: () => []
+    },
     data: {
       type: Array,
       default: () => []
@@ -153,7 +157,7 @@ export default {
   },
 
   watch: {
-    'form.properties': {
+    'columns': {
       handler () {
         this.onStructureChange()
       },
@@ -212,11 +216,11 @@ export default {
       return [colAlign, colColor, colWrap, colFontWeight]
     },
     onStructureChange () {
-      if (this.form && this.form.properties) {
+      if (this.columns) {
         this.$nextTick(() => {
-          this.form.properties.forEach(col => {
+          this.columns.forEach(col => {
             if (!col.hasOwnProperty('cell_width')) {
-              if (this.allowResize && this.form !== null && document.getElementById('table-head-cell-' + col.id)) {
+              if (this.allowResize && this.columns.length && document.getElementById('table-head-cell-' + col.id)) {
                 // Within editor
                 this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
               }
@@ -227,10 +231,10 @@ export default {
     },
     resizeCol (col, width) {
       if (!this.form) return
-      const columns = clonedeep(this.form.properties)
-      const index = this.form.properties.findIndex(c => c.id === col.id)
+      const columns = clonedeep(this.columns)
+      const index = this.columns.findIndex(c => c.id === col.id)
       columns[index].cell_width = width
-      this.form.properties = columns
+      this.setColumns(columns)
       this.$nextTick(() => {
         this.$emit('resize')
       })
@@ -263,6 +267,9 @@ export default {
           }
         }
       }
+    },
+    setColumns(val) {
+      this.$emit('update-columns',val)
     }
   }
 }