flaschengeist-frontend/src/components/Notification.vue

<template>
  <q-card bordered class="row q-ma-xs q-pa-xs" style="position: relative">
    <div class="col-12 text-weight-light">{{ dateString }}</div>
    <div :id="`ntfctn-${modelValue.id}`" class="col-12" @click="click">{{ 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="close"
      size="sm"
      color="positive"
      class="q-ma-xs"
      style="position: absolute; top: 50px; right: 0"
      @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 (props.modelValue.accept)
        void props.modelValue.accept().then(() => emit('remove', props.modelValue.id));
      else emit('remove', props.modelValue.id);
    }

    function remove() {
      if (props.modelValue.reject)
        void props.modelValue.reject().then(() => emit('remove', props.modelValue.id));
      emit('remove', props.modelValue.id);
    }

    return { accept, click, dateString, remove };
  },
});
</script>

<style scoped></style>