routing inside url
This commit is contained in:
parent
2d0fb30558
commit
6247c385c3
15 changed files with 278 additions and 203 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { shallowRef, defineAsyncComponent } from "vue";
|
||||
import { useAbilityStore } from "../ability";
|
||||
import router from "../../router";
|
||||
|
||||
export interface navigationModel {
|
||||
club: navigationSplitModel;
|
||||
|
|
@ -26,17 +26,15 @@ export interface topLevelNavigationModel {
|
|||
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,
|
||||
activeLink: null as null | string,
|
||||
topLevel: [] as Array<topLevelNavigationModel>,
|
||||
navigation: {} as navigationModel,
|
||||
componentOverwrite: null as null | any,
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
|
|
@ -45,42 +43,10 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
(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);
|
||||
}
|
||||
this.resetComponentOverwrite();
|
||||
},
|
||||
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;
|
||||
this.resetComponentOverwrite();
|
||||
},
|
||||
setTopLevelNav(topLeveLinks: Array<topLevelNavigationModel>) {
|
||||
this.topLevel = topLeveLinks;
|
||||
},
|
||||
setComponentOverwrite(component: any) {
|
||||
this.componentOverwrite = component;
|
||||
},
|
||||
resetComponentOverwrite() {
|
||||
this.componentOverwrite = null;
|
||||
},
|
||||
resetNavigation() {
|
||||
this.$reset();
|
||||
},
|
||||
updateTopLevel() {
|
||||
updateTopLevel(first: boolean = false) {
|
||||
const abilityStore = useAbilityStore();
|
||||
this.topLevel = [
|
||||
...(abilityStore.canSection("read", "club")
|
||||
|
|
@ -88,7 +54,7 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
{
|
||||
key: "club",
|
||||
title: "Verein",
|
||||
levelDefault: "#members",
|
||||
levelDefault: "members",
|
||||
} as topLevelNavigationModel,
|
||||
]
|
||||
: []),
|
||||
|
|
@ -97,7 +63,7 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
{
|
||||
key: "settings",
|
||||
title: "Einstellungen",
|
||||
levelDefault: "#qualification",
|
||||
levelDefault: "qualification",
|
||||
} as topLevelNavigationModel,
|
||||
]
|
||||
: []),
|
||||
|
|
@ -106,124 +72,51 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
{
|
||||
key: "user",
|
||||
title: "Benutzer",
|
||||
levelDefault: "#user",
|
||||
levelDefault: "user",
|
||||
} as topLevelNavigationModel,
|
||||
]
|
||||
: []),
|
||||
];
|
||||
if (this.topLevel.findIndex((e) => e.key == this.activeNavigation) == -1)
|
||||
this.activeNavigation = this.topLevel[0]?.key ?? "club";
|
||||
if (this.topLevel.findIndex((e) => e.key == this.activeNavigation) == -1 && !first)
|
||||
router.push({ name: `admin-${this.topLevel[0]?.key ?? "club"}-default` });
|
||||
},
|
||||
updateNavigation() {
|
||||
updateNavigation(first: boolean = false) {
|
||||
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"))),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(abilityStore.can("read", "club", "members") ? [{ key: "members", title: "Mitglieder" }] : []),
|
||||
...(abilityStore.can("read", "club", "calendar") ? [{ key: "calendar", title: "Termine" }] : []),
|
||||
...(abilityStore.can("read", "club", "newsletter") ? [{ key: "newsletter", title: "Newsletter" }] : []),
|
||||
...(abilityStore.can("read", "club", "protocoll") ? [{ key: "protocol", title: "Protokolle" }] : []),
|
||||
],
|
||||
},
|
||||
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"))),
|
||||
},
|
||||
]
|
||||
? [{ key: "qualification", title: "Qualifikationen" }]
|
||||
: []),
|
||||
...(abilityStore.can("read", "settings", "award") ? [{ key: "award", title: "Auszeichnungen" }] : []),
|
||||
...(abilityStore.can("read", "settings", "executive_position")
|
||||
? [
|
||||
{
|
||||
key: "#executive_position",
|
||||
title: "Vereinsämter",
|
||||
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
||||
},
|
||||
]
|
||||
? [{ key: "executive_position", title: "Vereinsämter" }]
|
||||
: []),
|
||||
...(abilityStore.can("read", "settings", "communication")
|
||||
? [
|
||||
{
|
||||
key: "#communication",
|
||||
title: "Mitgliederdaten",
|
||||
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/members/Overview.vue"))),
|
||||
},
|
||||
]
|
||||
? [{ key: "communication", title: "Mitgliederdaten" }]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
user: {
|
||||
mainTitle: "Benutzer",
|
||||
main: [
|
||||
...(abilityStore.can("read", "user", "user")
|
||||
? [
|
||||
{
|
||||
key: "#user",
|
||||
title: "Benutzer",
|
||||
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/user/User.vue"))),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(abilityStore.can("read", "user", "role")
|
||||
? [
|
||||
{
|
||||
key: "#role",
|
||||
title: "Rollen",
|
||||
component: shallowRef(defineAsyncComponent(() => import("@/views/admin/user/Role.vue"))),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...(abilityStore.can("read", "user", "user") ? [{ key: "user", title: "Benutzer" }] : []),
|
||||
...(abilityStore.can("read", "user", "role") ? [{ key: "role", title: "Rollen" }] : []),
|
||||
],
|
||||
},
|
||||
} as navigationModel;
|
||||
if (this.topLevel.findIndex((e) => e.key == this.activeLink?.key) == -1) this.setLink(null);
|
||||
if (this.topLevel.findIndex((e) => e.key == this.activeLink) == -1 && !first)
|
||||
router.push({ name: `admin-${this.activeNavigation}-default` });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue