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

refactor: form builder changes

pull/9314/head
Pranav C 3 months ago
parent
d924fc388f
commit
bbb6b09d08
4 changed files with 74 additions and 58 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. 65
      packages/nc-gui/components/account/setup/Config.vue
  2. 30
      packages/nc-gui/components/nc/form-builder/index.vue
  3. 1
      packages/nc-gui/lang/en.json
  4. 36
      packages/nocodb/src/plugins/smtp/index.ts

65
packages/nc-gui/components/account/setup/Config.vue
Unescape View File

@ -1,14 +1,4 @@
<script setup lang="ts">
import { ClientType, SSLUsage } from 'nocodb-sdk'
import { Action } from '../../../composables/useAccountSetupStore'
import type {
CertTypes,
DatabricksConnection,
DefaultConnection,
SQLiteConnection,
SnowflakeConnection,
} from '../../../utils/baseCreateUtils'
const props = defineProps<{
id: string
modelValue?: boolean
@ -39,14 +29,22 @@ const pluginTypeMap = {
const { formState, validate, validateInfos } = useProvideFormBuilderHelper({
formSchema: [
...plugin.value.formDetails.items.map((item) => ({
type: pluginTypeMap[item.type] || FormBuilderInputType.Input,
label: item.label,
placeholder: item.placeholder,
model: item.key,
required: item.required,
helpText: item.help_text,
})),
...plugin.value.formDetails.items.flatMap((item, i) => [
{
type: pluginTypeMap[item.type] || FormBuilderInputType.Input,
label: item.label,
placeholder: item.placeholder,
model: item.key,
required: item.required,
helpText: item.help_text,
width: '47',
border: true,
},
...(i % 2 ? [] : [{
type: FormBuilderInputType.Space,
width: '6',
}] ),
]),
],
initialState: pluginFormData,
})
@ -82,23 +80,25 @@ const isValid = computed(() => {
<div class="flex flex-col h-full h-[calc(100vh_-_40px)]" data-test-id="nc-setup">
<NcPageHeader>
<template #title>
<span data-rec="true">
{{ plugin.title }}
</span>
</template>
</NcPageHeader>
<div class="h-full flex h-[calc(100%_-_48px)]">
<div class="nc-config-left-panel nc-scrollbar-thin relative h-full flex flex-col">
<div class="w-full flex items-center gap-3 border-b-1 border-gray-200 h-12 py-2 px-3">
<div class="flex gap-3 items-center">
<div
v-if="plugin.logo"
v-if="plugin.logo || plugin.title === 'SMTP'"
class="mr-1 flex items-center justify-center"
:class="[plugin.title === 'SES' ? 'p-2 bg-[#242f3e]' : '']"
>
<img :alt="plugin.title || 'plugin'" :src="plugin.logo" class="h-3" />
<GeneralIcon v-if="plugin.title === 'SMTP'" class="h-8 w-8" icon="mail" />
<img v-else :alt="plugin.title || 'plugin'" :src="plugin.logo" class="h-8 w-8" />
</div>
<span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
<span data-rec="true">
{{ plugin.title }}
</span>
</div>
</template>
</NcPageHeader>
<div class="h-full flex h-[calc(100%_-_48px)]">
<div class="nc-config-left-panel nc-scrollbar-thin relative h-full flex flex-col">
<div class="w-full flex items-center gap-3 border-b-1 border-gray-200 h-12 py-2 px-3">
<span class="font-semibold text-lg">{{ $t('labels.configuration') }}</span>
<div class="flex-grow" />
<div class="flex gap-2">
@ -116,13 +116,13 @@ const isValid = computed(() => {
</NcButton>
</div>
</div>
<div class="h-[calc(100%_-_48px)] flex py-4 flex-col p-6 overflow-auto">
<div class="h-[calc(100%_-_48px)] flex py-4 flex-col p-6 overflow-auto">
<div v-if="isLoading || !plugin" class="flex flex-row w-full justify-center items-center h-52">
<a-spin size="large" />
</div>
<div v-else class="flex">
<NcFormBuilder class="w-150 mx-auto" />
<NcFormBuilder class="w-225 mx-auto" />
</div>
</div>
</div>
@ -148,6 +148,7 @@ const isValid = computed(() => {
.nc-config-left-panel {
@apply w-full flex-1 flex justify-stretch;
}
.nc-config-right-panel {
@apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
}

30
packages/nc-gui/components/nc/form-builder/index.vue
Unescape View File

@ -38,13 +38,31 @@ const setFormState = (path: string, value: any) => {
></div>
<a-form-item
v-else
:label="[FormBuilderInputType.Switch].includes(field.type) ? undefined : field.label"
v-bind="validateInfos[field.model]"
class="nc-form-item"
:style="`width:${+field.width || 100}%`"
:required="false"
>
<template v-if="![FormBuilderInputType.Switch].includes(field.type)" #label>
<div class="flex items-center gap-1">
<span>{{ field.label }}</span>
<span v-if="field.required" class="text-red-500">*</span>
<NcTooltip v-if="field.helpText">
<template #title>
<div class="text-xs">
{{ field.helpText }}
</div>
</template>
<GeneralIcon icon="info" class="text-gray-500 h-4" />
</NcTooltip>
</div>
</template>
<template v-if="field.type === FormBuilderInputType.Input">
<a-input :value="deepReference(field.model)" @update:value="setFormState(field.model, $event)" />
<a-input
class="!w-full"
:value="deepReference(field.model)"
@update:value="setFormState(field.model, $event)"
/>
</template>
<template v-else-if="field.type === FormBuilderInputType.Password">
<a-input-password :value="deepReference(field.model)" @update:value="setFormState(field.model, $event)" />
@ -57,19 +75,16 @@ const setFormState = (path: string, value: any) => {
/>
</template>
<template v-else-if="field.type === FormBuilderInputType.Switch">
<div class="flex flex-col p-2" :class="field.border ? 'border-1 rounded-lg' : ''">
<div class="flex flex-col p-2" :class="field.border ? 'border-1 rounded-lg shadow' : ''">
<div class="flex items-center">
<NcSwitch :checked="!!deepReference(field.model)" @update:checked="setFormState(field.model, $event)" />
<span class="ml-[6px] font-bold">{{ field.label }}</span>
</div>
<div v-if="field.helpText" class="w-full mt-1 ml-[35px]">
<div v-if="field.helpText" class="w-full mt-1 pl-[35px]">
<div class="text-xs text-gray-500">{{ field.helpText }}</div>
</div>
</div>
</template>
<div v-if="field.helpText && field.type !== FormBuilderInputType.Switch" class="w-full mt-1">
<div class="text-xs text-gray-500">{{ field.helpText }}</div>
</div>
</a-form-item>
</template>
</div>
@ -87,7 +102,6 @@ const setFormState = (path: string, value: any) => {
<style lang="scss" scoped>
.nc-form-item {
padding-right: 24px;
margin-bottom: 12px;
}

1
packages/nc-gui/lang/en.json
Unescape View File

@ -617,6 +617,7 @@
"categories": "Categories"
},
"labels": {
"configuration": "Configuration",
"setup": "Setup",
"setupLabel": "Setup {label}",
"switchToProd": "Switch to a production-ready app database",

36
packages/nocodb/src/plugins/smtp/index.ts
Unescape View File

@ -52,6 +52,24 @@ const config: XcPluginConfig = {
help_text:
'Enter the port number used by the SMTP server (e.g., 587 for TLS, 465 for SSL, or 25 for non-secure connections).',
},
{
key: 'username',
label: 'Username',
placeholder: 'Username',
type: XcType.SingleLineText,
required: false,
help_text:
'Enter the username required to authenticate with the SMTP server. This is usually your email address.',
},
{
key: 'password',
label: 'Password',
placeholder: 'Password',
type: XcType.Password,
required: false,
help_text:
'Enter the password associated with the SMTP server username. Click the eye icon to view the password as you type',
},
{
key: 'secure',
label: 'Use Secure Connection',
@ -79,24 +97,6 @@ const config: XcPluginConfig = {
help_text:
'Enable this on to reject emails that fail authentication checks, ensuring only authorized emails are sent.',
},
{
key: 'username',
label: 'Username',
placeholder: 'Username',
type: XcType.SingleLineText,
required: false,
help_text:
'Enter the username required to authenticate with the SMTP server. This is usually your email address.',
},
{
key: 'password',
label: 'Password',
placeholder: 'Password',
type: XcType.Password,
required: false,
help_text:
'Enter the password associated with the SMTP server username. Click the eye icon to view the password as you type',
},
],
actions: [
{

Write Preview
Loading…
Cancel
Save