78 lines
2.0 KiB
Vue
78 lines
2.0 KiB
Vue
<template>
|
|
<q-card
|
|
bordered
|
|
class="row q-ma-xs q-pa-xs"
|
|
style="position: relative; min-height: 3em"
|
|
:class="{ 'cursor-pointer': modelValue.link }"
|
|
@click="click"
|
|
>
|
|
<div class="col-12 text-weight-light">{{ dateString }}</div>
|
|
<div :id="`ntfctn-${modelValue.id}`" class="col-12">{{ modelValue.text }}</div>
|
|
<q-btn
|
|
round
|
|
dense
|
|
icon="close"
|
|
size="sm"
|
|
color="negative"
|
|
class="q-ma-xs"
|
|
style="position: absolute; top: 0; right: 0"
|
|
@click="remove"
|
|
/>
|
|
<q-btn
|
|
v-if="modelValue.accept !== undefined"
|
|
round
|
|
dense
|
|
icon="check"
|
|
size="sm"
|
|
color="positive"
|
|
class="q-ma-xs"
|
|
style="position: absolute; top: 0; right: 3em"
|
|
@click="accept"
|
|
/>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, PropType, computed } from 'vue';
|
|
import { formatDateTime } from 'src/utils/datetime';
|
|
import { FG_Plugin } from 'src/plugins';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
export default defineComponent({
|
|
name: 'Notification',
|
|
props: {
|
|
modelValue: {
|
|
required: true,
|
|
type: Object as PropType<FG_Plugin.Notification>,
|
|
},
|
|
},
|
|
emits: {
|
|
remove: (id: number) => !!id,
|
|
},
|
|
setup(props, { emit }) {
|
|
const router = useRouter();
|
|
const dateString = computed(() => formatDateTime(props.modelValue.time, true, true));
|
|
|
|
async function click() {
|
|
if (props.modelValue.link) await router.push(props.modelValue.link);
|
|
}
|
|
|
|
function accept() {
|
|
if (typeof props.modelValue.accept === 'function')
|
|
void props.modelValue.accept().finally(() => emit('remove', props.modelValue.id));
|
|
else emit('remove', props.modelValue.id);
|
|
}
|
|
|
|
function remove() {
|
|
if (typeof props.modelValue.reject === 'function')
|
|
void props.modelValue.reject().finally(() => emit('remove', props.modelValue.id));
|
|
else emit('remove', props.modelValue.id);
|
|
}
|
|
|
|
return { accept, click, dateString, remove };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|