From 043fe292196632c8c666f63d36fe3f79984a00a8 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Thu, 18 Aug 2022 19:49:39 +0530 Subject: [PATCH 1/3] 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(() => { - ID + ID - title + title - created_at + created_at - updated_at + updated_at 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 }>({ 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, From 68f8f58ae526d4a4ea24dbdca3cd336efe696fef Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Fri, 19 Aug 2022 10:54:14 +0530 Subject: [PATCH 2/3] fix/Fixed table column toggle while table creation --- packages/nc-gui-v2/components.d.ts | 1 + .../nc-gui-v2/components/dlg/TableCreate.vue | 48 ++++++++++--------- packages/nc-gui-v2/composables/useTable.ts | 34 +++++-------- packages/nc-gui-v2/lib/constants.ts | 1 + 4 files changed, 39 insertions(+), 45 deletions(-) diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts index c738bd809c..7221df51f7 100644 --- a/packages/nc-gui-v2/components.d.ts +++ b/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'] diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue index dbc3841767..8c0349777c 100644 --- a/packages/nc-gui-v2/components/dlg/TableCreate.vue +++ b/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(() => { /> -
-
+
+
{{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more @@ -95,32 +100,29 @@ onMounted(() => {
-
+
{{ $t('msg.info.addDefaultColumns') }}
- - - - ID - - - - - title - - - - created_at - - - - updated_at - + + +
diff --git a/packages/nc-gui-v2/composables/useTable.ts b/packages/nc-gui-v2/composables/useTable.ts index a52802a8e8..47962c99c2 100644 --- a/packages/nc-gui-v2/composables/useTable.ts +++ b/packages/nc-gui-v2/composables/useTable.ts @@ -1,22 +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[]; columnsToggleInfo: Record }>({ title: '', table_name: '', - columns: ['id', 'title', 'created_at', 'updated_at'], - columnsToggleInfo: { - id: true, - title: true, - created_at: true, - updated_at: true, - }, + columns: [...SYSTEM_COLUMNS], }) const { $e, $api } = useNuxtApp() @@ -27,18 +20,15 @@ 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) - }) - .filter((col) => table.columnsToggleInfo[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) + }) const tableMeta = await $api.dbTable.create(project?.value?.id as string, { ...table, diff --git a/packages/nc-gui-v2/lib/constants.ts b/packages/nc-gui-v2/lib/constants.ts index 21806b0541..7b6465b2aa 100644 --- a/packages/nc-gui-v2/lib/constants.ts +++ b/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'] From 086a9adbd8e8c3216d7f5cca5b3d10b28ca8988f Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Fri, 19 Aug 2022 15:03:30 +0530 Subject: [PATCH 3/3] chore/pr comments included --- packages/nc-gui-v2/composables/useTable.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nc-gui-v2/composables/useTable.ts b/packages/nc-gui-v2/composables/useTable.ts index 47962c99c2..3da3c15639 100644 --- a/packages/nc-gui-v2/composables/useTable.ts +++ b/packages/nc-gui-v2/composables/useTable.ts @@ -6,10 +6,10 @@ 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[]; columnsToggleInfo: Record }>({ + const table = reactive<{ title: string; table_name: string; columns: string[] }>({ title: '', table_name: '', - columns: [...SYSTEM_COLUMNS], + columns: SYSTEM_COLUMNS, }) const { $e, $api } = useNuxtApp()