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

88 lines
2.9 KiB
Vue
Raw Normal View History

2024-04-08 05:49:11 +00:00
<template>
<NModal :mask-closable="false" :show="show">
2024-04-08 07:02:55 +00:00
<NCard size="huge" role="dialog" aria-modal="true" style="width: 600px">
<template #header>
<NIcon class="icon-down" color="red">
<QuestionCircle />
</NIcon>
{{ t('domains.delete') }} - {{ domain?.domain_name }}
</template>
<p>{{ t('common.deleteConfirm') }}</p>
<p>{{ t('domains.deleteHint') }}</p>
<p>{{ t('domains.confirm1') }} <b id="boldit">{{ domain?.domain_name }}</b> {{ t('domains.confirm2') }}</p>
<br />
<p>
<NInput v-model:value="domain_name" :placeholder="domain?.domain_name" />
</p>
<template #action>
<NFlex justify="end">
<NButton size="small" @click="show = false">
<template #icon>
<NIcon>
<Times />
</NIcon>
</template>
{{ t('common.cancel') }}
</NButton>
<NSpin :show="loading">
2024-04-08 09:30:25 +00:00
<NButton size="small" type="error" :disabled="(domain_name !== domain?.domain_name) || loading"
2024-04-08 07:02:55 +00:00
@click="confirm">
<template #icon>
<NIcon>
<TrashAlt />
</NIcon>
</template>
{{ t('common.confirm') }}
</NButton>
</NSpin>
</NFlex>
</template>
</NCard>
2024-04-08 05:49:11 +00:00
</NModal>
</template>
<script setup lang="ts">
2024-04-08 07:02:55 +00:00
import { useDomainStore, type Domain } from '@/stores/domains';
import { NModal, NCard, NFlex, NButton, NIcon, NInput, NSpin, useNotification } from 'naive-ui'
import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
import { useI18n } from 'vue-i18n';
import { getErrorInfo } from '@/apis/api';
const { t } = useI18n()
const show = defineModel<boolean>('show', { default: false })
const domain_name = defineModel<string>('domain_name')
const loading = defineModel<boolean>('loading', { default: false })
const domainStore = useDomainStore()
const notification = useNotification()
2024-04-08 05:49:11 +00:00
const props = defineProps<{
2024-04-08 09:30:25 +00:00
domain: Domain
2024-04-08 05:49:11 +00:00
}>()
2024-04-08 07:02:55 +00:00
async function confirm() {
domain_name.value = '';
loading.value = true;
if (props.domain) {
try {
await domainStore.removeDomain(props.domain)
show.value = false;
} catch (e) {
const msg = getErrorInfo(e)
notification.error(msg)
}
}
loading.value = false;
}
</script>
<style scoped>
.icon-down {
transform: translateY(2px);
}
b#boldit {
font-weight: bold;
}
</style>