Browse Source

chore(gui-v2): type fixes

pull/3306/head
braks 2 years ago committed by mertmit
parent
commit
4ba23f9832
  1. 41
      packages/nc-gui-v2/pages/index/index/create-external.vue
  2. 4
      packages/nc-gui-v2/utils/projectCreateUtils.ts

41
packages/nc-gui-v2/pages/index/index/create-external.vue

@ -1,5 +1,6 @@
<script lang="ts" setup>
import { Form, Modal, message } from 'ant-design-vue'
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
import {
clientTypes,
computed,
@ -28,6 +29,8 @@ const useForm = Form.useForm
const testSuccess = ref(false)
const form = ref<typeof Form>()
const { api, isLoading } = useApi()
const { $e } = useNuxtApp()
@ -91,7 +94,7 @@ const validators = computed(() => {
const { validate, validateInfos } = useForm(formState, validators)
const populateName = (v: string) => {
formState.dataSource.connection.database = `${v?.trim()}_noco`
formState.dataSource.connection.database = `${v.trim()}_noco`
}
const onClientChange = () => {
@ -99,8 +102,9 @@ const onClientChange = () => {
populateName(formState.title)
}
const onSSLModeChange = (v: any) => {
switch (v) {
const onSSLModeChange = ((mode: 'No' | 'Allow' | string) => {
if ('ssl' in formState.dataSource.connection) {
switch (mode) {
case 'No':
delete formState.dataSource.connection.ssl
break
@ -116,6 +120,7 @@ const onSSLModeChange = (v: any) => {
break
}
}
}) as unknown as SelectHandler
const addNewParam = () => {
formState.extraParameters.push({ key: '', value: '' })
@ -132,25 +137,19 @@ 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) => {
if (!el) return
readFile(el, (content) => {
if ('ssl' in formState.dataSource.connection && formState.dataSource.connection.ssl)
if ('ssl' in formState.dataSource.connection && typeof formState.dataSource.connection.ssl === 'object')
formState.dataSource.connection.ssl[key] = content ?? ''
})
}
const sslFilesRequired = computed<boolean>(() => {
return formState?.sslUse && formState.sslUse !== 'No' && formState.sslUse !== 'Allowed'
})
const sslFilesRequired = computed(() => !!formState.sslUse && formState.sslUse !== 'No' && formState.sslUse !== 'Allowed')
function getConnectionConfig() {
const extraParameters = Object.fromEntries(
new Map(
formState.extraParameters.map((object) => {
return [object.key, object.value]
}),
),
)
const extraParameters = Object.fromEntries(new Map(formState.extraParameters.map((object) => [object.key, object.value])))
const connection = {
...formState.dataSource.connection,
@ -165,9 +164,8 @@ function getConnectionConfig() {
return connection
}
const form = ref<any>()
const focusInvalidInput = () => {
form?.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus()
}
const createProject = async () => {
@ -393,7 +391,7 @@ onMounted(() => {
<span>{{ $t('tooltip.clientCert') }}</span>
</template>
<a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput.click()">
<a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()">
{{ $t('labels.clientCert') }}
</a-button>
</a-tooltip>
@ -403,7 +401,7 @@ onMounted(() => {
<template #title>
<span>{{ $t('tooltip.clientKey') }}</span>
</template>
<a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput.click()">
<a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()">
{{ $t('labels.clientKey') }}
</a-button>
</a-tooltip>
@ -414,7 +412,7 @@ onMounted(() => {
<span>{{ $t('tooltip.clientCA') }}</span>
</template>
<a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput.click()">
<a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()">
{{ $t('labels.serverCA') }}
</a-button>
</a-tooltip>
@ -434,8 +432,11 @@ onMounted(() => {
<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>

4
packages/nc-gui-v2/utils/projectCreateUtils.ts

@ -11,7 +11,7 @@ export interface ProjectCreateForm {
user: string
password: string
port: number | string
ssl?: Record<string, string> | string
ssl?: Record<'ca' | 'cert' | 'key', string> | string
}
| {
client?: ClientType.SQLITE
@ -27,7 +27,7 @@ export interface ProjectCreateForm {
inflectionColumn?: string
inflectionTable?: string
}
sslUse?: any
sslUse?: 'No' | 'Allowed' | string
extraParameters: Record<string, string>[]
}

Loading…
Cancel
Save