import { NModal, NCard, NForm, NFormItem, NFlex, NIcon, NButton, NInput, NInputNumber, type FormRules, type FormItemRule, createDiscreteApi } from 'naive-ui' import { getErrorInfo } from '@/apis/api'; import { useDomainStore, type Domain } from '@/stores/domains'; import { Check, Times } from '@vicons/fa'; import i18n from '@/locale/i18n' import { ref, type SetupContext } from 'vue'; const { t } = i18n.global const domainStore = useDomainStore() const { notification } = createDiscreteApi(['notification']) const enum validFlags { domainNameValid = 1, mainNsValid = domainNameValid << 1, adminEmailValid = mainNsValid << 1 } const allFlags = validFlags.adminEmailValid | validFlags.mainNsValid | validFlags.domainNameValid const rules = { domain_name: [{ required: true, trigger: 'blur', validator: (_rule: FormItemRule, value: string) => { return validate( value, /^([\w-]+\.)+[\w-]+$/, 'domains.errors.domainName', validFlags.domainNameValid ) } }], main_dns: [{ required: true, trigger: 'blur', validator: (_rule: FormItemRule, value: string) => { return validate( value, /^([\w-]+\.)+[\w-]+$/, 'domains.errors.domainName', validFlags.mainNsValid, ) } }], admin_email: [{ required: true, trigger: 'blur', validator: (_rule: FormItemRule, value: string) => { return validate( value, /^[\w-.]+@([\w-]+\.)+[\w-]+$/, 'domains.errors.mail', validFlags.adminEmailValid ) } }], 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' }] } as FormRules type Props = { domain: Domain show: boolean } type Events = { 'update:show': (v: boolean) => void 'update:value': (v: string | number | null) => void } const loading = ref(false) const invalidData = ref(0) function validate(value: string, reg: RegExp, msg: string, flag: validFlags): Promise { return new Promise((resolve, reject) => { if (!value) { invalidData.value &= ~flag reject(Error(t('common.mandatory'))) } else if (!reg.test(value)) { invalidData.value &= ~flag reject(Error(t(msg))) } else { invalidData.value |= flag resolve() } }) } async function confirm(domain: Domain) { loading.value = true; try { if (!domain.id || domain.id < 1) { await domainStore.addDomain(domain) } else { await domainStore.updateDomain(domain) } } catch (e) { const msg = getErrorInfo(e) notification.error(msg) console.error(e) } finally { loading.value = false } } function easyInput(domain_name: string, domain: Domain) { domain.admin_email = `admin@${domain_name}` domain.main_dns = `ns1.${domain_name}` } function modalHeader({ domain }: Props) { return ( <> {(!domain || !domain.id || domain.id < 1) ? {t('common.new')} : {t('common.edit')}} {t('domains._')} ) } function modalInputNumbers({ value, label, path }: { value: number, label: string, path: string }, { emit }: SetupContext) { return ( emit('update:value', v)} showButton={false}> {{ suffix: () => t('common.unitForSecond') }} ) } function modalBody({ domain }: Props) { return ( <> domain.domain_name = v} onInput={v => easyInput(v, domain)} /> domain.main_dns = v} /> domain.admin_email = v} inputProps={{ type: 'email' }} /> domain.refresh_interval = v} path='refresh_interval' label='records.refresh' /> domain.retry_interval = v} path='retry_interval' label='records.retry' /> domain.expiry_period = v} path='expiry_period' label='records.expire' /> domain.negative_ttl = v} path='negative_ttl' label='records.ttl' /> ) } function modalActions({ domain }: Props, { emit }: SetupContext) { return ( emit("update:show", false)} > {{ default: () => t('common.cancel'), icon: () => }} confirm(domain).then(() => emit('update:show', false))} attrType='submit'> {{ default: () => t('common.confirm'), icon: () => }} ) } function DomainEditModal({ domain, show }: Props, { emit }: SetupContext) { return ( {{ headler: () => , default: () => , action: () => { emit("update:show", v) }} /> }} ) } export default DomainEditModal