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

wip(gui-v2): integrate with antdv

pull/2828/head
Wing-Kam Wong 2 years ago
parent
562227dbd4
commit
a9ec6580fb
1 changed files with 149 additions and 351 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. 500
      packages/nc-gui-v2/components/template/Editor.vue

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

@ -1,11 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
// import { useEventBus } from '@vueuse/core' import type { ColumnType } from 'nocodb-sdk'
import type { ColumnType, FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk' import { UITypes } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'; import type { SizeType } from 'ant-design-vue/es/config-provider'
// import { ViewTypes } from 'nocodb-sdk'
import { computed, onMounted, provide, watch } from '#imports' import { computed, onMounted, provide, watch } from '#imports'
// import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/components' import MdiTableIcon from '~icons/mdi/table'
// import useMetas from '~/composables/useMetas' 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 { interface Props {
quickImportType: string quickImportType: string
@ -20,6 +23,19 @@ const editableTn = ref({})
const LinkToAnotherRecord = 'LinkToAnotherRecord' const LinkToAnotherRecord = 'LinkToAnotherRecord'
const Lookup = 'Lookup' const Lookup = 'Lookup'
const Rollup = 'Rollup' 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>{ const project = reactive(<any>{
name: 'Project Name', name: 'Project Name',
@ -65,7 +81,7 @@ const parseTemplate = ({ tables = [], ...rest }: Record<string, any>) => {
...bt, ...bt,
})), })),
...v.map((v: any) => { ...v.map((v: any) => {
const res : any = { const res: any = {
column_name: v.title, column_name: v.title,
ref_table_name: { ref_table_name: {
...v, ...v,
@ -141,356 +157,138 @@ const deleteTableColumn = (i: number, j: number, col: ColumnType, table: string)
const addNewColumnRow = (table: string, uidt?: string) => { const addNewColumnRow = (table: string, uidt?: string) => {
// TODO // TODO
} }
const getIcon = (type: string) => {
// TODO
return {
name: 'CreateTime',
icon: 'mdi-calendar-clock',
}
}
</script> </script>
<template> <template>
<div class="h-100" style="min-height: 500px"> <a-card>
<v-toolbar class="elevation-0"> <template #title>
<slot name="toolbar" /> <slot name="toolbar" />
</v-toolbar> </template>
<v-divider class="mt-6" /> <v-form ref="form" v-model="valid">
<v-container class="text-center" style="height: calc(100% - 64px); overflow-y: auto"> <p v-if="project.tables && quickImportType === 'excel'" class="caption grey--text mt-4">
<v-form ref="form" v-model="valid"> {{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' : '' }}
<v-row fluid class="justify-center"> available for import
<v-col cols="12"> </p>
<v-card class="elevation-0"> <a-collapse
<v-card-text> v-if="project.value?.tables && project.value?.tables.length"
{{ project }} v-model:activeKey="expansionPanel"
<p v-if="project.tables && quickImportType === 'excel'" class="caption grey--text mt-4"> v-for="(table, i) in project.value?.tables"
{{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' : '' }} :key="i"
available for import >
</p> <template #expandIcon="{ isActive }">
<v-expansion-panels v-if="project.tables && project.tables.length" v-model="expansionPanel" accordion> <v-text-field
<v-expansion-panel v-for="(table, i) in project.tables" :key="i"> v-if="editableTn[i]"
<v-expansion-panel-header :id="`tn_${table.table_name}`"> :value="table.table_name"
<v-text-field class="font-weight-bold"
v-if="editableTn[i]" style="max-width: 300px"
:value="table.table_name" outlinedk
class="font-weight-bold" autofocus
style="max-width: 300px" density="compact"
outlinedk hide-details
autofocus @input="(e) => onTableNameUpdate(table, e)"
density="compact" @click="(e) => e.stopPropagation()"
hide-details @blur="$set(editableTn, i, false)"
@input="(e) => onTableNameUpdate(table, e)" @keydown.enter="$set(editableTn, i, false)"
@click="(e) => e.stopPropagation()" />
@blur="$set(editableTn, i, false)" <span v-else class="font-weight-bold">
@keydown.enter="$set(editableTn, i, false)" <MdiTableIcon />
/> {{ table.table_name }}
<span v-else class="font-weight-bold" @click="(e) => (e.stopPropagation(), $set(editableTn, i, true))"> </span>
<v-icon color="primary lighten-1">mdi-table</v-icon> <v-spacer />
{{ table.table_name }} <a-tooltip bottom>
</span> <template #title>
<!-- TODO: i18n -->
<v-spacer /> <span>Delete Table</span>
<v-tooltip bottom> </template>
<template #activator="{ on }"> <MdiDeleteIcon v-if="project.value.tables.length > 1" @click.stop="deleteTable(i)" />
<v-icon </a-tooltip>
v-if="project.tables.length > 1" </template>
class="flex-grow-0 mr-2" <a-collapse-panel>
small <a-table v-if="table.columns.length" :dataSource="table.columns" :columns="tableColumns" class="my-4">
color="grey" <template #headerCell="{ column }">
@click.stop="deleteTable(i)" <template v-if="column.key === 'column_name'">
v-on="on" <span>
> {{ $t('labels.columnName') }}
mdi-delete-outline </span>
</v-icon> </template>
</template> <template v-else-if="column.key === 'column_type'">
<!-- TODO: i18n --> <span>
<span>Delete Table</span> {{ $t('labels.columnType') }}
</v-tooltip> </span>
</v-expansion-panel-header> </template>
<v-expansion-panel-content> </template>
<template> <template #bodyCell="{ column, record }">
<v-simple-table v-if="table.columns.length" dense class="my-4"> <template v-if="column.key === 'column_name'">
<thead> <!-- TODO: make it editable -->
<tr> <span> {{ record.column_name }} </span>
<th class="caption text-left pa-1"> </template>
<!-- Column Name --> <template v-else-if="column.key === 'column_type'">
{{ $t('labels.columnName') }} <!-- TODO: render uidt dropdown-->
</th> {{ record.uidt }}
<th class="caption text-left pa-1" colspan="4"> </template>
<!-- Column Type --> </template>
{{ $t('labels.columnType') }} </a-table>
</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> <div v-if="!viewMode" class="text-center">
<template #activator="{ on }"> <a-tooltip bottom>
<v-icon <template #title>
class="mx-2" <!-- TODO: i18n -->
small <span>Add Number Column</span>
@click="addNewColumnRow(table, 'LinkToAnotherRecord')" </template>
v-on="on" <a-button @click="addNewColumnRow(table, 'Number')" :size="iconSize">
> <template #icon>
{{ getIcon("LinkToAnotherRecord") }} <MdiNumericIcon />
</v-icon> </template>
</template> </a-button>
<span>Add LinkToAnotherRecord Column</span> </a-tooltip>
</v-tooltip>
<v-tooltip bottom> <a-tooltip bottom>
<template #activator="{ on }"> <template #title>
<v-icon <!-- TODO: i18n -->
class="mx-2" <span>Add SingleLineText Column</span>
small </template>
@click="addNewColumnRow(table, 'Lookup')" <a-button @click="addNewColumnRow(table, 'SingleLineText')" :size="iconSize">
v-on="on" <template #icon>
> <MdiStringIcon />
{{ getIcon("Lookup") }} </template>
</v-icon> </a-button>
</template> </a-tooltip>
<span>Add Lookup Column</span>
</v-tooltip>
<v-tooltip bottom> <a-tooltip bottom>
<template #activator="{ on }"> <template #title>
<v-icon <!-- TODO: i18n -->
class="mx-2" <span>Add LongText Column</span>
small </template>
@click="addNewColumnRow(table, 'Rollup')" <a-button @click="addNewColumnRow(table, 'LongText')" :size="iconSize">
v-on="on" <template #icon>
> <MdiLongTextIcon />
{{ getIcon("Rollup") }} </template>
</v-icon> </a-button>
</template> </a-tooltip>
<span>Add Rollup Column</span>
</v-tooltip> -->
<v-tooltip bottom> <a-tooltip bottom>
<template #activator="{ on }"> <template #title>
<v-btn class="mx-2" small @click="addNewColumnRow(table)" v-on="on"> + column </v-btn> <!-- TODO: i18n -->
</template> <span>Add Other Column</span>
<!-- TODO: i18n --> </template>
<span>Add Other Column</span> <a-button @click="addNewColumnRow(table)" :size="iconSize">
</v-tooltip> <template #icon>
</div> <MdiPlusIcon />
</template> </template>
</v-expansion-panel-content> Column
</v-expansion-panel> </a-button>
</v-expansion-panels> </a-tooltip>
</v-card-text> </div>
</v-card> </a-collapse-panel>
</v-col> </a-collapse>
</v-row> </v-form>
</v-form> </a-card>
</v-container>
</div>
</template> </template>

Write Preview
Loading…
Cancel
Save