287 lines
11 KiB
Vue
287 lines
11 KiB
Vue
<script setup>
|
|
import { every, get, includes, isEmpty, map } from 'lodash'
|
|
import { computed, nextTick, ref, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { TestConnection } from 'wailsjs/go/services/connectionService.js'
|
|
import useDialog from 'stores/dialog'
|
|
import Close from '@/components/icons/Close.vue'
|
|
import useConnectionStore from 'stores/connections.js'
|
|
|
|
/**
|
|
* Dialog for new or edit connection
|
|
*/
|
|
|
|
const dialogStore = useDialog()
|
|
const connectionStore = useConnectionStore()
|
|
const i18n = useI18n()
|
|
|
|
const editName = ref('')
|
|
const generalForm = ref(null)
|
|
const generalFormRules = () => {
|
|
const requiredMsg = i18n.t('dialogue.field_required')
|
|
const illegalChars = ['/', '\\']
|
|
return {
|
|
name: [
|
|
{ required: true, message: requiredMsg, trigger: 'input' },
|
|
{
|
|
validator: (rule, value) => {
|
|
return every(illegalChars, (c) => !includes(value, c))
|
|
},
|
|
message: i18n.t('dialogue.illegal_characters'),
|
|
trigger: 'input',
|
|
},
|
|
],
|
|
addr: { required: true, message: requiredMsg, trigger: 'input' },
|
|
defaultFilter: { required: true, message: requiredMsg, trigger: 'input' },
|
|
keySeparator: { required: true, message: requiredMsg, trigger: 'input' },
|
|
}
|
|
}
|
|
const isEditMode = computed(() => !isEmpty(editName.value))
|
|
const closingConnection = computed(() => {
|
|
if (isEmpty(editName.value)) {
|
|
return false
|
|
}
|
|
return connectionStore.isConnected(editName.value)
|
|
})
|
|
|
|
const groupOptions = computed(() => {
|
|
const options = map(connectionStore.groups, (group) => ({
|
|
label: group,
|
|
value: group,
|
|
}))
|
|
options.splice(0, 0, {
|
|
label: i18n.t('dialogue.connection.no_group'),
|
|
value: '',
|
|
})
|
|
return options
|
|
})
|
|
|
|
const tab = ref('general')
|
|
const testing = ref(false)
|
|
const showTestResult = ref(false)
|
|
const testResult = ref('')
|
|
const predefineColors = ref(['', '#F75B52', '#F7A234', '#F7CE33', '#4ECF60', '#348CF7', '#B270D3'])
|
|
const generalFormRef = ref(null)
|
|
const advanceFormRef = ref(null)
|
|
|
|
const onSaveConnection = async () => {
|
|
// validate general form
|
|
await generalFormRef.value?.validate((err) => {
|
|
if (err) {
|
|
nextTick(() => (tab.value = 'general'))
|
|
}
|
|
})
|
|
|
|
// validate advance form
|
|
await advanceFormRef.value?.validate((err) => {
|
|
if (err) {
|
|
nextTick(() => (tab.value = 'advanced'))
|
|
}
|
|
})
|
|
|
|
// store new connection
|
|
const { success, msg } = await connectionStore.saveConnection(editName.value, generalForm.value)
|
|
if (!success) {
|
|
$message.error(msg)
|
|
return
|
|
}
|
|
|
|
$message.success(i18n.t('dialogue.handle_succ'))
|
|
onClose()
|
|
}
|
|
|
|
const resetForm = () => {
|
|
generalForm.value = connectionStore.newDefaultConnection()
|
|
generalFormRef.value?.restoreValidation()
|
|
showTestResult.value = false
|
|
testResult.value = ''
|
|
tab.value = 'general'
|
|
}
|
|
|
|
watch(
|
|
() => dialogStore.connDialogVisible,
|
|
(visible) => {
|
|
if (visible) {
|
|
editName.value = get(dialogStore.connParam, 'name', '')
|
|
generalForm.value = dialogStore.connParam || connectionStore.newDefaultConnection()
|
|
}
|
|
},
|
|
)
|
|
|
|
const onTestConnection = async () => {
|
|
testResult.value = ''
|
|
testing.value = true
|
|
let result = ''
|
|
try {
|
|
const { addr, port, username, password } = generalForm.value
|
|
const { success = false, msg } = await TestConnection(addr, port, username, password)
|
|
if (!success) {
|
|
result = msg
|
|
}
|
|
} catch (e) {
|
|
result = e.message
|
|
} finally {
|
|
testing.value = false
|
|
showTestResult.value = true
|
|
}
|
|
|
|
if (!isEmpty(result)) {
|
|
testResult.value = result
|
|
} else {
|
|
testResult.value = ''
|
|
}
|
|
}
|
|
|
|
const onClose = () => {
|
|
if (isEditMode.value) {
|
|
dialogStore.closeEditDialog()
|
|
} else {
|
|
dialogStore.closeNewDialog()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-modal
|
|
v-model:show="dialogStore.connDialogVisible"
|
|
:closable="false"
|
|
:close-on-esc="false"
|
|
:mask-closable="false"
|
|
:on-after-leave="resetForm"
|
|
:show-icon="false"
|
|
:title="isEditMode ? $t('dialogue.connection.edit_title') : $t('dialogue.connection.new_title')"
|
|
preset="dialog"
|
|
transform-origin="center">
|
|
<n-spin :show="closingConnection">
|
|
<n-tabs v-model:value="tab" animated type="line">
|
|
<n-tab-pane :tab="$t('dialogue.connection.general')" display-directive="show" name="general">
|
|
<n-form
|
|
ref="generalFormRef"
|
|
:model="generalForm"
|
|
:rules="generalFormRules()"
|
|
:show-require-mark="false"
|
|
label-placement="top">
|
|
<n-form-item :label="$t('dialogue.connection.conn_name')" path="name" required>
|
|
<n-input
|
|
v-model:value="generalForm.name"
|
|
:placeholder="$t('dialogue.connection.name_tip')" />
|
|
</n-form-item>
|
|
<n-form-item v-if="!isEditMode" :label="$t('dialogue.connection.group')" required>
|
|
<n-select v-model:value="generalForm.group" :options="groupOptions" />
|
|
</n-form-item>
|
|
<n-form-item :label="$t('dialogue.connection.addr')" path="addr" required>
|
|
<n-input
|
|
v-model:value="generalForm.addr"
|
|
:placeholder="$t('dialogue.connection.addr_tip')" />
|
|
<n-text style="width: 40px; text-align: center">:</n-text>
|
|
<n-input-number
|
|
v-model:value="generalForm.port"
|
|
:max="65535"
|
|
:min="1"
|
|
style="width: 200px" />
|
|
</n-form-item>
|
|
<n-form-item :label="$t('dialogue.connection.pwd')" path="password">
|
|
<n-input
|
|
v-model:value="generalForm.password"
|
|
:placeholder="$t('dialogue.connection.pwd_tip')"
|
|
show-password-on="click"
|
|
type="password" />
|
|
</n-form-item>
|
|
<n-form-item :label="$t('dialogue.connection.usr')" path="username">
|
|
<n-input v-model="generalForm.username" :placeholder="$t('dialogue.connection.usr_tip')" />
|
|
</n-form-item>
|
|
</n-form>
|
|
</n-tab-pane>
|
|
|
|
<n-tab-pane :tab="$t('dialogue.connection.advanced')" display-directive="show" name="advanced">
|
|
<n-form
|
|
ref="advanceFormRef"
|
|
:model="generalForm"
|
|
:rules="generalFormRules()"
|
|
:show-require-mark="false"
|
|
label-placement="top">
|
|
<n-form-item :label="$t('dialogue.connection.advn_filter')" path="defaultFilter">
|
|
<n-input
|
|
v-model:value="generalForm.defaultFilter"
|
|
:placeholder="$t('dialogue.connection.advn_filter_tip')" />
|
|
</n-form-item>
|
|
<n-form-item :label="$t('dialogue.connection.advn_separator')" path="keySeparator">
|
|
<n-input
|
|
v-model:value="generalForm.keySeparator"
|
|
:placeholder="$t('dialogue.connection.advn_separator_tip')" />
|
|
</n-form-item>
|
|
<n-form-item :label="$t('dialogue.connection.advn_conn_timeout')" path="connTimeout">
|
|
<n-input-number v-model:value="generalForm.connTimeout" :max="999999" :min="1">
|
|
<template #suffix>
|
|
{{ $t('common.second') }}
|
|
</template>
|
|
</n-input-number>
|
|
</n-form-item>
|
|
<n-form-item :label="$t('dialogue.connection.advn_exec_timeout')" path="execTimeout">
|
|
<n-input-number v-model:value="generalForm.execTimeout" :max="999999" :min="1">
|
|
<template #suffix>
|
|
{{ $t('common.second') }}
|
|
</template>
|
|
</n-input-number>
|
|
</n-form-item>
|
|
<n-form-item :label="$t('dialogue.connection.advn_mark_color')" path="markColor">
|
|
<div
|
|
v-for="color in predefineColors"
|
|
:key="color"
|
|
:class="{
|
|
'color-preset-item_selected': generalForm.markColor === color,
|
|
}"
|
|
:style="{ backgroundColor: color }"
|
|
class="color-preset-item"
|
|
@click="generalForm.markColor = color">
|
|
<n-icon v-if="isEmpty(color)" :component="Close" size="24" />
|
|
</div>
|
|
</n-form-item>
|
|
</n-form>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
|
|
<!-- test result alert-->
|
|
<n-alert
|
|
v-if="showTestResult"
|
|
:title="isEmpty(testResult) ? '' : $t('dialogue.connection.test_fail')"
|
|
:type="isEmpty(testResult) ? 'success' : 'error'">
|
|
<template v-if="isEmpty(testResult)">{{ $t('dialogue.connection.test_succ') }}</template>
|
|
<template v-else>{{ testResult }}</template>
|
|
</n-alert>
|
|
</n-spin>
|
|
|
|
<template #action>
|
|
<div class="flex-item-expand">
|
|
<n-button :focusable="false" :disabled="closingConnection" :loading="testing" @click="onTestConnection">
|
|
{{ $t('dialogue.connection.test') }}
|
|
</n-button>
|
|
</div>
|
|
<div class="flex-item n-dialog__action">
|
|
<n-button :focusable="false" :disabled="closingConnection" @click="onClose">
|
|
{{ $t('common.cancel') }}
|
|
</n-button>
|
|
<n-button :focusable="false" :disabled="closingConnection" type="primary" @click="onSaveConnection">
|
|
{{ isEditMode ? $t('preferences.general.update') : $t('common.confirm') }}
|
|
</n-button>
|
|
</div>
|
|
</template>
|
|
</n-modal>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.color-preset-item {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 2px;
|
|
border: white 3px solid;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
|
|
&_selected,
|
|
&:hover {
|
|
border-color: #cdd0d6;
|
|
}
|
|
}
|
|
</style>
|