github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor(gui-v2): cleanup template editor component 

# What's changed?

* fix types
* change arrow fns to regular functions to avoid ordering issues
* move templateColumns to utils file
pull/2828/head
braks 2 years ago
parent
ff39e7658b
commit
e4077cd12a
2 changed files with 102 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 156
      packages/nc-gui-v2/components/template/Editor.vue
  2. 25
      packages/nc-gui-v2/components/template/utils.ts

156
packages/nc-gui-v2/components/template/Editor.vue
Unescape View File

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { useToast } from 'vue-toastification' import { useToast } from 'vue-toastification'
import type { ColumnType, TableType } from 'nocodb-sdk' import type { ColumnType, TableType } from 'nocodb-sdk'
import { isVirtualCol, UITypes } from 'nocodb-sdk' import { UITypes, isVirtualCol } from 'nocodb-sdk'
import { Form } from 'ant-design-vue' import { Form } from 'ant-design-vue'
import { tableColumns } from './utils'
import { computed, onMounted } from '#imports' import { computed, onMounted } from '#imports'
import MdiTableIcon from '~icons/mdi/table' import MdiTableIcon from '~icons/mdi/table'
import MdiStringIcon from '~icons/mdi/alpha-a' import MdiStringIcon from '~icons/mdi/alpha-a'
@ -16,103 +17,90 @@ import { fieldRequiredValidator } from '~/utils/validation'
interface Props { interface Props {
quickImportType: 'csv' | 'excel' | 'json' quickImportType: 'csv' | 'excel' | 'json'
projectTemplate: object projectTemplate: Record<string, any>
importData: any[] importData: any[]
} }
interface Option { interface Option {
label: string
value: string value: string
} }
const useForm = Form.useForm
const { quickImportType, projectTemplate, importData } = defineProps<Props>() const { quickImportType, projectTemplate, importData } = defineProps<Props>()
const useForm = Form.useForm
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
const tableColumns = [
{ const hasSelectColumn = ref<boolean[]>([])
name: 'Column Name',
dataIndex: 'column_name', const expansionPanel = ref<number[]>([])
key: 'column_name',
width: 250, const editableTn = ref<boolean[]>([])
},
{ const inputRefs = ref<HTMLInputElement[]>([])
name: 'Column Type',
dataIndex: 'column_type',
key: 'uidt',
width: 250,
},
{
name: 'Select Option',
key: 'dtxp',
},
{
name: 'Action',
key: 'action',
align: 'right',
},
]
const templateForm = reactive<{ tables: object[] }>({
tables: [],
})
const hasSelectColumn = ref(<boolean[]>{})
const expansionPanel = ref(<number[]>[])
const editableTn = ref(<boolean[]>{})
const inputRefs = ref(<HTMLInputElement[]>[])
const isImporting = ref(false) const isImporting = ref(false)
const importingTip = ref('Importing') const importingTip = ref('Importing')
const uiTypeOptions = ref<Option[]>( const uiTypeOptions = ref<Option[]>(
(Object.keys(UITypes) as Array<keyof typeof UITypes>) (Object.keys(UITypes) as (keyof typeof UITypes)[])
.filter( .filter(
(uiType: any) => (uiType) =>
!isVirtualCol(uiType) && !isVirtualCol(UITypes[uiType]) &&
![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes( ![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes(
uiType, UITypes[uiType],
), ),
) )
.map((uiType: string) => ({ .map<Option>((uiType) => ({
value: uiType, value: uiType,
label: uiType, label: uiType,
})), })),
) )
const data = reactive(<any>{
const data = reactive<{ title: string | null; name: string; tables: TableType[] }>({
title: null,
name: 'Project Name', name: 'Project Name',
tables: [], tables: [],
}) })
const toast = useToast() const toast = useToast()
const { addTab } = useTabs() const { addTab } = useTabs()
const { sqlUi, project, loadTables } = useProject() const { sqlUi, project, loadTables } = useProject()
onMounted(() => { onMounted(() => {
parseAndLoadTemplate() parseAndLoadTemplate()
}) })
const validators = computed(() => { const validators = computed(() =>
let res: any = {} data.tables.reduce<Record<string, [typeof fieldRequiredValidator]>>((acc, table, tableIdx) => {
for (let tableIdx = 0; tableIdx < data.tables.length; tableIdx++) { acc[`tables.${tableIdx}.table_name`] = [fieldRequiredValidator]
res[`tables.${tableIdx}.table_name`] = [fieldRequiredValidator]
hasSelectColumn.value[tableIdx] = false hasSelectColumn.value[tableIdx] = false
for (let columnIdx = 0; columnIdx < data.tables[tableIdx].columns.length; columnIdx++) {
res[`tables.${tableIdx}.columns.${columnIdx}.column_name`] = [fieldRequiredValidator] table.columns?.forEach((column, columnIdx) => {
res[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator] acc[`tables.${tableIdx}.columns.${columnIdx}.column_name`] = [fieldRequiredValidator]
if (isSelect(data.tables[tableIdx].columns[columnIdx])) { acc[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator]
if (isSelect(column)) {
hasSelectColumn.value[tableIdx] = true hasSelectColumn.value[tableIdx] = true
} }
}
}
return res
}) })
const editorTitle = computed(() => { return acc
return `${quickImportType.toUpperCase()} Import: ${data.title}` }, {}),
}) )
const editorTitle = computed(() => `${quickImportType.toUpperCase()} Import: ${data.title}`)
const { resetFields, validate, validateInfos } = useForm(data, validators) const { validate, validateInfos } = useForm(data, validators)
const filterOption = (input: string, option: Option) => { function filterOption(input: string, option: Option) {
return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0 return option.value.toUpperCase().includes(input.toUpperCase())
} }
const parseAndLoadTemplate = () => { function parseAndLoadTemplate() {
if (projectTemplate) { if (projectTemplate) {
parseTemplate(projectTemplate) parseTemplate(projectTemplate)
expansionPanel.value = Array.from({ length: data.tables.length || 0 }, (_, i) => i) expansionPanel.value = Array.from({ length: data.tables.length || 0 }, (_, i) => i)
@ -120,10 +108,10 @@ const parseAndLoadTemplate = () => {
} }
} }
const parseTemplate = ({ tables = [], ...rest }: Record<string, any>) => { function parseTemplate({ tables = [], ...rest }: Props['projectTemplate']) {
const parsedTemplate = { const parsedTemplate = {
...rest, ...rest,
tables: tables.map(({ v = [], columns = [], ...rest }: Record<string, any>) => ({ tables: tables.map(({ v = [], columns = [], ...rest }) => ({
...rest, ...rest,
columns: [ columns: [
...columns.map((c: any, idx: number) => { ...columns.map((c: any, idx: number) => {
@ -142,19 +130,19 @@ const parseTemplate = ({ tables = [], ...rest }: Record<string, any>) => {
Object.assign(data, parsedTemplate) Object.assign(data, parsedTemplate)
} }
const isSelect = (col: ColumnType) => { function isSelect(col: ColumnType) {
return col.uidt === 'MultiSelect' || col.uidt === 'SingleSelect' return col.uidt === 'MultiSelect' || col.uidt === 'SingleSelect'
} }
const deleteTable = (tableIdx: number) => { function deleteTable(tableIdx: number) {
data.tables.splice(tableIdx, 1) data.tables.splice(tableIdx, 1)
} }
const deleteTableColumn = (tableIdx: number, columnIdx: number) => { function deleteTableColumn(tableIdx: number, columnIdx: number) {
data.tables[tableIdx].columns = data.tables[tableIdx].columns.filter((c: any) => c.key !== columnIdx) data.tables[tableIdx].columns?.splice(columnIdx, 1)
} }
const addNewColumnRow = (table: Record<string, any>, uidt?: string) => { function addNewColumnRow(table: Record<string, any>, uidt?: string) {
table.columns.push({ table.columns.push({
key: table.columns.length, key: table.columns.length,
column_name: `title${table.columns.length + 1}`, column_name: `title${table.columns.length + 1}`,
@ -167,11 +155,11 @@ const addNewColumnRow = (table: Record<string, any>, uidt?: string) => {
}) })
} }
const setEditableTn = (tableIdx: number, val: boolean) => { function setEditableTn(tableIdx: number, val: boolean) {
editableTn.value[tableIdx] = val editableTn.value[tableIdx] = val
} }
const remapColNames = (batchData: any[], columns: ColumnType[]) => { function remapColNames(batchData: any[], columns: ColumnType[]) {
return batchData.map((data) => return batchData.map((data) =>
(columns || []).reduce( (columns || []).reduce(
(aggObj, col: Record<string, any>) => ({ (aggObj, col: Record<string, any>) => ({
@ -183,7 +171,7 @@ const remapColNames = (batchData: any[], columns: ColumnType[]) => {
) )
} }
const importTemplate = async () => { async function importTemplate() {
// check if form is valid // check if form is valid
try { try {
await validate() await validate()
@ -207,28 +195,28 @@ const importTemplate = async () => {
// e.g. id, created_at, updated_at // e.g. id, created_at, updated_at
const systemColumns = sqlUi?.value.getNewTableColumns().filter((c: ColumnType) => c.column_name !== 'title') const systemColumns = sqlUi?.value.getNewTableColumns().filter((c: ColumnType) => c.column_name !== 'title')
for (const systemColumn of systemColumns) { for (const systemColumn of systemColumns) {
if ( if (!table.columns?.some((c) => c.column_name?.toLowerCase() === systemColumn.column_name.toLowerCase())) {
!table.columns.some((c: Record<string, any>) => c.column_name.toLowerCase() === systemColumn.column_name.toLowerCase()) table.columns?.push(systemColumn)
) {
table.columns.push(systemColumn)
} }
} }
// set pk & rqd if ID is provided // set pk & rqd if ID is provided
if (table.columns) {
for (const column of table.columns) { for (const column of table.columns) {
if (column.column_name.toLowerCase() === 'id' && !('pk' in column)) { if (column.column_name?.toLowerCase() === 'id' && !('pk' in column)) {
column.pk = true column.pk = true
column.rqd = true column.rqd = true
break break
} }
} }
}
const tableMeta = await $api.dbTable.create(project?.value?.id as string, { const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
table_name: table.table_name, table_name: table.table_name,
// leave title empty to get a generated one based on table_name // leave title empty to get a generated one based on table_name
title: '', title: '',
columns: table.columns, columns: table.columns,
}) })
table.table_title = tableMeta.title table.title = tableMeta.title
// open the first table after import // open the first table after import
if (tab.id === '' && tab.title === '') { if (tab.id === '' && tab.title === '') {
@ -237,7 +225,7 @@ const importTemplate = async () => {
} }
// set primary value // set primary value
if (tableMeta?.columns[0]?.id) { if (tableMeta?.columns?.[0]?.id) {
await $api.dbTableColumn.primaryColumnSet(tableMeta.columns[0].id as string) await $api.dbTableColumn.primaryColumnSet(tableMeta.columns[0].id as string)
} }
} }
@ -245,7 +233,7 @@ const importTemplate = async () => {
if (importData) { if (importData) {
let total = 0 let total = 0
let progress = 0 let progress = 0
let offset = 500 const offset = 500
const projectName = project.value.title as string const projectName = project.value.title as string
await Promise.all( await Promise.all(
data.tables.map((table: Record<string, any>) => data.tables.map((table: Record<string, any>) =>
@ -283,7 +271,7 @@ const importTemplate = async () => {
<a-spin :spinning="isImporting" :tip="importingTip" size="large"> <a-spin :spinning="isImporting" :tip="importingTip" size="large">
<a-card :title="editorTitle"> <a-card :title="editorTitle">
<template #extra> <template #extra>
<a-button type="primary" @click="importTemplate" size="large"> <a-button type="primary" size="large" @click="importTemplate">
{{ $t('activity.import') }} {{ $t('activity.import') }}
</a-button> </a-button>
</template> </template>
@ -300,7 +288,7 @@ const importTemplate = async () => {
> >
<a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx"> <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
<template #header> <template #header>
<a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" noStyle> <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
<a-input <a-input
v-model:value="table.table_name" v-model:value="table.table_name"
size="large" size="large"
@ -314,7 +302,7 @@ const importTemplate = async () => {
<span <span
v-else v-else
class="font-weight-bold text-lg flex items-center gap-2" class="font-weight-bold text-lg flex items-center gap-2"
@click="(e) => (e.stopPropagation(), setEditableTn(tableIdx, true))" @click="$event.stopPropagation() && setEditableTn(tableIdx, true)"
> >
<MdiTableIcon class="text-primary" /> <MdiTableIcon class="text-primary" />
{{ table.table_name }} {{ table.table_name }}
@ -360,13 +348,13 @@ const importTemplate = async () => {
<template v-if="column.key === 'column_name'"> <template v-if="column.key === 'column_name'">
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]"> <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
<a-input <a-input
v-model:value="record.column_name"
size="large"
:ref=" :ref="
(el) => { (el) => {
inputRefs[record.key] = el inputRefs[record.key] = el
} }
" "
v-model:value="record.column_name"
size="large"
/> />
</a-form-item> </a-form-item>
</template> </template>
@ -404,7 +392,7 @@ const importTemplate = async () => {
<span>Delete Column</span> <span>Delete Column</span>
</template> </template>
<a-button @click="deleteTableColumn(tableIdx, record.key)" type="text"> <a-button type="text" @click="deleteTableColumn(tableIdx, record.key)">
<div class="flex items-center"> <div class="flex items-center">
<MdiDeleteOutlineIcon class="text-lg" /> <MdiDeleteOutlineIcon class="text-lg" />
</div> </div>
@ -473,15 +461,15 @@ const importTemplate = async () => {
<style scoped lang="scss"> <style scoped lang="scss">
.template-collapse { .template-collapse {
background-color: #ffffff; @apply bg-white;
} }
.template-form { .template-form {
:deep(.ant-table-thead) > tr > th { :deep(.ant-table-thead) > tr > th {
background: #ffffff; @apply bg-white;
} }
:deep(.template-form-row) > td { :deep(.template-form-row) > td {
padding-bottom: 0px !important; @apply !pb-0;
} }
} }
</style> </style>

25
packages/nc-gui-v2/components/template/utils.ts
Unescape View File

@ -0,0 +1,25 @@
import type { ColumnGroupType } from 'ant-design-vue/es/table'
export const tableColumns: (Omit<ColumnGroupType<any>, 'children'> & { dataIndex?: string; name: string })[] = [
{
name: 'Column Name',
dataIndex: 'column_name',
key: 'column_name',
width: 250,
},
{
name: 'Column Type',
dataIndex: 'column_type',
key: 'uidt',
width: 250,
},
{
name: 'Select Option',
key: 'dtxp',
},
{
name: 'Action',
key: 'action',
align: 'right',
},
]
Write Preview
Loading…
Cancel
Save