From e564901d2e144173ae2b25afe53db2ea708dafe3 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Tue, 30 Mar 2021 00:28:18 +0200
Subject: [PATCH] [core] Remove last vuex references

* src/stores can not be used as quasar thinks it contains vuex
---
 src/boot/axios.ts                             |  2 +-
 src/boot/login.ts                             |  2 +-
 src/boot/plugins.ts                           |  5 ++
 src/boot/store.ts                             |  2 +-
 src/components/Notification.vue               | 32 +++++++++++--
 src/layouts/MainLayout.vue                    |  2 +-
 src/pages/Login.vue                           |  2 +-
 src/pages/Reset.vue                           |  2 +-
 src/plugins.d.ts                              | 19 +++++++-
 src/plugins/balance/components/BalanceAdd.vue |  2 +-
 .../balance/components/BalanceHeader.vue      |  2 +-
 .../balance/components/BalanceTransfer.vue    |  2 +-
 .../balance/components/Transaction.vue        |  2 +-
 src/plugins/balance/components/Widget.vue     |  2 +-
 src/plugins/balance/pages/MainPage.vue        |  2 +-
 src/plugins/balance/pages/Overview.vue        |  2 +-
 src/plugins/balance/store.ts                  |  2 +-
 .../pricelist/components/CalculationTable.vue |  2 +-
 .../components/overview/slots/JobSlot.vue     |  2 +-
 src/plugins/user/components/UpdateUser.vue    |  2 +-
 src/plugins/user/components/Widget.vue        |  2 +-
 .../components/settings/MainUserSettings.vue  |  2 +-
 .../user/components/settings/Session.vue      |  2 +-
 src/plugins/user/pages/Settings.vue           |  2 +-
 src/plugins/user/routes/index.ts              |  2 +-
 src/plugins/user/store.ts                     |  2 +-
 src/{store => stores}/index.ts                | 46 ++++++++-----------
 src/{store => stores}/store-flag.d.ts         |  0
 src/utils/permission.ts                       |  2 +-
 29 files changed, 95 insertions(+), 55 deletions(-)
 rename src/{store => stores}/index.ts (86%)
 rename src/{store => stores}/store-flag.d.ts (100%)

diff --git a/src/boot/axios.ts b/src/boot/axios.ts
index 75ab0b7..07bf177 100644
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -2,7 +2,7 @@ import config from 'src/config';
 import { boot } from 'quasar/wrappers';
 import { LocalStorage, Notify } from 'quasar';
 import axios, { AxiosError } from 'axios';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 const api = axios.create();
 
diff --git a/src/boot/login.ts b/src/boot/login.ts
index 61e1d45..c1dfca5 100644
--- a/src/boot/login.ts
+++ b/src/boot/login.ts
@@ -1,5 +1,5 @@
 import { boot } from 'quasar/wrappers';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { hasPermissions } from 'src/utils/permission';
 import { RouteRecord } from 'vue-router';
 
diff --git a/src/boot/plugins.ts b/src/boot/plugins.ts
index a6515b9..771d1f2 100644
--- a/src/boot/plugins.ts
+++ b/src/boot/plugins.ts
@@ -5,6 +5,7 @@ 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 !!
@@ -56,6 +57,9 @@ interface Backend {
 }
 export { Backend };
 
+// Handle Notifications
+export const translateNotification = (note: FG.Notification): FG_Plugin.Notification => note;
+
 // Combine routes, shortcuts and widgets from plugins
 
 /**
@@ -288,6 +292,7 @@ function loadPlugin(
     loadedPlugins.plugins.push({
       name: plugin.name,
       version: plugin.version,
+      notification: plugin.notification?.bind({}) || translateNotification,
     });
 
     return plugin;
diff --git a/src/boot/store.ts b/src/boot/store.ts
index 9ffce59..b68d7c4 100644
--- a/src/boot/store.ts
+++ b/src/boot/store.ts
@@ -1,6 +1,6 @@
 import { createPinia } from 'pinia';
 import { boot } from 'quasar/wrappers';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export default boot(({ app }) => {
   app.use(createPinia());
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index 74f3bd1..f8a0f1f 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -1,7 +1,7 @@
 <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 class="col-12">{{ modelValue.text }}</div>
+    <div :id="`ntfctn-${modelValue.id}`" class="col-12" @click="click">{{ modelValue.text }}</div>
     <q-btn
       round
       dense
@@ -12,32 +12,58 @@
       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.Notification>,
+      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 { dateString, remove };
+    return { accept, click, dateString, remove };
   },
 });
 </script>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 6d0e074..42b9bf1 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -106,7 +106,7 @@ 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 { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { FG_Plugin } from 'src/plugins';
 import { useRouter } from 'vue-router';
 
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 1b1dfc0..03b82bb 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { useRouter } from 'vue-router';
 import { Loading, Notify } from 'quasar';
 import { defineComponent, ref } from 'vue';
diff --git a/src/pages/Reset.vue b/src/pages/Reset.vue
index 4ff24fa..49781d1 100644
--- a/src/pages/Reset.vue
+++ b/src/pages/Reset.vue
@@ -37,7 +37,7 @@
 import { useRouter } from 'vue-router';
 import { Loading, Notify } from 'quasar';
 import { defineComponent, ref } from 'vue';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   // name: 'PageName'
diff --git a/src/plugins.d.ts b/src/plugins.d.ts
index e30a1d3..641e592 100644
--- a/src/plugins.d.ts
+++ b/src/plugins.d.ts
@@ -1,4 +1,4 @@
-import { RouteRecordRaw, RouteRecordName } from 'vue-router';
+import { RouteLocationRaw, RouteRecordRaw, RouteRecordName } from 'vue-router';
 import { Component, ComputedRef } from 'vue';
 
 declare namespace FG_Plugin {
@@ -19,6 +19,8 @@ declare namespace FG_Plugin {
     outerRoutes?: MenuRoute[];
     /** Routes without menu links, for internal usage */
     internalRoutes?: NamedRouteRecordRaw[];
+    /** Handle notifications, defaults to boot/plugins.ts:translateNotification() */
+    notification?(msg: FG.Notification): FG_Plugin.Notification;
   }
 
   /**
@@ -39,12 +41,27 @@ declare namespace FG_Plugin {
     widgets: Widget[];
   }
 
+  /**
+   * Interface for a frontend notification
+   */
+  interface Notification extends FG.Notification {
+    /** If set a button for accepting will be shown, this function will get called before deleting the notification */
+    accept?(): Promise<void>;
+    /** If set this function is called before the notification gets deleted */
+    reject?(): Promise<void>;
+    /** If set the notification text is interpreted as a link to this location */
+    link?: RouteLocationRaw;
+    /** If set this icon is used */
+    icon?: string;
+  }
+
   /**
    * Loaded Flaschengeist plugin
    */
   interface LoadedPlugin {
     name: string;
     version: string;
+    notification(msg: FG.Notification): FG_Plugin.Notification;
   }
 
   /**
diff --git a/src/plugins/balance/components/BalanceAdd.vue b/src/plugins/balance/components/BalanceAdd.vue
index a6ec59f..520ed27 100644
--- a/src/plugins/balance/components/BalanceAdd.vue
+++ b/src/plugins/balance/components/BalanceAdd.vue
@@ -62,7 +62,7 @@ import { hasPermission } from 'src/utils/permission';
 import BalanceHeader from '../components/BalanceHeader.vue';
 import PERMISSIONS from '../permissions';
 import { useBalanceStore } from '../store';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   name: 'BalanceAdd',
diff --git a/src/plugins/balance/components/BalanceHeader.vue b/src/plugins/balance/components/BalanceHeader.vue
index 909b87c..61a3171 100644
--- a/src/plugins/balance/components/BalanceHeader.vue
+++ b/src/plugins/balance/components/BalanceHeader.vue
@@ -20,7 +20,7 @@
 import { computed, defineComponent, onBeforeMount, PropType } from 'vue';
 import UserSelector from 'src/plugins/user/components/UserSelector.vue';
 import { useBalanceStore } from '../store';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   name: 'BalanceHeader',
diff --git a/src/plugins/balance/components/BalanceTransfer.vue b/src/plugins/balance/components/BalanceTransfer.vue
index 8618d1c..fdfe0f5 100644
--- a/src/plugins/balance/components/BalanceTransfer.vue
+++ b/src/plugins/balance/components/BalanceTransfer.vue
@@ -29,7 +29,7 @@ import UserSelector from 'src/plugins/user/components/UserSelector.vue';
 import BalanceHeader from '../components/BalanceHeader.vue';
 import PERMISSIONS from '../permissions';
 import { useBalanceStore } from '../store';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   name: 'BalanceTransfer',
diff --git a/src/plugins/balance/components/Transaction.vue b/src/plugins/balance/components/Transaction.vue
index 2516c34..167db0d 100644
--- a/src/plugins/balance/components/Transaction.vue
+++ b/src/plugins/balance/components/Transaction.vue
@@ -33,7 +33,7 @@
 import { ref, computed, defineComponent, onUnmounted, onMounted, PropType } from 'vue';
 import { hasPermission } from 'src/utils/permission';
 import { formatDateTime } from 'src/utils/datetime';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { useUserStore } from 'src/plugins/user/store';
 import { useBalanceStore } from '../store';
 
diff --git a/src/plugins/balance/components/Widget.vue b/src/plugins/balance/components/Widget.vue
index ec80d1e..bbbcdf4 100644
--- a/src/plugins/balance/components/Widget.vue
+++ b/src/plugins/balance/components/Widget.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { useBalanceStore } from '../store';
 import { computed, defineComponent, onBeforeMount } from 'vue';
 
diff --git a/src/plugins/balance/pages/MainPage.vue b/src/plugins/balance/pages/MainPage.vue
index a01ede1..9d1db49 100644
--- a/src/plugins/balance/pages/MainPage.vue
+++ b/src/plugins/balance/pages/MainPage.vue
@@ -73,7 +73,7 @@ import BalanceAdd from '../components/BalanceAdd.vue';
 import BalanceTransfer from '../components/BalanceTransfer.vue';
 import Transaction from '../components/Transaction.vue';
 import { useBalanceStore } from '../store';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   name: 'BalanceManage',
diff --git a/src/plugins/balance/pages/Overview.vue b/src/plugins/balance/pages/Overview.vue
index cf058b2..d4e4678 100644
--- a/src/plugins/balance/pages/Overview.vue
+++ b/src/plugins/balance/pages/Overview.vue
@@ -35,7 +35,7 @@
 import { computed, defineComponent, onMounted, ref } from 'vue';
 import { formatDateTime } from 'src/utils/datetime';
 import { useBalanceStore } from '../store';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { useUserStore } from 'src/plugins/user/store';
 
 export default defineComponent({
diff --git a/src/plugins/balance/store.ts b/src/plugins/balance/store.ts
index 9dc30c5..b0f3a5e 100644
--- a/src/plugins/balance/store.ts
+++ b/src/plugins/balance/store.ts
@@ -17,7 +17,7 @@ export interface TransactionsResponse {
 }
 
 import { defineStore } from 'pinia';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { AxiosResponse } from 'axios';
 import { Notify } from 'quasar';
 
diff --git a/src/plugins/pricelist/components/CalculationTable.vue b/src/plugins/pricelist/components/CalculationTable.vue
index 6632499..5a0c040 100644
--- a/src/plugins/pricelist/components/CalculationTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable.vue
@@ -287,7 +287,7 @@ import {
   getCurrentInstance,
 } from 'vue';
 import DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
 import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue';
 import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
diff --git a/src/plugins/schedule/components/overview/slots/JobSlot.vue b/src/plugins/schedule/components/overview/slots/JobSlot.vue
index 71948e7..9a65835 100644
--- a/src/plugins/schedule/components/overview/slots/JobSlot.vue
+++ b/src/plugins/schedule/components/overview/slots/JobSlot.vue
@@ -39,7 +39,7 @@ import { defineComponent, onBeforeMount, computed, PropType } from 'vue';
 import { Notify } from 'quasar';
 import { asHour } from 'src/utils/datetime';
 import { useUserStore } from 'src/plugins/user/store';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { useScheduleStore } from 'src/plugins/schedule/store';
 
 export default defineComponent({
diff --git a/src/plugins/user/components/UpdateUser.vue b/src/plugins/user/components/UpdateUser.vue
index fafbf82..820d0f6 100644
--- a/src/plugins/user/components/UpdateUser.vue
+++ b/src/plugins/user/components/UpdateUser.vue
@@ -14,7 +14,7 @@
 import { defineComponent, ref } from 'vue';
 import UserSelector from '../components/UserSelector.vue';
 import MainUserSettings from '../components/settings/MainUserSettings.vue';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { useUserStore } from '../store';
 
 export default defineComponent({
diff --git a/src/plugins/user/components/Widget.vue b/src/plugins/user/components/Widget.vue
index 4a0fe33..041b47b 100644
--- a/src/plugins/user/components/Widget.vue
+++ b/src/plugins/user/components/Widget.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { computed, defineComponent, onMounted, ref } from 'vue';
 import { useUserStore } from '../store';
 
diff --git a/src/plugins/user/components/settings/MainUserSettings.vue b/src/plugins/user/components/settings/MainUserSettings.vue
index ffdcff7..8802658 100644
--- a/src/plugins/user/components/settings/MainUserSettings.vue
+++ b/src/plugins/user/components/settings/MainUserSettings.vue
@@ -112,7 +112,7 @@ import { hasPermission } from 'src/utils/permission';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
 import { defineComponent, computed, ref, onBeforeMount, PropType } from 'vue';
 import { useUserStore } from '../../store';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   name: 'MainUserSettings',
diff --git a/src/plugins/user/components/settings/Session.vue b/src/plugins/user/components/settings/Session.vue
index 1e5a424..3b69bdf 100644
--- a/src/plugins/user/components/settings/Session.vue
+++ b/src/plugins/user/components/settings/Session.vue
@@ -48,7 +48,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, PropType } from 'vue';
 import { formatDateTime } from 'src/utils/datetime';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { useSessionStore } from '../../store';
 
 export default defineComponent({
diff --git a/src/plugins/user/pages/Settings.vue b/src/plugins/user/pages/Settings.vue
index e1f6840..116932f 100644
--- a/src/plugins/user/pages/Settings.vue
+++ b/src/plugins/user/pages/Settings.vue
@@ -22,7 +22,7 @@
 import { defineComponent, onBeforeMount, ref } from 'vue';
 import Session from '../components/settings/Session.vue';
 import MainUserSettings from '../components/settings/MainUserSettings.vue';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { useSessionStore } from '../store';
 import { useUserStore } from '../store';
 
diff --git a/src/plugins/user/routes/index.ts b/src/plugins/user/routes/index.ts
index 45d29de..e9edc8f 100644
--- a/src/plugins/user/routes/index.ts
+++ b/src/plugins/user/routes/index.ts
@@ -1,5 +1,5 @@
 import { FG_Plugin } from 'src/plugins';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 import { computed } from 'vue';
 
 const mainRoutes: FG_Plugin.MenuRoute[] = [
diff --git a/src/plugins/user/store.ts b/src/plugins/user/store.ts
index e8d15fe..3a02c31 100644
--- a/src/plugins/user/store.ts
+++ b/src/plugins/user/store.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
 import { AxiosError, AxiosResponse } from 'axios';
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export const useUserStore = defineStore({
   id: 'users',
diff --git a/src/store/index.ts b/src/stores/index.ts
similarity index 86%
rename from src/store/index.ts
rename to src/stores/index.ts
index 211e24e..ccfc2f4 100644
--- a/src/store/index.ts
+++ b/src/stores/index.ts
@@ -1,27 +1,11 @@
-import { store } from 'quasar/wrappers';
-import { createStore } from 'vuex';
-
-export interface StateInterface {
-  [key: string]: unknown;
-}
-
-export default store(function (/* { ssrContext } */) {
-  const Store = createStore({
-    modules: {},
-
-    // enable strict mode (adds overhead!)
-    // for dev mode and --debug builds only
-    strict: !!process.env.DEBUGGING,
-  });
-
-  return Store;
-});
-
-import { defineStore } from 'pinia';
-import { api } from 'src/boot/axios';
-import { AxiosResponse } from 'axios';
-import { LocalStorage, SessionStorage } from 'quasar';
 import { useUserStore, useSessionStore } from 'src/plugins/user/store';
+import { translateNotification } from 'src/boot/plugins';
+import { LocalStorage, SessionStorage } from 'quasar';
+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');
@@ -41,7 +25,7 @@ export const useMainStore = defineStore({
   state: () => ({
     session: loadCurrentSession(),
     user: loadUser(),
-    notifications: [] as Array<FG.Notification>,
+    notifications: [] as Array<FG_Plugin.Notification>,
   }),
 
   getters: {
@@ -126,6 +110,7 @@ export const useMainStore = defineStore({
     },
 
     async loadNotifications() {
+      const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
       const params =
         this.notifications.length > 0
           ? { from: this.notifications[this.notifications.length - 1].time }
@@ -133,12 +118,17 @@ export const useMainStore = defineStore({
       const { data } = await api.get<FG.Notification[]>('/notifications', { params: params });
       data.forEach((n) => {
         n.time = new Date(n.time);
+        const notif = (
+          flaschengeist?.plugins.filter((p) => p.name === n.plugin)[0]?.notification ||
+          translateNotification
+        )(n);
+        this.notifications.push(notif);
+
         if (window.Notification.permission === 'granted')
-          new window.Notification(n.text, {
-            timestamp: n.time.getTime(),
+          new window.Notification(notif.text, {
+            timestamp: notif.time.getTime(),
           });
       });
-      this.notifications.push(...data);
     },
 
     async removeNotification(id: number) {
@@ -154,3 +144,5 @@ export const useMainStore = defineStore({
     },
   },
 });
+
+export default () => useMainStore;
diff --git a/src/store/store-flag.d.ts b/src/stores/store-flag.d.ts
similarity index 100%
rename from src/store/store-flag.d.ts
rename to src/stores/store-flag.d.ts
diff --git a/src/utils/permission.ts b/src/utils/permission.ts
index 2378cf7..5b469e3 100644
--- a/src/utils/permission.ts
+++ b/src/utils/permission.ts
@@ -1,4 +1,4 @@
-import { useMainStore } from 'src/store';
+import { useMainStore } from 'src/stores';
 
 export function hasPermission(permission: string) {
   const store = useMainStore();