mirror of https://github.com/nocodb/nocodb
1054 lines
34 KiB
1054 lines
34 KiB
<script setup lang="ts"> |
|
import dayjs from 'dayjs' |
|
import utc from 'dayjs/plugin/utc' |
|
import type { ColumnType, OracleUi, TableType } from 'nocodb-sdk' |
|
import { |
|
SqlUiFactory, |
|
UITypes, |
|
getDateFormat, |
|
getDateTimeFormat, |
|
isSystemColumn, |
|
isVirtualCol, |
|
parseStringDate, |
|
} from 'nocodb-sdk' |
|
import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface' |
|
import { srcDestMappingColumns, tableColumns } from './utils' |
|
|
|
interface Props { |
|
quickImportType: 'csv' | 'excel' | 'json' |
|
baseTemplate: Record<string, any> |
|
importData: Record<string, any> |
|
importColumns: any[] |
|
importDataOnly: boolean |
|
maxRowsToParse: number |
|
baseId: string |
|
sourceId: string |
|
importWorker: Worker |
|
} |
|
|
|
interface Option { |
|
label: string |
|
value: string |
|
} |
|
|
|
const { |
|
quickImportType, |
|
baseTemplate, |
|
importData, |
|
importColumns, |
|
importDataOnly, |
|
maxRowsToParse, |
|
baseId, |
|
sourceId, |
|
importWorker, |
|
} = defineProps<Props>() |
|
|
|
const emit = defineEmits(['import', 'error', 'change']) |
|
|
|
dayjs.extend(utc) |
|
|
|
const { t } = useI18n() |
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
const columns = computed(() => meta.value?.columns || []) |
|
|
|
const reloadHook = inject(ReloadViewDataHookInj, createEventHook()) |
|
|
|
const useForm = Form.useForm |
|
|
|
const { $api } = useNuxtApp() |
|
|
|
const { addTab } = useTabs() |
|
|
|
const basesStore = useBases() |
|
const { bases } = storeToRefs(basesStore) |
|
|
|
const { base: activeBase } = storeToRefs(useBase()) |
|
|
|
const base = computed(() => bases.value.get(baseId) || activeBase.value) |
|
|
|
const tablesStore = useTablesStore() |
|
const { openTable, loadProjectTables } = tablesStore |
|
const { baseTables } = storeToRefs(tablesStore) |
|
|
|
const sqlUis = computed(() => { |
|
const temp: Record<string, any> = {} |
|
|
|
for (const source of base.value.sources ?? []) { |
|
if (source.id) { |
|
temp[source.id] = SqlUiFactory.create({ client: source.type }) as Exclude< |
|
ReturnType<(typeof SqlUiFactory)['create']>, |
|
typeof OracleUi |
|
> |
|
} |
|
} |
|
|
|
return temp |
|
}) |
|
|
|
const sqlUi = computed(() => sqlUis.value[sourceId] || Object.values(sqlUis.value)[0]) |
|
|
|
const hasSelectColumn = ref<boolean[]>([]) |
|
|
|
const expansionPanel = ref<number[]>([]) |
|
|
|
const editableTn = ref<boolean[]>([]) |
|
|
|
const inputRefs = ref<HTMLInputElement[]>([]) |
|
|
|
const isImporting = ref(false) |
|
|
|
const importingTips = ref<Record<string, string>>({}) |
|
|
|
const checkAllRecord = ref<Record<string, boolean>>({}) |
|
|
|
const formError = ref() |
|
|
|
const uiTypeOptions = ref<Option[]>( |
|
(Object.keys(UITypes) as (keyof typeof UITypes)[]) |
|
.filter( |
|
(uiType) => |
|
!isVirtualCol(UITypes[uiType]) && |
|
![ |
|
UITypes.ForeignKey, |
|
UITypes.ID, |
|
UITypes.CreatedTime, |
|
UITypes.LastModifiedTime, |
|
UITypes.CreatedBy, |
|
UITypes.LastModifiedBy, |
|
UITypes.Barcode, |
|
UITypes.Button, |
|
].includes(UITypes[uiType]), |
|
) |
|
.map<Option>((uiType) => ({ |
|
value: uiType, |
|
label: uiType, |
|
})), |
|
) |
|
|
|
const srcDestMapping = ref<Record<string, Record<string, any>[]>>({}) |
|
|
|
const data = reactive<{ |
|
title: string | null |
|
name: string |
|
tables: (TableType & { ref_table_name: string; columns: (ColumnType & { key: number; _disableSelect?: boolean })[] })[] |
|
}>({ |
|
title: null, |
|
name: 'Base Name', |
|
tables: [], |
|
}) |
|
|
|
const validators = computed(() => |
|
data.tables.reduce<Record<string, [ReturnType<typeof fieldRequiredValidator>]>>((acc: Record<string, any>, table, tableIdx) => { |
|
acc[`tables.${tableIdx}.table_name`] = [validateTableName] |
|
hasSelectColumn.value[tableIdx] = false |
|
|
|
table.columns?.forEach((column, columnIdx) => { |
|
acc[`tables.${tableIdx}.columns.${columnIdx}.title`] = [ |
|
fieldRequiredValidator(), |
|
fieldLengthValidator(), |
|
reservedFieldNameValidator(), |
|
] |
|
acc[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator()] |
|
if (isSelect(column)) { |
|
hasSelectColumn.value[tableIdx] = true |
|
} |
|
}) |
|
|
|
return acc |
|
}, {}), |
|
) |
|
|
|
const { validate, validateInfos, modelRef } = useForm(data, validators) |
|
|
|
const isValid = ref(!importDataOnly) |
|
|
|
const formRef = ref() |
|
|
|
watch( |
|
() => srcDestMapping.value, |
|
() => { |
|
let res = true |
|
if (importDataOnly) { |
|
for (const tn of Object.keys(srcDestMapping.value)) { |
|
let flag = false |
|
if (!atLeastOneEnabledValidation(tn)) { |
|
res = false |
|
} |
|
for (const record of srcDestMapping.value[tn]) { |
|
if (!fieldsValidation(record, tn)) { |
|
res = false |
|
flag = true |
|
break |
|
} |
|
} |
|
if (flag) { |
|
break |
|
} |
|
} |
|
} else { |
|
for (const [_, o] of Object.entries(validateInfos)) { |
|
if (o?.validateStatus) { |
|
if (o.validateStatus === 'error') { |
|
res = false |
|
} |
|
} |
|
} |
|
} |
|
isValid.value = res |
|
}, |
|
{ deep: true }, |
|
) |
|
|
|
const prevEditableTn = ref<string[]>([]) |
|
|
|
onMounted(() => { |
|
parseAndLoadTemplate() |
|
|
|
// used to record the previous EditableTn values |
|
// for checking the table duplication in current import |
|
// and updating the key in importData |
|
prevEditableTn.value = data.tables.map((t) => t.table_name) |
|
|
|
if (importDataOnly) { |
|
mapDefaultColumns() |
|
} |
|
|
|
nextTick(() => { |
|
inputRefs.value[0]?.focus() |
|
}) |
|
}) |
|
|
|
function filterOption(input: string, option: Option) { |
|
return option.value.toUpperCase().includes(input.toUpperCase()) |
|
} |
|
|
|
function parseAndLoadTemplate() { |
|
if (baseTemplate) { |
|
parseTemplate(baseTemplate) |
|
|
|
expansionPanel.value = Array.from({ length: data.tables.length || 0 }, (_, i) => i) |
|
|
|
hasSelectColumn.value = Array.from({ length: data.tables.length || 0 }, () => false) |
|
} |
|
} |
|
|
|
function parseTemplate({ tables = [], ...rest }: Props['baseTemplate']) { |
|
const parsedTemplate = { |
|
...rest, |
|
tables: tables.map(({ v = [], columns = [], ...rest }) => ({ |
|
...rest, |
|
columns: [ |
|
...columns.map((c: any, idx: number) => { |
|
if (!importDataOnly && c.column_name?.toLowerCase() === 'id') { |
|
const cn = populateUniqueColumnName('id', [], columns) |
|
c.column_name = cn |
|
} |
|
c.key = idx |
|
return c |
|
}), |
|
...v.map((v: any) => ({ |
|
column_name: v.title, |
|
table_name: { |
|
...v, |
|
}, |
|
})), |
|
], |
|
})), |
|
} |
|
|
|
Object.assign(data, parsedTemplate) |
|
} |
|
|
|
function isSelect(col: ColumnType) { |
|
return col.uidt === 'MultiSelect' || col.uidt === 'SingleSelect' |
|
} |
|
|
|
function deleteTable(tableIdx: number) { |
|
data.tables.splice(tableIdx, 1) |
|
} |
|
|
|
function deleteTableColumn(tableIdx: number, columnKey: number) { |
|
const columnIdx = data.tables[tableIdx].columns.findIndex((c: ColumnType & { key: number }) => c.key === columnKey) |
|
data.tables[tableIdx].columns.splice(columnIdx, 1) |
|
let key = 0 |
|
|
|
data.tables[tableIdx].columns.forEach((_c: ColumnType & { key: number }, i: number) => { |
|
if (data.tables[tableIdx].columns[i].key !== undefined) { |
|
data.tables[tableIdx].columns[i].key = key |
|
key++ |
|
} |
|
}) |
|
} |
|
|
|
function setEditableTn(tableIdx: number, val: boolean) { |
|
editableTn.value[tableIdx] = val |
|
} |
|
|
|
function remapColNames(batchData: any[], columns: ColumnType[]) { |
|
const dateFormatMap: Record<number, string> = {} |
|
return batchData.map((data) => |
|
(columns || []).reduce((aggObj, col: Record<string, any>) => { |
|
// we renaming existing id column and using our own auto increment id |
|
if (col.uidt === UITypes.ID) return aggObj |
|
|
|
// for excel & json, if the column name is changed in TemplateEditor, |
|
// then only col.column_name exists in data, else col.ref_column_name |
|
// for csv, col.column_name always exists in data |
|
// since it streams the data in getData() with the updated col.column_name |
|
const key = col.title in data ? col.title : col.ref_column_name |
|
let d = data[key] |
|
if (col.uidt === UITypes.Date && d) { |
|
let dateFormat |
|
if (col?.meta?.date_format) { |
|
dateFormat = col.meta.date_format |
|
dateFormatMap[col.key] = dateFormat |
|
} else if (col.key in dateFormatMap) { |
|
dateFormat = dateFormatMap[col.key] |
|
} else { |
|
dateFormat = getDateFormat(d) |
|
dateFormatMap[col.key] = dateFormat |
|
} |
|
d = parseStringDate(d, dateFormat) |
|
} else if (col.uidt === UITypes.DateTime && d) { |
|
const dateTimeFormat = getDateTimeFormat(data[key]) |
|
d = dayjs(data[key], dateTimeFormat).format('YYYY-MM-DD HH:mm') |
|
} |
|
return { |
|
...aggObj, |
|
[col.title]: d, |
|
} |
|
}, {}), |
|
) |
|
} |
|
|
|
function missingRequiredColumnsValidation(tn: string) { |
|
const missingRequiredColumns = columns.value.filter( |
|
(c: Record<string, any>) => |
|
(c.pk ? !c.ai && !c.cdf && !c.meta?.ag : !c.cdf && c.rqd) && |
|
!srcDestMapping.value[tn].some((r: Record<string, any>) => r.destCn === c.title), |
|
) |
|
|
|
if (missingRequiredColumns.length) { |
|
message.error(`${t('msg.error.columnsRequired')} : ${missingRequiredColumns.map((c) => c.title).join(', ')}`) |
|
return false |
|
} |
|
|
|
return true |
|
} |
|
|
|
function atLeastOneEnabledValidation(tn: string) { |
|
if (srcDestMapping.value[tn].filter((v: Record<string, any>) => v.enabled === true).length === 0) { |
|
message.error(t('msg.error.selectAtleastOneColumn')) |
|
return false |
|
} |
|
return true |
|
} |
|
|
|
function fieldsValidation(record: Record<string, any>, tn: string) { |
|
// if it is not selected, then pass validation |
|
if (!record.enabled) { |
|
return true |
|
} |
|
|
|
if (!record.destCn) { |
|
message.error(`${t('msg.error.columnDescriptionNotFound')} ${record.srcCn}`) |
|
return false |
|
} |
|
|
|
if (srcDestMapping.value[tn].filter((v: Record<string, any>) => v.destCn === record.destCn).length > 1) { |
|
message.error(t('msg.error.duplicateMappingFound')) |
|
return false |
|
} |
|
|
|
const v = columns.value.find((c) => c.title === record.destCn) as Record<string, any> |
|
|
|
for (const tableName of Object.keys(importData)) { |
|
// check if the input contains null value for a required column |
|
if (v.pk ? !v.ai && !v.cdf : !v.cdf && v.rqd) { |
|
if ( |
|
importData[tableName] |
|
.slice(0, maxRowsToParse) |
|
.some((r: Record<string, any>) => r[record.srcCn] === null || r[record.srcCn] === undefined || r[record.srcCn] === '') |
|
) { |
|
message.error(t('msg.error.nullValueViolatesNotNull')) |
|
} |
|
} |
|
|
|
switch (v.uidt) { |
|
case UITypes.Number: |
|
if ( |
|
importData[tableName] |
|
.slice(0, maxRowsToParse) |
|
.some( |
|
(r: Record<string, any>) => r[record.sourceCn] !== null && r[record.srcCn] !== undefined && isNaN(+r[record.srcCn]), |
|
) |
|
) { |
|
message.error(t('msg.error.sourceHasInvalidNumbers')) |
|
return false |
|
} |
|
|
|
break |
|
case UITypes.Checkbox: |
|
if ( |
|
importData[tableName].slice(0, maxRowsToParse).some((r: Record<string, any>) => { |
|
if (r[record.srcCn] !== null && r[record.srcCn] !== undefined) { |
|
let input = r[record.srcCn] |
|
if (typeof input === 'string') { |
|
input = input.replace(/["']/g, '').toLowerCase().trim() |
|
return !( |
|
input === 'false' || |
|
input === 'no' || |
|
input === 'n' || |
|
input === '0' || |
|
input === 'true' || |
|
input === 'yes' || |
|
input === 'y' || |
|
input === '1' |
|
) |
|
} |
|
|
|
return input !== 1 && input !== 0 && input !== true && input !== false |
|
} |
|
return false |
|
}) |
|
) { |
|
message.error(t('msg.error.sourceHasInvalidBoolean')) |
|
return false |
|
} |
|
break |
|
} |
|
} |
|
return true |
|
} |
|
|
|
function updateImportTips(baseName: string, tableName: string, progress: number, total: number) { |
|
importingTips.value[`${baseName}-${tableName}`] = `Importing data to ${baseName} - ${tableName}: ${progress}/${total} records` |
|
} |
|
|
|
async function importTemplate() { |
|
if (importDataOnly) { |
|
for (const table of data.tables) { |
|
// validate required columns |
|
if (!missingRequiredColumnsValidation(table.table_name)) return |
|
|
|
// validate at least one column needs to be selected |
|
if (!atLeastOneEnabledValidation(table.table_name)) return |
|
} |
|
|
|
try { |
|
isImporting.value = true |
|
|
|
const tableId = meta.value?.id |
|
const baseId = base.value.id! |
|
const table_names = data.tables.map((t: Record<string, any>) => t.table_name) |
|
|
|
await Promise.all( |
|
Object.keys(importData).map((key: string) => |
|
(async (k) => { |
|
if (!table_names.includes(k)) { |
|
return |
|
} |
|
const data = importData[k] |
|
const total = data.length |
|
|
|
for (let i = 0, progress = 0; i < total; i += maxRowsToParse) { |
|
const batchData = data.slice(i, i + maxRowsToParse).map((row: Record<string, any>) => |
|
srcDestMapping.value[k].reduce((res: Record<string, any>, col: Record<string, any>) => { |
|
if (col.enabled && col.destCn) { |
|
const v = columns.value.find((c: Record<string, any>) => c.title === col.destCn) as Record<string, any> |
|
let input = row[col.srcCn] |
|
// parse potential boolean values |
|
if (v.uidt === UITypes.Checkbox) { |
|
input = input ? input.replace(/["']/g, '').toLowerCase().trim() : 'false' |
|
if (input === 'false' || input === 'no' || input === 'n') { |
|
input = '0' |
|
} else if (input === 'true' || input === 'yes' || input === 'y') { |
|
input = '1' |
|
} |
|
} else if (v.uidt === UITypes.Number) { |
|
if (input === '') { |
|
input = null |
|
} |
|
} else if (v.uidt === UITypes.SingleSelect || v.uidt === UITypes.MultiSelect) { |
|
if (input === '') { |
|
input = null |
|
} |
|
} else if (v.uidt === UITypes.Date) { |
|
if (input) { |
|
input = parseStringDate(input, v.meta.date_format) |
|
} |
|
} |
|
res[col.destCn] = input |
|
} |
|
return res |
|
}, {}), |
|
) |
|
await $api.dbTableRow.bulkCreate('noco', baseId, tableId!, batchData) |
|
updateImportTips(baseId, tableId!, progress, total) |
|
progress += batchData.length |
|
} |
|
})(key), |
|
), |
|
) |
|
|
|
// reload table |
|
reloadHook.trigger() |
|
|
|
// Successfully imported table data |
|
message.success(t('msg.success.tableDataImported')) |
|
} catch (e: any) { |
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
} finally { |
|
isImporting.value = false |
|
} |
|
} else { |
|
// check if form is valid |
|
try { |
|
await validate() |
|
} catch (errorInfo) { |
|
isImporting.value = false |
|
throw new Error('Please fill all the required values') |
|
} |
|
|
|
try { |
|
isImporting.value = true |
|
// tab info to be used to show the tab after successful import |
|
const tab = { |
|
id: '', |
|
title: '', |
|
baseId: '', |
|
} |
|
|
|
// create tables |
|
for (const table of data.tables) { |
|
// enrich system fields if not provided |
|
// e.g. id, created_at, updated_at |
|
const systemColumns = sqlUi?.value.getNewTableColumns().filter((c: ColumnType) => c.column_name !== 'title') |
|
for (const systemColumn of systemColumns) { |
|
if (!table.columns?.some((c) => c.column_name?.toLowerCase() === systemColumn.column_name.toLowerCase())) { |
|
table.columns?.push(systemColumn) |
|
} |
|
} |
|
|
|
if (table.columns) { |
|
for (const column of table.columns) { |
|
// set pk & rqd if ID is provided |
|
if (column.column_name?.toLowerCase() === 'id' && !('pk' in column)) { |
|
column.pk = true |
|
column.rqd = true |
|
} |
|
if ( |
|
(!isSystemColumn(column) || ['created_at', 'updated_at'].includes(column.column_name!)) && |
|
column.uidt !== UITypes.SingleSelect && |
|
column.uidt !== UITypes.MultiSelect |
|
) { |
|
// delete dtxp if the final data type is not single & multi select |
|
// e.g. import -> detect as single / multi select -> switch to SingleLineText |
|
// the correct dtxp will be generated during column creation |
|
delete column.dtxp |
|
} |
|
} |
|
} |
|
const createdTable = await $api.source.tableCreate(base.value?.id as string, (sourceId || base.value?.sources?.[0].id)!, { |
|
table_name: table.table_name, |
|
// leave title empty to get a generated one based on table_name |
|
title: '', |
|
columns: table.columns || [], |
|
}) |
|
|
|
if (process.env.NC_SANITIZE_COLUMN_NAME !== 'false') { |
|
// column_name could have been updated in tableCreate |
|
// e.g. sanitize column name to something like field_1, field_2, and etc |
|
createdTable.columns.forEach((column, i) => { |
|
table.columns[i].column_name = column.column_name |
|
}) |
|
} |
|
|
|
table.id = createdTable.id |
|
table.title = createdTable.title |
|
|
|
// open the first table after import |
|
if (tab.id === '' && tab.title === '' && tab.baseId === '') { |
|
tab.id = createdTable.id as string |
|
tab.title = createdTable.title as string |
|
tab.baseId = base.value.id as string |
|
} |
|
|
|
// set display value |
|
if (createdTable?.columns?.[0]?.id) { |
|
await $api.dbTableColumn.primaryColumnSet(createdTable.columns[0].id as string) |
|
} |
|
} |
|
|
|
// bulk insert data |
|
if (importData) { |
|
const offset = maxRowsToParse |
|
const baseName = base.value.title as string |
|
await Promise.all( |
|
data.tables.map((table: Record<string, any>) => |
|
(async (tableMeta) => { |
|
let progress = 0 |
|
let total = 0 |
|
// use ref_table_name here instead of table_name |
|
// since importData[talbeMeta.table_name] would be empty after renaming |
|
const data = importData[tableMeta.ref_table_name] |
|
if (data) { |
|
total += data.length |
|
for (let i = 0; i < data.length; i += offset) { |
|
updateImportTips(baseName, tableMeta.title, progress, total) |
|
const batchData = remapColNames(data.slice(i, i + offset), tableMeta.columns) |
|
await $api.dbTableRow.bulkCreate('noco', base.value.id, tableMeta.id, batchData) |
|
progress += batchData.length |
|
} |
|
updateImportTips(baseName, tableMeta.title, total, total) |
|
} |
|
})(table), |
|
), |
|
) |
|
} |
|
// reload table list |
|
await loadProjectTables(base.value.id, true) |
|
|
|
addTab({ |
|
...tab, |
|
type: TabType.TABLE, |
|
}) |
|
} catch (e: any) { |
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
} finally { |
|
isImporting.value = false |
|
} |
|
} |
|
|
|
if (!data.tables?.length) return |
|
|
|
const tables = baseTables.value.get(base.value!.id!) |
|
const toBeNavigatedTable = tables?.find((t) => t.id === data.tables[0].id) |
|
if (!toBeNavigatedTable) return |
|
|
|
openTable(toBeNavigatedTable) |
|
} |
|
|
|
function mapDefaultColumns() { |
|
srcDestMapping.value = {} |
|
for (let i = 0; i < data.tables.length; i++) { |
|
for (const col of importColumns[i]) { |
|
const o = { srcCn: col.column_name, srcTitle: col.title, destCn: '', enabled: true } |
|
if (columns.value) { |
|
const tableColumn = columns.value.find((c) => c.column_name === col.column_name) |
|
if (tableColumn) { |
|
o.destCn = tableColumn.title as string |
|
} else { |
|
o.enabled = false |
|
} |
|
} |
|
if (!(data.tables[i].table_name in srcDestMapping.value)) { |
|
srcDestMapping.value[data.tables[i].table_name] = [] |
|
} |
|
srcDestMapping.value[data.tables[i].table_name].push(o) |
|
} |
|
} |
|
} |
|
|
|
defineExpose({ |
|
importTemplate, |
|
isValid, |
|
}) |
|
|
|
function handleEditableTnChange(idx: number) { |
|
const oldValue = prevEditableTn.value[idx] |
|
const newValue = data.tables[idx].table_name |
|
if (data.tables.filter((t) => t.table_name === newValue).length > 1) { |
|
message.warn('Duplicate Table Name') |
|
data.tables[idx].table_name = oldValue |
|
} else { |
|
prevEditableTn.value[idx] = newValue |
|
} |
|
setEditableTn(idx, false) |
|
} |
|
|
|
function isSelectDisabled(uidt: string, disableSelect = false) { |
|
return (uidt === UITypes.SingleSelect || uidt === UITypes.MultiSelect) && disableSelect |
|
} |
|
|
|
function handleCheckAllRecord(event: CheckboxChangeEvent, tableName: string) { |
|
const isChecked = event.target.checked |
|
for (const record of srcDestMapping.value[tableName]) { |
|
record.enabled = isChecked |
|
} |
|
} |
|
|
|
function handleUIDTChange(column, table) { |
|
if (!importWorker) return |
|
|
|
const handler = (e) => { |
|
const [type, payload] = e.data |
|
switch (type) { |
|
case ImportWorkerResponse.SINGLE_SELECT_OPTIONS: |
|
case ImportWorkerResponse.MULTI_SELECT_OPTIONS: |
|
importWorker.removeEventListener('message', handler, false) |
|
column.dtxp = payload |
|
break |
|
} |
|
} |
|
|
|
if (column.uidt === UITypes.SingleSelect) { |
|
importWorker.addEventListener('message', handler, false) |
|
importWorker.postMessage([ |
|
ImportWorkerOperations.GET_SINGLE_SELECT_OPTIONS, |
|
{ |
|
tableName: table.ref_table_name, |
|
columnName: column.ref_column_name, |
|
}, |
|
]) |
|
} else if (column.uidt === UITypes.MultiSelect) { |
|
importWorker.addEventListener('message', handler, false) |
|
importWorker.postMessage([ |
|
ImportWorkerOperations.GET_MULTI_SELECT_OPTIONS, |
|
{ |
|
tableName: table.ref_table_name, |
|
columnName: column.ref_column_name, |
|
}, |
|
]) |
|
} |
|
} |
|
|
|
const setErrorState = (errorsFields: any[]) => { |
|
const errorMap: any = {} |
|
for (const error of errorsFields) { |
|
errorMap[error.name] = error.errors |
|
} |
|
|
|
formError.value = errorMap |
|
} |
|
|
|
function populateUniqueColumnName(cn: string, draftCn: string[] = [], columns: ColumnType[]) { |
|
let c = 2 |
|
let columnName = `${cn}${1}` |
|
while ( |
|
draftCn.includes(columnName) || |
|
columns?.some((c) => { |
|
return c.column_name === columnName || c.title === columnName |
|
}) |
|
) { |
|
columnName = `${cn}${c++}` |
|
} |
|
return columnName |
|
} |
|
|
|
watch(formRef, () => { |
|
setTimeout(async () => { |
|
try { |
|
await validate() |
|
emit('change') |
|
formError.value = null |
|
} catch (e: any) { |
|
emit('error', e) |
|
setErrorState(e.errorFields) |
|
} |
|
}, 500) |
|
}) |
|
|
|
watch(modelRef, async () => { |
|
try { |
|
await validate() |
|
emit('change') |
|
formError.value = null |
|
} catch (e: any) { |
|
emit('error', e) |
|
setErrorState(e.errorFields) |
|
} |
|
}) |
|
</script> |
|
|
|
<template> |
|
<a-spin :spinning="isImporting" size="large"> |
|
<template #tip> |
|
<p v-for="(importingTip, idx) of importingTips" :key="idx" class="mt-[10px]"> |
|
{{ importingTip }} |
|
</p> |
|
</template> |
|
<a-card v-if="importDataOnly"> |
|
<a-form :model="data" name="import-only"> |
|
<p v-if="data.tables && quickImportType === 'excel'" class="text-center"> |
|
{{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }} |
|
available for import |
|
</p> |
|
</a-form> |
|
|
|
<a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel" class="template-collapse" accordion> |
|
<a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx"> |
|
<template #header> |
|
<span class="font-weight-bold text-lg flex items-center gap-2 truncate"> |
|
<component :is="iconMap.table" class="text-primary" /> |
|
{{ table.table_name }} |
|
</span> |
|
</template> |
|
|
|
<template #extra> |
|
<NcTooltip bottom class="inline-block"> |
|
<template #title> |
|
<span>{{ $t('activity.deleteTable') }}</span> |
|
</template> |
|
<component |
|
:is="iconMap.delete" |
|
v-if="data.tables.length > 1" |
|
class="text-lg mr-8" |
|
@click.stop="deleteTable(tableIdx)" |
|
/> |
|
</NcTooltip> |
|
</template> |
|
|
|
<div v-if="srcDestMapping" class="flex w-full max-h-[calc(80vh_-_200px)]"> |
|
<NcTable |
|
class="template-form flex-1" |
|
body-row-class-name="template-form-row" |
|
:data="srcDestMapping[table.table_name]" |
|
:columns="srcDestMappingColumns" |
|
:bordered="false" |
|
> |
|
<template #headerCell="{ column }"> |
|
<span v-if="column.key !== 'action'"> |
|
{{ column.title }} |
|
</span> |
|
<span v-if="column.key === 'action'"> |
|
<a-checkbox |
|
v-model:checked="checkAllRecord[table.table_name]" |
|
@change="handleCheckAllRecord($event, table.table_name)" |
|
/> |
|
</span> |
|
</template> |
|
|
|
<template #bodyCell="{ column, record }"> |
|
<template v-if="column.key === 'source_column'"> |
|
<NcTooltip class="truncate inline-block"> |
|
<template #title>{{ record.srcTitle }}</template> |
|
{{ record.srcTitle }} |
|
</NcTooltip> |
|
</template> |
|
|
|
<template v-else-if="column.key === 'destination_column'"> |
|
<a-select |
|
v-model:value="record.destCn" |
|
class="w-full" |
|
show-search |
|
:filter-option="filterOption" |
|
dropdown-class-name="nc-dropdown-filter-field" |
|
> |
|
<template #suffixIcon> |
|
<GeneralIcon icon="arrowDown" class="text-current" /> |
|
</template> |
|
<a-select-option v-for="(col, i) of columns" :key="i" :value="col.title"> |
|
<div class="flex items-center gap-2 w-full"> |
|
<component :is="getUIDTIcon(col.uidt)" class="flex-none w-3.5 h-3.5" /> |
|
<NcTooltip class="truncate flex-1" show-on-truncate-only> |
|
<template #title> |
|
{{ col.title }} |
|
</template> |
|
{{ col.title }} |
|
</NcTooltip> |
|
<component |
|
:is="iconMap.check" |
|
v-if="record.destCn === col.title" |
|
id="nc-selected-item-icon" |
|
class="flex-none text-primary w-4 h-4" |
|
/> |
|
</div> |
|
</a-select-option> |
|
</a-select> |
|
</template> |
|
|
|
<template v-if="column.key === 'action'"> |
|
<a-checkbox v-model:checked="record.enabled" /> |
|
</template> |
|
</template> |
|
</NcTable> |
|
</div> |
|
</a-collapse-panel> |
|
</a-collapse> |
|
</a-card> |
|
|
|
<a-card v-else> |
|
<a-form ref="formRef" :model="data" name="template-editor-form" @keydown.enter="emit('import')"> |
|
<p v-if="data.tables && quickImportType === 'excel'" class="text-center"> |
|
{{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }} |
|
available for import |
|
</p> |
|
|
|
<a-collapse |
|
v-if="data.tables && data.tables.length" |
|
v-model:activeKey="expansionPanel" |
|
class="template-collapse" |
|
accordion |
|
> |
|
<a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx"> |
|
<template #header> |
|
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style> |
|
<div class="flex flex-col w-full mr-2"> |
|
<a-input |
|
v-model:value="table.table_name" |
|
class="font-weight-bold text-lg !rounded-md" |
|
size="large" |
|
hide-details |
|
:bordered="true" |
|
@click.stop |
|
@blur="handleEditableTnChange(tableIdx)" |
|
@keydown.enter="handleEditableTnChange(tableIdx)" |
|
@dblclick="setEditableTn(tableIdx, true)" |
|
/> |
|
<div v-if="formError?.[`tables.${tableIdx}.table_name`]" class="text-red-500 ml-3"> |
|
{{ formError?.[`tables.${tableIdx}.table_name`].join('\n') }} |
|
</div> |
|
</div> |
|
</a-form-item> |
|
</template> |
|
|
|
<template #extra> |
|
<NcTooltip bottom class="inline-block mr-8"> |
|
<template #title> |
|
<span>{{ $t('activity.deleteTable') }}</span> |
|
</template> |
|
<component |
|
:is="iconMap.deleteListItem" |
|
v-if="data.tables.length > 1" |
|
class="text-lg" |
|
@click.stop="deleteTable(tableIdx)" |
|
/> |
|
</NcTooltip> |
|
</template> |
|
<div v-if="table.columns && table.columns.length" class="flex w-full max-h-[calc(80vh_-_200px)]"> |
|
<NcTable |
|
class="template-form flex-1" |
|
body-row-class-name="template-form-row" |
|
:data="table.columns" |
|
:columns="tableColumns" |
|
:bordered="false" |
|
:pagination="table.columns.length > 50 ? { defaultPageSize: 50, position: ['bottomCenter'] } : 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> |
|
{{ $t('general.options') }} |
|
</span> |
|
</template> |
|
</template> |
|
|
|
<template #bodyCell="{ column, record }"> |
|
<template v-if="column.key === 'column_name'"> |
|
<a-form-item |
|
v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.title`]" |
|
class="nc-table-field-name !mb-0 w-full" |
|
> |
|
<a-input |
|
:ref="(el: HTMLInputElement) => (inputRefs[record.key] = el)" |
|
v-model:value="record.title" |
|
class="!rounded-md" |
|
> |
|
<template #suffix> |
|
<NcTooltip v-if="formError?.[`tables.${tableIdx}.columns.${record.key}.title`]" class="flex"> |
|
<template #title |
|
>{{ formError?.[`tables.${tableIdx}.columns.${record.key}.title`].join('\n') }} |
|
</template> |
|
<GeneralIcon icon="info" class="h-4 w-4 text-red-500 flex-none" /> |
|
</NcTooltip> |
|
</template> |
|
</a-input> |
|
</a-form-item> |
|
</template> |
|
|
|
<template v-else-if="column.key === 'uidt'"> |
|
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.uidt`]" class="!mb-0 w-full"> |
|
<NcTooltip :disabled="importDataOnly"> |
|
<template #title> |
|
{{ $t('tooltip.useFieldEditMenuToConfigFieldType') }} |
|
</template> |
|
<a-select |
|
v-model:value="record.uidt" |
|
class="w-52" |
|
show-search |
|
:filter-option="filterOption" |
|
dropdown-class-name="nc-dropdown-template-uidt" |
|
:disabled="!importDataOnly" |
|
@change="handleUIDTChange(record, table)" |
|
> |
|
<template #suffixIcon> |
|
<GeneralIcon icon="arrowDown" class="text-current" /> |
|
</template> |
|
|
|
<a-select-option v-for="(option, i) of uiTypeOptions" :key="i" :value="option.value"> |
|
<div class="flex items-center gap-2"> |
|
<component :is="getUIDTIcon(UITypes[option.value])" class="h-3.5 w-3.5" /> |
|
<NcTooltip placement="right" :disabled="!importDataOnly" show-on-truncate-only> |
|
<template v-if="isSelectDisabled(option.label, table.columns[record.key]?._disableSelect)" #title> |
|
{{ |
|
$t('msg.tooLargeFieldEntity', { |
|
entity: option.label, |
|
}) |
|
}} |
|
</template> |
|
{{ option.label }} |
|
</NcTooltip> |
|
</div> |
|
</a-select-option> |
|
</a-select> |
|
</NcTooltip> |
|
</a-form-item> |
|
</template> |
|
|
|
<template v-if="column.key === 'action'"> |
|
<NcTooltip class="inline-block"> |
|
<template #title> |
|
<span>{{ $t('activity.column.delete') }}</span> |
|
</template> |
|
|
|
<NcButton |
|
type="text" |
|
size="small" |
|
:disabled="table.columns.length === 1" |
|
@click="deleteTableColumn(tableIdx, record.key)" |
|
> |
|
<component :is="iconMap.deleteListItem" /> |
|
</NcButton> |
|
</NcTooltip> |
|
</template> |
|
</template> |
|
</NcTable> |
|
</div> |
|
</a-collapse-panel> |
|
</a-collapse> |
|
</a-form> |
|
</a-card> |
|
</a-spin> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.template-collapse { |
|
@apply bg-white; |
|
} |
|
|
|
:deep(.ant-collapse-header) { |
|
@apply !items-center; |
|
& > div { |
|
@apply flex; |
|
} |
|
} |
|
.nc-table-field-name { |
|
:deep(.ant-form-item-explain) { |
|
@apply hidden; |
|
} |
|
} |
|
</style>
|
|
|