use tsx for compoents stage 1
This commit is contained in:
Sense T
parent
2ab1b0bf1b
commit
b669a3e68e
11
web/src/components/domains/DomainInfo.css
Normal file
11
web/src/components/domains/DomainInfo.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
div {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
27
web/src/components/domains/DomainInfo.tsx
Normal file
27
web/src/components/domains/DomainInfo.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import './DomainInfo.css'
|
||||||
|
|
||||||
|
import { type Domain } from "../../stores/domains";
|
||||||
|
import { NIcon } from "naive-ui";
|
||||||
|
import { AddressCard, Server } from "@vicons/fa";
|
||||||
|
import { defineComponent, defineProps } from "vue";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
domain: Domain
|
||||||
|
}
|
||||||
|
|
||||||
|
function DomainInfo({domain}: Props) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<NIcon class="icon" component={AddressCard} />
|
||||||
|
<span> {domain.admin_email}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<NIcon class="icon" component={Server} />
|
||||||
|
<span> {domain.main_dns}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DomainInfo
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
<NIcon class="icon" :component="AddressCard" />
|
|
||||||
<span> {{ domain.admin_email }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<NIcon class="icon" :component="Server" />
|
|
||||||
<span> {{ domain.main_dns }}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { type Domain } from "../../stores/domains";
|
|
||||||
import { NIcon } from "naive-ui";
|
|
||||||
import { AddressCard, Server } from "@vicons/fa";
|
|
||||||
defineProps<{
|
|
||||||
domain: Domain;
|
|
||||||
}>();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
div {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
padding-left: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
transform: translateY(2px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
79
web/src/components/domains/DomainOps.tsx
Normal file
79
web/src/components/domains/DomainOps.tsx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import { NSpace, NButton, NIcon, NTooltip, NFlex } from 'naive-ui'
|
||||||
|
import { TrashAlt, EditRegular, Book } from '@vicons/fa'
|
||||||
|
import { type Domain } from "../../stores/domains"
|
||||||
|
import router from '@/router';
|
||||||
|
import i18n from '@/locale/i18n'
|
||||||
|
import type { SetupContext } from 'vue';
|
||||||
|
const t = i18n.global.t
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
domain: Domain
|
||||||
|
}
|
||||||
|
|
||||||
|
type Events = {
|
||||||
|
removeDomain(domain: Domain): void
|
||||||
|
editDomain(domain: Domain): void
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadRecord({ domain }: Props) {
|
||||||
|
return (
|
||||||
|
<NTooltip trigger="hover">
|
||||||
|
{{
|
||||||
|
trigger: () =>
|
||||||
|
<NButton size="tiny" type="primary" onClick={() => { router.push(`/records/${domain.domain_name}`) }}>
|
||||||
|
{{ icon: () => <NIcon component={Book} /> }}
|
||||||
|
</NButton>,
|
||||||
|
default: () => t('domains.dnsRecord')
|
||||||
|
}}
|
||||||
|
</NTooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function editDomain({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||||
|
return (
|
||||||
|
<NTooltip trigger="hover">
|
||||||
|
{{
|
||||||
|
default: () => t('common.edit'),
|
||||||
|
trigger: () =>
|
||||||
|
<NButton size="tiny" onClick={() => emit("editDomain", domain)}>
|
||||||
|
{{
|
||||||
|
icon: () =>
|
||||||
|
<NIcon component={EditRegular} />
|
||||||
|
}}
|
||||||
|
</NButton>
|
||||||
|
}}
|
||||||
|
|
||||||
|
</NTooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteDomain({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||||
|
return (
|
||||||
|
<NTooltip trigger="hover">
|
||||||
|
{{
|
||||||
|
default: () => t('common.delete'),
|
||||||
|
trigger: () =>
|
||||||
|
<NButton type="error" size="tiny" onClick={() => emit("removeDomain", domain)}>
|
||||||
|
{{
|
||||||
|
icon: () =>
|
||||||
|
<NIcon component={TrashAlt} />
|
||||||
|
}}
|
||||||
|
</NButton>
|
||||||
|
}}
|
||||||
|
</NTooltip>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DomainOps({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<NFlex justify='end'>
|
||||||
|
<loadRecord domain={domain} />
|
||||||
|
<editDomain domain={domain} onEditDomain={(d: Domain) => emit("editDomain", d)} />
|
||||||
|
<deleteDomain domain={domain} onRemoveDomain={(d: Domain) => emit("removeDomain", d)} />
|
||||||
|
</NFlex>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DomainOps
|
||||||
@ -1,63 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<NFlex justify="end">
|
|
||||||
<NTooltip trigger="hover">
|
|
||||||
<template #trigger>
|
|
||||||
<NButton size="tiny" type="primary">
|
|
||||||
<template #icon>
|
|
||||||
<NIcon :component="Book" @click="loadRecord" />
|
|
||||||
</template>
|
|
||||||
</NButton>
|
|
||||||
</template>
|
|
||||||
{{ t('domains.dnsRecord') }}
|
|
||||||
</NTooltip>
|
|
||||||
<NTooltip trigger="hover">
|
|
||||||
<template #trigger>
|
|
||||||
<NButton size="tiny">
|
|
||||||
<template #icon>
|
|
||||||
<NIcon :component="EditRegular" @click="editDomain" />
|
|
||||||
</template>
|
|
||||||
</NButton>
|
|
||||||
</template>
|
|
||||||
{{ t('common.edit') }}
|
|
||||||
</NTooltip>
|
|
||||||
<NTooltip trigger="hover">
|
|
||||||
<template #trigger>
|
|
||||||
<NButton type="error" size="tiny">
|
|
||||||
<template #icon>
|
|
||||||
<NIcon :component="TrashAlt" @click="removeDomain"/>
|
|
||||||
</template>
|
|
||||||
</NButton>
|
|
||||||
</template>
|
|
||||||
{{ t('common.delete') }}
|
|
||||||
</NTooltip>
|
|
||||||
</NFlex>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NSpace, NButton, NIcon, NTooltip, NFlex } from 'naive-ui'
|
|
||||||
import { TrashAlt, EditRegular, Book } from '@vicons/fa'
|
|
||||||
import { type Domain } from "../../stores/domains"
|
|
||||||
import router from '@/router';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
domain: Domain
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits(['remove-domain', 'edit-domain'])
|
|
||||||
|
|
||||||
function loadRecord() {
|
|
||||||
router.push(`/records/${props.domain.domain_name}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeDomain() {
|
|
||||||
emit('remove-domain', props.domain)
|
|
||||||
}
|
|
||||||
|
|
||||||
function editDomain() {
|
|
||||||
emit('edit-domain', props.domain)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
7
web/src/components/domains/DomainRemoveModal.css
Normal file
7
web/src/components/domains/DomainRemoveModal.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.icon-down {
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
b#boldit {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
90
web/src/components/domains/DomainRemoveModal.tsx
Normal file
90
web/src/components/domains/DomainRemoveModal.tsx
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
import './DomainRemoveModal.css'
|
||||||
|
|
||||||
|
import { useDomainStore, type Domain } from '@/stores/domains';
|
||||||
|
import { NModal, NCard, NFlex, NButton, NIcon, NInput, useNotification } from 'naive-ui'
|
||||||
|
import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
|
||||||
|
import { getErrorInfo } from '@/apis/api';
|
||||||
|
import i18n from '@/locale/i18n';
|
||||||
|
import type { EmitsOptions, ObjectEmitsOptions, SetupContext } from 'vue';
|
||||||
|
|
||||||
|
const t = i18n.global.t
|
||||||
|
const domainStore = useDomainStore()
|
||||||
|
const notification = useNotification()
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
domain: Domain
|
||||||
|
show: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
type Events = {
|
||||||
|
'update:show': (value: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
let domain_name = ''
|
||||||
|
let loading = false
|
||||||
|
|
||||||
|
async function confirm(domain: Domain) {
|
||||||
|
domain_name = ''
|
||||||
|
loading = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (domain)
|
||||||
|
await domainStore.removeDomain(domain)
|
||||||
|
} catch (e) {
|
||||||
|
const msg = getErrorInfo(e)
|
||||||
|
notification.error(msg)
|
||||||
|
console.error(e)
|
||||||
|
} finally {
|
||||||
|
loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function modalBody({ domain }: Props) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<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 onUpdate:value={(v) => domain_name = v} placeholder={domain.domain_name} />
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function modalActions({ domain }: Props, { emit }: SetupContext<Events>) {
|
||||||
|
return <>
|
||||||
|
<NFlex justify='end'>
|
||||||
|
<NButton size='small' onClick={() => { emit('update:show', false) }}>
|
||||||
|
{{
|
||||||
|
icon: () => <NIcon><Times /></NIcon>,
|
||||||
|
default: () => t('common.cancel')
|
||||||
|
}}
|
||||||
|
</NButton>
|
||||||
|
|
||||||
|
<NButton size='small' type='error' disabled={domain_name !== domain.domain_name} attrType='submit' loading={loading} onClick={() => confirm(domain)}>
|
||||||
|
{{
|
||||||
|
icon: () => <NIcon><TrashAlt /></NIcon>,
|
||||||
|
default: () => t('common.confirm')
|
||||||
|
}}
|
||||||
|
</NButton>
|
||||||
|
</NFlex>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
|
function DomainRemoveModal({ domain, show }: Props, { emit }: SetupContext<Events>) {
|
||||||
|
return (
|
||||||
|
<NModal maskClosable={false} show={show}>
|
||||||
|
<NCard role='dialog' style={{ width: '600px' }}>
|
||||||
|
{{
|
||||||
|
header: () => <><NIcon class="icon-down" color='red' />{t('domains.delete')} - {domain.domain_name}</>,
|
||||||
|
default: () => <modalBody domain={domain} />,
|
||||||
|
action: () => <modalActions domain={domain} onUpdate:show={(v: boolean) => emit('update:show', v)} />
|
||||||
|
}}
|
||||||
|
</NCard>
|
||||||
|
</NModal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DomainRemoveModal
|
||||||
@ -1,89 +0,0 @@
|
|||||||
<template>
|
|
||||||
<NModal :mask-closable="false" :show="show">
|
|
||||||
<NCard 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>
|
|
||||||
|
|
||||||
<NButton size="small" type="error" :disabled="domain_name !== domain?.domain_name" attr-type="submit"
|
|
||||||
:loading="loading" @click="confirm">
|
|
||||||
<template #icon>
|
|
||||||
<NIcon>
|
|
||||||
<TrashAlt />
|
|
||||||
</NIcon>
|
|
||||||
</template>
|
|
||||||
{{ t('common.confirm') }}
|
|
||||||
</NButton>
|
|
||||||
</NFlex>
|
|
||||||
</template>
|
|
||||||
</NCard>
|
|
||||||
</NModal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { useDomainStore, type Domain } from '@/stores/domains';
|
|
||||||
import { NModal, NCard, NFlex, NButton, NIcon, NInput, useNotification } from 'naive-ui'
|
|
||||||
import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
|
|
||||||
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import { getErrorInfo } from '@/apis/api';
|
|
||||||
import { ref } from 'vue';
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const show = defineModel<boolean>('show', { default: false })
|
|
||||||
const domain_name = ref<string>('')
|
|
||||||
const loading = ref<boolean>(false)
|
|
||||||
const domainStore = useDomainStore()
|
|
||||||
const notification = useNotification()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
domain: Domain
|
|
||||||
}>()
|
|
||||||
|
|
||||||
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)
|
|
||||||
console.error(e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.icon-down {
|
|
||||||
transform: translateY(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
b#boldit {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -4,9 +4,9 @@ import { PlusSquare } from "@vicons/fa"
|
|||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { type Domain, useDomainStore } from '@/stores/domains'
|
import { type Domain, useDomainStore } from '@/stores/domains'
|
||||||
import { getErrorInfo } from '@/apis/api'
|
import { getErrorInfo } from '@/apis/api'
|
||||||
import DomainInfo from '@/components/domains/DomainInfo.vue'
|
import DomainInfo from '@/components/domains/DomainInfo'
|
||||||
import DomainOps from '@/components/domains/DomainOps.vue'
|
import DomainOps from '@/components/domains/DomainOps'
|
||||||
import DomainRemoveModal from '@/components/domains/DomainRemoveModal.vue'
|
import DomainRemoveModal from '@/components/domains/DomainRemoveModal'
|
||||||
import DomainEditModal from '@/components/domains/DomainEditModal.vue'
|
import DomainEditModal from '@/components/domains/DomainEditModal.vue'
|
||||||
|
|
||||||
const domainStore = useDomainStore()
|
const domainStore = useDomainStore()
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user