diff --git a/src/components/navigation/EssentialExpansionLink.vue b/src/components/navigation/EssentialExpansionLink.vue new file mode 100644 index 0000000..778dd22 --- /dev/null +++ b/src/components/navigation/EssentialExpansionLink.vue @@ -0,0 +1,53 @@ + + + diff --git a/src/components/navigation/ShortcutLink.vue b/src/components/navigation/ShortcutLink.vue index 1a00c44..f8ec670 100644 --- a/src/components/navigation/ShortcutLink.vue +++ b/src/components/navigation/ShortcutLink.vue @@ -1,5 +1,9 @@ diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index d70329f..a888aa6 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -14,8 +14,10 @@ - {{ notifications.length }} + + + {{ notifications.length }} + Keine neuen Benachrichtigungen - + + + @@ -51,17 +53,11 @@ > - - - - @@ -81,13 +77,23 @@ import EssentialLink from 'src/components/navigation/EssentialLink.vue'; import ShortcutLink from 'src/components/navigation/ShortcutLink.vue'; import Notification from 'src/components/Notification.vue'; -import { defineComponent, ref, inject, computed, onBeforeMount, onBeforeUnmount } from 'vue'; +import { + defineComponent, + ref, + inject, + computed, + onBeforeMount, + onBeforeUnmount, + ComponentPublicInstance, +} 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'; - +import EssentialExpansionLink from 'components/navigation/EssentialExpansionLink.vue'; +import draggable from 'vuedraggable'; +const drag: ComponentPublicInstance = draggable; const essentials: FG_Plugin.MenuLink[] = [ { title: 'Über Flaschengeist', @@ -98,28 +104,23 @@ const essentials: FG_Plugin.MenuLink[] = [ export default defineComponent({ name: 'MainLayout', - components: { EssentialLink, ShortcutLink, Notification }, + components: { EssentialExpansionLink, EssentialLink, ShortcutLink, Notification, drag }, setup() { const router = useRouter(); const mainStore = useMainStore(); const flaschengeist = inject('flaschengeist'); const leftDrawer = ref(true); const leftDrawerMini = ref(false); - const shortcuts = flaschengeist?.shortcuts || []; const mainLinks = flaschengeist?.menuLinks || []; const notifications = computed(() => mainStore.notifications.slice().reverse()); const polling = ref(NaN); const useNative = 'Notification' in window && window.Notification !== undefined; const noPermission = ref(!useNative || window.Notification.permission !== 'granted'); - const subLinks = computed(() => { - const matched = router.currentRoute.value.matched[1]; - return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children; - }); - onBeforeMount(() => { polling.value = window.setInterval(() => pollNotification(), config.pollingInterval); pollNotification(); + void mainStore.getShortcuts(); }); onBeforeUnmount(() => window.clearInterval(polling.value)); @@ -165,6 +166,30 @@ export default defineComponent({ }); } + const shortCuts = computed({ + get: () => mainStore.shortcuts, + set: (val: Array) => { + mainStore.shortcuts = val; + void mainStore.setShortcuts(); + }, + }); + + function addShortcut(val: FG_Plugin.MenuLink) { + const idx = shortCuts.value.findIndex((a: FG_Plugin.MenuLink) => a.link === val.link); + if (idx < 0) { + shortCuts.value.push(val); + void mainStore.setShortcuts(); + } + } + + function deleteShortcut(val: FG_Plugin.MenuLink) { + const idx = shortCuts.value.findIndex((a: FG_Plugin.MenuLink) => a.link === val.link); + if (idx > -1) { + shortCuts.value.splice(idx, 1); + void mainStore.setShortcuts(); + } + } + return { essentials, leftDrawer, @@ -176,10 +201,16 @@ export default defineComponent({ openMenu, remove, requestPermission, - shortcuts, - subLinks, useNative, + shortCuts, + addShortcut, + deleteShortcut, }; }, }); + diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 89c2ce0..0fbbc78 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -36,9 +36,15 @@
- +
- +
@@ -93,7 +99,7 @@ export default defineComponent({ const status = await mainStore.login(userid.value, password.value); if (status === true) { - mainStore.user = (await useUserStore().getUser(userid.value)) || undefined; + mainStore.user = (await useUserStore().getUser(userid.value, true)) || undefined; const x = router.currentRoute.value.query['redirect']; void router.push(typeof x === 'string' ? { path: x } : mainRoute); } else { diff --git a/src/stores/index.ts b/src/stores/index.ts index 089fc3c..f10bdba 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -25,6 +25,7 @@ export const useMainStore = defineStore({ session: loadCurrentSession(), user: loadUser(), notifications: [] as Array, + shortcuts: [] as FG_Plugin.MenuLink[], }), getters: { @@ -139,6 +140,17 @@ export const useMainStore = defineStore({ this.notifications.splice(idx, this.notifications.length - idx - 1); } }, + + async getShortcuts() { + const { data } = await api.get>( + `users/${this.currentUser.userid}/shortcuts` + ); + this.shortcuts = data; + }, + + async setShortcuts() { + await api.put(`users/${this.currentUser.userid}/shortcuts`, this.shortcuts); + }, }, });