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

refactor(gui-v2): ui improvements 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2730/head
Pranav C 2 years ago
parent
c5748fa26c
commit
3c5237d821
2 changed files with 120 additions and 113 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. 2
      packages/nc-gui-v2/components/monaco/index.vue
  2. 231
      packages/nc-gui-v2/pages/projects/index/create-external.vue

2
packages/nc-gui-v2/components/monaco/index.vue
Unescape View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import * as monaco from 'monaco-editor'
import { onMounted } from '#imports'
import { deepCompare } from "~/utils/deepCompare";
import { deepCompare } from '~/utils/deepCompare'
const { modelValue } = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue'])

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

@ -1,116 +1,116 @@
<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { useToast } from "vue-toastification";
import { Form, Modal } from "ant-design-vue";
import { ref } from "#imports";
import { navigateTo, useNuxtApp } from "#app";
import type { ProjectCreateForm } from "~/lib/types";
import { extractSdkResponseErrorMsg } from "~/utils/errorUtils";
import { useI18n } from 'vue-i18n'
import { useToast } from 'vue-toastification'
import { Form, Modal } from 'ant-design-vue'
import { ref } from '#imports'
import { navigateTo, useNuxtApp } from '#app'
import type { ProjectCreateForm } from '~/lib/types'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import {
clientTypes,
fieldRequiredValidator,
getDefaultConnectionConfig,
getTestDatabaseName,
projectTitleValidator,
sslUsage
} from "~/utils/projectCreateUtils";
import { readFile } from "~/utils/fileUtils";
sslUsage,
} from '~/utils/projectCreateUtils'
import { readFile } from '~/utils/fileUtils'
const useForm = Form.useForm;
const loading = ref(false);
const testSuccess = ref(false);
const useForm = Form.useForm
const loading = ref(false)
const testSuccess = ref(false)
const { $api, $e } = useNuxtApp();
const toast = useToast();
const { t } = useI18n();
const { $api, $e } = useNuxtApp()
const toast = useToast()
const { t } = useI18n()
const formState = $ref<ProjectCreateForm>({
title: "",
dataSource: { ...getDefaultConnectionConfig("mysql2") },
title: '',
dataSource: { ...getDefaultConnectionConfig('mysql2') },
inflection: {
inflection_column: "camelize",
inflection_table: "camelize"
}
});
inflection_column: 'camelize',
inflection_table: 'camelize',
},
})
const validators = computed(() => {
return {
"title": [
'title': [
{
required: true,
message: "Please input project title"
message: 'Please input project title',
},
projectTitleValidator
projectTitleValidator,
],
"dataSource.client": [fieldRequiredValidator],
...(formState.dataSource.client === "sqlite3"
'dataSource.client': [fieldRequiredValidator],
...(formState.dataSource.client === 'sqlite3'
? {
"dataSource.connection.connection.filename": [fieldRequiredValidator]
}
'dataSource.connection.connection.filename': [fieldRequiredValidator],
}
: {
"dataSource.connection.host": [fieldRequiredValidator],
"dataSource.connection.port": [fieldRequiredValidator],
"dataSource.connection.user": [fieldRequiredValidator],
"dataSource.connection.password": [fieldRequiredValidator],
"dataSource.connection.database": [fieldRequiredValidator],
...(["pg", "mssql"].includes(formState.dataSource.client)
? {
"dataSource.connection.searchPath.0": [fieldRequiredValidator]
}
: {})
})
};
});
const { resetFields, validate, validateInfos } = useForm(formState, validators);
'dataSource.connection.host': [fieldRequiredValidator],
'dataSource.connection.port': [fieldRequiredValidator],
'dataSource.connection.user': [fieldRequiredValidator],
'dataSource.connection.password': [fieldRequiredValidator],
'dataSource.connection.database': [fieldRequiredValidator],
...(['pg', 'mssql'].includes(formState.dataSource.client)
? {
'dataSource.connection.searchPath.0': [fieldRequiredValidator],
}
: {}),
}),
}
})
const { resetFields, validate, validateInfos } = useForm(formState, validators)
const onClientChange = () => {
formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) };
};
formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) }
}
const inflectionTypes = ["camelize", "none"];
const configEditDlg = ref(false);
const inflectionTypes = ['camelize', 'none']
const configEditDlg = ref(false)
// populate database name based on title
watch(
() => formState.title,
(v) => (formState.dataSource.connection.database = `${v}_noco`)
);
(v) => (formState.dataSource.connection.database = `${v}_noco`),
)
const caFileInput = ref<HTMLInputElement>();
const keyFileInput = ref<HTMLInputElement>();
const certFileInput = ref<HTMLInputElement>();
const caFileInput = ref<HTMLInputElement>()
const keyFileInput = ref<HTMLInputElement>()
const certFileInput = ref<HTMLInputElement>()
const onFileSelect = (key: "ca" | "cert" | "key", el: HTMLInputElement) => {
const onFileSelect = (key: 'ca' | 'cert' | 'key', el: HTMLInputElement) => {
readFile(el, (content) => {
if ("ssl" in formState.dataSource.connection && formState.dataSource.connection.ssl)
formState.dataSource.connection.ssl[key] = content ?? "";
});
};
if ('ssl' in formState.dataSource.connection && formState.dataSource.connection.ssl)
formState.dataSource.connection.ssl[key] = content ?? ''
})
}
const sslFilesRequired = computed<boolean>(() => {
return formState?.sslUse && formState.sslUse !== "No";
});
return formState?.sslUse && formState.sslUse !== 'No'
})
function getConnectionConfig() {
const connection = {
...formState.dataSource.connection
};
...formState.dataSource.connection,
}
if ("ssl" in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) {
delete connection.ssl;
if ('ssl' in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) {
delete connection.ssl
}
return connection;
return connection
}
const createProject = async () => {
if (!(await validate())) {
return;
return
}
loading.value = true;
loading.value = true
try {
const connection = getConnectionConfig();
const config = { ...formState.dataSource, connection };
const connection = getConnectionConfig()
const config = { ...formState.dataSource, connection }
const result = await $api.project.create({
title: formState.title,
bases: [
@ -118,74 +118,77 @@ const createProject = async () => {
type: formState.dataSource.client,
config,
inflection_column: formState.inflection.inflection_column,
inflection_table: formState.inflection.inflection_table
}
inflection_table: formState.inflection.inflection_table,
},
],
external: true
});
$e("a:project:create:extdb");
await navigateTo(`/nc/${result.id}`);
external: true,
})
$e('a:project:create:extdb')
await navigateTo(`/nc/${result.id}`)
} catch (e: any) {
// todo: toast
toast.error(await extractSdkResponseErrorMsg(e));
toast.error(await extractSdkResponseErrorMsg(e))
}
loading.value = false;
};
loading.value = false
}
const testConnection = async () => {
if (!(await validate())) {
return;
return
}
$e("a:project:create:extdb:test-connection", []);
$e('a:project:create:extdb:test-connection', [])
try {
if (formState.dataSource.client === "sqlite3") {
testSuccess.value = true;
if (formState.dataSource.client === 'sqlite3') {
testSuccess.value = true
} else {
const connection: any = getConnectionConfig();
connection.database = getTestDatabaseName(formState.dataSource);
const connection: any = getConnectionConfig()
connection.database = getTestDatabaseName(formState.dataSource)
const testConnectionConfig = {
...formState.dataSource,
connection
};
connection,
}
const result = await $api.utils.testConnection(testConnectionConfig);
const result = await $api.utils.testConnection(testConnectionConfig)
if (result.code === 0) {
testSuccess.value = true;
testSuccess.value = true
Modal.confirm({
title: t("msg.info.dbConnected"),
title: t('msg.info.dbConnected'),
icon: null,
type: "success",
type: 'success',
okText: t("activity.OkSaveProject"),
okType: "primary",
cancelText: "Cancel",
onOk: createProject
});
okText: t('activity.OkSaveProject'),
okType: 'primary',
cancelText: 'Cancel',
onOk: createProject,
})
} else {
testSuccess.value = false;
toast.error(`${t("msg.error.dbConnectionFailed")} ${result.message}`);
testSuccess.value = false
toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`)
}
}
} catch (e: any) {
testSuccess.value = false;
toast.error(await extractSdkResponseErrorMsg(e));
testSuccess.value = false
toast.error(await extractSdkResponseErrorMsg(e))
}
};
}
</script>
<template>
<a-card class="max-w-[600px] mx-auto !mt-100px" :title="$t('activity.createProject')">
<a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }"
:wrapper-col="{ span: 18 }">
<a-card
class="max-w-[600px] mx-auto !mt-5"
:title="$t('activity.createProject')"
:head-style="{ textAlign: 'center', fontWeight: '700' }"
>
<a-form :model="formState" name="validate_other" layout="horizontal" :label-col="{ span: 8 }" :wrapper-col="{ span: 18 }">
<a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" size="small" />
</a-form-item>
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']">
<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"
>{{ client.text }}
>{{ client.text }}
</a-select-option>
</a-select>
</a-form-item>
@ -252,28 +255,28 @@ const testConnection = async () => {
<a-tooltip placement="top">
<!-- Select .cert file -->
<template #title>
<span>{{ $t("tooltip.clientCert") }}</span>
<span>{{ $t('tooltip.clientCert') }}</span>
</template>
<a-button :disabled="!sslFilesRequired" size="small" @click="certFileInput.click()">
{{ $t("labels.clientCert") }}
{{ $t('labels.clientCert') }}
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<!-- Select .key file -->
<template #title>
<span>{{ $t("tooltip.clientKey") }}</span>
<span>{{ $t('tooltip.clientKey') }}</span>
</template>
<a-button :disabled="!sslFilesRequired" size="small" @click="keyFileInput.click()">
{{ $t("labels.clientKey") }}
{{ $t('labels.clientKey') }}
</a-button>
</a-tooltip>
<a-tooltip placement="top">
<!-- Select CA file -->
<template #title>
<span>{{ $t("tooltip.clientCA") }}</span>
<span>{{ $t('tooltip.clientCA') }}</span>
</template>
<a-button :disabled="!sslFilesRequired" size="small" @click="caFileInput.click()">
{{ $t("labels.serverCA") }}
{{ $t('labels.serverCA') }}
</a-button>
</a-tooltip>
</div>
@ -296,14 +299,14 @@ const testConnection = async () => {
<div class="flex justify-end">
<a-button size="small" @click="configEditDlg = true">
<!-- Edit connection JSON -->
{{ $t("activity.editConnJson") }}
{{ $t('activity.editConnJson') }}
</a-button>
</div>
</a-collapse-panel>
</a-collapse>
</template>
<a-form-item class="flex justify-center">
<a-form-item class="flex justify-center mt-5">
<div class="flex justify-center gap-2">
<a-button type="primary" :disabled="!testSuccess" @click="createProject">Submit</a-button>
<a-button type="primary" @click="testConnection">Test Connection</a-button>
@ -327,4 +330,8 @@ const testConnection = async () => {
:deep(.ant-collapse-content-box) {
@apply !pr-0;
}
:deep(.ant-form-item-explain-error) {
@apply !text-xs;
}
</style>

Write Preview
Loading…
Cancel
Save