Wing-Kam Wong
2 years ago
|
Before Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 255 B |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 4.1 KiB |
@ -1,2 +0,0 @@
|
||||
// Import Vuetify styling |
||||
//@require '~vuetify/src/stylus/app.styl' |
||||
@ -1,367 +0,0 @@
|
||||
.blink_me { |
||||
animation: blinker 1.5s linear infinite; |
||||
} |
||||
|
||||
body { |
||||
color: darkgrey; |
||||
} |
||||
|
||||
@keyframes blinker { |
||||
60% { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
table.v-table tbody td, |
||||
table.v-table tbody th, |
||||
table.v-table tbody tr { |
||||
height: 38px !important; |
||||
} |
||||
|
||||
table .v-input__control { |
||||
height: 20px !important; |
||||
} |
||||
|
||||
.shortkey { |
||||
text-decoration: none; |
||||
border-bottom: 1px solid orange; |
||||
} |
||||
|
||||
table .v-text-field > .v-input__control > .v-input__slot:before { |
||||
border-style: none; |
||||
} |
||||
|
||||
table .v-text-field > .v-input__control > .v-input__slot:after { |
||||
border-style: none; |
||||
} |
||||
|
||||
table.v-table thead column, |
||||
th, |
||||
tr { |
||||
height: 38px !important; |
||||
font-size: 15px !important; |
||||
} |
||||
|
||||
/* tabs height css start */ |
||||
.project-tabs .v-tabs__container { |
||||
max-height: 33px !important; |
||||
} |
||||
|
||||
.project-tabs .v-tabs__item, |
||||
.v-tabs__div { |
||||
max-height: 40px !important; |
||||
font-weight: bold !important; |
||||
} |
||||
|
||||
.table-tabs .v-tabs__container { |
||||
max-height: 32px !important; |
||||
} |
||||
|
||||
.table-tabs .v-tabs__item, |
||||
.v-tabs__div { |
||||
max-height: 32px !important; |
||||
font-weight: 500 !important; |
||||
font-size: 12px !important; |
||||
} |
||||
|
||||
/* tabs height css end */ |
||||
|
||||
.divider { |
||||
/*border-right: 1px solid #b3d4fc;*/ |
||||
} |
||||
|
||||
.divider:last-child { |
||||
/*border-right: 0;*/ |
||||
} |
||||
|
||||
.project-container { |
||||
/*min-height: calc(100vh - (408px + 1em));*/ |
||||
/*max-height: calc(100vh - (408px + 1em));*/ |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.project-logs { |
||||
/* position: fixed; */ |
||||
/* bottom: 0; */ |
||||
/* right: 0; */ |
||||
/*min-height: 250px !important;*/ |
||||
/*max-height: 250px !important;*/ |
||||
/*overflow-y: auto;*/ |
||||
/* width: calc(100vw - (500px + 1em)); */ |
||||
/*border: 2px solid dimgrey;*/ |
||||
} |
||||
|
||||
.new-project { |
||||
/* position: fixed; */ |
||||
/* bottom: 0; */ |
||||
/* right: 0; */ |
||||
/*min-height: 250px !important;*/ |
||||
max-height: 750px !important; |
||||
overflow-y: auto; |
||||
/* width: calc(100vw - (500px + 1em)); */ |
||||
/*border: 1px solid dimgrey;*/ |
||||
} |
||||
|
||||
.selected-table-row { |
||||
background: purple; |
||||
} |
||||
|
||||
html { |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
[v-cloak] { |
||||
display: none !important; |
||||
} |
||||
|
||||
|
||||
.v-btn { |
||||
margin: 0 2px; |
||||
} |
||||
|
||||
|
||||
|
||||
html { |
||||
overflow-y: auto !important; |
||||
} |
||||
|
||||
|
||||
/* nested expansion panel bug */ |
||||
|
||||
.v-expansion-panel-header { |
||||
min-height: 48px !important; |
||||
} |
||||
|
||||
.v-expansion-panel--active > .v-expansion-panel-header { |
||||
min-height: 64px !important; |
||||
} |
||||
|
||||
|
||||
/* Table validation message */ |
||||
/*table .v-input__control {*/ |
||||
/* position: relative;*/ |
||||
/*}*/ |
||||
|
||||
/*table .v-input__control > .v-text-field__details {*/ |
||||
/* position: absolute;*/ |
||||
/* bottom: -4px;*/ |
||||
/*}*/ |
||||
|
||||
|
||||
/*table edit dialog buttons*/ |
||||
.v-small-dialog__actions button span { |
||||
font-weight: bolder; |
||||
} |
||||
|
||||
|
||||
/*resizer*/ |
||||
|
||||
.vertical-resizer { |
||||
/*width: 100%;*/ |
||||
height: 5px; |
||||
background: grey; |
||||
cursor: ns-resize; |
||||
position: relative; |
||||
} |
||||
|
||||
.vertical-resizer + * { |
||||
overflow-y: auto !important; |
||||
} |
||||
|
||||
.horizontal-resizer { |
||||
/*width:5px !important;*/ |
||||
/*background: grey !important;*/ |
||||
/*cursor: ew-resize;*/ |
||||
} |
||||
|
||||
.pri-text-color { |
||||
color: #616161; |
||||
} |
||||
|
||||
.free-gradient { |
||||
background: linear-gradient(70deg, black, dimgrey); |
||||
} |
||||
|
||||
.premium-gradient { |
||||
background: linear-gradient(70deg, darkblue, cornflowerblue); |
||||
} |
||||
|
||||
.platinum-gradient { |
||||
background: linear-gradient(70deg, orangered, orange); |
||||
} |
||||
|
||||
.blue-gradient { |
||||
background: linear-gradient(70deg, royalblue, lightskyblue); |
||||
} |
||||
|
||||
.green-gradient { |
||||
background: linear-gradient(70deg, limegreen, darkseagreen); |
||||
} |
||||
|
||||
.pink-gradient { |
||||
background: linear-gradient(70deg, hotpink, lightpink); |
||||
} |
||||
|
||||
.purple-gradient { |
||||
background: linear-gradient(70deg, rebeccapurple, mediumpurple); |
||||
} |
||||
|
||||
.orange-gradient { |
||||
background: linear-gradient(70deg, darkorange, orange); |
||||
} |
||||
|
||||
.black-gradient { |
||||
background: linear-gradient(180deg, black, rgb(55, 55, 55)); |
||||
} |
||||
|
||||
|
||||
.yellow-orange-gradient { |
||||
background: -moz-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%); |
||||
background: -webkit-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%); |
||||
background: linear-gradient(to right, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e767', endColorstr='#feb645', GradientType=1); |
||||
} |
||||
|
||||
|
||||
.white-gradient { |
||||
background: linear-gradient(45deg, white, lightskyblue); |
||||
} |
||||
|
||||
.banner-bar { |
||||
background: linear-gradient(180deg, #4185f4, #4185f4); |
||||
} |
||||
|
||||
.banner-gradient { |
||||
background: linear-gradient(180deg, #4185f4, #4185f4); |
||||
} |
||||
|
||||
.home-cta { |
||||
background: linear-gradient(70deg, #ff8319, #ff8319); |
||||
} |
||||
|
||||
.home-cta-text { |
||||
background: linear-gradient(70deg, #fcbb07, #fcbb07); |
||||
} |
||||
|
||||
|
||||
.img-animation { |
||||
animation-name: vibrate; |
||||
animation-duration: 1.5s; |
||||
animation-timing-function: ease-out; |
||||
animation-delay: 0s; |
||||
animation-direction: alternate; |
||||
animation-iteration-count: infinite; |
||||
animation-fill-mode: none; |
||||
animation-play-state: running; |
||||
} |
||||
|
||||
@keyframes vibrate { |
||||
0% { |
||||
|
||||
transform: translateY(10px); |
||||
} |
||||
100% { |
||||
transform: translateY(0); |
||||
} |
||||
} |
||||
|
||||
|
||||
.search-overlay .v-overlay__content { |
||||
height: 100%; |
||||
width: 100%; |
||||
|
||||
} |
||||
|
||||
|
||||
/* Draggable tree hover color */ |
||||
|
||||
.theme--dark .vtl-tree-node:hover { |
||||
background-color: rgb(94, 94, 94) !important; |
||||
} |
||||
|
||||
|
||||
.theme--light .vtl-tree-node:hover { |
||||
background-color: rgb(240, 240, 240) !important; |
||||
} |
||||
|
||||
|
||||
/*vue tree list icon font */ |
||||
|
||||
/*.sql-query-treeview .vtl-icon-folder:before {*/ |
||||
/* vertical-align: middle;*/ |
||||
/* font-family: "Material Design Icons" ;*/ |
||||
/* content: "\FB7B" !important;*/ |
||||
/*}*/ |
||||
|
||||
.api-treeview .vtl-icon-file:before { |
||||
display: none; |
||||
} |
||||
/*.sql-query-treeview .vtl-icon-file:before {*/ |
||||
/* vertical-align: middle;*/ |
||||
/* font-family: "Material Design Icons" ;*/ |
||||
/* content: "\F0C3" !important;*/ |
||||
/* color: orange;*/ |
||||
|
||||
/*}*/ |
||||
|
||||
.sql-query-treeview .vtl-tree-node .vtl-caret{ |
||||
width:1rem; |
||||
} |
||||
.sql-query-treeview .vtl-tree-node{ |
||||
padding-top: 5px !important; |
||||
padding-bottom: 5px !important; |
||||
} |
||||
.sql-query-treeview .custom-run-icon{} |
||||
|
||||
|
||||
.sql-editor .v-expansion-panel-header { |
||||
min-height: 36px !important; |
||||
padding: 0 0 0 10px; |
||||
} |
||||
.sql-editor .v-expansion-panel-header--active { |
||||
min-height: 40px !important; |
||||
} |
||||
|
||||
|
||||
.api-client .v-expansion-panel-header { |
||||
min-height: 36px !important; |
||||
padding: 0 0 0 10px; |
||||
} |
||||
.api-client .v-expansion-panel-header--active { |
||||
min-height: 40px !important; |
||||
} |
||||
.api-treeview .vtl-node-content{ |
||||
max-width: calc(100% - 44px); |
||||
} |
||||
/* for expansion panel content wrapper */ |
||||
.expansion-wrap-0 .v-expansion-panel-content__wrap{ |
||||
padding: 0; |
||||
} |
||||
|
||||
.sql-query-treeview .vtl-operation{ |
||||
margin-left: 2px !important;; |
||||
} |
||||
.sql-query-treeview .vtl-tree-node{ |
||||
display: flex; |
||||
} |
||||
|
||||
.sql-query-treeview .vtl-node-content{ |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
|
||||
.ignore-height-style table .v-input__control { |
||||
height: auto !important; |
||||
} |
||||
|
||||
.cursor-pointer{ |
||||
cursor: pointer; |
||||
} |
||||
|
||||
|
||||
/* sorting and filter */ |
||||
.menu-filter-dropdown { |
||||
max-height: 500px; |
||||
overflow-y: auto; |
||||
} |
||||
@ -1 +0,0 @@
|
||||
//@require '~vuetify/src/stylus/settings/_variables.styl' |
||||
@ -0,0 +1,121 @@
|
||||
<script setup lang="ts"> |
||||
import { watchEffect } from '@vue/runtime-core' |
||||
import { Form } from 'ant-design-vue' |
||||
import type { TableType } from 'nocodb-sdk' |
||||
import { useToast } from 'vue-toastification' |
||||
import { useProject, useTableCreate, useTabs } from '#imports' |
||||
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||
import { validateTableName } from '~/utils/validation' |
||||
import { useNuxtApp } from '#app' |
||||
|
||||
interface Props { |
||||
modelValue?: boolean |
||||
tableMeta: TableType |
||||
} |
||||
|
||||
const { modelValue = false, tableMeta } = defineProps<Props>() |
||||
const emit = defineEmits(['update:modelValue', 'updated']) |
||||
const { $e, $api } = useNuxtApp() |
||||
const toast = useToast() |
||||
const dialogShow = computed({ |
||||
get() { |
||||
return modelValue |
||||
}, |
||||
set(v) { |
||||
emit('update:modelValue', v) |
||||
}, |
||||
}) |
||||
|
||||
const { updateTab } = useTabs() |
||||
const { loadTables } = useProject() |
||||
const { project, tables } = useProject() |
||||
|
||||
const prefix = computed(() => project?.value?.prefix || '') |
||||
|
||||
const inputEl = $ref<any>() |
||||
let loading = $ref(false) |
||||
const useForm = Form.useForm |
||||
const formState = reactive({ |
||||
title: '', |
||||
}) |
||||
const validators = computed(() => { |
||||
return { |
||||
title: [ |
||||
validateTableName, |
||||
{ |
||||
validator: (rule: any, value: any, callback: (errMsg?: string) => void) => { |
||||
if (/^\s+|\s+$/.test(value)) { |
||||
callback('Leading or trailing whitespace not allowed in table name') |
||||
} |
||||
if ( |
||||
!(tables?.value || []).every( |
||||
(t) => t.id === tableMeta.id || t.table_name.toLowerCase() !== (value || '').toLowerCase(), |
||||
) |
||||
) { |
||||
callback('Duplicate table alias') |
||||
} |
||||
callback() |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
}) |
||||
const { resetFields, validate, validateInfos } = useForm(formState, validators) |
||||
|
||||
watchEffect(() => { |
||||
if (tableMeta?.title) formState.title = tableMeta?.title |
||||
// todo: replace setTimeout and follow better approach |
||||
nextTick(() => { |
||||
const input = inputEl?.$el |
||||
input.setSelectionRange(0, formState.title.length) |
||||
input.focus() |
||||
}) |
||||
}) |
||||
|
||||
const renameTable = async () => { |
||||
loading = true |
||||
try { |
||||
await $api.dbTable.update(tableMeta?.id as string, { |
||||
title: formState.title, |
||||
}) |
||||
dialogShow.value = false |
||||
loadTables() |
||||
updateTab({ id: tableMeta?.id }, { title: formState.title }) |
||||
toast.success('Table renamed successfully') |
||||
$e('a:table:rename') |
||||
dialogShow.value = false |
||||
} catch (e) { |
||||
toast.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
loading = false |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-modal |
||||
v-model:visible="dialogShow" |
||||
:title="$t('activity.renameTable')" |
||||
@keydown.esc="dialogShow = false" |
||||
@finish="renameTable" |
||||
> |
||||
<template #footer> |
||||
<a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button> |
||||
<a-button key="submit" type="primary" :loading="loading" @click="renameTable">{{ $t('general.submit') }}</a-button> |
||||
</template> |
||||
<div class="pl-10 pr-10 pt-5"> |
||||
<a-form :model="formState" name="create-new-table-form"> |
||||
<!-- hint="Enter table name" --> |
||||
<div class="mb-2">{{ $t('msg.info.enterTableName') }}</div> |
||||
<a-form-item v-bind="validateInfos.title"> |
||||
<a-input |
||||
ref="inputEl" |
||||
v-model:value="formState.title" |
||||
hide-details |
||||
:placeholder="$t('msg.info.enterTableName')" |
||||
@keydown.enter="renameTable" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
</div> |
||||
</a-modal> |
||||
</template> |
||||
@ -0,0 +1,475 @@
|
||||
<script setup lang="ts"> |
||||
import { useToast } from 'vue-toastification' |
||||
import type { ColumnType, TableType } from 'nocodb-sdk' |
||||
import { UITypes, isVirtualCol } from 'nocodb-sdk' |
||||
import { Form } from 'ant-design-vue' |
||||
import { tableColumns } from './utils' |
||||
import { computed, onMounted } from '#imports' |
||||
import MdiTableIcon from '~icons/mdi/table' |
||||
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' |
||||
import MdiKeyStarIcon from '~icons/mdi/key-star' |
||||
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline' |
||||
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||
import { fieldRequiredValidator } from '~/utils/validation' |
||||
|
||||
interface Props { |
||||
quickImportType: 'csv' | 'excel' | 'json' |
||||
projectTemplate: Record<string, any> |
||||
importData: any[] |
||||
} |
||||
|
||||
interface Option { |
||||
label: string |
||||
value: string |
||||
} |
||||
|
||||
const { quickImportType, projectTemplate, importData } = defineProps<Props>() |
||||
|
||||
const useForm = Form.useForm |
||||
|
||||
const { $api } = useNuxtApp() |
||||
|
||||
const hasSelectColumn = ref<boolean[]>([]) |
||||
|
||||
const expansionPanel = ref<number[]>([]) |
||||
|
||||
const editableTn = ref<boolean[]>([]) |
||||
|
||||
const inputRefs = ref<HTMLInputElement[]>([]) |
||||
|
||||
const isImporting = ref(false) |
||||
|
||||
const importingTip = ref('Importing') |
||||
|
||||
const uiTypeOptions = ref<Option[]>( |
||||
(Object.keys(UITypes) as (keyof typeof UITypes)[]) |
||||
.filter( |
||||
(uiType) => |
||||
!isVirtualCol(UITypes[uiType]) && |
||||
![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes( |
||||
UITypes[uiType], |
||||
), |
||||
) |
||||
.map<Option>((uiType) => ({ |
||||
value: uiType, |
||||
label: uiType, |
||||
})), |
||||
) |
||||
|
||||
const data = reactive<{ title: string | null; name: string; tables: TableType[] }>({ |
||||
title: null, |
||||
name: 'Project Name', |
||||
tables: [], |
||||
}) |
||||
|
||||
const toast = useToast() |
||||
|
||||
const { addTab } = useTabs() |
||||
|
||||
const { sqlUi, project, loadTables } = useProject() |
||||
|
||||
onMounted(() => { |
||||
parseAndLoadTemplate() |
||||
}) |
||||
|
||||
const validators = computed(() => |
||||
data.tables.reduce<Record<string, [typeof fieldRequiredValidator]>>((acc, table, tableIdx) => { |
||||
acc[`tables.${tableIdx}.table_name`] = [fieldRequiredValidator] |
||||
hasSelectColumn.value[tableIdx] = false |
||||
|
||||
table.columns?.forEach((column, columnIdx) => { |
||||
acc[`tables.${tableIdx}.columns.${columnIdx}.column_name`] = [fieldRequiredValidator] |
||||
acc[`tables.${tableIdx}.columns.${columnIdx}.uidt`] = [fieldRequiredValidator] |
||||
if (isSelect(column)) { |
||||
hasSelectColumn.value[tableIdx] = true |
||||
} |
||||
}) |
||||
|
||||
return acc |
||||
}, {}), |
||||
) |
||||
|
||||
const editorTitle = computed(() => `${quickImportType.toUpperCase()} Import: ${data.title}`) |
||||
|
||||
const { validate, validateInfos } = useForm(data, validators) |
||||
|
||||
function filterOption(input: string, option: Option) { |
||||
return option.value.toUpperCase().includes(input.toUpperCase()) |
||||
} |
||||
|
||||
function parseAndLoadTemplate() { |
||||
if (projectTemplate) { |
||||
parseTemplate(projectTemplate) |
||||
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['projectTemplate']) { |
||||
const parsedTemplate = { |
||||
...rest, |
||||
tables: tables.map(({ v = [], columns = [], ...rest }) => ({ |
||||
...rest, |
||||
columns: [ |
||||
...columns.map((c: any, idx: number) => { |
||||
c.key = idx |
||||
return c |
||||
}), |
||||
...v.map((v: any) => ({ |
||||
column_name: v.title, |
||||
ref_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, columnIdx: number) { |
||||
data.tables[tableIdx].columns?.splice(columnIdx, 1) |
||||
} |
||||
|
||||
function addNewColumnRow(table: Record<string, any>, uidt?: string) { |
||||
table.columns.push({ |
||||
key: table.columns.length, |
||||
column_name: `title${table.columns.length + 1}`, |
||||
uidt, |
||||
}) |
||||
nextTick(() => { |
||||
const input = inputRefs.value[table.columns.length - 1] |
||||
input.focus() |
||||
input.select() |
||||
}) |
||||
} |
||||
|
||||
function setEditableTn(tableIdx: number, val: boolean) { |
||||
editableTn.value[tableIdx] = val |
||||
} |
||||
|
||||
function remapColNames(batchData: any[], columns: ColumnType[]) { |
||||
return batchData.map((data) => |
||||
(columns || []).reduce( |
||||
(aggObj, col: Record<string, any>) => ({ |
||||
...aggObj, |
||||
[col.column_name]: data[col.ref_column_name || col.column_name], |
||||
}), |
||||
{}, |
||||
), |
||||
) |
||||
} |
||||
|
||||
async function importTemplate() { |
||||
// check if form is valid |
||||
try { |
||||
await validate() |
||||
} catch (errorInfo) { |
||||
toast.error('Please fill all the required values') |
||||
isImporting.value = false |
||||
return |
||||
} |
||||
|
||||
try { |
||||
isImporting.value = true |
||||
// tab info to be used to show the tab after successful import |
||||
const tab = { |
||||
id: '', |
||||
title: '', |
||||
} |
||||
|
||||
// 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) |
||||
} |
||||
} |
||||
|
||||
// set pk & rqd if ID is provided |
||||
if (table.columns) { |
||||
for (const column of table.columns) { |
||||
if (column.column_name?.toLowerCase() === 'id' && !('pk' in column)) { |
||||
column.pk = true |
||||
column.rqd = true |
||||
break |
||||
} |
||||
} |
||||
} |
||||
const tableMeta = await $api.dbTable.create(project?.value?.id as string, { |
||||
table_name: table.table_name, |
||||
// leave title empty to get a generated one based on table_name |
||||
title: '', |
||||
columns: table.columns, |
||||
}) |
||||
table.title = tableMeta.title |
||||
|
||||
// open the first table after import |
||||
if (tab.id === '' && tab.title === '') { |
||||
tab.id = tableMeta.id as string |
||||
tab.title = tableMeta.title as string |
||||
} |
||||
|
||||
// set primary value |
||||
if (tableMeta?.columns?.[0]?.id) { |
||||
await $api.dbTableColumn.primaryColumnSet(tableMeta.columns[0].id as string) |
||||
} |
||||
} |
||||
// bulk imsert data |
||||
if (importData) { |
||||
let total = 0 |
||||
let progress = 0 |
||||
const offset = 500 |
||||
const projectName = project.value.title as string |
||||
await Promise.all( |
||||
data.tables.map((table: Record<string, any>) => |
||||
(async (tableMeta) => { |
||||
const data = importData[tableMeta.ref_table_name] |
||||
if (data) { |
||||
total += data.length |
||||
for (let i = 0; i < data.length; i += offset) { |
||||
importingTip.value = `Importing data to ${projectName}: ${progress}/${total} records` |
||||
const batchData = remapColNames(data.slice(i, i + offset), tableMeta.columns) |
||||
await $api.dbTableRow.bulkCreate('noco', projectName, tableMeta.table_title, batchData) |
||||
progress += batchData.length |
||||
} |
||||
} |
||||
})(table), |
||||
), |
||||
) |
||||
} |
||||
// reload table list |
||||
await loadTables() |
||||
addTab({ |
||||
...tab, |
||||
type: 'table', |
||||
}) |
||||
} catch (e: any) { |
||||
toast.error(await extractSdkResponseErrorMsg(e)) |
||||
} finally { |
||||
// TODO: close dialog when the integration is ready |
||||
isImporting.value = false |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-spin :spinning="isImporting" :tip="importingTip" size="large"> |
||||
<a-card :title="editorTitle"> |
||||
<template #extra> |
||||
<a-button type="primary" size="large" @click="importTemplate"> |
||||
{{ $t('activity.import') }} |
||||
</a-button> |
||||
</template> |
||||
<a-form :model="data" name="template-editor-form"> |
||||
<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) in data.tables" :key="tableIdx"> |
||||
<template #header> |
||||
<a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style> |
||||
<a-input |
||||
v-model:value="table.table_name" |
||||
size="large" |
||||
style="max-width: 300px" |
||||
hide-details |
||||
@click="(e) => e.stopPropagation()" |
||||
@blur="setEditableTn(tableIdx, false)" |
||||
@keydown.enter="setEditableTn(tableIdx, false)" |
||||
/> |
||||
</a-form-item> |
||||
<span |
||||
v-else |
||||
class="font-weight-bold text-lg flex items-center gap-2" |
||||
@click="$event.stopPropagation() && setEditableTn(tableIdx, true)" |
||||
> |
||||
<MdiTableIcon class="text-primary" /> |
||||
{{ table.table_name }} |
||||
</span> |
||||
</template> |
||||
<template #extra> |
||||
<a-tooltip bottom> |
||||
<template #title> |
||||
<!-- TODO: i18n --> |
||||
<span>Delete Table</span> |
||||
</template> |
||||
<MdiDeleteOutlineIcon v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" /> |
||||
</a-tooltip> |
||||
</template> |
||||
|
||||
<a-table |
||||
v-if="table.columns.length" |
||||
class="template-form" |
||||
row-class-name="template-form-row" |
||||
:data-source="table.columns" |
||||
:columns="tableColumns" |
||||
:pagination="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> |
||||
<!-- TODO: i18n --> |
||||
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}.${column.key}`]"> |
||||
<a-input |
||||
:ref=" |
||||
(el) => { |
||||
inputRefs[record.key] = el |
||||
} |
||||
" |
||||
v-model:value="record.column_name" |
||||
size="large" |
||||
/> |
||||
</a-form-item> |
||||
</template> |
||||
<template v-else-if="column.key === 'uidt'"> |
||||
<a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]"> |
||||
<a-auto-complete |
||||
v-model:value="record.uidt" |
||||
size="large" |
||||
:options="uiTypeOptions" |
||||
:filter-option="filterOption" |
||||
style="width: 200px" |
||||
/> |
||||
</a-form-item> |
||||
</template> |
||||
|
||||
<template v-else-if="column.key === 'dtxp'"> |
||||
<a-form-item v-if="isSelect(record)"> |
||||
<a-input v-model:value="record.dtxp" size="large" /> |
||||
</a-form-item> |
||||
</template> |
||||
|
||||
<template v-if="column.key === 'action'"> |
||||
<a-tooltip v-if="record.key === 0"> |
||||
<template #title> |
||||
<!-- TODO: i18n --> |
||||
<span>Primary Value</span> |
||||
</template> |
||||
<span class="mr-3"> |
||||
<MdiKeyStarIcon class="text-lg" /> |
||||
</span> |
||||
</a-tooltip> |
||||
<a-tooltip v-else> |
||||
<template #title> |
||||
<!-- TODO: i18n --> |
||||
<span>Delete Column</span> |
||||
</template> |
||||
|
||||
<a-button type="text" @click="deleteTableColumn(tableIdx, record.key)"> |
||||
<div class="flex items-center"> |
||||
<MdiDeleteOutlineIcon class="text-lg" /> |
||||
</div> |
||||
</a-button> |
||||
</a-tooltip> |
||||
</template> |
||||
</template> |
||||
</a-table> |
||||
<div class="text-center mt-5"> |
||||
<a-tooltip bottom> |
||||
<template #title> |
||||
<!-- TODO: i18n --> |
||||
<span>Add Number Column</span> |
||||
</template> |
||||
|
||||
<a-button @click="addNewColumnRow(table, 'Number')"> |
||||
<div class="flex items-center"> |
||||
<MdiNumericIcon class="text-lg" /> |
||||
</div> |
||||
</a-button> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip bottom> |
||||
<template #title> |
||||
<!-- TODO: i18n --> |
||||
<span>Add SingleLineText Column</span> |
||||
</template> |
||||
<a-button @click="addNewColumnRow(table, 'SingleLineText')"> |
||||
<div class="flex items-center"> |
||||
<MdiStringIcon class="text-lg" /> |
||||
</div> |
||||
</a-button> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip bottom> |
||||
<template #title> |
||||
<!-- TODO: i18n --> |
||||
<span>Add LongText Column</span> |
||||
</template> |
||||
<a-button @click="addNewColumnRow(table, 'LongText')"> |
||||
<div class="flex items-center"> |
||||
<MdiLongTextIcon class="text-lg" /> |
||||
</div> |
||||
</a-button> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip bottom> |
||||
<template #title> |
||||
<!-- TODO: i18n --> |
||||
<span>Add Other Column</span> |
||||
</template> |
||||
<a-button @click="addNewColumnRow(table)"> |
||||
<div class="flex items-center"> |
||||
<MdiPlusIcon class="text-lg" /> |
||||
Column |
||||
</div> |
||||
</a-button> |
||||
</a-tooltip> |
||||
</div> |
||||
</a-collapse-panel> |
||||
</a-collapse> |
||||
</a-form> |
||||
</a-card> |
||||
</a-spin> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.template-collapse { |
||||
@apply bg-white; |
||||
} |
||||
|
||||
.template-form { |
||||
:deep(.ant-table-thead) > tr > th { |
||||
@apply bg-white; |
||||
} |
||||
:deep(.template-form-row) > td { |
||||
@apply !pb-0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,25 @@
|
||||
import type { ColumnGroupType } from 'ant-design-vue/es/table' |
||||
|
||||
export const tableColumns: (Omit<ColumnGroupType<any>, 'children'> & { dataIndex?: string; name: string })[] = [ |
||||
{ |
||||
name: 'Column Name', |
||||
dataIndex: 'column_name', |
||||
key: 'column_name', |
||||
width: 250, |
||||
}, |
||||
{ |
||||
name: 'Column Type', |
||||
dataIndex: 'column_type', |
||||
key: 'uidt', |
||||
width: 250, |
||||
}, |
||||
{ |
||||
name: 'Select Option', |
||||
key: 'dtxp', |
||||
}, |
||||
{ |
||||
name: 'Action', |
||||
key: 'action', |
||||
align: 'right', |
||||
}, |
||||
] |
||||