mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
24 changed files with 1081 additions and 466 deletions
@ -0,0 +1,52 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import * as monaco from 'monaco-editor' |
||||||
|
import { onMounted } from '#imports' |
||||||
|
import { deepCompare } from '~/utils/deepCompare' |
||||||
|
|
||||||
|
const { modelValue } = defineProps<{ modelValue: any }>() |
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const root = ref<HTMLDivElement>() |
||||||
|
let editor: monaco.editor.IStandaloneCodeEditor |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
if (root.value) { |
||||||
|
const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), 'json') |
||||||
|
|
||||||
|
// configure the JSON language support with schemas and schema associations |
||||||
|
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ |
||||||
|
validate: true, |
||||||
|
}) |
||||||
|
|
||||||
|
editor = monaco.editor.create(root.value, { |
||||||
|
model, |
||||||
|
theme: 'dark', |
||||||
|
}) |
||||||
|
|
||||||
|
editor.onDidChangeModelContent(async (e) => { |
||||||
|
try { |
||||||
|
// console.log(e) |
||||||
|
const obj = JSON.parse(editor.getValue()) |
||||||
|
if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj) |
||||||
|
} catch (e) { |
||||||
|
console.log(e) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => modelValue, |
||||||
|
(v) => { |
||||||
|
if (editor && v && !deepCompare(v, JSON.parse(editor?.getValue() as string))) { |
||||||
|
editor.setValue(JSON.stringify(v, null, 2)) |
||||||
|
} |
||||||
|
}, |
||||||
|
) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div ref="root"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -1,47 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import type { ProjectType } from 'nocodb-sdk' |
|
||||||
import { navigateTo } from '#app' |
|
||||||
|
|
||||||
import MdiDeleteOutline from '~icons/mdi/delete-outline' |
|
||||||
import MdiEditOutline from '~icons/mdi/edit-outline' |
|
||||||
|
|
||||||
interface Props { |
|
||||||
projects?: ProjectType[] |
|
||||||
} |
|
||||||
|
|
||||||
const { projects = [] } = defineProps<Props>() |
|
||||||
|
|
||||||
const emit = defineEmits(['delete-project']) |
|
||||||
|
|
||||||
const { $e } = useNuxtApp() |
|
||||||
|
|
||||||
const openProject = async (project: ProjectType) => { |
|
||||||
await navigateTo(`/nc/${project.id}`) |
|
||||||
$e('a:project:open', { count: projects.length }) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div class="grid grid-cols-4 gap-2 prose-md p-2 font-semibold"> |
|
||||||
<div>{{ $t('general.title') }}</div> |
|
||||||
<div>Updated At</div> |
|
||||||
<div></div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<v-divider class="col-span-3" /> |
|
||||||
|
|
||||||
<template v-for="project of projects" :key="project.id"> |
|
||||||
<div |
|
||||||
class="cursor-pointer grid grid-cols-4 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100" |
|
||||||
@click="openProject(project)" |
|
||||||
> |
|
||||||
<div class="font-semibold">{{ project.title || 'Untitled' }}</div> |
|
||||||
<div>{{ project.updated_at }}</div> |
|
||||||
<div> |
|
||||||
<MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" /> |
|
||||||
<MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<v-divider class="col-span-3" /> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<template> |
||||||
|
<NuxtLayout> |
||||||
|
<div class="w-full nc-container"> |
||||||
|
<NuxtPage /> |
||||||
|
</div> |
||||||
|
</NuxtLayout> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.nc-container { |
||||||
|
height: calc(100vh - var(--header-height)); |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { onMounted } from '@vue/runtime-core' |
||||||
|
import type { Form } from 'ant-design-vue' |
||||||
|
import type { ProjectType } from 'nocodb-sdk' |
||||||
|
import { ref } from 'vue' |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { navigateTo, useNuxtApp, useRoute } from '#app' |
||||||
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||||
|
import { projectTitleValidator } from '~/utils/validation' |
||||||
|
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline' |
||||||
|
|
||||||
|
const loading = ref(false) |
||||||
|
|
||||||
|
const { $api, $state } = useNuxtApp() |
||||||
|
const toast = useToast() |
||||||
|
const route = useRoute() |
||||||
|
|
||||||
|
const nameValidationRules = [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: 'Project name is required', |
||||||
|
}, |
||||||
|
projectTitleValidator, |
||||||
|
] |
||||||
|
|
||||||
|
const formState = reactive({ |
||||||
|
title: '', |
||||||
|
}) |
||||||
|
|
||||||
|
const getProject = async () => { |
||||||
|
try { |
||||||
|
const result: ProjectType = await $api.project.read(route.params.id as string) |
||||||
|
formState.title = result.title as string |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
const renameProject = async () => { |
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
await $api.project.update(route.params.id as string, formState) |
||||||
|
|
||||||
|
navigateTo(`/nc/${route.params.id}`) |
||||||
|
} catch (e) { |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
|
||||||
|
const form = ref<typeof Form>() |
||||||
|
|
||||||
|
// hide sidebar |
||||||
|
$state.sidebarOpen.value = false |
||||||
|
|
||||||
|
// select and focus title field on load |
||||||
|
onMounted(async () => { |
||||||
|
await getProject() |
||||||
|
nextTick(() => { |
||||||
|
// todo: replace setTimeout and follow better approach |
||||||
|
setTimeout(() => { |
||||||
|
const input = form.value?.$el?.querySelector('input[type=text]') |
||||||
|
input.setSelectionRange(0, formState.title.length) |
||||||
|
input.focus() |
||||||
|
}, 500) |
||||||
|
}) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-card class="w-[500px] mx-auto !mt-100px shadow-md"> |
||||||
|
<h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.editProject') }}</h3> |
||||||
|
|
||||||
|
<a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="renameProject"> |
||||||
|
<a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10"> |
||||||
|
<a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item style="text-align: center" class="mt-2"> |
||||||
|
<a-button type="primary" html-type="submit" class="mx-auto flex justify-self-center"> |
||||||
|
<MaterialSymbolsRocketLaunchOutline class="mr-1" /> |
||||||
|
<span> {{ $t('general.edit') }} </span></a-button |
||||||
|
> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
@ -0,0 +1,399 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { onMounted } from '@vue/runtime-core' |
||||||
|
import { Form, Modal } from 'ant-design-vue' |
||||||
|
import { useI18n } from 'vue-i18n' |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { ref } from '#imports' |
||||||
|
import { navigateTo, useNuxtApp } from '#app' |
||||||
|
import type { ProjectCreateForm } from '~/lib/types' |
||||||
|
import { ClientType } from '~/lib/types' |
||||||
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||||
|
import { readFile } from '~/utils/fileUtils' |
||||||
|
import { |
||||||
|
clientTypes, |
||||||
|
generateUniqueName, |
||||||
|
getDefaultConnectionConfig, |
||||||
|
getTestDatabaseName, |
||||||
|
sslUsage, |
||||||
|
} from '~/utils/projectCreateUtils' |
||||||
|
import { fieldRequiredValidator, projectTitleValidator } from '~/utils/validation' |
||||||
|
|
||||||
|
const useForm = Form.useForm |
||||||
|
const loading = ref(false) |
||||||
|
const testSuccess = ref(false) |
||||||
|
|
||||||
|
const { $api, $e, $state } = useNuxtApp() |
||||||
|
const toast = useToast() |
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const formState = $ref<ProjectCreateForm>({ |
||||||
|
title: '', |
||||||
|
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||||
|
inflection: { |
||||||
|
inflectionColumn: 'camelize', |
||||||
|
inflectionTable: 'camelize', |
||||||
|
}, |
||||||
|
sslUse: 'No', |
||||||
|
}) |
||||||
|
|
||||||
|
const validators = computed(() => { |
||||||
|
return { |
||||||
|
'title': [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: 'Project name is required', |
||||||
|
}, |
||||||
|
projectTitleValidator, |
||||||
|
], |
||||||
|
'dataSource.client': [fieldRequiredValidator], |
||||||
|
...(formState.dataSource.client === ClientType.SQLITE |
||||||
|
? { |
||||||
|
'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], |
||||||
|
...([ClientType.PG, ClientType.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) } |
||||||
|
} |
||||||
|
|
||||||
|
const inflectionTypes = ['camelize', 'none'] |
||||||
|
const configEditDlg = ref(false) |
||||||
|
|
||||||
|
// populate database name based on title |
||||||
|
watch( |
||||||
|
() => formState.title, |
||||||
|
(v) => (formState.dataSource.connection.database = `${v?.trim()}_noco`), |
||||||
|
) |
||||||
|
|
||||||
|
// generate a random project title |
||||||
|
formState.title = generateUniqueName() |
||||||
|
|
||||||
|
const caFileInput = ref<HTMLInputElement>() |
||||||
|
const keyFileInput = ref<HTMLInputElement>() |
||||||
|
const certFileInput = ref<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 ?? '' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const sslFilesRequired = computed<boolean>(() => { |
||||||
|
return formState?.sslUse && formState.sslUse !== 'No' |
||||||
|
}) |
||||||
|
|
||||||
|
function getConnectionConfig() { |
||||||
|
const connection = { |
||||||
|
...formState.dataSource.connection, |
||||||
|
} |
||||||
|
|
||||||
|
if ('ssl' in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) { |
||||||
|
delete connection.ssl |
||||||
|
} |
||||||
|
return connection |
||||||
|
} |
||||||
|
|
||||||
|
const form = ref<any>() |
||||||
|
const focusInvalidInput = () => { |
||||||
|
form?.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus() |
||||||
|
} |
||||||
|
|
||||||
|
const createProject = async () => { |
||||||
|
try { |
||||||
|
await validate() |
||||||
|
} catch (e) { |
||||||
|
focusInvalidInput() |
||||||
|
return |
||||||
|
} |
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
const connection = getConnectionConfig() |
||||||
|
const config = { ...formState.dataSource, connection } |
||||||
|
const result = await $api.project.create({ |
||||||
|
title: formState.title, |
||||||
|
bases: [ |
||||||
|
{ |
||||||
|
type: formState.dataSource.client, |
||||||
|
config, |
||||||
|
inflection_column: formState.inflection.inflectionColumn, |
||||||
|
inflection_table: formState.inflection.inflectionTable, |
||||||
|
}, |
||||||
|
], |
||||||
|
external: true, |
||||||
|
}) |
||||||
|
$e('a:project:create:extdb') |
||||||
|
await navigateTo(`/nc/${result.id}`) |
||||||
|
} catch (e: any) { |
||||||
|
// todo: toast |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
|
||||||
|
const testConnection = async () => { |
||||||
|
try { |
||||||
|
await validate() |
||||||
|
} catch (e) { |
||||||
|
focusInvalidInput() |
||||||
|
return |
||||||
|
} |
||||||
|
$e('a:project:create:extdb:test-connection', []) |
||||||
|
try { |
||||||
|
if (formState.dataSource.client === ClientType.SQLITE) { |
||||||
|
testSuccess.value = true |
||||||
|
} else { |
||||||
|
const connection: any = getConnectionConfig() |
||||||
|
connection.database = getTestDatabaseName(formState.dataSource) |
||||||
|
const testConnectionConfig = { |
||||||
|
...formState.dataSource, |
||||||
|
connection, |
||||||
|
} |
||||||
|
|
||||||
|
const result = await $api.utils.testConnection(testConnectionConfig) |
||||||
|
|
||||||
|
if (result.code === 0) { |
||||||
|
testSuccess.value = true |
||||||
|
|
||||||
|
Modal.confirm({ |
||||||
|
title: t('msg.info.dbConnected'), |
||||||
|
icon: null, |
||||||
|
type: 'success', |
||||||
|
|
||||||
|
okText: t('activity.OkSaveProject'), |
||||||
|
okType: 'primary', |
||||||
|
cancelText: 'Cancel', |
||||||
|
onOk: createProject, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
testSuccess.value = false |
||||||
|
toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`) |
||||||
|
} |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
testSuccess.value = false |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// hide sidebar |
||||||
|
$state.sidebarOpen.value = false |
||||||
|
|
||||||
|
// reset test status on config change |
||||||
|
watch( |
||||||
|
() => formState.dataSource, |
||||||
|
() => (testSuccess.value = false), |
||||||
|
{ deep: true }, |
||||||
|
) |
||||||
|
|
||||||
|
// select and focus title field on load |
||||||
|
onMounted(() => { |
||||||
|
nextTick(() => { |
||||||
|
// todo: replace setTimeout and follow better approach |
||||||
|
setTimeout(() => { |
||||||
|
const input = form.value?.$el?.querySelector('input[type=text]') |
||||||
|
input.setSelectionRange(0, formState.title.length) |
||||||
|
input.focus() |
||||||
|
}, 500) |
||||||
|
}) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-card |
||||||
|
class="max-w-[600px] mx-auto !mt-5 !mb-5" |
||||||
|
:title="$t('activity.createProject')" |
||||||
|
:head-style="{ textAlign: 'center', fontWeight: '700' }" |
||||||
|
> |
||||||
|
<a-form |
||||||
|
ref="form" |
||||||
|
:model="formState" |
||||||
|
name="external-project-create-form" |
||||||
|
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" class="nc-extdb-proj-name" /> |
||||||
|
</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" class="nc-extdb-db-type" @change="onClientChange"> |
||||||
|
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value" |
||||||
|
>{{ client.text }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- SQLite File --> |
||||||
|
<a-form-item |
||||||
|
v-if="formState.dataSource.client === ClientType.SQLITE" |
||||||
|
:label="$t('labels.sqliteFile')" |
||||||
|
v-bind="validateInfos['dataSource.connection.connection.filename']" |
||||||
|
> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.connection.filename" size="small" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<template v-else> |
||||||
|
<!-- Host Address --> |
||||||
|
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.host" size="small" class="nc-extdb-host-address" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Port Number --> |
||||||
|
<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 nc-extdb-host-port" size="small" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Username --> |
||||||
|
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.user" size="small" class="nc-extdb-host-user" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Password --> |
||||||
|
<a-form-item :label="$t('labels.password')"> |
||||||
|
<a-input-password |
||||||
|
v-model:value="formState.dataSource.connection.password" |
||||||
|
size="small" |
||||||
|
class="nc-extdb-host-password" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Database --> |
||||||
|
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||||
|
<!-- Database : create if not exists --> |
||||||
|
<a-input |
||||||
|
v-model:value="formState.dataSource.connection.database" |
||||||
|
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||||
|
size="small" |
||||||
|
class="nc-extdb-host-database" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
<!-- Schema name --> |
||||||
|
<a-form-item |
||||||
|
v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client)" |
||||||
|
:label="$t('labels.schemaName')" |
||||||
|
v-bind="validateInfos['dataSource.connection.searchPath.0']" |
||||||
|
> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.searchPath[0]" size="small" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-collapse ghost expand-icon-position="right" class="mt-6"> |
||||||
|
<a-collapse-panel key="1" :header="$t('title.advancedParameters')"> |
||||||
|
<!-- todo: add in i18n --> |
||||||
|
<a-form-item label="SSL mode"> |
||||||
|
<a-select v-model:value="formState.sslUse" size="small" @change="onClientChange"> |
||||||
|
<a-select-option v-for="opt in sslUsage" :key="opt" :value="opt">{{ opt }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item label="SSL keys"> |
||||||
|
<div class="flex gap-2"> |
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select .cert file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientCert') }}</span> |
||||||
|
</template> |
||||||
|
<a-button :disabled="!sslFilesRequired" size="small" @click="certFileInput.click()"> |
||||||
|
{{ $t('labels.clientCert') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select .key file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientKey') }}</span> |
||||||
|
</template> |
||||||
|
<a-button :disabled="!sslFilesRequired" size="small" @click="keyFileInput.click()"> |
||||||
|
{{ $t('labels.clientKey') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select CA file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientCA') }}</span> |
||||||
|
</template> |
||||||
|
<a-button :disabled="!sslFilesRequired" size="small" @click="caFileInput.click()"> |
||||||
|
{{ $t('labels.serverCA') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect('ca', caFileInput)" /> |
||||||
|
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect('cert', certFileInput)" /> |
||||||
|
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" /> |
||||||
|
|
||||||
|
<a-form-item :label="$t('labels.inflection.tableName')"> |
||||||
|
<a-select v-model:value="formState.inflection.inflectionTable" size="small" @change="onClientChange"> |
||||||
|
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item :label="$t('labels.inflection.columnName')"> |
||||||
|
<a-select v-model:value="formState.inflection.inflectionColumn" size="small" @change="onClientChange"> |
||||||
|
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
<div class="flex justify-end"> |
||||||
|
<a-button size="small" class="!shadow-md" @click="configEditDlg = true"> |
||||||
|
<!-- Edit connection JSON --> |
||||||
|
{{ $t('activity.editConnJson') }} |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</a-collapse-panel> |
||||||
|
</a-collapse> |
||||||
|
</template> |
||||||
|
|
||||||
|
<a-form-item class="flex justify-center mt-5"> |
||||||
|
<div class="flex justify-center gap-2"> |
||||||
|
<a-button type="primary" class="nc-extdb-btn-test-connection" @click="testConnection"> |
||||||
|
{{ $t('activity.testDbConn') }} |
||||||
|
</a-button> |
||||||
|
<a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit" @click="createProject"> Submit </a-button> |
||||||
|
</div> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
|
||||||
|
<v-dialog v-model="configEditDlg"> |
||||||
|
<a-card> |
||||||
|
<MonacoEditor v-if="configEditDlg" v-model="formState" class="h-[400px] w-[600px]" /> |
||||||
|
</a-card> |
||||||
|
</v-dialog> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
:deep(.ant-collapse-header) { |
||||||
|
@apply !pr-10 !-mt-4 text-right justify-end; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-collapse-content-box) { |
||||||
|
@apply !px-0; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-explain-error) { |
||||||
|
@apply !text-xs; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item) { |
||||||
|
@apply mb-2; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-with-help .ant-form-item-explain) { |
||||||
|
@apply !min-h-0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { onMounted, onUpdated } from '@vue/runtime-core' |
||||||
|
import type { Form } from 'ant-design-vue' |
||||||
|
import { useToast } from 'vue-toastification' |
||||||
|
import { nextTick, ref } from '#imports' |
||||||
|
import { navigateTo, useNuxtApp } from '#app' |
||||||
|
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||||
|
import { projectTitleValidator } from '~/utils/validation' |
||||||
|
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline' |
||||||
|
|
||||||
|
const name = ref('') |
||||||
|
const loading = ref(false) |
||||||
|
const valid = ref(false) |
||||||
|
|
||||||
|
const { $api, $state, $e } = useNuxtApp() |
||||||
|
const toast = useToast() |
||||||
|
|
||||||
|
const nameValidationRules = [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: 'Project name is required', |
||||||
|
}, |
||||||
|
projectTitleValidator, |
||||||
|
] |
||||||
|
|
||||||
|
const formState = reactive({ |
||||||
|
title: '', |
||||||
|
}) |
||||||
|
|
||||||
|
const createProject = async () => { |
||||||
|
$e('a:project:create:xcdb') |
||||||
|
loading.value = true |
||||||
|
try { |
||||||
|
const result = await $api.project.create({ |
||||||
|
title: formState.title, |
||||||
|
}) |
||||||
|
|
||||||
|
await navigateTo(`/nc/${result.id}`) |
||||||
|
} catch (e: any) { |
||||||
|
toast.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
loading.value = false |
||||||
|
} |
||||||
|
|
||||||
|
const form = ref<typeof Form>() |
||||||
|
|
||||||
|
// hide sidebar |
||||||
|
$state.sidebarOpen.value = false |
||||||
|
|
||||||
|
// select and focus title field on load |
||||||
|
onMounted(async () => { |
||||||
|
nextTick(() => { |
||||||
|
// todo: replace setTimeout and follow better approach |
||||||
|
setTimeout(() => { |
||||||
|
const input = form.value?.$el?.querySelector('input[type=text]') |
||||||
|
input.setSelectionRange(0, formState.title.length) |
||||||
|
input.focus() |
||||||
|
}, 500) |
||||||
|
}) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-card class="w-[500px] mx-auto !mt-100px shadow-md"> |
||||||
|
<h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3> |
||||||
|
|
||||||
|
<a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="createProject"> |
||||||
|
<a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10"> |
||||||
|
<a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item style="text-align: center" class="mt-2"> |
||||||
|
<a-button type="primary" html-type="submit"> |
||||||
|
<div class="flex items-center"> |
||||||
|
<MaterialSymbolsRocketLaunchOutline class="mr-1" /> |
||||||
|
{{ $t('general.create') }} |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
@ -1,164 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { useI18n } from 'vue-i18n' |
|
||||||
import { useToast } from 'vue-toastification' |
|
||||||
import { navigateTo, useNuxtApp } from '#app' |
|
||||||
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
|
||||||
import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from '~/utils/projectCreateUtils' |
|
||||||
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline' |
|
||||||
|
|
||||||
const name = ref('') |
|
||||||
const loading = ref(false) |
|
||||||
const valid = ref(false) |
|
||||||
const testSuccess = ref(true) |
|
||||||
const projectDatasource = ref(getDefaultConnectionConfig('mysql2')) |
|
||||||
const inflection = reactive({ |
|
||||||
tableName: 'camelize', |
|
||||||
columnName: 'camelize', |
|
||||||
}) |
|
||||||
|
|
||||||
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 { |
|
||||||
const result = await $api.project.create({ |
|
||||||
title: name.value, |
|
||||||
bases: [ |
|
||||||
{ |
|
||||||
type: projectDatasource.value.client, |
|
||||||
config: projectDatasource.value, |
|
||||||
inflection_column: inflection.columnName, |
|
||||||
inflection_table: inflection.tableName, |
|
||||||
}, |
|
||||||
], |
|
||||||
external: true, |
|
||||||
}) |
|
||||||
|
|
||||||
await navigateTo(`/nc/${result.id}`) |
|
||||||
} catch (e: any) { |
|
||||||
// todo: toast |
|
||||||
toast.error(await extractSdkResponseErrorMsg(e)) |
|
||||||
} |
|
||||||
loading.value = false |
|
||||||
} |
|
||||||
|
|
||||||
const testConnection = async () => { |
|
||||||
$e('a:project:create:extdb:test-connection', []) |
|
||||||
try { |
|
||||||
// this.handleSSL(projectDatasource) |
|
||||||
|
|
||||||
if (projectDatasource.value.client === 'sqlite3') { |
|
||||||
testSuccess.value = true |
|
||||||
} else { |
|
||||||
const testConnectionConfig = { |
|
||||||
...projectDatasource, |
|
||||||
connection: { |
|
||||||
...projectDatasource.value.connection, |
|
||||||
database: getTestDatabaseName(projectDatasource.value), |
|
||||||
}, |
|
||||||
} |
|
||||||
|
|
||||||
const result = await $api.utils.testConnection(testConnectionConfig) |
|
||||||
|
|
||||||
if (result.code === 0) { |
|
||||||
testSuccess.value = true |
|
||||||
} else { |
|
||||||
testSuccess.value = false |
|
||||||
toast.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`) |
|
||||||
} |
|
||||||
} |
|
||||||
} catch (e: any) { |
|
||||||
testSuccess.value = false |
|
||||||
toast.error(await extractSdkResponseErrorMsg(e)) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<NuxtLayout> |
|
||||||
<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 --> |
|
||||||
<v-container class="pb-10 px-12"> |
|
||||||
<h1 class="my-4 prose-lg text-center"> |
|
||||||
{{ $t('activity.createProject') }} |
|
||||||
</h1> |
|
||||||
|
|
||||||
<v-row> |
|
||||||
<v-col offset="2" cols="8"> |
|
||||||
<v-text-field |
|
||||||
v-model="name" |
|
||||||
:rules="titleValidationRule" |
|
||||||
class="nc-metadb-project-name" |
|
||||||
:label="$t('labels.projName')" |
|
||||||
/> |
|
||||||
</v-col> |
|
||||||
|
|
||||||
<v-col cols="6"> |
|
||||||
<v-select |
|
||||||
v-model="projectDatasource.client" |
|
||||||
density="compact" |
|
||||||
:items="clientTypes" |
|
||||||
item-title="text" |
|
||||||
item-value="value" |
|
||||||
class="nc-metadb-project-name" |
|
||||||
label="Database client" |
|
||||||
/> |
|
||||||
</v-col> |
|
||||||
<v-col cols="6"> |
|
||||||
<v-text-field v-model="projectDatasource.connection.host" density="compact" :label="$t('labels.hostAddress')" /> |
|
||||||
</v-col> |
|
||||||
<v-col cols="6"> |
|
||||||
<v-text-field |
|
||||||
v-model="projectDatasource.connection.port" |
|
||||||
density="compact" |
|
||||||
:label="$t('labels.port')" |
|
||||||
type="number" |
|
||||||
/> |
|
||||||
</v-col> |
|
||||||
<v-col cols="6"> |
|
||||||
<v-text-field v-model="projectDatasource.connection.user" density="compact" :label="$t('labels.username')" /> |
|
||||||
</v-col> |
|
||||||
<v-col cols="6"> |
|
||||||
<v-text-field |
|
||||||
v-model="projectDatasource.connection.password" |
|
||||||
density="compact" |
|
||||||
type="password" |
|
||||||
:label="$t('labels.password')" |
|
||||||
/> |
|
||||||
</v-col> |
|
||||||
<v-col cols="6"> |
|
||||||
<v-text-field v-model="projectDatasource.connection.database" density="compact" label="Database name" /> |
|
||||||
</v-col> |
|
||||||
</v-row> |
|
||||||
|
|
||||||
<div class="d-flex justify-center" style="gap: 4px"> |
|
||||||
<v-btn :disabled="!testSuccess" large :loading="loading" color="primary" @click="createProject"> |
|
||||||
<MaterialSymbolsRocketLaunchOutline class="mr-1" /> |
|
||||||
<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"> |
|
||||||
<!– Test Database Connection –> |
|
||||||
{{ $t('activity.testDbConn') }} |
|
||||||
</v-btn> --> |
|
||||||
</div> |
|
||||||
</v-container> |
|
||||||
</v-card> |
|
||||||
</v-container> |
|
||||||
</v-form> |
|
||||||
</NuxtLayout> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped></style> |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ref } from 'vue' |
|
||||||
import { navigateTo, useNuxtApp } from '#app' |
|
||||||
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
|
||||||
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline' |
|
||||||
|
|
||||||
const name = ref('') |
|
||||||
const loading = ref(false) |
|
||||||
const valid = ref(false) |
|
||||||
|
|
||||||
const { $api, $toast } = useNuxtApp() |
|
||||||
|
|
||||||
const nameValidationRules = [ |
|
||||||
(v: string) => !!v || 'Title is required', |
|
||||||
(v: string) => v.length <= 50 || 'Project name exceeds 50 characters', |
|
||||||
] |
|
||||||
|
|
||||||
const createProject = async () => { |
|
||||||
loading.value = true |
|
||||||
try { |
|
||||||
const result = await $api.project.create({ |
|
||||||
title: name.value, |
|
||||||
}) |
|
||||||
|
|
||||||
await navigateTo(`/nc/${result.id}`) |
|
||||||
} catch (e: any) { |
|
||||||
$toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000) |
|
||||||
} |
|
||||||
loading.value = false |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<NuxtLayout> |
|
||||||
<v-form ref="formValidator" v-model="valid" class="h-full" @submit.prevent="createProject"> |
|
||||||
<v-container fluid class="flex justify-center items-center h-3/4"> |
|
||||||
<v-card max-width="500"> |
|
||||||
<v-container class="pb-10 px-12"> |
|
||||||
<h1 class="my-4 prose-lg text-center"> |
|
||||||
{{ $t('activity.createProject') }} |
|
||||||
</h1> |
|
||||||
<div class="mx-auto" style="width: 350px"> |
|
||||||
<v-text-field |
|
||||||
v-model="name" |
|
||||||
class="nc-metadb-project-name" |
|
||||||
:rules="nameValidationRules" |
|
||||||
:label="$t('labels.projName')" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<v-btn class="mx-auto" large :loading="loading" color="primary" @click="createProject"> |
|
||||||
<MaterialSymbolsRocketLaunchOutline class="mr-1" /> |
|
||||||
<span> {{ $t('general.create') }} </span> |
|
||||||
</v-btn> |
|
||||||
</v-container> |
|
||||||
</v-card> |
|
||||||
</v-container> |
|
||||||
</v-form> |
|
||||||
</NuxtLayout> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
:deep(label) { |
|
||||||
font-size: 0.75rem; |
|
||||||
} |
|
||||||
|
|
||||||
.wrapper { |
|
||||||
border: 2px solid var(--v-backgroundColor-base); |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.main { |
|
||||||
height: calc(100vh - 48px); |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,49 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import type { ProjectType } from 'nocodb-sdk' |
||||||
|
import { navigateTo } from '#app' |
||||||
|
|
||||||
|
import MdiDeleteOutline from '~icons/mdi/delete-outline' |
||||||
|
import MdiEditOutline from '~icons/mdi/edit-outline' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
projects?: ProjectType[] |
||||||
|
} |
||||||
|
|
||||||
|
const { projects = [] } = defineProps<Props>() |
||||||
|
|
||||||
|
const emit = defineEmits(['delete-project']) |
||||||
|
|
||||||
|
const { $e } = useNuxtApp() |
||||||
|
|
||||||
|
const openProject = async (project: ProjectType) => { |
||||||
|
await navigateTo(`/nc/${project.id}`) |
||||||
|
$e('a:project:open', { count: projects.length }) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="grid grid-cols-3 gap-2 prose-md p-2 font-semibold"> |
||||||
|
<div>{{ $t('general.title') }}</div> |
||||||
|
<div>Updated At</div> |
||||||
|
<div></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="col-span-3 w-full h-[1px] bg-gray-500/50" /> |
||||||
|
|
||||||
|
<template v-for="project of projects" :key="project.id"> |
||||||
|
<div |
||||||
|
class="cursor-pointer grid grid-cols-3 gap-2 prose-md hover:(bg-gray-300/30 dark:bg-gray-500/30 shadow-sm) p-2 transition-color ease-in duration-100" |
||||||
|
@click="openProject(project)" |
||||||
|
> |
||||||
|
<div class="font-semibold capitalize">{{ project.title || 'Untitled' }}</div> |
||||||
|
<div>{{ project.updated_at }}</div> |
||||||
|
<div class="flex justify-center"> |
||||||
|
<MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop="emit('delete-project', project)" /> |
||||||
|
<MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-span-3 w-full h-[1px] bg-gray-500/30" /> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
export const deepCompare = (a: any, b: any) => { |
||||||
|
if (a === b) return true |
||||||
|
if (a == null || b === null) return false |
||||||
|
if (typeof a !== typeof b) return false |
||||||
|
if (typeof a !== 'object') return a === b |
||||||
|
if (Object.keys(a).length !== Object.keys(b).length) return false |
||||||
|
|
||||||
|
for (const k in a) { |
||||||
|
if (!(k in b)) return false |
||||||
|
if (!deepCompare(a[k], b[k])) return false |
||||||
|
} |
||||||
|
return true |
||||||
|
} |
||||||
Loading…
Reference in new issue