From 6891a3ffba1b6a1502f5f66103a1943d1ef5872f Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Tue, 30 Mar 2021 15:48:15 +0200
Subject: [PATCH] [notifications] Make text clickable if link is present

---
 src/boot/store.ts               |  8 ++++++--
 src/components/Notification.vue | 24 +++++++++++++++---------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/boot/store.ts b/src/boot/store.ts
index b68d7c4..d867d86 100644
--- a/src/boot/store.ts
+++ b/src/boot/store.ts
@@ -1,9 +1,13 @@
-import { createPinia } from 'pinia';
+import { createPinia, Pinia } from 'pinia';
 import { boot } from 'quasar/wrappers';
 import { useMainStore } from 'src/stores';
+import { ref } from 'vue';
+
+export const pinia = ref<Pinia>();
 
 export default boot(({ app }) => {
-  app.use(createPinia());
+  pinia.value = createPinia();
+  app.use(pinia.value);
 
   const store = useMainStore();
   void store.init();
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index f8a0f1f..1a8e17c 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -1,7 +1,13 @@
 <template>
-  <q-card bordered class="row q-ma-xs q-pa-xs" style="position: relative">
+  <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" @click="click">{{ modelValue.text }}</div>
+    <div :id="`ntfctn-${modelValue.id}`" class="col-12">{{ modelValue.text }}</div>
     <q-btn
       round
       dense
@@ -16,11 +22,11 @@
       v-if="modelValue.accept !== undefined"
       round
       dense
-      icon="close"
+      icon="check"
       size="sm"
       color="positive"
       class="q-ma-xs"
-      style="position: absolute; top: 50px; right: 0"
+      style="position: absolute; top: 0; right: 3em"
       @click="accept"
     />
   </q-card>
@@ -52,15 +58,15 @@ export default defineComponent({
     }
 
     function accept() {
-      if (props.modelValue.accept)
-        void props.modelValue.accept().then(() => emit('remove', props.modelValue.id));
+      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 (props.modelValue.reject)
-        void props.modelValue.reject().then(() => emit('remove', props.modelValue.id));
-      emit('remove', props.modelValue.id);
+      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 };