Browse Source

feat(gui-v2): add spinning to template editor & clean up

pull/2828/head
Wing-Kam Wong 2 years ago
parent
commit
96640b2933
  1. 443
      packages/nc-gui-v2/components/template/Editor.vue

443
packages/nc-gui-v2/components/template/Editor.vue

@ -27,38 +27,6 @@ interface Option {
const useForm = Form.useForm const useForm = Form.useForm
const { quickImportType, projectTemplate, importData } = defineProps<Props>() const { quickImportType, projectTemplate, importData } = defineProps<Props>()
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
const hasSelectColumn = ref(<boolean[]>{})
const expansionPanel = ref(<number[]>[])
const editableTn = ref(<boolean[]>{})
const inputRefs = ref(<HTMLInputElement[]>[])
const { addTab } = useTabs()
const { sqlUi, project, loadTables } = useProject()
const loading = ref(false)
const toast = useToast()
const buttonSize = ref<SizeType>('large')
const templateForm = reactive<{ tables: object[] }>({
tables: [],
})
const uiTypeOptions = ref<Option[]>(
(Object.keys(UITypes) as Array<keyof typeof UITypes>)
.filter(
(uiType: any) =>
!isVirtualCol(uiType) &&
![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes(
uiType,
),
)
.map((uiType: string) => ({
value: uiType,
label: uiType,
})),
)
const filterOption = (input: string, option: Option) => {
return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
}
const tableColumns = [ const tableColumns = [
{ {
name: 'Column Name', name: 'Column Name',
@ -82,19 +50,48 @@ const tableColumns = [
align: 'right', align: 'right',
}, },
] ]
const templateForm = reactive<{ tables: object[] }>({
tables: [],
})
const buttonSize = ref<SizeType>('large')
const hasSelectColumn = ref(<boolean[]>{})
const expansionPanel = ref(<number[]>[])
const editableTn = ref(<boolean[]>{})
const inputRefs = ref(<HTMLInputElement[]>[])
const isImporting = ref(false)
const importingTip = ref('Importing')
const uiTypeOptions = ref<Option[]>(
(Object.keys(UITypes) as Array<keyof typeof UITypes>)
.filter(
(uiType: any) =>
!isVirtualCol(uiType) &&
![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes(
uiType,
),
)
.map((uiType: string) => ({
value: uiType,
label: uiType,
})),
)
const data = reactive(<any>{ const data = reactive(<any>{
name: 'Project Name', name: 'Project Name',
tables: [], tables: [],
}) })
const toast = useToast()
const { addTab } = useTabs()
const { sqlUi, project, loadTables } = useProject()
onMounted(() => {
parseAndLoadTemplate()
})
const validators = computed(() => { const validators = computed(() => {
// TODO: centralise // TODO: centralise
const tnValidator = [{ required: true, message: 'Please fill in table name', trigger: 'change' }] const tnValidator = [{ required: true, message: 'Please fill in table name', trigger: 'change' }]
const cnValidator = [{ required: true, message: 'Please fill in column name', trigger: 'change' }] const cnValidator = [{ required: true, message: 'Please fill in column name', trigger: 'change' }]
const uidtValidator = [{ required: true, message: 'Please fill in column type', trigger: 'change' }] const uidtValidator = [{ required: true, message: 'Please fill in column type', trigger: 'change' }]
// TODO: check existing validation logic
const dtxpValidator = [{}]
let res: any = {} let res: any = {}
for (let tableIdx = 0; tableIdx < data.tables.length; tableIdx++) { for (let tableIdx = 0; tableIdx < data.tables.length; tableIdx++) {
res[`tables.${tableIdx}.table_name`] = tnValidator res[`tables.${tableIdx}.table_name`] = tnValidator
@ -104,22 +101,21 @@ const validators = computed(() => {
res[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = uidtValidator res[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = uidtValidator
if (isSelect(data.tables[tableIdx].columns[columnIdx])) { if (isSelect(data.tables[tableIdx].columns[columnIdx])) {
hasSelectColumn.value[tableIdx] = true hasSelectColumn.value[tableIdx] = true
res[`tables.${tableIdx}.columns.${columnIdx}.dtxp`] = dtxpValidator
} }
} }
} }
return res return res
}) })
const { resetFields, validate, validateInfos } = useForm(data, validators)
const editorTitle = computed(() => { const editorTitle = computed(() => {
return `${quickImportType.toUpperCase()} Import: ${data.title}` return `${quickImportType.toUpperCase()} Import: ${data.title}`
}) })
onMounted(() => { const { resetFields, validate, validateInfos } = useForm(data, validators)
parseAndLoadTemplate()
}) const filterOption = (input: string, option: Option) => {
return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
}
const parseAndLoadTemplate = () => { const parseAndLoadTemplate = () => {
if (projectTemplate) { if (projectTemplate) {
@ -198,12 +194,12 @@ const importTemplate = async () => {
await validate() await validate()
} catch (errorInfo) { } catch (errorInfo) {
toast.error('Please fill all the required values') toast.error('Please fill all the required values')
loading.value = false isImporting.value = false
return return
} }
try { try {
loading.value = true isImporting.value = true
// tab info to be used to show the tab after successful import // tab info to be used to show the tab after successful import
const tab = { const tab = {
id: '', id: '',
@ -263,6 +259,7 @@ const importTemplate = async () => {
if (data) { if (data) {
total += data.length total += data.length
for (let i = 0; i < data.length; i += offset) { for (let i = 0; i < data.length; i += offset) {
importingTip.value = `Importing data to ${projectName}: ${progress}/${total} records`
const batchData = remapColNames(data.slice(i, i + offset), tableMeta.columns) const batchData = remapColNames(data.slice(i, i + offset), tableMeta.columns)
await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.table_title, batchData) await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.table_title, batchData)
progress += batchData.length progress += batchData.length
@ -282,202 +279,206 @@ const importTemplate = async () => {
toast.error(await extractSdkResponseErrorMsg(e)) toast.error(await extractSdkResponseErrorMsg(e))
} finally { } finally {
// TODO: close dialog when the integration is ready // TODO: close dialog when the integration is ready
loading.value = false isImporting.value = false
} }
} }
</script> </script>
<template> <template>
<a-card :title="editorTitle"> <a-spin :spinning="isImporting" :tip="importingTip" size="large">
<template #extra> <a-card :title="editorTitle">
<a-button type="primary" :loading="loading" @click="importTemplate" :size="buttonSize"> <template #extra>
{{ $t('activity.import') }} <a-button type="primary" @click="importTemplate" :size="buttonSize">
</a-button> {{ $t('activity.import') }}
</template> </a-button>
<a-form :model="data" name="template-editor-form"> </template>
<p v-if="data.tables && quickImportType === 'excel'" class="text-center"> <a-form :model="data" name="template-editor-form">
{{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }} <p v-if="data.tables && quickImportType === 'excel'" class="text-center">
available for import {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
</p> available for import
<a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel" class="template-collapse" accordion> </p>
<a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx"> <a-collapse
<template #header> v-if="data.tables && data.tables.length"
<a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" noStyle> v-model:activeKey="expansionPanel"
<a-input class="template-collapse"
v-model:value="table.table_name" accordion
style="max-width: 300px" >
hide-details <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
@click="(e) => e.stopPropagation()" <template #header>
@blur="setEditableTn(tableIdx, false)" <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" noStyle>
@keydown.enter="setEditableTn(tableIdx, false)" <a-input
/> v-model:value="table.table_name"
</a-form-item> style="max-width: 300px"
<span v-else class="font-weight-bold text-lg" @click="(e) => (e.stopPropagation(), setEditableTn(tableIdx, true))"> hide-details
<MdiTableIcon class="text-primary" style="margin-bottom: -5px" /> @click="(e) => e.stopPropagation()"
{{ table.table_name }} @blur="setEditableTn(tableIdx, false)"
</span> @keydown.enter="setEditableTn(tableIdx, false)"
</template> />
<template #extra> </a-form-item>
<a-tooltip bottom> <span v-else class="font-weight-bold text-lg" @click="(e) => (e.stopPropagation(), setEditableTn(tableIdx, true))">
<template #title> <MdiTableIcon class="text-primary" style="margin-bottom: -5px" />
<!-- TODO: i18n --> {{ table.table_name }}
<span>Delete Table</span> </span>
</template> </template>
<MdiDeleteOutlineIcon <template #extra>
v-if="data.tables.length > 1" <a-tooltip bottom>
class="text-lg" <template #title>
style="margin-right: 25px"
@click.stop="deleteTable(tableIdx)"
/>
</a-tooltip>
</template>
<a-table
v-if="table.columns.length"
class="template-form"
size="middle"
row-class-name="template-form-row"
:data-source="table.columns"
:columns="tableColumns"
:pagination="false"
>
<template #headerCell="{ column }">
<template v-if="column.key === 'column_name'">
<span>
{{ $t('labels.columnName') }}
</span>
</template>
<template v-else-if="column.key === 'uidt'">
<span>
{{ $t('labels.columnType') }}
</span>
</template>
<template v-else-if="column.key === 'dtxp' && hasSelectColumn[tableIdx]">
<span>
<!-- TODO: i18n --> <!-- TODO: i18n -->
Options <span>Delete Table</span>
</span> </template>
</template> <MdiDeleteOutlineIcon
v-if="data.tables.length > 1"
class="text-lg"
style="margin-right: 25px"
@click.stop="deleteTable(tableIdx)"
/>
</a-tooltip>
</template> </template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'column_name'">
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
<a-input
v-model:value="record.column_name"
:ref="
(el) => {
inputRefs[record.key] = el
}
"
/>
</a-form-item>
</template>
<template v-else-if="column.key === 'uidt'">
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
<a-auto-complete
v-model:value="record.uidt"
:options="uiTypeOptions"
:filter-option="filterOption"
style="width: 200px"
/>
</a-form-item>
</template>
<template v-else-if="column.key === 'dtxp'">
<a-form-item
v-if="isSelect(record)"
v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]"
>
<a-input v-model:value="record.dtxp" />
</a-form-item>
</template>
<template v-if="column.key === 'action'"> <a-table
<a-tooltip v-if="record.key === 0"> v-if="table.columns.length"
<template #title> class="template-form"
<!-- TODO: i18n --> row-class-name="template-form-row"
<span>Primary Value</span> :data-source="table.columns"
</template> :columns="tableColumns"
<span style="margin-right: 15px"> :pagination="false"
<MdiKeyStarIcon class="text-lg" /> >
<template #headerCell="{ column }">
<template v-if="column.key === 'column_name'">
<span>
{{ $t('labels.columnName') }}
</span>
</template>
<template v-else-if="column.key === 'uidt'">
<span>
{{ $t('labels.columnType') }}
</span> </span>
</a-tooltip> </template>
<a-tooltip v-else> <template v-else-if="column.key === 'dtxp' && hasSelectColumn[tableIdx]">
<template #title> <span>
<!-- TODO: i18n --> <!-- TODO: i18n -->
<span>Delete Column</span> Options
</template> </span>
</template>
<a-button @click="deleteTableColumn(tableIdx, record.key)" type="text">
<div class="flex items-center">
<MdiDeleteOutlineIcon class="text-lg" />
</div>
</a-button>
</a-tooltip>
</template>
</template>
</a-table>
<div class="text-center" style="margin-top: 15px">
<a-tooltip bottom>
<template #title>
<!-- TODO: i18n -->
<span>Add Number Column</span>
</template>
<a-button @click="addNewColumnRow(table, 'Number')">
<div class="flex items-center">
<MdiNumericIcon class="text-lg" />
</div>
</a-button>
</a-tooltip>
<a-tooltip bottom>
<template #title>
<!-- TODO: i18n -->
<span>Add SingleLineText Column</span>
</template>
<a-button @click="addNewColumnRow(table, 'SingleLineText')">
<div class="flex items-center">
<MdiStringIcon class="text-lg" />
</div>
</a-button>
</a-tooltip>
<a-tooltip bottom>
<template #title>
<!-- TODO: i18n -->
<span>Add LongText Column</span>
</template> </template>
<a-button @click="addNewColumnRow(table, 'LongText')"> <template #bodyCell="{ column, record }">
<div class="flex items-center"> <template v-if="column.key === 'column_name'">
<MdiLongTextIcon class="text-lg" /> <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
</div> <a-input
</a-button> v-model:value="record.column_name"
</a-tooltip> :ref="
(el) => {
<a-tooltip bottom> inputRefs[record.key] = el
<template #title> }
<!-- TODO: i18n --> "
<span>Add Other Column</span> />
</a-form-item>
</template>
<template v-else-if="column.key === 'uidt'">
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
<a-auto-complete
v-model:value="record.uidt"
:options="uiTypeOptions"
:filter-option="filterOption"
style="width: 200px"
/>
</a-form-item>
</template>
<template v-else-if="column.key === 'dtxp'">
<a-form-item v-if="isSelect(record)">
<a-input v-model:value="record.dtxp" />
</a-form-item>
</template>
<template v-if="column.key === 'action'">
<a-tooltip v-if="record.key === 0">
<template #title>
<!-- TODO: i18n -->
<span>Primary Value</span>
</template>
<span style="margin-right: 15px">
<MdiKeyStarIcon class="text-lg" />
</span>
</a-tooltip>
<a-tooltip v-else>
<template #title>
<!-- TODO: i18n -->
<span>Delete Column</span>
</template>
<a-button @click="deleteTableColumn(tableIdx, record.key)" type="text">
<div class="flex items-center">
<MdiDeleteOutlineIcon class="text-lg" />
</div>
</a-button>
</a-tooltip>
</template>
</template> </template>
<a-button @click="addNewColumnRow(table)"> </a-table>
<div class="flex items-center"> <div class="text-center" style="margin-top: 15px">
<MdiPlusIcon class="text-lg" /> <a-tooltip bottom>
Column <template #title>
</div> <!-- TODO: i18n -->
</a-button> <span>Add Number Column</span>
</a-tooltip> </template>
</div>
</a-collapse-panel> <a-button @click="addNewColumnRow(table, 'Number')">
</a-collapse> <div class="flex items-center">
</a-form> <MdiNumericIcon class="text-lg" />
</a-card> </div>
</a-button>
</a-tooltip>
<a-tooltip bottom>
<template #title>
<!-- TODO: i18n -->
<span>Add SingleLineText Column</span>
</template>
<a-button @click="addNewColumnRow(table, 'SingleLineText')">
<div class="flex items-center">
<MdiStringIcon class="text-lg" />
</div>
</a-button>
</a-tooltip>
<a-tooltip bottom>
<template #title>
<!-- TODO: i18n -->
<span>Add LongText Column</span>
</template>
<a-button @click="addNewColumnRow(table, 'LongText')">
<div class="flex items-center">
<MdiLongTextIcon class="text-lg" />
</div>
</a-button>
</a-tooltip>
<a-tooltip bottom>
<template #title>
<!-- TODO: i18n -->
<span>Add Other Column</span>
</template>
<a-button @click="addNewColumnRow(table)">
<div class="flex items-center">
<MdiPlusIcon class="text-lg" />
Column
</div>
</a-button>
</a-tooltip>
</div>
</a-collapse-panel>
</a-collapse>
</a-form>
</a-card>
</a-spin>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.template-collapse { .template-collapse {
background-color: #ffffff; background-color: #ffffff;
} }
.template-form { .template-form {
:deep(.ant-table-thead) > tr > th { :deep(.ant-table-thead) > tr > th {
background: #ffffff; background: #ffffff;

Loading…
Cancel
Save