sfp_front_vue_diarista_backoffice/src/stores/navigation.js

import { defineStore } from "pinia";
import { computed } from "vue";
import { permissionStore } from "src/stores/permission";

export const navigationStore = defineStore("navigation", () => {
  const navigationStructure = Object.freeze([
    {
      type: "single",
      title: "ui.navigation.dashboard",
      name: "DashboardPage",
      icon: "mdi-home-variant-outline",
      disable: false,
      permission: false,
      permissionScope: "dashboard",
    },
    {
      type: "single",
      title: "ui.navigation.schedules",
      name: "SchedulesPage",
      icon: "mdi-calendar-clock",
      disable: false,
      permission: false,
      permissionScope: "config.schedule",
    },
    {
      type: "single",
      title: "ui.navigation.opportunities",
      name: "CustomSchedulesPage",
      icon: "mdi-bullseye-arrow",
      disable: false,
      permission: false,
      permissionScope: "config.custom_schedule",
    },
    {
      type: "single",
      title: "ui.navigation.reviews",
      name: "ReviewsPage",
      icon: "mdi-star-outline",
      disable: false,
      permission: false,
      permissionScope: "config.review",
    },
    {
      type: "single",
      title: "ui.navigation.payments",
      name: "PaymentsPage",
      icon: "mdi-cash-multiple",
      disable: false,
      permission: false,
      permissionScope: ["payment", "config.payment"],
    },
    {
      type: "expansive",
      title: "ui.navigation.registration",
      icon: "mdi-cog-outline",
      disable: false,
      permission: false,
      permissionScope: "config",
      childrens: [
        {
          type: "single",
          title: "ui.navigation.city",
          name: "CityPage",
          icon: "mdi-city-variant-outline",
          disable: false,
          permission: false,
          permissionScope: "config.city",
        },
        {
          type: "single",
          title: "ui.navigation.client",
          name: "ClientPage",
          icon: "mdi-account-outline",
          disable: false,
          permission: false,
          permissionScope: "config.client",
        },
        {
          type: "single",
          title: "ui.navigation.speciality",
          name: "SpecialitiesPage",
          icon: "mdi-star-outline",
          disable: false,
          permission: false,
          permissionScope: "config.speciality",
        },
        {
          type: "single",
          title: "ui.navigation.state",
          name: "StatePage",
          icon: "mdi-map-marker",
          disable: false,
          permission: false,
          permissionScope: "config.state",
        },
        {
          type: "single",
          title: "ui.navigation.country",
          name: "CountryPage",
          icon: "mdi-earth",
          disable: false,
          permission: false,
          permissionScope: "config.country",
        },
        {
          type: "single",
          title: "ui.navigation.provider",
          name: "ProviderPage",
          icon: "mdi-account-hard-hat",
          disable: false,
          permission: false,
          permissionScope: "config.provider",
        },
        {
          type: "single",
          title: "ui.navigation.improvement_type",
          name: "ImprovementTypesPage",
          icon: "mdi-chart-line-variant",
          disable: false,
          permission: false,
          permissionScope: "config.improvement_type",
        },
        {
          type: "single",
          title: "ui.navigation.service_type",
          name: "ServiceTypesPage",
          icon: "mdi-briefcase-check-outline",
          disable: false,
          permission: false,
          permissionScope: "config.service_type",
        },
        {
          type: "single",
          title: "ui.navigation.users",
          name: "UsersPage",
          icon: "mdi-account-multiple-outline",
          disable: false,
          permission: false,
          permissionScope: "config.user",
        },
      ],
    },
  ]);

  const getNavigationAccess = () => {
    const { getAccess } = permissionStore();
    return navigationStructure
      .map((menu) => {
        if (menu.type === "expansive") {
          if (getAccess(menu.permissionScope, "menu")) {
            menu.permission = true;
          }
          menu.childrens = menu.childrens.filter((children) => {
            children.permission = getAccess(children.permissionScope, "menu");
            return children.permission;
          });
          return menu.childrens.length > 0 ? menu : null;
        } else {
          menu.permission = getAccess(menu.permissionScope, "menu");
          return menu;
        }
      })
      .filter((menu) => menu !== null);
  };

  const navigationItems = computed(() => getNavigationAccess());

  return {
    navigationItems,
  };
});