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

feat(gui-v2): external project create - form validation 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2730/head
Pranav C 2 years ago
parent
2fca8f9210
commit
61dd082839
3 changed files with 206 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 208
      packages/nc-gui-v2/pages/projects/index/create-external.vue
  2. 10
      packages/nc-gui-v2/pages/projects/index/create.vue
  3. 13
      packages/nc-gui-v2/utils/projectCreateUtils.ts

208
packages/nc-gui-v2/pages/projects/index/create-external.vue
Unescape View File

@ -2,11 +2,19 @@
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vue-toastification'
import { Form } from 'ant-design-vue'
import { navigateTo, useNuxtApp } from '#app'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from '~/utils/projectCreateUtils'
import {
clientTypes,
fieldRequiredValidator,
getDefaultConnectionConfig,
getTestDatabaseName,
projectTitleValidator,
} from '~/utils/projectCreateUtils'
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
const useForm = Form.useForm
const name = ref('')
const loading = ref(false)
const valid = ref(false)
@ -17,15 +25,12 @@ const inflection = reactive({
columnName: 'camelize',
})
const formState = reactive<Record<string, any>>({ dataSource: {} })
const { $api, $e } = useNuxtApp()
const toast = useToast()
const { t } = useI18n()
const titleValidationRule = [
(v: string) => !!v || 'Title is required',
(v: string) => v.length <= 50 || 'Project name exceeds 50 characters',
]
const createProject = async () => {
loading.value = true
try {
@ -80,14 +85,184 @@ const testConnection = async () => {
toast.error(await extractSdkResponseErrorMsg(e))
}
}
const validators = reactive({
'title': [
{
required: true,
message: 'Please input project title',
},
projectTitleValidator,
],
'dataSource.client': [fieldRequiredValidator],
'dataSource.port': [fieldRequiredValidator],
'dataSource.host': [fieldRequiredValidator],
'dataSource.user': [fieldRequiredValidator],
'dataSource.database': [fieldRequiredValidator],
})
const { resetFields, validate, validateInfos } = useForm(formState, validators)
</script>
<template>
<NuxtLayout>
<v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
<a-card class="max-w-[800px] mx-auto !mt-100px" :title="$t('activity.createProject')">
<a-form :model="formState" name="validate_other" layout="vertical">
<a-row :gutter="24">
<a-col span="24">
<!-- Enter Project Name -->
<a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" size="large" />
</a-form-item>
</a-col>
<a-col :span="24" class="text-center text-md font-medium mb-3 mt-1">
{{ $t('title.dbCredentials') }}
</a-col>
<a-col :span="8">
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
<a-select v-model:value="formState.dataSource.client">
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
>{{ client.text }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.host']">
<a-input v-model:value="formState.dataSource.host" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.port']">
<a-input-number v-model:value="formState.dataSource.port" class="!w-full" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.user']">
<a-input v-model:value="formState.dataSource.user" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="$t('labels.password')">
<a-input-password v-model:value="formState.dataSource.password" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.database']">
<a-input v-model:value="formState.dataSource.database" />
</a-form-item>
</a-col>
</a-row>
<!--
<a-form-item label="InputNumber">
<a-form-item name="input-number" no-style>
<a-input-number v-model:value="formState['input-number']" />
</a-form-item>
<span class="ant-form-text">machines</span>
</a-form-item>
<a-form-item name="switch" label="Switch">
<a-switch v-model:checked="formState.switch" />
</a-form-item>
<a-form-item name="slider" label="Slider">
<a-slider
v-model:value="formState.slider"
:marks="{
0: 'A',
20: 'B',
40: 'C',
60: 'D',
80: 'E',
100: 'F',
}"
/>
</a-form-item>
<a-form-item name="radio-group" label="Radio.Group">
<a-radio-group v-model:value="formState['radio-group']">
<a-radio value="a">item 1</a-radio>
<a-radio value="b">item 2</a-radio>
<a-radio value="c">item 3</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
name="radio-button"
label="Radio.Button"
:rules="[{ required: true, message: 'Please pick an item!' }]"
>
<a-radio-group v-model:value="formState['radio-button']">
<a-radio-button value="a">item 1</a-radio-button>
<a-radio-button value="b">item 2</a-radio-button>
<a-radio-button value="c">item 3</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item name="checkbox-group" label="Checkbox.Group">
<a-checkbox-group v-model:value="formState['checkbox-group']">
<a-row>
<a-col :span="8">
<a-checkbox value="A" style="line-height: 32px">A</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="B" style="line-height: 32px" disabled>B</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="C" style="line-height: 32px">C</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="D" style="line-height: 32px">D</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="E" style="line-height: 32px">E</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="F" style="line-height: 32px">F</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
</a-form-item>
<a-form-item name="rate" label="Rate">
<a-rate v-model:value="formState.rate" allow-half />
</a-form-item>
<a-form-item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
<a-upload
v-model:fileList="formState.upload"
name="logo"
action="/upload.do"
list-type="picture"
>
<a-button>
<template #icon><UploadOutlined /></template>
Click to upload
</a-button>
</a-upload>
</a-form-item>
<a-form-item label="Dragger">
<a-form-item name="dragger" no-style>
<a-upload-dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
<p class="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p class="ant-upload-text">Click or drag file to this area to upload</p>
<p class="ant-upload-hint">Support for a single or bulk upload.</p>
</a-upload-dragger>
</a-form-item>
</a-form-item> -->
<a-form-item class="text-center">
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</a-card>
<!-- <v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject">
<v-container fluid class="flex justify-center items-center h-5/6">
<v-card max-width="600">
<!-- Create Project -->
&lt;!&ndash; Create Project &ndash;&gt;
<v-container class="pb-10 px-12">
<h1 class="my-4 prose-lg text-center">
{{ $t('activity.createProject') }}
@ -147,18 +322,17 @@ const testConnection = async () => {
<span> {{ $t('general.create') }} </span>
</v-btn>
<!-- <v-btn small class="px-2"> -->
<!-- todo:implement test connection -->
<!-- <v-btn size="sm" class="text-sm text-capitalize">
&lt;!&ndash; Test Database Connection &ndash;&gt;
{{ $t('activity.testDbConn') }}
</v-btn> -->
&lt;!&ndash; <v-btn small class="px-2"> &ndash;&gt;
&lt;!&ndash; todo:implement test connection &ndash;&gt;
&lt;!&ndash; <v-btn size="sm" class="text-sm text-capitalize">
&lt;!&ndash; Test Database Connection &ndash;&gt;
{{ $t('activity.testDbConn') }}
</v-btn> &ndash;&gt;
</div>
</v-container>
</v-card>
</v-container>
</v-form>
</NuxtLayout>
</v-form> -->
</template>
<style scoped></style>

10
packages/nc-gui-v2/pages/projects/index/create.vue
Unescape View File

@ -2,6 +2,7 @@
import { ref } from 'vue'
import { navigateTo, useNuxtApp } from '#app'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { projectTitleValidator } from '~/utils/projectCreateUtils'
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
const name = ref('')
@ -15,14 +16,7 @@ const nameValidationRules = [
required: true,
message: 'Title is required',
},
{
validator(rule: any, value: any, callback: (errMsg?: string) => void) {
if (value?.length > 50) {
callback('Project name exceeds 50 characters')
}
callback()
},
},
projectTitleValidator,
]
const formState = reactive({

13
packages/nc-gui-v2/utils/projectCreateUtils.ts
Unescape View File

@ -171,3 +171,16 @@ export const getDefaultConnectionConfig = (client: ClientType): { client: Client
connection: sampleConnectionData[client],
}
}
export const projectTitleValidator = {
validator: (rule: any, value: any, callback: (errMsg?: string) => void) => {
if (value?.length > 50) {
callback('Project name exceeds 50 characters')
}
callback()
},
}
export const fieldRequiredValidator = {
required: true,
message: 'Field is required',
}

Write Preview
Loading…
Cancel
Save