reCoreD-UI/web/src/components/domains/DomainEditModal.vue

176 lines
5.6 KiB
Vue
Raw Normal View History

2024-04-08 09:30:25 +00:00
<template>
<NModal :mask-closable="false" preset="card" style="width: 600px" role="dialog" aria-modal="true" :show="show">
<template #header>
<span v-if="!domain || domain.id < 1">{{ t('common.new') }}</span><span v-else>{{ t('common.edit') }}</span><span>{{
t('domains._') }}</span>
</template>
<NForm :model="domain" :rules="rules">
<NFormItem :label="t('domains._')" path="domain_name">
<NInput placeholder="example.com" v-model:value="domain?.domain_name" @update:value="easyInput" />
</NFormItem>
<NFormItem :label="t('domains.form.mainDNS')" path="main_dns">
<NInput placeholder="ns1.example.com" v-model:value="domain?.main_dns" />
</NFormItem>
<NFormItem :label="t('domains.form.adminMail')" path="admin_email">
<NInput placeholder="admin@example.com" v-model:value="domain?.admin_email" />
</NFormItem>
<NFormItem :label="t('records.refesh')" path="refresh_interval">
<NInputNumber v-model:value="domain?.refresh_interval">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.retry')" path="retry_interval">
<NInputNumber v-model:value="domain?.retry_interval">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.expire')" path="expiry_period">
<NInputNumber v-model:value="domain?.expiry_period">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
<NFormItem :label="t('records.ttl')" path="negative_ttl">
<NInputNumber v-model:value="domain?.negative_ttl">
<template #suffix>
{{ t('domains.form.unitForSecond') }}
</template>
</NInputNumber>
</NFormItem>
</NForm>
<template #action>
<NFlex justify="end">
<NButton size="small" @click="show = false">
<template #icon>
<NIcon>
<Times />
</NIcon>
</template>
{{ t('common.cancel') }}
</NButton>
<NSpin :show="loading">
<NButton size="small" type="primary" :disabled="loading || invalidData" @click="confirm">
<template #icon>
<NIcon>
<Check />
</NIcon>
</template>
{{ t('common.confirm') }}
</NButton>
</NSpin>
</NFlex>
</template>
</NModal>
</template>
<script setup lang="ts">
import { useDomainStore, type Domain } from '@/stores/domains';
import { Check, Times } from '@vicons/fa';
import {
NModal,
NForm,
NFormItem,
NButton,
NInput,
NInputNumber,
useNotification,
type FormRules,
type FormItemRule
} from 'naive-ui'
import { useI18n } from 'vue-i18n';
const { t } = useI18n()
const props = defineProps<{
domain: Domain
}>()
const show = defineModel<boolean>('show', { default: false })
const loading = defineModel<boolean>('loading', { default: false })
const invalidData = defineModel<boolean>('invalidData', { default: false })
const rules = defineModel<FormRules>('rules')
rules.value = {
domain_name: {
required: true,
trigger: 'blur',
validator(_rule: FormItemRule, value: string) {
return validate(
value,
/([\w-]+\.)+[\w-]+/,
'domains.errors.domainName'
)
}
},
main_dns: {
required: true,
trigger: 'blur',
validator(_rule: FormItemRule, value: string) {
return validate(
value,
/([\w-]+\.)+[\w-]+/,
'domains.errors.domainName'
)
}
},
admin_email: {
required: true,
trigger: 'blur',
validator(_rule: FormItemRule, value: string) {
return validate(
value,
/[\w-.]+@([\w-]+\.)+[\w-]+/,
'domains.errors.mail'
)
}
},
refresh_interval: {
required: true,
trigger: 'blur',
type: 'number'
},
retry_interval: {
required: true,
trigger: 'blur',
type: 'number'
},
expiry_period: {
required: true,
trigger: 'blur',
type: 'number'
},
negative_ttl: {
required: true,
trigger: 'blur',
type: 'number'
}
}
const domainStore = useDomainStore()
const notification = useNotification()
async function confirm() {
}
function validate(value: string, reg: RegExp, msg: string) {
invalidData.value = true
if (!value) {
return new Error(t('common.mandatory'))
} else if (!reg.test(value)) {
return new Error(t(msg))
}
invalidData.value = false
return true
}
function easyInput(domain: string) {
props.domain.admin_email = `admin@${domain}`
props.domain.main_dns = `ns1.${domain}`
}
</script>