mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
294 lines
8.7 KiB
294 lines
8.7 KiB
<script setup lang="ts"> |
|
import type { ColumnType } from 'nocodb-sdk' |
|
import { UITypes } from 'nocodb-sdk' |
|
import type { SizeType } from 'ant-design-vue/es/config-provider' |
|
import { computed, onMounted, provide, watch } from '#imports' |
|
import MdiTableIcon from '~icons/mdi/table' |
|
import MdiDeleteIcon from '~icons/mdi/close-box' |
|
import MdiStringIcon from '~icons/mdi/alpha-a' |
|
import MdiLongTextIcon from '~icons/mdi/text' |
|
import MdiNumericIcon from '~icons/mdi/numeric' |
|
import MdiPlusIcon from '~icons/mdi/plus' |
|
|
|
interface Props { |
|
quickImportType: string |
|
projectTemplate: object |
|
} |
|
|
|
const { quickImportType, projectTemplate } = defineProps<Props>() |
|
|
|
const valid = ref(false) |
|
const expansionPanel = ref(<number[]>[]) |
|
const editableTn = ref({}) |
|
const LinkToAnotherRecord = 'LinkToAnotherRecord' |
|
const Lookup = 'Lookup' |
|
const Rollup = 'Rollup' |
|
const iconSize = ref<SizeType>('middle') |
|
const tableColumns = [ |
|
{ |
|
name: 'Column Name', |
|
dataIndex: 'column_name', |
|
key: 'column_name', |
|
}, |
|
{ |
|
name: 'Column Type', |
|
dataIndex: 'column_type', |
|
key: 'column_type', |
|
}, |
|
] |
|
|
|
const project = reactive(<any>{ |
|
name: 'Project Name', |
|
tables: [], |
|
}) |
|
|
|
onMounted(() => { |
|
parseAndLoadTemplate() |
|
}) |
|
|
|
const parseAndLoadTemplate = () => { |
|
if (projectTemplate) { |
|
parseTemplate(projectTemplate) |
|
expansionPanel.value = Array.from({ length: project.value?.tables.length || 0 }, (_, i) => i) |
|
} |
|
} |
|
|
|
const parseTemplate = ({ tables = [], ...rest }: Record<string, any>) => { |
|
const parsedTemplate = { |
|
...rest, |
|
tables: tables.map( |
|
({ manyToMany = [], hasMany = [], belongsTo = [], v = [], columns = [], ...rest }: Record<string, any>) => ({ |
|
...rest, |
|
columns: [ |
|
...columns, |
|
...manyToMany.map((mm: any) => ({ |
|
column_name: mm.title || `${rest.table_name} <=> ${mm.ref_table_name}`, |
|
uidt: LinkToAnotherRecord, |
|
type: 'mm', |
|
...mm, |
|
})), |
|
...hasMany.map((hm: any) => ({ |
|
column_name: hm.title || `${rest.table_name} => ${hm.table_name}`, |
|
uidt: LinkToAnotherRecord, |
|
type: 'hm', |
|
ref_table_name: hm.table_name, |
|
...hm, |
|
})), |
|
...belongsTo.map((bt: any) => ({ |
|
column_name: bt.title || `${rest.table_name} => ${bt.ref_table_name}`, |
|
uidt: UITypes.ForeignKey, |
|
ref_table_name: bt.table_name, |
|
...bt, |
|
})), |
|
...v.map((v: any) => { |
|
const res: any = { |
|
column_name: v.title, |
|
ref_table_name: { |
|
...v, |
|
}, |
|
} |
|
if (v.lk) { |
|
res.uidt = Lookup |
|
res.ref_table_name.table_name = v.lk.ltn |
|
res.ref_column_name = v.lk.lcn |
|
res.ref_table_name.type = v.lk.type |
|
} else if (v.rl) { |
|
res.uidt = Rollup |
|
res.ref_table_name.table_name = v.rl.rltn |
|
res.ref_column_name = v.rl.rlcn |
|
res.ref_table_name.type = v.rl.type |
|
res.fn = v.rl.fn |
|
} |
|
return res |
|
}), |
|
], |
|
}), |
|
), |
|
} |
|
console.log(parsedTemplate) |
|
project.value = parsedTemplate |
|
} |
|
|
|
const onTableNameUpdate = (oldTable: string, newVal: string) => { |
|
// TODO: |
|
} |
|
|
|
const deleteTable = (tableIdx: number) => { |
|
// TODO: |
|
} |
|
|
|
const isRelation = (col: ColumnType) => { |
|
return col.uidt === 'LinkToAnotherRecord' || col.uidt === 'ForeignKey' |
|
} |
|
|
|
const isLookup = (col: ColumnType) => { |
|
return col.uidt === 'Lookup' |
|
} |
|
|
|
const isRollup = (col: ColumnType) => { |
|
return col.uidt === 'Rollup' |
|
} |
|
|
|
const isVirtual = (col: ColumnType) => { |
|
// TODO: uiTypes |
|
// return col && uiTypes.some(ut => ut.name === col.uidt && ut.virtual); |
|
} |
|
|
|
const isLookupOrRollup = (col: ColumnType) => { |
|
return isLookup(col) || isRollup(col) |
|
} |
|
|
|
const isSelect = (col: ColumnType) => { |
|
return col.uidt === 'MultiSelect' || col.uidt === 'SingleSelect' |
|
} |
|
|
|
const onColumnNameUpdate = (oldCol: ColumnType, newVal: string, tn: string) => { |
|
// TODO |
|
} |
|
|
|
const onRTypeChange = (oldType: string, newType: string, col: ColumnType, table: string) => { |
|
// TODO |
|
} |
|
|
|
const deleteTableColumn = (i: number, j: number, col: ColumnType, table: string) => { |
|
// TODO |
|
} |
|
|
|
const addNewColumnRow = (table: string, uidt?: string) => { |
|
// TODO |
|
} |
|
|
|
const getIcon = (type: string) => { |
|
// TODO |
|
return { |
|
name: 'CreateTime', |
|
icon: 'mdi-calendar-clock', |
|
} |
|
} |
|
</script> |
|
|
|
<template> |
|
<a-card> |
|
<template #title> |
|
<slot name="toolbar" /> |
|
</template> |
|
<v-form ref="form" v-model="valid"> |
|
<p v-if="project.tables && quickImportType === 'excel'" class="caption grey--text mt-4"> |
|
{{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' : '' }} |
|
available for import |
|
</p> |
|
<a-collapse |
|
v-if="project.value?.tables && project.value?.tables.length" |
|
v-model:activeKey="expansionPanel" |
|
v-for="(table, i) in project.value?.tables" |
|
:key="i" |
|
> |
|
<template #expandIcon="{ isActive }"> |
|
<v-text-field |
|
v-if="editableTn[i]" |
|
:value="table.table_name" |
|
class="font-weight-bold" |
|
style="max-width: 300px" |
|
outlinedk |
|
autofocus |
|
density="compact" |
|
hide-details |
|
@input="(e) => onTableNameUpdate(table, e)" |
|
@click="(e) => e.stopPropagation()" |
|
@blur="$set(editableTn, i, false)" |
|
@keydown.enter="$set(editableTn, i, false)" |
|
/> |
|
<span v-else class="font-weight-bold"> |
|
<MdiTableIcon /> |
|
{{ table.table_name }} |
|
</span> |
|
<v-spacer /> |
|
<a-tooltip bottom> |
|
<template #title> |
|
<!-- TODO: i18n --> |
|
<span>Delete Table</span> |
|
</template> |
|
<MdiDeleteIcon v-if="project.value.tables.length > 1" @click.stop="deleteTable(i)" /> |
|
</a-tooltip> |
|
</template> |
|
<a-collapse-panel> |
|
<a-table v-if="table.columns.length" :dataSource="table.columns" :columns="tableColumns" class="my-4"> |
|
<template #headerCell="{ column }"> |
|
<template v-if="column.key === 'column_name'"> |
|
<span> |
|
{{ $t('labels.columnName') }} |
|
</span> |
|
</template> |
|
<template v-else-if="column.key === 'column_type'"> |
|
<span> |
|
{{ $t('labels.columnType') }} |
|
</span> |
|
</template> |
|
</template> |
|
<template #bodyCell="{ column, record }"> |
|
<template v-if="column.key === 'column_name'"> |
|
<!-- TODO: make it editable --> |
|
<span> {{ record.column_name }} </span> |
|
</template> |
|
<template v-else-if="column.key === 'column_type'"> |
|
<!-- TODO: render uidt dropdown--> |
|
{{ record.uidt }} |
|
</template> |
|
</template> |
|
</a-table> |
|
|
|
<div v-if="!viewMode" class="text-center"> |
|
<a-tooltip bottom> |
|
<template #title> |
|
<!-- TODO: i18n --> |
|
<span>Add Number Column</span> |
|
</template> |
|
<a-button @click="addNewColumnRow(table, 'Number')" :size="iconSize"> |
|
<template #icon> |
|
<MdiNumericIcon /> |
|
</template> |
|
</a-button> |
|
</a-tooltip> |
|
|
|
<a-tooltip bottom> |
|
<template #title> |
|
<!-- TODO: i18n --> |
|
<span>Add SingleLineText Column</span> |
|
</template> |
|
<a-button @click="addNewColumnRow(table, 'SingleLineText')" :size="iconSize"> |
|
<template #icon> |
|
<MdiStringIcon /> |
|
</template> |
|
</a-button> |
|
</a-tooltip> |
|
|
|
<a-tooltip bottom> |
|
<template #title> |
|
<!-- TODO: i18n --> |
|
<span>Add LongText Column</span> |
|
</template> |
|
<a-button @click="addNewColumnRow(table, 'LongText')" :size="iconSize"> |
|
<template #icon> |
|
<MdiLongTextIcon /> |
|
</template> |
|
</a-button> |
|
</a-tooltip> |
|
|
|
<a-tooltip bottom> |
|
<template #title> |
|
<!-- TODO: i18n --> |
|
<span>Add Other Column</span> |
|
</template> |
|
<a-button @click="addNewColumnRow(table)" :size="iconSize"> |
|
<template #icon> |
|
<MdiPlusIcon /> |
|
</template> |
|
Column |
|
</a-button> |
|
</a-tooltip> |
|
</div> |
|
</a-collapse-panel> |
|
</a-collapse> |
|
</v-form> |
|
</a-card> |
|
</template>
|
|
|