import { defineStore } from "pinia"; import { shallowRef, defineAsyncComponent } from "vue"; export interface navigationModel { club: navigationSplitModel; settings: navigationSplitModel; user: navigationSplitModel; } export interface navigationSplitModel { topTitle?: string; top?: Array; mainTitle: string; main: Array; } export type topLevelNavigationType = "club" | "settings" | "user"; export interface topLevelNavigationModel { key: topLevelNavigationType; title: string; levelDefault: string; } export interface navigationLinkModel { key: string; title: string; component: any; } export const useNavigationStore = defineStore("navigation", { state: () => { return { activeNavigation: "club" as topLevelNavigationType, activeLink: null as null | navigationLinkModel, topLevel: [ { key: "club", title: "Verein", levelDefault: "#members", }, { key: "settings", title: "Einstellungen", levelDefault: "#qualification", }, ] as Array, navigation: { club: { mainTitle: "Verein", main: [ { key: "#members", title: "Mitglieder", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, { key: "#calendar", title: "Termine", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, { key: "#newsletter", title: "Newsletter", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, { key: "#protocol", title: "Prookolle", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, ], }, settings: { mainTitle: "Einstellungen", main: [ { key: "#qualification", title: "Qualifikationen", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, { key: "#award", title: "Auszeichnungen", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, { key: "#executive_position", title: "Vereinsämter", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, { key: "#communication", title: "Mitgliederdaten", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, ], }, user: { mainTitle: "Benutzer", main: [ { key: "#user", title: "Benutzer", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, { key: "#roles", title: "Rollen", component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))), }, ], }, } as navigationModel, }; }, getters: { activeNavigationObject: (state) => (state.navigation[state.activeNavigation] ?? {}) as navigationSplitModel, activeTopLevelObject: (state) => (state.topLevel.find((elem) => elem.key == state.activeNavigation) ?? {}) as topLevelNavigationModel, }, actions: { setTopLevel(key: topLevelNavigationType, disableSubLink: boolean = true) { let level = this.topLevel.find((e) => e.key == key) ?? null; if (!level) { this.activeNavigation = "club"; if (!disableSubLink) this.setLink(this.topLevel.find((e) => e.key == "club")?.levelDefault ?? null); else this.setLink(null); } else { this.activeNavigation = level.key; if (!disableSubLink) this.setLink(level.levelDefault); else this.setLink(null); } }, setLink(key: string | null) { let nav = this.navigation[this.activeNavigation]; if (!nav) { this.activeLink = null; return; } let links = [...Object.values(nav.main), ...Object.values(nav.top ?? {})]; this.activeLink = links.find((e) => e.key == key) ?? null; }, setTopLevelNav(topLeveLinks: Array) { this.topLevel = topLeveLinks; }, resetNavigation() { this.$reset(); }, }, });