Merge pull request #3237 from nocodb/fix/integrated-table-column-toggle-while-table-creation

Fixed table column toggle while table creation

packages/nc-gui-v2/components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']

packages/nc-gui-v2/components/dlg/TableCreate.vue

@@ -45,6 +45,11 @@ const validators = computed(() => {
 })
 const { validateInfos } = useForm(table, validators)
 
+const systemColumnsCheckboxInfo = SYSTEM_COLUMNS.map((c, index) => ({
+  value: c,
+  disabled: index === 0,
+}))
+
 onMounted(() => {
   generateUniqueTitle()
 
@@ -78,8 +83,8 @@ onMounted(() => {
           />
         </a-form-item>
 
-        <div class="flex justify-end">
-          <div class="pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
+        <div class="flex justify-end items-center">
+          <div class="pointer flex flex-row items-center gap-x-1" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
             {{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more
 
             <MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
@@ -95,32 +100,29 @@ onMounted(() => {
           </a-form-item>
 
           <div>
-            <div class="mb-5">
+            <div class="mb-1">
               <!-- Add Default Columns -->
               {{ $t('msg.info.addDefaultColumns') }}
             </div>
 
             <a-row>
-              <a-col :span="6">
-                <a-tooltip placement="top">
-                  <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-tooltip>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.title"> title </a-checkbox>
-              </a-col>
-
-              <a-col :span="6">
-                <a-checkbox v-model:checked="table.columns.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-col>
+              <a-checkbox-group
+                v-model:value="table.columns"
+                :options="systemColumnsCheckboxInfo"
+                class="!flex flex-row justify-between w-full"
+              >
+                <template #label="{ value }">
+                  <a-tooltip v-if="value === 'id'" placement="top" class="!flex">
+                    <template #title>
+                      <span>ID column is required, you can rename this later if required.</span>
+                    </template>
+                    ID
+                  </a-tooltip>
+                  <div v-else class="flex">
+                    {{ value }}
+                  </div>
+                </template>
+              </a-checkbox-group>
             </a-row>
           </div>
         </div>

packages/nc-gui-v2/composables/useTable.ts

@@ -1,16 +1,15 @@
 import { Modal, message } from 'ant-design-vue'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { useProject } from './useProject'
-import { TabType } from '~/composables/useTabs'
-import { extractSdkResponseErrorMsg } from '~/utils'
 import { useNuxtApp } from '#app'
+import { TabType } from '~/composables/useTabs'
+import { SYSTEM_COLUMNS, extractSdkResponseErrorMsg, useProject } from '#imports'
 
 export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const table = reactive<{ title: string; table_name: string; columns: string[] }>({
     title: '',
     table_name: '',
-    columns: ['id', 'title', 'created_at', 'updated_at'],
+    columns: SYSTEM_COLUMNS,
   })
 
   const { $e, $api } = useNuxtApp()

packages/nc-gui-v2/lib/constants.ts

@@ -1,2 +1,3 @@
 export const NOCO = 'noco'
 export const USER_PROJECT_ROLES = 'user_project_roles'
+export const SYSTEM_COLUMNS = ['id', 'title', 'created_at', 'updated_at']