ff-admin/src/stores/admin/navigation.ts

import { defineStore } from "pinia";
import { shallowRef, defineAsyncComponent } from "vue";
import { useAbilityStore } from "../ability";

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,
      topLevel: [] as Array<topLevelNavigationModel>,
      navigation: {} as navigationModel,
      componentOverwrite: null as null | any,
    };
  },
  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;
    },
    setComponentOverwrite(component: any) {
      this.componentOverwrite = component;
    },
    resetComponentOverwrite() {
      this.componentOverwrite = null;
    },
    resetNavigation() {
      this.$reset();
    },
    updateTopLevel() {
      const abilityStore = useAbilityStore();
      this.topLevel = [
        ...(abilityStore.canSection("read", "club")
          ? [
              {
                key: "club",
                title: "Verein",
                levelDefault: "#members",
              } as topLevelNavigationModel,
            ]
          : []),
        ...(abilityStore.canSection("read", "settings")
          ? [
              {
                key: "settings",
                title: "Einstellungen",
                levelDefault: "#qualification",
              } as topLevelNavigationModel,
            ]
          : []),
        ...(abilityStore.canSection("read", "user")
          ? [
              {
                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",
                    component: shallowRef(defineAsyncComponent(() => import("@/views/admin/user/User.vue"))),
                  },
                ]
              : []),
            ...(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);
    },
  },
});