lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add new component "switch button" 

refactor: extract the file open input as a component
This commit is contained in:
tiny-craft 2023-10-21 00:11:23 +08:00
parent f8a7567166
commit 34a0be4d08
3 changed files with 107 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/common/FileOpenInput.vue Normal file
View File

@ -0,0 +1,31 @@
<script setup>
import { SelectFile } from 'wailsjs/go/services/systemService.js'
import { get } from 'lodash'
const props = defineProps({
value: String,
placeholder: String,
disabled: Boolean,
})
const emit = defineEmits(['update:value'])
const handleSelectFile = async () => {
const { success, data } = await SelectFile()
if (success) {
const path = get(data, 'path', '')
emit('update:value', path)
} else {
emit('update:value', '')
}
}
</script>
<template>
<n-input-group>
<n-input v-model:value="props.value" :disabled="props.disabled" :placeholder="placeholder" clearable />
<n-button :disabled="props.disabled" :focusable="false" @click="handleSelectFile">...</n-button>
</n-input-group>
</template>
<style scoped lang="scss"></style>

59
frontend/src/components/common/SwitchButton.vue Normal file
View File

@ -0,0 +1,59 @@
<script setup>
import { NIcon } from 'naive-ui'
const props = defineProps({
value: {
type: Number,
default: 0,
},
size: {
type: String,
default: 'small',
},
icons: Array,
tTooltips: Array,
iconSize: {
type: [Number, String],
default: 20,
},
color: {
type: String,
default: 'currentColor',
},
strokeWidth: {
type: [Number, String],
default: 3,
},
})
const emit = defineEmits(['update:value'])
const handleSwitch = (idx) => {
if (idx !== props.value) {
emit('update:value', idx)
}
}
</script>
<template>
<n-button-group>
<n-tooltip
:show-arrow="false"
v-for="(icon, i) in props.icons"
:key="i"
:disabled="!(props.tTooltips && props.tTooltips[i])">
<template #trigger>
<n-button :tertiary="i !== props.value" :focusable="false" :size="props.size" @click="handleSwitch(i)">
<template #icon>
<n-icon :size="props.iconSize">
<component :is="icon" :stroke-width="props.strokeWidth" />
</n-icon>
</template>
</n-button>
</template>
{{ props.tTooltips ? $t(props.tTooltips[i]) : '' }}
</n-tooltip>
</n-button-group>
</template>
<style scoped lang="scss"></style>

82
frontend/src/components/dialogs/ConnectionDialog.vue
View File

@ -6,7 +6,7 @@ import { ListSentinelMasters, TestConnection } from 'wailsjs/go/services/connect
import useDialog, { ConnDialogType } from 'stores/dialog'
import Close from '@/components/icons/Close.vue'
import useConnectionStore from 'stores/connections.js'
import { SelectFile } from 'wailsjs/go/services/systemService.js'
import FileOpenInput from '@/components/common/FileOpenInput.vue'
/**
* Dialog for new or edit connection
@ -83,39 +83,6 @@ const sshLoginType = computed(() => {
return get(generalForm.value, 'ssh.loginType', 'pwd')
})
const onSSHChooseKey = async () => {
const { success, data } = await SelectFile()
const path = get(data, 'path', '')
if (!isEmpty(path)) {
generalForm.value.ssh.pkFile = path
}
}
const onSSLChooseCert = async () => {
const { success, data } = await SelectFile()
const path = get(data, 'path', '')
if (!isEmpty(path)) {
generalForm.value.ssl.certFile = path
}
}
const onSSLChooseKey = async () => {
const { success, data } = await SelectFile()
const path = get(data, 'path', '')
if (!isEmpty(path)) {
generalForm.value.ssl.keyFile = path
}
}
const onSSLChooseCA = async () => {
const { success, data } = await SelectFile()
if (!success) {
generalForm.value.ssl.caFile = ''
} else {
generalForm.value.ssl.caFile = get(data, 'path', '')
}
}
const loadingSentinelMaster = ref(false)
const masterNameOptions = ref([])
const onLoadSentinelMasters = async () => {
@ -434,43 +401,22 @@ const onClose = () => {
:show-require-mark="false"
label-placement="top">
<n-form-item :label="$t('dialogue.connection.ssl.cert_file')">
<n-input-group>
<n-input
<file-open-input
v-model:value="generalForm.ssl.certFile"
:placeholder="$t('dialogue.connection.ssl.cert_file_tip')"
clearable />
<n-button
:disabled="!generalForm.ssl.enable"
:focusable="false"
@click="onSSLChooseCert">
...
</n-button>
</n-input-group>
:disabled="!generalForm.ssl.enable" />
</n-form-item>
<n-form-item :label="$t('dialogue.connection.ssl.key_file')">
<n-input-group>
<n-input
<file-open-input
v-model:value="generalForm.ssl.keyFile"
:placeholder="$t('dialogue.connection.ssl.key_file_tip')"
clearable />
<n-button
:disabled="!generalForm.ssl.enable"
:focusable="false"
@click="onSSLChooseKey">
...
</n-button>
</n-input-group>
:disabled="!generalForm.ssl.enable" />
</n-form-item>
<n-form-item :label="$t('dialogue.connection.ssl.ca_file')">
<n-input-group>
<n-input
<file-open-input
v-model:value="generalForm.ssl.caFile"
:placeholder="$t('dialogue.connection.ssl.ca_file_tip')"
clearable />
<n-button :disabled="!generalForm.ssl.enable" :focusable="false" @click="onSSLChooseCA">
...
</n-button>
</n-input-group>
:disabled="!generalForm.ssl.enable" />
</n-form-item>
</n-form>
</n-tab-pane>
@ -519,18 +465,10 @@ const onClose = () => {
type="password" />
</n-form-item>
<n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.pkfile')">
<n-input-group>
<n-input
<file-open-input
v-model:value="generalForm.ssh.pkFile"
:placeholder="$t('dialogue.connection.ssh.pkfile_tip')" />
<n-button
:disabled="!generalForm.ssh.enable"
:focusable="false"
clearable
@click="onSSHChooseKey">
...
</n-button>
</n-input-group>
:placeholder="$t('dialogue.connection.ssh.pkfile_tip')"
:disabled="!generalForm.ssh.enable" />
</n-form-item>
<n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.passphrase')">
<n-input