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.
421 lines
20 KiB
421 lines
20 KiB
2 years ago
|
<script setup lang="ts">
|
||
|
|
import { useEventBus } from '@vueuse/core'
|
||
|
|
import type { ColumnType, FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
|
||
|
|
import { ViewTypes } from 'nocodb-sdk'
|
||
|
|
import { computed, onMounted, provide, watch } from '#imports'
|
||
|
|
import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/components'
|
||
|
|
import useMetas from '~/composables/useMetas'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
quickimportType: string
|
||
|
|
}
|
||
|
|
const { quickimportType } = defineProps<Props>()
|
||
|
|
|
||
|
|
const expansionPanel = ref(0)
|
||
|
|
const editableTn = ref({})
|
||
|
|
const project = ref({
|
||
|
|
name: 'Project name',
|
||
|
|
tables: [],
|
||
|
|
})
|
||
|
|
|
||
|
|
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
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="h-100" style="min-height: 500px">
|
||
|
|
<v-toolbar class="elevation-0">
|
||
|
|
<slot name="toolbar" />
|
||
|
|
</v-toolbar>
|
||
|
|
<v-divider class="mt-6" />
|
||
|
|
<v-container class="text-center" style="height: calc(100% - 64px); overflow-y: auto">
|
||
|
|
<v-form ref="form" v-model="valid">
|
||
|
|
<v-row fluid class="justify-center">
|
||
|
|
<v-col cols="12">
|
||
|
|
<v-card class="elevation-0">
|
||
|
|
<v-card-text>
|
||
|
|
<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>
|
||
|
|
<v-expansion-panels v-if="project.tables && project.tables.length" v-model="expansionPanel" accordion>
|
||
|
|
<v-expansion-panel v-for="(table, i) in project.tables" :key="i">
|
||
|
|
<v-expansion-panel-header :id="`tn_${table.table_name}`">
|
||
|
|
<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" @click="(e) => (e.stopPropagation(), $set(editableTn, i, true))">
|
||
|
|
<v-icon color="primary lighten-1">mdi-table</v-icon>
|
||
|
|
{{ table.table_name }}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<v-spacer />
|
||
|
|
<v-tooltip bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-icon
|
||
|
|
v-if="project.tables.length > 1"
|
||
|
|
class="flex-grow-0 mr-2"
|
||
|
|
small
|
||
|
|
color="grey"
|
||
|
|
@click.stop="deleteTable(i)"
|
||
|
|
v-on="on"
|
||
|
|
>
|
||
|
|
mdi-delete-outline
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<!-- TODO: i18n -->
|
||
|
|
<span>Delete Table</span>
|
||
|
|
</v-tooltip>
|
||
|
|
</v-expansion-panel-header>
|
||
|
|
<v-expansion-panel-content>
|
||
|
|
<template>
|
||
|
|
<v-simple-table v-if="table.columns.length" dense class="my-4">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th class="caption text-left pa-1">
|
||
|
|
<!-- Column Name -->
|
||
|
|
{{ $t('labels.columnName') }}
|
||
|
|
</th>
|
||
|
|
<th class="caption text-left pa-1" colspan="4">
|
||
|
|
<!-- Column Type -->
|
||
|
|
{{ $t('labels.columnType') }}
|
||
|
|
</th>
|
||
|
|
<th />
|
||
|
|
<!-- <th class='text-center'>Related Table</th> -->
|
||
|
|
<!-- <th class='text-center'>Related Column</th> -->
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="(col, j) in table.columns" :key="j" :data-exp="i">
|
||
|
|
<td class="pa-1 text-left" :style="{ width: '15%' }">
|
||
|
|
<v-text-field
|
||
|
|
:ref="`cn_${table.table_name}_${j}`"
|
||
|
|
:value="col.column_name"
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
class="caption"
|
||
|
|
:placeholder="$t('labels.columnName')"
|
||
|
|
hide-details="auto"
|
||
|
|
:rules="[
|
||
|
|
(v) => !!v || 'Column name required',
|
||
|
|
(v) =>
|
||
|
|
!table.columns.some((c) => c !== col && c.column_name === v) ||
|
||
|
|
'Duplicate column not allowed',
|
||
|
|
]"
|
||
|
|
@input="(e) => onColumnNameUpdate(col, e, table.table_name)"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<template>
|
||
|
|
<td class="pa-1 text-left" style="width: 200px; max-width: 200px">
|
||
|
|
<v-autocomplete
|
||
|
|
:ref="`uidt_${table.table_name}_${j}`"
|
||
|
|
style="max-width: 200px"
|
||
|
|
:value="col.uidt"
|
||
|
|
placeholder="Column Data Type"
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
class="caption"
|
||
|
|
hide-details="auto"
|
||
|
|
:rules="[(v) => !!v || 'Column data type required']"
|
||
|
|
:items="
|
||
|
|
col.uidt === 'ForeignKey'
|
||
|
|
? [
|
||
|
|
...uiTypes,
|
||
|
|
{
|
||
|
|
name: 'ForeignKey',
|
||
|
|
icon: 'mdi-link-variant',
|
||
|
|
virtual: 1,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
: uiTypes
|
||
|
|
"
|
||
|
|
item-text="name"
|
||
|
|
item-value="name"
|
||
|
|
@input="(v) => onUidtChange(col.uidt, v, col, table)"
|
||
|
|
>
|
||
|
|
<template #item="{ item: { name } }">
|
||
|
|
<v-chip v-if="colors[name]" :color="colors[name]" small>
|
||
|
|
{{ name }}
|
||
|
|
</v-chip>
|
||
|
|
<span v-else class="caption">{{ name }}</span>
|
||
|
|
</template>
|
||
|
|
<template #selection="{ item: { name } }">
|
||
|
|
<v-chip v-if="colors[name]" :color="colors[name]" small style="max-width: 100px">
|
||
|
|
{{ name }}
|
||
|
|
</v-chip>
|
||
|
|
<span v-else class="caption">{{ name }}</span>
|
||
|
|
</template>
|
||
|
|
</v-autocomplete>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<template v-if="isRelation(col) || isLookupOrRollup(col)">
|
||
|
|
<td class="pa-1 text-left">
|
||
|
|
<v-autocomplete
|
||
|
|
:value="col.ref_table_name"
|
||
|
|
placeholder="Related table"
|
||
|
|
outlined
|
||
|
|
class="caption"
|
||
|
|
dense
|
||
|
|
hide-details="auto"
|
||
|
|
:rules="[(v) => !!v || 'Related table name required', ...getRules(col, table)]"
|
||
|
|
:items="
|
||
|
|
isLookupOrRollup(col) ? getRelatedTables(table.table_name, isRollup(col)) : project.tables
|
||
|
|
"
|
||
|
|
:item-text="(t) => (isLookupOrRollup(col) ? `${t.table_name} (${t.type})` : t.table_name)"
|
||
|
|
:item-value="(t) => (isLookupOrRollup(col) ? t : t.table_name)"
|
||
|
|
:value-comparator="compareRel"
|
||
|
|
@input="(v) => onRtnChange(col.ref_table_name, v, col, table)"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td v-if="isRelation(col)" class="pa-1">
|
||
|
|
<template v-if="col.uidt !== 'ForeignKey'">
|
||
|
|
<v-autocomplete
|
||
|
|
:value="col.type"
|
||
|
|
placeholder="Relation Type"
|
||
|
|
outlined
|
||
|
|
class="caption"
|
||
|
|
dense
|
||
|
|
hide-details="auto"
|
||
|
|
:rules="[(v) => !!v || 'Relation type required']"
|
||
|
|
:items="[
|
||
|
|
{ text: 'Many To Many', value: 'mm' },
|
||
|
|
{ text: 'Has Many', value: 'hm' },
|
||
|
|
]"
|
||
|
|
@input="(v) => onRTypeChange(col.type, v, col, table)"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</td>
|
||
|
|
<td v-if="isLookupOrRollup(col)" class="pa-1">
|
||
|
|
<v-autocomplete
|
||
|
|
v-model="col.ref_column_name"
|
||
|
|
placeholder="Related table column"
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
class="caption"
|
||
|
|
hide-details="auto"
|
||
|
|
:rules="[(v) => !!v || 'Related column name required']"
|
||
|
|
:items="
|
||
|
|
(
|
||
|
|
project.tables.find(
|
||
|
|
(t) =>
|
||
|
|
t.table_name ===
|
||
|
|
((col.ref_table_name && col.ref_table_name.table_name) || col.ref_table_name),
|
||
|
|
) || { columns: [] }
|
||
|
|
).columns.filter((v) => !isVirtual(v))
|
||
|
|
"
|
||
|
|
item-text="column_name"
|
||
|
|
item-value="column_name"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<td v-if="isRollup(col)" class="pa-1">
|
||
|
|
<v-autocomplete
|
||
|
|
v-model="col.fn"
|
||
|
|
placeholder="Rollup function"
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
class="caption"
|
||
|
|
hide-details="auto"
|
||
|
|
:rules="[(v) => !!v || 'Rollup aggregate function name required']"
|
||
|
|
:items="rollupFnList"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
</template>
|
||
|
|
<template v-if="isSelect(col)">
|
||
|
|
<td class="pa-1 text-left" colspan="2">
|
||
|
|
<v-text-field
|
||
|
|
v-model="col.dtxp"
|
||
|
|
placeholder="Select options"
|
||
|
|
outlined
|
||
|
|
class="caption"
|
||
|
|
dense
|
||
|
|
hide-details
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
</template>
|
||
|
|
<td
|
||
|
|
v-if="!isRollup(col)"
|
||
|
|
:colspan="
|
||
|
|
isLookupOrRollup(col) || isRelation(col) || isSelect(col) ? (isRollup(col) ? 0 : 1) : 3
|
||
|
|
"
|
||
|
|
/>
|
||
|
|
<td style="max-width: 50px; width: 50px">
|
||
|
|
<v-tooltip v-if="j == 0" bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<x-icon small class="mr-1" color="primary" v-on="on"> mdi-key-star </x-icon>
|
||
|
|
</template>
|
||
|
|
<!-- TODO: i18n -->
|
||
|
|
<span>Primary Value</span>
|
||
|
|
</v-tooltip>
|
||
|
|
<v-tooltip v-else bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-icon
|
||
|
|
class="flex-grow-0"
|
||
|
|
small
|
||
|
|
color="grey"
|
||
|
|
@click.stop="deleteTableColumn(i, j, col, table)"
|
||
|
|
v-on="on"
|
||
|
|
>
|
||
|
|
mdi-delete-outline
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<!-- TODO: i18n -->
|
||
|
|
<span>Delete Column</span>
|
||
|
|
</v-tooltip>
|
||
|
|
</td>
|
||
|
|
</template>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</v-simple-table>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<v-tooltip bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-icon class="mx-2" small @click="addNewColumnRow(table, 'Number')" v-on="on">
|
||
|
|
{{ getIcon('Number') }}
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<!-- TODO: i18n -->
|
||
|
|
<span>Add Number Column</span>
|
||
|
|
</v-tooltip>
|
||
|
|
|
||
|
|
<v-tooltip bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-icon class="mx-2" small @click="addNewColumnRow(table, 'SingleLineText')" v-on="on">
|
||
|
|
{{ getIcon('SingleLineText') }}
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<!-- TODO: i18n -->
|
||
|
|
<span>Add SingleLineText Column</span>
|
||
|
|
</v-tooltip>
|
||
|
|
|
||
|
|
<v-tooltip bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-icon class="mx-2" small @click="addNewColumnRow(table, 'LongText')" v-on="on">
|
||
|
|
{{ getIcon('LongText') }}
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<!-- TODO: i18n -->
|
||
|
|
<span>Add LongText Column</span>
|
||
|
|
</v-tooltip>
|
||
|
|
|
||
|
|
<!-- <v-tooltip bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-icon
|
||
|
|
class="mx-2"
|
||
|
|
small
|
||
|
|
@click="addNewColumnRow(table, 'LinkToAnotherRecord')"
|
||
|
|
v-on="on"
|
||
|
|
>
|
||
|
|
{{ getIcon("LinkToAnotherRecord") }}
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<span>Add LinkToAnotherRecord Column</span>
|
||
|
|
</v-tooltip>
|
||
|
|
|
||
|
|
<v-tooltip bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-icon
|
||
|
|
class="mx-2"
|
||
|
|
small
|
||
|
|
@click="addNewColumnRow(table, 'Lookup')"
|
||
|
|
v-on="on"
|
||
|
|
>
|
||
|
|
{{ getIcon("Lookup") }}
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<span>Add Lookup Column</span>
|
||
|
|
</v-tooltip>
|
||
|
|
|
||
|
|
<v-tooltip bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-icon
|
||
|
|
class="mx-2"
|
||
|
|
small
|
||
|
|
@click="addNewColumnRow(table, 'Rollup')"
|
||
|
|
v-on="on"
|
||
|
|
>
|
||
|
|
{{ getIcon("Rollup") }}
|
||
|
|
</v-icon>
|
||
|
|
</template>
|
||
|
|
<span>Add Rollup Column</span>
|
||
|
|
</v-tooltip> -->
|
||
|
|
|
||
|
|
<v-tooltip bottom>
|
||
|
|
<template #activator="{ on }">
|
||
|
|
<v-btn class="mx-2" small @click="addNewColumnRow(table)" v-on="on"> + column </v-btn>
|
||
|
|
</template>
|
||
|
|
<!-- TODO: i18n -->
|
||
|
|
<span>Add Other Column</span>
|
||
|
|
</v-tooltip>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</v-expansion-panel-content>
|
||
|
|
</v-expansion-panel>
|
||
|
|
</v-expansion-panels>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
</v-form>
|
||
|
|
</v-container>
|
||
|
|
</div>
|
||
|
|
</template>
|