mirror of https://github.com/nocodb/nocodb
168 lines
5.1 KiB
168 lines
5.1 KiB
2 years ago
|
<script setup lang="ts">
|
||
2 years ago
|
import { Form } from 'ant-design-vue'
|
||
2 years ago
|
import { computed, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
|
||
2 years ago
|
import { TabType } from '~/composables'
|
||
2 years ago
|
|
||
2 years ago
|
interface Props {
|
||
2 years ago
|
modelValue: boolean
|
||
2 years ago
|
}
|
||
2 years ago
|
|
||
2 years ago
|
const props = defineProps<Props>()
|
||
2 years ago
|
|
||
2 years ago
|
const emit = defineEmits(['update:modelValue'])
|
||
2 years ago
|
|
||
2 years ago
|
const dialogShow = useVModel(props, 'modelValue', emit)
|
||
2 years ago
|
|
||
|
const isAdvanceOptVisible = ref(false)
|
||
2 years ago
|
|
||
2 years ago
|
const inputEl = ref<HTMLInputElement>()
|
||
|
|
||
2 years ago
|
const { addTab } = useTabs()
|
||
2 years ago
|
|
||
2 years ago
|
const { loadTables, isMysql, isMssql, isPg } = useProject()
|
||
2 years ago
|
|
||
2 years ago
|
const { table, createTable, generateUniqueTitle, tables, project } = useTable(async (table) => {
|
||
2 years ago
|
await loadTables()
|
||
2 years ago
|
|
||
2 years ago
|
addTab({
|
||
|
id: table.id as string,
|
||
|
title: table.title,
|
||
2 years ago
|
type: TabType.TABLE,
|
||
2 years ago
|
})
|
||
2 years ago
|
|
||
2 years ago
|
dialogShow.value = false
|
||
|
})
|
||
2 years ago
|
|
||
2 years ago
|
const useForm = Form.useForm
|
||
2 years ago
|
|
||
2 years ago
|
const validateDuplicateAlias = (v: string) => (tables.value || []).every((t) => t.title !== (v || '')) || 'Duplicate table alias'
|
||
|
|
||
2 years ago
|
const validators = computed(() => {
|
||
|
return {
|
||
2 years ago
|
title: [
|
||
|
validateTableName,
|
||
|
validateDuplicateAlias,
|
||
|
{
|
||
|
validator: (rule: any, value: any) => {
|
||
|
return new Promise<void>((resolve, reject) => {
|
||
|
let tableNameLengthLimit = 255
|
||
|
if (isMysql) {
|
||
|
tableNameLengthLimit = 64
|
||
|
} else if (isPg) {
|
||
|
tableNameLengthLimit = 63
|
||
|
} else if (isMssql) {
|
||
|
tableNameLengthLimit = 128
|
||
|
}
|
||
|
const projectPrefix = project?.value?.prefix || ''
|
||
|
if ((projectPrefix + value).length > tableNameLengthLimit) {
|
||
|
return reject(new Error(`Table name exceeds ${tableNameLengthLimit} characters`))
|
||
|
}
|
||
|
resolve()
|
||
|
})
|
||
|
},
|
||
|
},
|
||
|
],
|
||
2 years ago
|
table_name: [validateTableName],
|
||
2 years ago
|
}
|
||
|
})
|
||
2 years ago
|
const { validateInfos } = useForm(table, validators)
|
||
2 years ago
|
|
||
2 years ago
|
const systemColumnsCheckboxInfo = SYSTEM_COLUMNS.map((c, index) => ({
|
||
|
value: c,
|
||
|
disabled: index === 0,
|
||
|
}))
|
||
|
|
||
2 years ago
|
onMounted(() => {
|
||
|
generateUniqueTitle()
|
||
2 years ago
|
|
||
2 years ago
|
inputEl.value?.focus()
|
||
2 years ago
|
})
|
||
2 years ago
|
</script>
|
||
|
|
||
|
<template>
|
||
2 years ago
|
<a-modal v-model:visible="dialogShow" width="max(30vw, 600px)" centered @keydown.esc="dialogShow = false">
|
||
2 years ago
|
<template #footer>
|
||
|
<a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
|
||
2 years ago
|
|
||
2 years ago
|
<a-button key="submit" size="large" type="primary" @click="createTable()">{{ $t('general.submit') }}</a-button>
|
||
2 years ago
|
</template>
|
||
2 years ago
|
|
||
2 years ago
|
<div class="pl-10 pr-10 pt-5">
|
||
2 years ago
|
<a-form :model="table" name="create-new-table-form" @keydown.enter="createTable">
|
||
2 years ago
|
<!-- Create A New Table -->
|
||
|
<div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
|
||
2 years ago
|
|
||
2 years ago
|
<!-- hint="Enter table name" -->
|
||
2 years ago
|
<!-- Table name -->
|
||
|
<div class="mb-2">{{ $t('labels.tableName') }}</div>
|
||
2 years ago
|
|
||
2 years ago
|
<a-form-item v-bind="validateInfos.title">
|
||
2 years ago
|
<a-input
|
||
2 years ago
|
ref="inputEl"
|
||
2 years ago
|
v-model:value="table.title"
|
||
|
size="large"
|
||
|
hide-details
|
||
|
:placeholder="$t('msg.info.enterTableName')"
|
||
2 years ago
|
/>
|
||
2 years ago
|
</a-form-item>
|
||
2 years ago
|
|
||
2 years ago
|
<div class="flex justify-end items-center">
|
||
|
<div class="pointer flex flex-row items-center gap-x-1" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
|
||
2 years ago
|
{{ isAdvanceOptVisible ? $t('general.hideAll') : $t('general.showMore') }}
|
||
2 years ago
|
|
||
|
<MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
|
||
|
<MdiPlusCircleOutline v-else class="text-gray-500" />
|
||
2 years ago
|
</div>
|
||
2 years ago
|
</div>
|
||
|
<div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">
|
||
|
<!-- hint="Table name as saved in database" -->
|
||
2 years ago
|
<div v-if="!project.prefix" class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
|
||
2 years ago
|
|
||
2 years ago
|
<a-form-item v-if="!project.prefix" v-bind="validateInfos.table_name">
|
||
2 years ago
|
<a-input v-model:value="table.table_name" size="large" hide-details :placeholder="$t('msg.info.tableNameInDb')" />
|
||
|
</a-form-item>
|
||
2 years ago
|
|
||
2 years ago
|
<div>
|
||
2 years ago
|
<div class="mb-1">
|
||
2 years ago
|
<!-- Add Default Columns -->
|
||
|
{{ $t('msg.info.addDefaultColumns') }}
|
||
2 years ago
|
</div>
|
||
2 years ago
|
|
||
2 years ago
|
<a-row>
|
||
2 years ago
|
<a-checkbox-group
|
||
|
v-model:value="table.columns"
|
||
|
:options="systemColumnsCheckboxInfo"
|
||
|
class="!flex flex-row justify-between w-full"
|
||
|
>
|
||
|
<template #label="{ value }">
|
||
|
<a-tooltip v-if="value === 'id'" placement="top" class="!flex">
|
||
|
<template #title>
|
||
|
<span>ID column is required, you can rename this later if required.</span>
|
||
|
</template>
|
||
|
ID
|
||
|
</a-tooltip>
|
||
|
<div v-else class="flex">
|
||
|
{{ value }}
|
||
|
</div>
|
||
|
</template>
|
||
|
</a-checkbox-group>
|
||
2 years ago
|
</a-row>
|
||
2 years ago
|
</div>
|
||
2 years ago
|
</div>
|
||
|
</a-form>
|
||
|
</div>
|
||
|
</a-modal>
|
||
2 years ago
|
</template>
|
||
|
|
||
|
<style scoped lang="scss">
|
||
|
.nc-table-advanced-options {
|
||
|
max-height: 0;
|
||
|
transition: 0.3s max-height;
|
||
|
overflow: hidden;
|
||
|
|
||
|
&.active {
|
||
|
max-height: 200px;
|
||
|
}
|
||
|
}
|
||
|
</style>
|