|
|
@ -1,6 +1,5 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { Form, Modal, message } from 'ant-design-vue' |
|
|
|
import { Form, Modal, message } from 'ant-design-vue' |
|
|
|
import type { RawValueType } from 'ant-design-vue' |
|
|
|
|
|
|
|
import { |
|
|
|
import { |
|
|
|
clientTypes, |
|
|
|
clientTypes, |
|
|
|
computed, |
|
|
|
computed, |
|
|
@ -45,6 +44,7 @@ const formState = $ref<ProjectCreateForm>({ |
|
|
|
inflectionTable: 'camelize', |
|
|
|
inflectionTable: 'camelize', |
|
|
|
}, |
|
|
|
}, |
|
|
|
sslUse: 'No', |
|
|
|
sslUse: 'No', |
|
|
|
|
|
|
|
extraParameters: [], |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const customFormState = ref<ProjectCreateForm>({ |
|
|
|
const customFormState = ref<ProjectCreateForm>({ |
|
|
@ -55,6 +55,7 @@ const customFormState = ref<ProjectCreateForm>({ |
|
|
|
inflectionTable: 'camelize', |
|
|
|
inflectionTable: 'camelize', |
|
|
|
}, |
|
|
|
}, |
|
|
|
sslUse: 'No', |
|
|
|
sslUse: 'No', |
|
|
|
|
|
|
|
extraParameters: [], |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const validators = computed(() => { |
|
|
|
const validators = computed(() => { |
|
|
@ -66,6 +67,7 @@ const validators = computed(() => { |
|
|
|
}, |
|
|
|
}, |
|
|
|
projectTitleValidator, |
|
|
|
projectTitleValidator, |
|
|
|
], |
|
|
|
], |
|
|
|
|
|
|
|
'extraParameters': [extraParameterValidator], |
|
|
|
'dataSource.client': [fieldRequiredValidator], |
|
|
|
'dataSource.client': [fieldRequiredValidator], |
|
|
|
...(formState.dataSource.client === ClientType.SQLITE |
|
|
|
...(formState.dataSource.client === ClientType.SQLITE |
|
|
|
? { |
|
|
|
? { |
|
|
@ -97,13 +99,13 @@ const onClientChange = () => { |
|
|
|
populateName(formState.title) |
|
|
|
populateName(formState.title) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const onSSLModeChange = (v: RawValueType) => { |
|
|
|
const onSSLModeChange = (v: any) => { |
|
|
|
switch (v) { |
|
|
|
switch (v) { |
|
|
|
case 'No': |
|
|
|
case 'No': |
|
|
|
delete formState.dataSource.connection.ssl |
|
|
|
delete formState.dataSource.connection.ssl |
|
|
|
break |
|
|
|
break |
|
|
|
case 'Allowed': |
|
|
|
case 'Allowed': |
|
|
|
formState.dataSource.connection.ssl = true |
|
|
|
formState.dataSource.connection.ssl = 'true' |
|
|
|
break |
|
|
|
break |
|
|
|
default: |
|
|
|
default: |
|
|
|
formState.dataSource.connection.ssl = { |
|
|
|
formState.dataSource.connection.ssl = { |
|
|
@ -115,17 +117,16 @@ const onSSLModeChange = (v: RawValueType) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const inflectionTypes = ['camelize', 'none'] |
|
|
|
const addNewParam = () => { |
|
|
|
const configEditDlg = ref(false) |
|
|
|
formState.extraParameters.push({ key: '', value: '' }) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// populate database name based on title |
|
|
|
const removeParam = (index: number) => { |
|
|
|
watch( |
|
|
|
formState.extraParameters.splice(index, 1) |
|
|
|
() => formState.title, |
|
|
|
} |
|
|
|
(v) => populateName(v), |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// generate a random project title |
|
|
|
const inflectionTypes = ['camelize', 'none'] |
|
|
|
formState.title = generateUniqueName() |
|
|
|
const configEditDlg = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const caFileInput = ref<HTMLInputElement>() |
|
|
|
const caFileInput = ref<HTMLInputElement>() |
|
|
|
const keyFileInput = ref<HTMLInputElement>() |
|
|
|
const keyFileInput = ref<HTMLInputElement>() |
|
|
@ -143,13 +144,24 @@ const sslFilesRequired = computed<boolean>(() => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
function getConnectionConfig() { |
|
|
|
function getConnectionConfig() { |
|
|
|
|
|
|
|
const extraParameters = Object.fromEntries( |
|
|
|
|
|
|
|
new Map( |
|
|
|
|
|
|
|
formState.extraParameters.map((object) => { |
|
|
|
|
|
|
|
return [object.key, object.value] |
|
|
|
|
|
|
|
}), |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
const connection = { |
|
|
|
const connection = { |
|
|
|
...formState.dataSource.connection, |
|
|
|
...formState.dataSource.connection, |
|
|
|
|
|
|
|
...extraParameters, |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if ('ssl' in connection && connection.ssl && (!sslFilesRequired || Object.values(connection.ssl).every((v) => !v))) { |
|
|
|
if ('ssl' in connection && connection.ssl) { |
|
|
|
|
|
|
|
if (formState.sslUse === 'No' || (typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => !v))) { |
|
|
|
delete connection.ssl |
|
|
|
delete connection.ssl |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
return connection |
|
|
|
return connection |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -260,8 +272,15 @@ watch( |
|
|
|
{ deep: true }, |
|
|
|
{ deep: true }, |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// populate database name based on title |
|
|
|
|
|
|
|
watch( |
|
|
|
|
|
|
|
() => formState.title, |
|
|
|
|
|
|
|
(v) => populateName(v), |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
// select and focus title field on load |
|
|
|
// select and focus title field on load |
|
|
|
onMounted(() => { |
|
|
|
onMounted(() => { |
|
|
|
|
|
|
|
formState.title = generateUniqueName() |
|
|
|
nextTick(() => { |
|
|
|
nextTick(() => { |
|
|
|
// todo: replace setTimeout and follow better approach |
|
|
|
// todo: replace setTimeout and follow better approach |
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
@ -403,6 +422,24 @@ onMounted(() => { |
|
|
|
|
|
|
|
|
|
|
|
<a-divider /> |
|
|
|
<a-divider /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a-form-item class="mb-2" label="Extra connection parameters" v-bind="validateInfos.extraParameters"> |
|
|
|
|
|
|
|
<a-card> |
|
|
|
|
|
|
|
<div v-for="(item, index) of formState.extraParameters" :key="index"> |
|
|
|
|
|
|
|
<div class="flex py-1 items-center gap-1"> |
|
|
|
|
|
|
|
<a-input v-model:value="item.key" /> |
|
|
|
|
|
|
|
<span>:</span> |
|
|
|
|
|
|
|
<a-input v-model:value="item.value" /> |
|
|
|
|
|
|
|
<MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam"> |
|
|
|
|
|
|
|
<div class="flex items-center justify-center"><MdiPlus /></div> |
|
|
|
|
|
|
|
</a-button> |
|
|
|
|
|
|
|
</a-card> |
|
|
|
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a-divider /> |
|
|
|
|
|
|
|
|
|
|
|
<a-form-item :label="$t('labels.inflection.tableName')"> |
|
|
|
<a-form-item :label="$t('labels.inflection.tableName')"> |
|
|
|
<a-select v-model:value="formState.inflection.inflectionTable"> |
|
|
|
<a-select v-model:value="formState.inflection.inflectionTable"> |
|
|
|
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
|
|
|
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
|
|
|