Browse Source

feat(gui-v2): add deleteTable & fix a-collapse panel

pull/2828/head
Wing-Kam Wong 2 years ago
parent
commit
0b9e9188be
  1. 76
      packages/nc-gui-v2/components/template/Editor.vue

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

@ -4,7 +4,6 @@ import { UITypes } from 'nocodb-sdk'
import type { SizeType } from 'ant-design-vue/es/config-provider' import type { SizeType } from 'ant-design-vue/es/config-provider'
import { computed, onMounted, provide, watch } from '#imports' import { computed, onMounted, provide, watch } from '#imports'
import MdiTableIcon from '~icons/mdi/table' import MdiTableIcon from '~icons/mdi/table'
import MdiDeleteIcon from '~icons/mdi/close-box'
import MdiStringIcon from '~icons/mdi/alpha-a' import MdiStringIcon from '~icons/mdi/alpha-a'
import MdiLongTextIcon from '~icons/mdi/text' import MdiLongTextIcon from '~icons/mdi/text'
import MdiNumericIcon from '~icons/mdi/numeric' import MdiNumericIcon from '~icons/mdi/numeric'
@ -96,7 +95,14 @@ const onTableNameUpdate = (oldTable: string, newVal: string) => {
} }
const deleteTable = (tableIdx: number) => { const deleteTable = (tableIdx: number) => {
// TODO: const deleteTable = project.value.tables[tableIdx]
for (const table of project.value.tables) {
if (table === deleteTable) {
continue
}
table.columns = table.columns.filter((c: Record<string, any>) => c.ref_table_name !== deleteTable.table_name)
}
project.value.tables.splice(tableIdx, 1)
} }
const isSelect = (col: ColumnType) => { const isSelect = (col: ColumnType) => {
@ -145,41 +151,37 @@ const addNewColumnRow = (table: Record<string, any>, uidt?: string) => {
{{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' : '' }} {{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' : '' }}
available for import available for import
</p> </p>
<a-collapse <a-collapse v-if="project.value?.tables && project.value?.tables.length" v-model:activeKey="expansionPanel">
v-if="project.value?.tables && project.value?.tables.length" <a-collapse-panel v-for="(table, i) in project.value?.tables" :key="i">
v-model:activeKey="expansionPanel" <template #header>
v-for="(table, i) in project.value?.tables" <v-text-field
:key="i" v-if="editableTn[i]"
> :value="table.table_name"
<template #expandIcon="{ isActive }"> class="font-weight-bold"
<v-text-field style="max-width: 300px"
v-if="editableTn[i]" outlinedk
:value="table.table_name" autofocus
class="font-weight-bold" density="compact"
style="max-width: 300px" hide-details
outlinedk @input="(e) => onTableNameUpdate(table, e)"
autofocus @click="(e) => e.stopPropagation()"
density="compact" @blur="$set(editableTn, i, false)"
hide-details @keydown.enter="$set(editableTn, i, false)"
@input="(e) => onTableNameUpdate(table, e)" />
@click="(e) => e.stopPropagation()" <span v-else class="font-weight-bold">
@blur="$set(editableTn, i, false)" <MdiTableIcon />
@keydown.enter="$set(editableTn, i, false)" {{ table.table_name }}
/> </span>
<span v-else class="font-weight-bold"> </template>
<MdiTableIcon /> <template #extra>
{{ table.table_name }} <a-tooltip bottom>
</span> <template #title>
<v-spacer /> <!-- TODO: i18n -->
<a-tooltip bottom> <span>Delete Table</span>
<template #title> </template>
<!-- TODO: i18n --> <MdiDeleteOutlineIcon v-if="project.value.tables.length > 1" @click.stop="deleteTable(i)" />
<span>Delete Table</span> </a-tooltip>
</template> </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" :pagination="false"> <a-table v-if="table.columns.length" :dataSource="table.columns" :columns="tableColumns" :pagination="false">
<template #headerCell="{ column }"> <template #headerCell="{ column }">
<template v-if="column.key === 'column_name'"> <template v-if="column.key === 'column_name'">

Loading…
Cancel
Save