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

feat(gui-v2): create table

pull/2795/head
Wing-Kam Wong 2 years ago
parent
f7ac71cf33
commit
885f821b4e
1 changed files with 83 additions and 118 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. 201
      packages/nc-gui-v2/components/dlg/TableCreate.vue

201
packages/nc-gui-v2/components/dlg/TableCreate.vue
Unescape View File

@ -1,9 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from '@vue/runtime-core' import { onMounted } from '@vue/runtime-core'
import { Form } from 'ant-design-vue'
import useTableCreate from '../../composables/useTableCreate' import useTableCreate from '../../composables/useTableCreate'
import useProject from '~/composables/useProject' import useProject from '~/composables/useProject'
import useTabs from '~/composables/useTabs' import useTabs from '~/composables/useTabs'
import { validateTableName } from '~/utils/validation' import { useToast } from 'vue-toastification'
import { fieldRequiredValidator, importUrlValidator, validateTableName } from '~/utils/validation'
const { modelValue = false } = defineProps<{ modelValue?: boolean }>() const { modelValue = false } = defineProps<{ modelValue?: boolean }>()
@ -14,6 +16,7 @@ const idTypes = [
{ value: 'AG', text: 'Auto generated string' }, { value: 'AG', text: 'Auto generated string' },
] ]
const toast = useToast()
const dialogShow = computed({ const dialogShow = computed({
get() { get() {
return modelValue return modelValue
@ -23,7 +26,6 @@ const dialogShow = computed({
}, },
}) })
const valid = ref(false)
const isIdToggleAllowed = ref(false) const isIdToggleAllowed = ref(false)
const isAdvanceOptVisible = ref(false) const isAdvanceOptVisible = ref(false)
@ -53,6 +55,25 @@ const validateDuplicate = (v: string) => {
const inputEl = ref<any>() const inputEl = ref<any>()
const useForm = Form.useForm
const formState = reactive({
title: '',
table_name: '',
columns: {
id: true,
title: true,
created_at: true,
updated_at: true,
},
})
const validators = computed(() => {
return {
title: [validateTableName, validateDuplicateAlias],
table_name: [],
}
})
const { resetFields, validate, validateInfos } = useForm(formState, validators)
onMounted(() => { onMounted(() => {
generateUniqueTitle() generateUniqueTitle()
nextTick(() => { nextTick(() => {
@ -64,130 +85,74 @@ onMounted(() => {
</script> </script>
<template> <template>
<v-dialog <a-modal
v-model="dialogShow" v-model:visible="dialogShow"
persistent width="max(90vw, 600px)"
max-width="550"
@keydown.esc="dialogShow = false" @keydown.esc="dialogShow = false"
@keydown.enter="$emit('create', table)" @keydown.enter="$emit('create', table)"
> >
<!-- Create A New Table --> <template #footer>
<v-card class="elevation-1 backgroundColor nc-create-table-card"> <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
<v-form ref="form" v-model="valid"> <a-button key="submit" size="large" type="primary" @click="createTable">{{ $t('general.submit') }}</a-button>
<v-card-title class="primary subheading white--text py-2"> </template>
{{ $t('activity.createTable') }} <div class="pl-10 pr-10 pt-5">
</v-card-title> <a-form :model="formState" name="create-new-table-form">
<!-- Create A New Table -->
<v-card-text class="py-6 px-10"> <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
<!-- hint="Enter table name" --> <!-- hint="Enter table name" -->
<v-text-field <div class="mb-2">Table Name</div>
<a-form-item v-bind="validateInfos['title']">
<a-input
ref="inputEl" ref="inputEl"
v-model="table.title" v-model:value="table.title"
solo size="large"
flat hide-details
persistent-hint :placeholder="$t('msg.info.enterTableName')"
dense
hide-details1
:rules="[validateTableName, validateDuplicateAlias]"
:hint="$t('msg.info.enterTableName')"
class="mt-4 caption nc-table-name"
/> />
</a-form-item>
<div class="d-flex justify-end"> <div class="flex justify-end">
<div class="grey--text caption pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible"> <div class="pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
{{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more {{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more
<v-icon x-small color="grey"> <v-icon x-small color="grey">
{{ isAdvanceOptVisible ? 'mdi-minus-circle-outline' : 'mdi-plus-circle-outline' }} {{ isAdvanceOptVisible ? 'mdi-minus-circle-outline' : 'mdi-plus-circle-outline' }}
</v-icon> </v-icon>
</div>
</div> </div>
</div>
<div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }"> <div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">
<!-- hint="Table name as saved in database" --> <!-- hint="Table name as saved in database" -->
<v-text-field <div class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
v-if="!project.prefix" <a-form-item v-if="!project.prefix" v-bind="validateInfos['table_name']">
v-model="table.table_name" <a-input v-model:value="table.table_name" size="large" hide-details :placeholder="$t('msg.info.tableNameInDb')" />
solo </a-form-item>
flat <div>
dense <div class="mb-5">
persistent-hint <!-- Add Default Columns -->
:rules="[validateDuplicate]" {{ $t('msg.info.addDefaultColumns') }}
:hint="$t('msg.info.tableNameInDb')"
class="mt-4 caption nc-table-name-alias"
/>
<div class="mt-5">
<label class="add-default-title grey--text">
<!-- Add Default Columns -->
{{ $t('msg.info.addDefaultColumns') }}
</label>
<div class="d-flex caption justify-space-between align-center">
<v-checkbox
key="chk1"
v-model="table.columns"
dense
class="mt-0"
color="info"
hide-details
value="id"
@click.capture.prevent.stop="
() => {
$toast.info('ID column is required, you can rename this later if required.').goAway(3000)
if (!table.columns.includes('id')) {
table.columns.push('id')
}
}
"
>
<template #label>
<div>
<span v-if="!isIdToggleAllowed" class="caption" @dblclick="isIdToggleAllowed = true">id</span>
<v-select
v-else
v-model="idType"
style="max-width: 100px"
class="caption"
outlined
dense
hide-details
:items="idTypes"
/>
</div>
</template>
</v-checkbox>
<v-checkbox key="chk2" v-model="table.columns" dense class="mt-0" color="info" hide-details value="title">
<template #label>
<span class="caption">title</span>
</template>
</v-checkbox>
<v-checkbox key="chk3" v-model="table.columns" dense class="mt-0" color="info" hide-details value="created_at">
<template #label>
<span class="caption">created_at</span>
</template>
</v-checkbox>
<v-checkbox key="chk4" v-model="table.columns" dense class="mt-0" color="info" hide-details value="updated_at">
<template #label>
<span class="caption">updated_at</span>
</template>
</v-checkbox>
</div>
</div> </div>
<a-row>
<a-col :span="6">
<a-tooltip placement="top">
<template #title>
<span>ID column is required, you can rename this later if required.</span>
</template>
<a-checkbox disabled v-model:checked="formState.columns.id">ID</a-checkbox>
</a-tooltip>
</a-col>
<a-col :span="6">
<a-checkbox v-model:checked="formState.columns.title"> title </a-checkbox>
</a-col>
<a-col :span="6">
<a-checkbox v-model:checked="formState.columns.created_at"> created_at </a-checkbox>
</a-col>
<a-col :span="6">
<a-checkbox v-model:checked="formState.columns.updated_at"> updated_at </a-checkbox>
</a-col>
</a-row>
</div> </div>
</v-card-text> </div>
<v-divider /> </a-form>
<v-card-actions class="py-4 px-10"> </div>
<v-spacer /> </a-modal>
<v-btn class="" @click="dialogShow = false">
{{ $t('general.cancel') }}
</v-btn>
<v-btn :disabled="!valid" color="primary" class="nc-create-table-submit" @click="createTable">
{{ $t('general.submit') }}
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">

Write Preview
Loading…
Cancel
Save