From b7aeea0a23baf242b58336362aa9dc461b2362d9 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Tue, 30 Mar 2021 15:08:12 +0200 Subject: [PATCH] [notifications] Fixed some warnings about inject outside setup() --- src/boot/plugins.ts | 1 - src/config.ts | 1 + src/layouts/MainLayout.vue | 43 +++++++++++++++++++++++--------------- src/stores/index.ts | 4 +--- 4 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/boot/plugins.ts b/src/boot/plugins.ts index 771d1f2..4966893 100644 --- a/src/boot/plugins.ts +++ b/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 } = { // Do not change required Modules !! diff --git a/src/config.ts b/src/config.ts index ac668de..e690b1c 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,5 +1,6 @@ const config = { baseURL: '/api', + pollingInterval: 30000, }; export default config; diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 42b9bf1..a3857f6 100644 --- a/src/layouts/MainLayout.vue +++ b/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('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(flaschengeist); + }, config.pollingInterval); + } + return { essentials, leftDrawerOpen, diff --git a/src/stores/index.ts b/src/stores/index.ts index ccfc2f4..361dfc5 100644 --- a/src/stores/index.ts +++ b/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('session'); @@ -109,8 +108,7 @@ export const useMainStore = defineStore({ ); }, - async loadNotifications() { - const flaschengeist = inject('flaschengeist'); + async loadNotifications(flaschengeist: FG_Plugin.Flaschengeist) { const params = this.notifications.length > 0 ? { from: this.notifications[this.notifications.length - 1].time }