fix: grid view issues

- maintain column order after column rename
- show column menu in main view and hide from grid view
- keep column order from main view for newly created grid view

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/editColumn.vue

@@ -567,7 +567,7 @@ export default {
           await this.$refs.relation.saveRelation()
         }
 
-        this.$emit('saved', this.newColumn._cn)
+        this.$emit('saved', this.newColumn._cn, this.editColumn ? this.meta.columns[this.columnIndex]._cn : null)
       } catch (e) {
         console.log(e)
       }

packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue

@@ -106,7 +106,7 @@ export default {
         console.log(e)
         this.$toast.error('Failed to update column alias').goAway(3000)
       }
-      this.$emit('saved', this.newColumn._cn)
+      this.$emit('saved', this.newColumn._cn, this.column._cn)
       this.$emit('input', false)
     },
 

packages/nc-gui/components/project/spreadsheet/components/headerCell.vue

@@ -98,7 +98,7 @@
         :column="column"
         :column-index="columnIndex"
         @onRelationDelete="$emit('onRelationDelete')"
-        @saved="$emit('saved')"
+        @saved="(_cn,_cno) => $emit('saved',_cn,_cno)"
         @close="editColumnMenu = false"
       />
     </v-menu>

packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue

@@ -623,6 +623,14 @@ export default {
       this.$store.commit('windows/MutMiniSponsorCard', Date.now())
     },
     openCreateViewDlg(type) {
+      const mainView = this.viewsList.find(v => v.type === 'table' || v.type === 'view')
+      try {
+        this.copyViewRef = this.copyViewRef || {
+          query_params: JSON.stringify({
+            fieldsOrder: JSON.parse(mainView.query_params).fieldsOrder
+          })
+        }
+      } catch {}
       this.createViewType = type
       this.showCreateView = true
     },

packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue

@@ -46,7 +46,7 @@
     <v-spacer />
 
     <v-menu
-      v-if="!isLocked && !isPublicView && _isUIAllowed('edit-column') && !isForm"
+      v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('edit-column') && !isForm"
       offset-y
       open-on-hover
       left
@@ -133,7 +133,7 @@ import EditVirtualColumn from '@/components/project/spreadsheet/components/editV
 export default {
   name: 'VirtualHeaderCell',
   components: { EditVirtualColumn },
-  props: ['column', 'nodes', 'meta', 'isForm', 'isPublicView', 'sqlUi', 'required', 'isLocked'],
+  props: ['column', 'nodes', 'meta', 'isForm', 'isPublicView', 'sqlUi', 'required', 'isLocked', 'isVirtual'],
   data: () => ({
     columnDeleteDialog: false,
     editColumnMenu: false,

packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@@ -223,10 +223,10 @@
           :style="{height:isForm ? '100%' : 'calc(100% - 36px)'}"
           style="overflow: auto;width:100%"
         >
-          <v-skeleton-loader v-if="!dataLoaded && (loadingData || loadingData) || !meta" type="table" />
+          <v-skeleton-loader v-if="!dataLoaded && loadingData || !meta" type="table" />
           <template v-else-if="selectedView && (selectedView.type === 'table' || selectedView.show_as === 'grid' )">
             <xc-grid-view
-              :key="key"
+              :key="key + selectedViewId"
               ref="ncgridview"
               :relation-type="relationType"
               :columns-width.sync="columnsWidth"
@@ -372,7 +372,7 @@
           </template>
           Create Automations or API Webhooks
         </v-tooltip>
-        <v-tooltip bottom>
+        <!--        <v-tooltip bottom>
           <template #activator="{on}">
             <v-list-item
               v-on="on"
@@ -385,7 +385,7 @@
             </v-list-item>
           </template>
           Create / Edit API Webhooks
-        </v-tooltip>
+        </v-tooltip>-->
         <v-list-item
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('validators')"
@@ -519,7 +519,6 @@
         @prev="loadPrev"
       />
     </v-dialog>
-
     <additional-features
       v-model="showAddFeatOverlay"
       :selected-view="selectedView"
@@ -1016,15 +1015,26 @@ export default {
           break
       }
     },
-    async loadMeta(updateShowFields = true, col) {
+    async loadMeta(updateShowFields = true, col, oldCol) {
-      this.loadingMeta = true
+      // update column name in column meta data
+      if (oldCol && col) {
+        this.$set(this.columnsWidth, col, this.columnsWidth[oldCol])
+        this.$set(this.showFields, col, this.showFields[oldCol])
+        const i = (this.fieldsOrder || []).indexOf(oldCol)
+        if (i > -1) {
+          this.$set(this.fieldsOrder, i, col)
+        }
+      }
+
+      // load latest table meta
       const tableMeta = await this.$store.dispatch('meta/ActLoadMeta', {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
         tn: this.table,
         force: true
       })
-      this.loadingMeta = false
+
+      // update column visibility
       if (updateShowFields) {
         try {
           const qp = JSON.parse(tableMeta.query_params)
@@ -1082,8 +1092,8 @@ export default {
       this.selectedExpandRowIndex = row
       this.selectedExpandRowMeta = rowMeta
     },
-    async onNewColCreation(col) {
+    async onNewColCreation(col, oldCol) {
-      await this.loadMeta(true, col)
+      await this.loadMeta(true, col, oldCol)
       this.$nextTick(async() => {
         await this.loadTableData()
         // this.mapFieldsAndShowFields();

packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@@ -37,6 +37,7 @@
               :sql-ui="sqlUi"
               :is-public-view="isPublicView"
               :is-locked="isLocked"
+              :is-virtual="isVirtual"
               @saved="onNewColCreation"
             />
 
@@ -464,10 +465,10 @@ export default {
       this.selected.col = null
       this.selected.row = null
     },
-    onNewColCreation(col) {
+    onNewColCreation(col, oldCol) {
       this.addNewColMenu = false
       this.addNewColModal = false
-      this.$emit('onNewColCreation', col)
+      this.$emit('onNewColCreation', col, oldCol)
     },
     expandRow(...args) {
       this.$emit('expandRow', ...args)