2024-08-23 14:42:32 +02:00
|
|
|
import { defineStore } from "pinia";
|
|
|
|
import { shallowRef, defineAsyncComponent } from "vue";
|
2024-08-26 17:56:07 +02:00
|
|
|
import { useAbilityStore } from "../ability";
|
2024-08-23 14:42:32 +02:00
|
|
|
|
|
|
|
export interface navigationModel {
|
|
|
|
club: navigationSplitModel;
|
|
|
|
settings: navigationSplitModel;
|
|
|
|
user: navigationSplitModel;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface navigationSplitModel {
|
|
|
|
topTitle?: string;
|
|
|
|
top?: Array<navigationLinkModel>;
|
|
|
|
mainTitle: string;
|
|
|
|
main: Array<navigationLinkModel>;
|
|
|
|
}
|
|
|
|
|
|
|
|
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,
|
2024-08-26 17:56:07 +02:00
|
|
|
topLevel: [] as Array<topLevelNavigationModel>,
|
|
|
|
navigation: {} as navigationModel,
|
2024-08-25 13:37:23 +02:00
|
|
|
componentOverwrite: null as null | any,
|
2024-08-23 14:42:32 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
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<topLevelNavigationModel>) {
|
|
|
|
this.topLevel = topLeveLinks;
|
|
|
|
},
|
2024-08-25 13:37:23 +02:00
|
|
|
setComponentOverwrite(component: any) {
|
|
|
|
this.componentOverwrite = component;
|
|
|
|
},
|
|
|
|
resetComponentOverwrite() {
|
|
|
|
this.componentOverwrite = null;
|
|
|
|
},
|
2024-08-23 14:42:32 +02:00
|
|
|
resetNavigation() {
|
|
|
|
this.$reset();
|
|
|
|
},
|
2024-08-26 17:56:07 +02:00
|
|
|
updateTopLevel() {
|
|
|
|
const abilityStore = useAbilityStore();
|
|
|
|
this.topLevel = [
|
2024-08-27 17:55:10 +02:00
|
|
|
...(abilityStore.canSection("read", "club")
|
2024-08-26 17:56:07 +02:00
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "club",
|
|
|
|
title: "Verein",
|
|
|
|
levelDefault: "#members",
|
|
|
|
} as topLevelNavigationModel,
|
|
|
|
]
|
|
|
|
: []),
|
2024-08-27 17:55:10 +02:00
|
|
|
...(abilityStore.canSection("read", "settings")
|
2024-08-26 17:56:07 +02:00
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "settings",
|
|
|
|
title: "Einstellungen",
|
|
|
|
levelDefault: "#qualification",
|
|
|
|
} as topLevelNavigationModel,
|
|
|
|
]
|
|
|
|
: []),
|
2024-08-27 17:55:10 +02:00
|
|
|
...(abilityStore.canSection("read", "user")
|
2024-08-26 17:56:07 +02:00
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "user",
|
|
|
|
title: "Benutzer",
|
|
|
|
levelDefault: "#user",
|
|
|
|
} as topLevelNavigationModel,
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
];
|
|
|
|
if (this.topLevel.findIndex((e) => e.key == this.activeNavigation) == -1)
|
|
|
|
this.activeNavigation = this.topLevel[0]?.key ?? "club";
|
|
|
|
},
|
|
|
|
updateNavigation() {
|
|
|
|
const abilityStore = useAbilityStore();
|
|
|
|
this.navigation = {
|
|
|
|
club: {
|
|
|
|
mainTitle: "Verein",
|
|
|
|
main: [
|
|
|
|
...(abilityStore.can("read", "club", "members")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#members",
|
|
|
|
title: "Mitglieder",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
...(abilityStore.can("read", "club", "calendar")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#calendar",
|
|
|
|
title: "Termine",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
...(abilityStore.can("read", "club", "newsletter")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#newsletter",
|
|
|
|
title: "Newsletter",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
...(abilityStore.can("read", "club", "protocoll")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#protocol",
|
|
|
|
title: "Protokolle",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
],
|
|
|
|
},
|
|
|
|
settings: {
|
|
|
|
mainTitle: "Einstellungen",
|
|
|
|
main: [
|
|
|
|
...(abilityStore.can("read", "settings", "qualification")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#qualification",
|
|
|
|
title: "Qualifikationen",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
...(abilityStore.can("read", "settings", "award")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#award",
|
|
|
|
title: "Auszeichnungen",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
...(abilityStore.can("read", "settings", "executive_position")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#executive_position",
|
|
|
|
title: "Vereinsämter",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
...(abilityStore.can("read", "settings", "communication")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#communication",
|
|
|
|
title: "Mitgliederdaten",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
],
|
|
|
|
},
|
|
|
|
user: {
|
|
|
|
mainTitle: "Benutzer",
|
|
|
|
main: [
|
|
|
|
...(abilityStore.can("read", "user", "user")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#user",
|
|
|
|
title: "Benutzer",
|
2024-08-27 11:46:24 +02:00
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/user/User.vue"))),
|
2024-08-26 17:56:07 +02:00
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
...(abilityStore.can("admin", "user", "role")
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
key: "#role",
|
|
|
|
title: "Rollen",
|
|
|
|
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
],
|
|
|
|
},
|
|
|
|
} as navigationModel;
|
|
|
|
if (this.topLevel.findIndex((e) => e.key == this.activeLink?.key) == -1) this.setLink(null);
|
|
|
|
},
|
2024-08-23 14:42:32 +02:00
|
|
|
},
|
|
|
|
});
|