Browse Source

fix/Fixed table column toggle while table creation

pull/3237/head
Muhammed Mustafa 2 years ago
parent
commit
68f8f58ae5
  1. 1
      packages/nc-gui-v2/components.d.ts
  2. 48
      packages/nc-gui-v2/components/dlg/TableCreate.vue
  3. 34
      packages/nc-gui-v2/composables/useTable.ts
  4. 1
      packages/nc-gui-v2/lib/constants.ts

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

@ -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']

48
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.columnsToggleInfo.id" disabled>ID</a-checkbox>
</a-tooltip>
</a-col>
<a-col :span="6">
<a-checkbox v-model:checked="table.columnsToggleInfo.title"> title </a-checkbox>
</a-col>
<a-col :span="6">
<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.columnsToggleInfo.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>

34
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<string, boolean> }>({
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,

1
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']

Loading…
Cancel
Save