From 043fe292196632c8c666f63d36fe3f79984a00a8 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 18 Aug 2022 19:49:39 +0530
Subject: [PATCH] fix/Fixed table column toggle while table creation

---
 .../nc-gui-v2/components/dlg/TableCreate.vue  |  8 ++---
 packages/nc-gui-v2/composables/useTable.ts    | 29 ++++++++++++-------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index d1963b552d..dbc3841767 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -106,20 +106,20 @@ onMounted(() => {
                   <template #title>
                     <span>ID column is required, you can rename this later if required.</span>
                   </template>
-                  <a-checkbox v-model:checked="table.columns.id" disabled>ID</a-checkbox>
+                  <a-checkbox v-model:checked="table.columnsToggleInfo.id" disabled>ID</a-checkbox>
                 </a-tooltip>
               </a-col>
 
               <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
+                <a-checkbox v-model:checked="table.columnsToggleInfo.title"> title </a-checkbox>
               </a-col>
 
               <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.created_at"> created_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columnsToggleInfo.created_at"> created_at </a-checkbox>
               </a-col>
 
               <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.updated_at"> updated_at </a-checkbox>
+                <a-checkbox v-model:checked="table.columnsToggleInfo.updated_at"> updated_at </a-checkbox>
               </a-col>
             </a-row>
           </div>
diff --git a/packages/nc-gui-v2/composables/useTable.ts b/packages/nc-gui-v2/composables/useTable.ts
index 63ba8a2ce6..a52802a8e8 100644
--- a/packages/nc-gui-v2/composables/useTable.ts
+++ b/packages/nc-gui-v2/composables/useTable.ts
@@ -7,10 +7,16 @@ import { extractSdkResponseErrorMsg } from '~/utils'
 import { useNuxtApp } from '#app'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
-  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
+  const table = reactive<{ title: string; table_name: string; columns: string[]; columnsToggleInfo: Record<string, boolean> }>({
     title: '',
     table_name: '',
     columns: ['id', 'title', 'created_at', 'updated_at'],
+    columnsToggleInfo: {
+      id: true,
+      title: true,
+      created_at: true,
+      updated_at: true,
+    },
   })
 
   const { $e, $api } = useNuxtApp()
@@ -21,15 +27,18 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
 
   const createTable = async () => {
     if (!sqlUi?.value) return
-    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
-      if (col.column_name === 'id' && table.columns.includes('id_ag')) {
-        Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
-        col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
-        col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
-        return true
-      }
-      return table.columns.includes(col.column_name)
-    })
+    const columns = sqlUi?.value
+      ?.getNewTableColumns()
+      .filter((col) => {
+        if (col.column_name === 'id' && table.columns.includes('id_ag')) {
+          Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
+          col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
+          col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
+          return true
+        }
+        return table.columns.includes(col.column_name)
+      })
+      .filter((col) => table.columnsToggleInfo[col.column_name])
 
     const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
       ...table,