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

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<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: [
        {
          key: "club",
          title: "Verein",
          levelDefault: "#members",
        },
        {
          key: "settings",
          title: "Einstellungen",
          levelDefault: "#qualification",
        },
        {
          key: "user",
          title: "Benutzer",
          levelDefault: "#user",
        },
      ] as Array<topLevelNavigationModel>,
      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: "Protokolle",
              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,
      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();
    },
  },
});