src/boot/plugins.ts

@@ -5,7 +5,6 @@ import { api } from 'boot/axios';
 import { AxiosResponse } from 'axios';
 import { RouteRecordRaw } from 'vue-router';
 import { Notify } from 'quasar';
-import { notEmpty } from 'src/utils/validators';
 
 const config: { [key: string]: Array<string> } = {
   // Do not change required Modules !!

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();

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 };

src/config.ts

@@ -1,5 +1,6 @@
 const config = {
   baseURL: '/api',
+  pollingInterval: 30000,
 };
 
 export default config;

src/layouts/MainLayout.vue

@@ -104,11 +104,12 @@
 import EssentialLink from 'src/components/navigation/EssentialLink.vue';
 import ShortcutLink from 'src/components/navigation/ShortcutLink.vue';
 import Notification from 'src/components/Notification.vue';
-import { Screen } from 'quasar';
-import { defineComponent, ref, inject, computed, onBeforeMount } from 'vue';
+import { defineComponent, ref, inject, computed, onBeforeMount, onBeforeUnmount } from 'vue';
 import { useMainStore } from 'src/stores';
 import { FG_Plugin } from 'src/plugins';
 import { useRouter } from 'vue-router';
+import { Screen } from 'quasar';
+import config from 'src/config';
 
 const essentials: FG_Plugin.MenuLink[] = [
   {
@@ -126,24 +127,25 @@ export default defineComponent({
     const mainStore = useMainStore();
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
     const leftDrawer = ref(false);
-    const shortcuts = flaschengeist?.shortcuts;
-    const mainLinks = flaschengeist?.menuLinks;
+    const leftDrawerMini = ref(false);
+    const shortcuts = flaschengeist?.shortcuts || [];
+    const mainLinks = flaschengeist?.menuLinks || [];
     const notifications = computed(() => mainStore.notifications.slice().reverse());
     const noPermission = ref(window.Notification.permission !== 'granted');
+    const polling = ref(NaN);
 
-    function requestPermission() {
-      void window.Notification.requestPermission().then(
-        (p) => (noPermission.value = p !== 'granted')
-      );
-    }
-
-    onBeforeMount(() => window.setInterval(() => void mainStore.loadNotifications(), 30000));
+    onBeforeMount(() => pollNotification());
+    onBeforeUnmount(() => window.clearInterval(polling.value));
 
     const leftDrawerOpen = computed({
       get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
       set: (val: boolean) => (leftDrawer.value = val),
     });
-    const leftDrawerMini = ref(false);
+
+    const subLinks = computed(() => {
+      const matched = router.currentRoute.value.matched[1];
+      return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
+    });
 
     function leftDrawerClicker() {
       if (leftDrawerMini.value) {
@@ -151,11 +153,6 @@ export default defineComponent({
       }
     }
 
-    const subLinks = computed(() => {
-      const matched = router.currentRoute.value.matched[1];
-      return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
-    });
-
     function logout() {
       void router.push({ name: 'login', params: { logout: 'logout' } });
       void mainStore.logout();
@@ -165,6 +162,18 @@ export default defineComponent({
       await mainStore.removeNotification(id);
     }
 
+    function requestPermission() {
+      void window.Notification.requestPermission().then(
+        (p) => (noPermission.value = p !== 'granted')
+      );
+    }
+
+    function pollNotification() {
+      polling.value = window.setInterval(() => {
+        void mainStore.loadNotifications(<FG_Plugin.Flaschengeist>flaschengeist);
+      }, config.pollingInterval);
+    }
+
     return {
       essentials,
       leftDrawerOpen,

src/stores/index.ts

@@ -5,7 +5,6 @@ import { FG_Plugin } from 'src/plugins';
 import { AxiosResponse } from 'axios';
 import { api } from 'src/boot/axios';
 import { defineStore } from 'pinia';
-import { inject } from 'vue';
 
 function loadCurrentSession() {
   const session = LocalStorage.getItem<FG.Session>('session');
@@ -109,8 +108,7 @@ export const useMainStore = defineStore({
         );
     },
 
-    async loadNotifications() {
-      const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
+    async loadNotifications(flaschengeist: FG_Plugin.Flaschengeist) {
       const params =
         this.notifications.length > 0
           ? { from: this.notifications[this.notifications.length - 1].time }