69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import DialogFormContainer from 'src/components/dialog/DialogFormContainer.vue';
|
|
import DialogHeader from 'src/components/dialog/DialogHeader.vue';
|
|
import { CancelButton } from 'src/components/button';
|
|
import { ref } from 'vue';
|
|
import { Notification, useNotification } from 'src/stores/notification';
|
|
import { dateFormatJS } from 'src/utils/datetime';
|
|
|
|
const notificationStore = useNotification();
|
|
const open = defineModel<boolean>({ default: false, required: true });
|
|
const notiId = defineModel<string>('id', { default: '', required: true });
|
|
|
|
const noti = ref<Notification>();
|
|
|
|
function close() {
|
|
open.value = false;
|
|
}
|
|
|
|
async function fetchNoti() {
|
|
const res = await notificationStore.getNotification(notiId.value);
|
|
if (res) {
|
|
noti.value = res;
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<DialogFormContainer
|
|
width="60vw"
|
|
height="350px"
|
|
v-model="open"
|
|
v-on:open="fetchNoti"
|
|
>
|
|
<template #header>
|
|
<DialogHeader :title="$t('noti.title')" />
|
|
</template>
|
|
|
|
<section v-if="noti" class="q-pa-md col full-width">
|
|
<article
|
|
class="surface-1 rounded bordered q-pa-md full-height full-width"
|
|
>
|
|
<div class="text-bold">
|
|
{{ noti.title }}
|
|
</div>
|
|
<div class="text-caption app-text-muted">
|
|
{{
|
|
dateFormatJS({
|
|
date: noti.createdAt,
|
|
monthStyle: 'long',
|
|
withTime: true,
|
|
})
|
|
}}
|
|
</div>
|
|
<q-separator spaced="md" />
|
|
<div class="text-caption">
|
|
{{ noti.detail }}
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<template #footer>
|
|
<CancelButton
|
|
class="q-ml-auto"
|
|
:label="$t('general.close')"
|
|
outlined
|
|
@click="close"
|
|
/>
|
|
</template>
|
|
</DialogFormContainer>
|
|
</template>
|