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

refactor(gui-v2): use horizontal layout 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2730/head
Pranav C 2 years ago
parent
f59dea011a
commit
c49d0dd8be
1 changed files with 51 additions and 47 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. 98
      packages/nc-gui-v2/pages/projects/index/create-external.vue

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

@ -3,6 +3,7 @@ import { ref } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useToast } from 'vue-toastification' import { useToast } from 'vue-toastification'
import { Form } from 'ant-design-vue' import { Form } from 'ant-design-vue'
import form from '../../../../nc-gui/components/project/spreadsheet/mixins/form'
import { navigateTo, useNuxtApp } from '#app' import { navigateTo, useNuxtApp } from '#app'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { import {
@ -106,56 +107,59 @@ const { resetFields, validate, validateInfos } = useForm(formState, validators)
const onClientChange = () => { const onClientChange = () => {
formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) } formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
} }
// populate database name based on title
// watch(()=>formStat)
</script> </script>
<template> <template>
<a-card class="max-w-[800px] mx-auto !mt-100px" :title="$t('activity.createProject')"> <a-card class="max-w-[600px] mx-auto !mt-100px" :title="$t('activity.createProject')">
<a-form :model="formState" name="validate_other" layout="vertical"> <a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
<a-row :gutter="24"> <!-- <a-row :gutter="24"> -->
<a-col span="24"> <!-- <a-col span="24"> -->
<!-- Enter Project Name --> <!-- Enter Project Name -->
<a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title"> <a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" size="large" /> <a-input v-model:value="formState.title" size="small" />
</a-form-item> </a-form-item>
</a-col> <!-- </a-col> -->
<a-col :span="24" class="text-center text-md font-medium mb-3 mt-1"> <!-- <a-col :span="24" class="text-center text-md font-medium mb-3 mt-1"> -->
{{ $t('title.dbCredentials') }} <!-- {{ $t('title.dbCredentials') }} -->
</a-col> <!-- </a-col> -->
<a-col :span="8"> <!-- <a-col :span="8"> -->
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']"> <a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
<a-select v-model:value="formState.dataSource.client" @change="onClientChange"> <a-select v-model:value="formState.dataSource.client" size="small" @change="onClientChange">
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value" <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
>{{ client.text }} >{{ client.text }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> <!-- </a-col> -->
<a-col :span="8"> <!-- <a-col :span="8"> -->
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
<a-input v-model:value="formState.dataSource.connection.host" /> <a-input v-model:value="formState.dataSource.connection.host" size="small" />
</a-form-item> </a-form-item>
</a-col> <!-- </a-col> -->
<a-col :span="8"> <!-- <a-col :span="8"> -->
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
<a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full" /> <a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full" size="small" />
</a-form-item> </a-form-item>
</a-col> <!-- </a-col> -->
<a-col :span="8"> <!-- <a-col :span="8"> -->
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
<a-input v-model:value="formState.dataSource.connection.user" /> <a-input v-model:value="formState.dataSource.connection.user" size="small" />
</a-form-item> </a-form-item>
</a-col> <!-- </a-col> -->
<a-col :span="8"> <!-- <a-col :span="8"> -->
<a-form-item :label="$t('labels.password')"> <a-form-item :label="$t('labels.password')">
<a-input-password v-model:value="formState.dataSource.connection.password" /> <a-input-password v-model:value="formState.dataSource.connection.password" size="small" />
</a-form-item> </a-form-item>
</a-col> <!-- </a-col> -->
<a-col :span="8"> <!-- <a-col :span="8"> -->
<a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.connection.database']"> <a-form-item :label="$t('labels.dbCreateIfNotExists')" v-bind="validateInfos['dataSource.connection.database']">
<a-input v-model:value="formState.dataSource.connection.database" /> <a-input v-model:value="formState.dataSource.connection.database" size="small" />
</a-form-item> </a-form-item>
</a-col> <!-- </a-col> -->
</a-row> <!-- </a-row> -->
<!-- <!--
<a-form-item label="InputNumber"> <a-form-item label="InputNumber">
<a-form-item name="input-number" no-style> <a-form-item name="input-number" no-style>

Write Preview
Loading…
Cancel
Save