From 72e15a5a2589cc6f90ab5523c4d68114886a5d02 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 12 Apr 2022 23:05:52 +0530
Subject: [PATCH] fix: hide hidden columns from shared gridview field list

re #1654

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../project/spreadsheet/mixins/spreadsheet.js | 34 +---------------
 .../project/spreadsheet/public/xcTable.vue    |  3 ++
 .../project/spreadsheet/views/formView.vue    | 39 +++++++++----------
 .../project/spreadsheet/views/galleryView.vue |  4 +-
 .../project/spreadsheet/views/kanbanView.vue  |  6 +--
 .../project/spreadsheet/views/xcGridView.vue  | 16 ++++----
 6 files changed, 37 insertions(+), 65 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
index 06e8d6ac6b..232e44db7c 100644
--- a/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
+++ b/packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
@@ -108,25 +108,12 @@ export default {
       }
 
       {
-        const _ref = {}
         columns.forEach((c) => {
-          // if (c.virtual && c.lk) {
-          //   c.alias = `${c.lk._lcn} (from ${c.lk._ltn})`
-          // } else {
           c.alias = c.title
-          // }
-          if (c.alias in _ref) {
-            c.alias += _ref[c.alias]++
-          } else {
-            _ref[c.alias] = 1
-          }
         })
       }
       return columns
     },
-    // allColumnsNames() {
-    //   return this.allColumns && this.allColumns.length ? this.allColumns.reduce((a, c) => [...a, c.column_name, c.title], []) : []
-    // },
     availableColumns() {
       let columns = []
 
@@ -140,32 +127,15 @@ export default {
         columns = filterOutSystemColumns(this.meta.columns)
       }
 
-      if (this.meta && this.meta.v) {
-        columns = [...columns, ...this.meta.v.map(v => ({
-          ...v,
-          virtual: 1
-        }))]
-      }
-
       {
-        const _ref = {}
         columns.forEach((c) => {
-          // if (c.virtual && c.lk) {
-          //   c.alias = `${c.lk._lcn} (from ${c.lk._ltn})`
-          // } else {
           c.alias = c.title
-          // }
-          if (c.alias in _ref) {
-            c.alias += _ref[c.alias]++
-          } else {
-            _ref[c.alias] = 1
-          }
         })
       }
       if (this.fieldsOrder.length) {
         return [...columns].sort((c1, c2) => {
-          const i1 = this.fieldsOrder.indexOf(c1.alias)
-          const i2 = this.fieldsOrder.indexOf(c2.alias)
+          const i1 = this.fieldsOrder.indexOf(c1.title)
+          const i2 = this.fieldsOrder.indexOf(c2.title)
           return (i1 === -1 ? Infinity : i1) - (i2 === -1 ? Infinity : i2)
         })
       }
diff --git a/packages/nc-gui/components/project/spreadsheet/public/xcTable.vue b/packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
index fdbdd2ed5b..0b05d4eff0 100644
--- a/packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
@@ -29,6 +29,7 @@
             :fields-order.sync="fieldsOrder"
             is-public
             :meta="meta"
+            :show-system-fields="showSystemFields"
           />
 
           <sort-list-menu
@@ -393,7 +394,9 @@ export default {
           }
         }))
         this.meta = this.viewMeta.model
+        this.meta.columns = this.meta.columns.filter(c => c.show)
         this.metas = this.viewMeta.relatedMetas
+        this.showSystemFields = this.viewMeta.show_system_fields
 
         this.sorts = this.viewMeta.sorts
         this.viewName = this.viewMeta.title
diff --git a/packages/nc-gui/components/project/spreadsheet/views/formView.vue b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
index a3b18c2b85..21bbe64419 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/formView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
@@ -56,7 +56,7 @@
             >
               <v-card
                 v-for="(col) in hiddenColumns"
-                :key="col.alias"
+                :key="col.title"
                 class="pa-2 my-2 item pointer elevation-0"
                 @mousedown="moved=false"
                 @mousemove="moved=false"
@@ -178,13 +178,13 @@
               >
                 <div
                   v-for="(col,i) in columns"
-                  :key="col.alias"
+                  :key="col.title"
                   class="nc-field-wrapper item px-4 my-3 pointer"
                   :class="{'nc-editable':isEditable , 'active-row': isActiveRow(col) , 'py-4': !isActiveRow(col) , 'pb-4':isActiveRow(col)}"
                 >
                   <div
                     v-click-outside="() => onClickOutside(col)"
-                    @click="activeRow= col.alias"
+                    @click="activeRow= col.title"
                   >
                     <template
                       v-if="_isUIAllowed('editFormView')"
@@ -195,10 +195,10 @@
                     </template>
 
                     <div
-                      v-if="localParams.fields && localParams.fields[col.alias]"
+                      v-if="localParams.fields && localParams.fields[col.title]"
                       :class="{
                         'active-row' : active === col.title,
-                        required: isRequired(col, localState, localParams.fields[col.alias].required)
+                        required: isRequired(col, localState, localParams.fields[col.title].required)
                       }"
                     >
                       <div class="nc-field-editables" :class="{'nc-show' : isActiveRow(col)}">
@@ -256,7 +256,7 @@
                           :nodes="nodes"
                           :is-form="true"
                           :meta="meta"
-                          :required="isRequired(col, localState, localParams.fields[col.alias].required)"
+                          :required="isRequired(col, localState, localParams.fields[col.title].required)"
                         />
                         <header-cell
                           v-else
@@ -265,7 +265,7 @@
                           :value="col.label || col.title"
                           :column="col"
                           :sql-ui="sqlUi"
-                          :required="isRequired(col, localState, localParams.fields[col.alias].required)"
+                          :required="isRequired(col, localState, localParams.fields[col.title].required)"
                         />
 
                       </label>
@@ -287,11 +287,11 @@
                           :is-form="true"
                           :hint="col.description"
                           :required="col.required"
-                          @update:localState="state => $set(virtual,col.alias, state)"
+                          @update:localState="state => $set(virtual,col.title, state)"
                           @updateCol="updateCol"
                         />
                         <div
-                          v-if="$v.virtual && $v.virtual.$dirty && $v.virtual[col.alias] && (!$v.virtual[col.alias].required || !$v.virtual[col.alias].minLength)"
+                          v-if="$v.virtual && $v.virtual.$dirty && $v.virtual[col.title] && (!$v.virtual[col.title].required || !$v.virtual[col.alias].minLength)"
                           class="error--text caption"
                         >
                           Field is required.
@@ -512,18 +512,18 @@ export default {
       virtual: {}
     }
     for (const column of this.columns) {
-      if (!this.localParams || !this.localParams.fields || !this.localParams.fields[column.alias]) {
+      if (!this.localParams || !this.localParams.fields || !this.localParams.fields[column.title]) {
         continue
       }
-      if (!column.virtual && (((column.rqd || column.notnull) && !column.cdf) || (column.pk && !(column.ai || column.default)) || this.localParams.fields[column.alias].required)) {
+      if (!column.virtual && (((column.rqd || column.notnull) && !column.cdf) || (column.pk && !(column.ai || column.default)) || this.localParams.fields[column.title].required)) {
         obj.localState[column.title] = { required }
       } else if (column.bt) {
         const col = this.meta.columns.find(c => c.column_name === column.bt.column_name)
-        if ((col.rqd && !col.default) || this.localParams.fields[column.alias].required) {
+        if ((col.rqd && !col.default) || this.localParams.fields[column.title].required) {
           obj.localState[col.title] = { required }
         }
-      } else if (column.virtual && this.localParams.fields[column.alias].required && (column.mm || column.hm)) {
-        obj.virtual[column.alias] = {
+      } else if (column.virtual && this.localParams.fields[column.title].required && (column.mm || column.hm)) {
+        obj.virtual[column.title] = {
           minLength: minLength(1),
           required
         }
@@ -589,7 +589,7 @@ export default {
   watch: {
     'meta.columns'() {
       this.meta.columns.forEach((c) => {
-        this.localParams.fields[c.alias] = this.localParams.fields[c.alias] || {}
+        this.localParams.fields[c.title] = this.localParams.fields[c.title] || {}
       })
     },
     submitted(val) {
@@ -616,7 +616,7 @@ export default {
       fields: {}
     }, this.localParams)
     this.availableColumns.forEach((c) => {
-      localParams.fields[c.alias] = localParams.fields[c.alias] || {}
+      localParams.fields[c.title] = localParams.fields[c.title] || {}
     })
     this.localParams = localParams
     // this.columns = [...this.availableColumns]
@@ -706,7 +706,6 @@ export default {
       const meta = this.$store.state.meta.metas[this.meta.id]
       this.fields = meta.columns.map(c => ({
         ...c,
-        alias: c.title,
         fk_column_id: c.id,
         fk_view_id: this.viewId,
         ...(fieldById[c.id] ? fieldById[c.id] : {}),
@@ -778,7 +777,7 @@ export default {
         (column.pk && !column.ai && !column.cdf)
       if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
         const col = this.meta.columns.find(c => c.id === column.colOptions.fk_child_column_id)
-        if ((col.rqd && !col.default) || this.localParams.fields[column.alias].required) {
+        if ((col.rqd && !col.default) || this.localParams.fields[column.title].required) {
           isRequired = true
         }
       }
@@ -798,10 +797,10 @@ export default {
       this.$set(this.localState, column, id)
     },
     isActiveRow(col) {
-      return this.activeRow === col.alias
+      return this.activeRow === col.title
     },
     onClickOutside(col) {
-      this.activeRow = this.activeRow === col.alias ? null : this.activeRow
+      this.activeRow = this.activeRow === col.title ? null : this.activeRow
     },
     handleMouseUp(col) {
       if (!this.moved) {
diff --git a/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue b/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
index 7015f803aa..ae1075569e 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
@@ -43,8 +43,8 @@
                 <v-row class="">
                   <v-col
                     v-for="(col) in fields"
-                    v-show="showFields[col.alias|| col.title]"
-                    :key="col.alias || col.title"
+                    v-show="showFields[ col.title]"
+                    :key="col.title"
                     class="col-12 mt-1 mb-2 "
                   >
                     <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text">
diff --git a/packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue b/packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue
index 3b95bc9442..e427a8ee65 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue
@@ -21,8 +21,8 @@
                 <v-row class="">
                   <v-col
                     v-for="(col) in fields"
-                    v-show="showFields[col.alias|| col.title]"
-                    :key="col.alias || col.title"
+                    v-show="showFields[col.title]"
+                    :key="col.title"
                     class="kanban-col col-12"
                   >
                     <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text">
@@ -137,7 +137,7 @@ export default {
       ) || []
     },
     groupingFieldColumn() {
-      return this.fields.filter(o => o.alias === this.groupingField)[0]
+      return this.fields.filter(f => f.title === this.groupingField)[0]
     }
   },
   mounted() {
diff --git a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
index 7ad448d35a..60dc7d47cf 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
@@ -34,14 +34,14 @@
           </th>
           <th
             v-for="(col) in availableColumns"
-            v-show="showFields[col.alias]"
-            :key="col.alias"
+            v-show="showFields[col.title]"
+            :key="col.title"
             v-xc-ver-resize
             class="grey-border caption font-wight-regular  nc-grid-header-cell"
             :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
-            :data-col="col.alias"
+            :data-col="col.title"
             @xcresize="onresize(col.id,$event), log('xcresize')"
-            @xcresizing="onXcResizing(col.alias,$event)"
+            @xcresizing="onXcResizing(col.title,$event)"
             @xcresized="resizingCol = null"
           >
             <!--            :style="columnsWidth[col.title]  ? `min-width:${columnsWidth[col.title]}; max-width:${columnsWidth[col.title]}` : ''"
@@ -170,8 +170,8 @@
           </td>
           <td
             v-for="(columnObj,col) in availableColumns"
-            v-show="showFields[columnObj.alias]"
-            :key="row + columnObj.alias"
+            v-show="showFields[columnObj.title]"
+            :key="row + columnObj.title"
             class="cell pointer nc-grid-cell"
             :class="{
               'active' :!isPublicView && selected.col === col && selected.row === row && isEditable ,
@@ -179,7 +179,7 @@
               'text-center': isCentrallyAligned(columnObj),
               'required': isRequired(columnObj,rowObj)
             }"
-            :data-col="columnObj.alias"
+            :data-col="columnObj.title"
             @dblclick="makeEditable(col,row,columnObj.ai,rowMeta)"
             @click="makeSelected(col,row);"
             @contextmenu="showRowContextMenu($event,rowObj,rowMeta,row,col, columnObj)"
@@ -392,7 +392,7 @@ export default {
         const val = (this.gridViewCols && this.gridViewCols[c.id] && this.gridViewCols[c.id].width) || '200px'
 
         if (val && c.key !== this.resizingCol) {
-          style += `[data-col="${c.alias}"]{min-width:${val};max-width:${val};width: ${val};}`
+          style += `[data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`
         }
       }