flaschengeist-frontend/src/components/Notification.vue

78 lines
2.0 KiB
Vue
Raw Normal View History

2021-03-29 05:35:23 +00:00
<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"
>
2021-03-29 05:35:23 +00:00
<div class="col-12 text-weight-light">{{ dateString }}</div>
<div :id="`ntfctn-${modelValue.id}`" class="col-12">{{ modelValue.text }}</div>
2021-03-29 05:35:23 +00:00
<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"
/>
2021-03-29 05:35:23 +00:00
</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';
2021-03-29 05:35:23 +00:00
export default defineComponent({
name: 'Notification',
props: {
modelValue: {
required: true,
type: Object as PropType<FG_Plugin.Notification>,
2021-03-29 05:35:23 +00:00
},
},
emits: {
remove: (id: number) => !!id,
},
setup(props, { emit }) {
const router = useRouter();
2021-03-29 05:35:23 +00:00
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);
}
2021-03-29 05:35:23 +00:00
function remove() {
if (typeof props.modelValue.reject === 'function')
void props.modelValue.reject().finally(() => emit('remove', props.modelValue.id));
else emit('remove', props.modelValue.id);
2021-03-29 05:35:23 +00:00
}
return { accept, click, dateString, remove };
2021-03-29 05:35:23 +00:00
},
});
</script>
<style scoped></style>