pleno-vue/src/components/menus/superuser/SuperUserLeftMenu.vue

<script setup>
import MenuDefault from "@/components/menus/MenuDefault.vue";
import {ref, watch} from "vue";
import {SessionUser} from "@/components/session/token/SessionUser.vue";

// Define the isLoaded function
// This is here, because the departments need to be loaded before the menu is shown,
// otherwise the menu will look for a department with an id not defined.
const isLoaded = ref(true);
const doesRouteStartWith = (route) => {
  return window.location.pathname.startsWith(route);
}

const menu_items = ref([
  {
    name: SessionUser.objects.departments.meta.title,
    route: '/superuser' +SessionUser.objects.departments.meta.endpoint,
    icon: SessionUser.objects.departments.meta.icon,
    children: []
  },
  {
    name: 'Nummerplade scanning',
    route: '/superuser/scanners',
    icon: 'fas fa-cogs',
    children: []
  },
  {
    name: 'Kassesystem',
    permissions: [
        'canAccessSuperUser'
    ],
    icon: 'fas fa-cogs',
    options: [
      {
        label: SessionUser.objects.collectedOrderInvoices.meta.title,
        value: SessionUser.objects.collectedOrderInvoices.meta.endpoint,
        icon: SessionUser.objects.collectedOrderInvoices.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.objects.products.meta.title,
        value: SessionUser.objects.products.meta.endpoint,
        icon: SessionUser.objects.products.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.objects.orders.meta.title,
        value: SessionUser.objects.orders.meta.endpoint,
        icon: SessionUser.objects.orders.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.objects.categories.meta.title,
        value: SessionUser.objects.categories.meta.endpoint,
        icon: SessionUser.objects.categories.meta.icon,
        children: [],
        hidden: false
      },
    ],
    onSelect: async (value) => {
      SessionUser.functions.redirectTo.superUser(value);
    },
    hidden: false
  },
  {
    name: 'Brugere',
    permissions: [
      'canAccessSuperUser'
    ],
    icon: 'fas fa-cogs',
    options: [
      {
        label: 'Kunder',
        value: '/customers',
        icon: 'fas fa-users',
        children: [],
        hidden: false
      },
      {
        label: 'Medarbejdere',
        value: '/users',
        icon: 'fas fa-users-cog',
        children: [],
        hidden: false
      },
      {
        label: SessionUser.objects.roles.meta.title,
        value: SessionUser.objects.roles.meta.endpoint,
        icon: SessionUser.objects.roles.meta.icon,
        children: [],
        hidden: false
      },
    ],
    onSelect: async (value) => {
      SessionUser.functions.redirectTo.superUser(value);
    },
    hidden: false
  },
  {
    name: 'Konfiguration',
    permissions: [
      'canAccessSuperUser'
    ],
    icon: 'fas fa-cogs',
    options: [
      {
        label: SessionUser.superUser.modules.economic.meta.title,
        value: SessionUser.superUser.modules.economic.meta.config_endpoint,
        icon: SessionUser.superUser.modules.economic.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.superUser.modules.reCAPTCHA.meta.title,
        value: SessionUser.superUser.modules.reCAPTCHA.meta.config_endpoint,
        icon: SessionUser.superUser.modules.reCAPTCHA.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.superUser.modules.email.meta.title,
        value: SessionUser.superUser.modules.email.meta.config_endpoint,
        icon: SessionUser.superUser.modules.email.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.superUser.modules.backups.meta.title,
        value: SessionUser.superUser.modules.backups.meta.config_endpoint,
        icon: SessionUser.superUser.modules.backups.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.superUser.modules.coolify.meta.title,
        value: SessionUser.superUser.modules.coolify.meta.config_endpoint,
        icon: SessionUser.superUser.modules.coolify.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.superUser.modules.motorapi.meta.title,
        value: SessionUser.superUser.modules.motorapi.meta.config_endpoint,
        icon: SessionUser.superUser.modules.motorapi.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.superUser.modules.stripe.meta.title,
        value: SessionUser.superUser.modules.stripe.meta.config_endpoint,
        icon: SessionUser.superUser.modules.stripe.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.superUser.modules.weatherapi.meta.title,
        value: SessionUser.superUser.modules.weatherapi.meta.config_endpoint,
        icon: SessionUser.superUser.modules.weatherapi.meta.icon,
        children: [],
        hidden: false
      },
      {
        label: SessionUser.superUser.modules.workfeed.meta.title,
        value: SessionUser.superUser.modules.workfeed.meta.config_endpoint,
        icon: SessionUser.superUser.modules.workfeed.meta.icon,
        children: [],
        hidden: false
      },
    ],
    onSelect: async (value) => {
      SessionUser.functions.redirectTo.superUser(value);
    },
    hidden: false
  },
  {
    name: 'XL Vask',
    permissions: [
      'canAccessSuperUser'
    ],
    icon: 'fas fa-cogs',
    options: [
      {
        label: 'Dashboard',
        value: '/xlvask',
        icon: 'fas fa-tachometer-alt',
        children: [],
        hidden: false
      },
      {
        label: SessionUser.objects.global.language.customers,
        value: '/xlvask/customers',
        icon: 'fas fa-users',
        children: [],
        hidden: false
      },
      {
        label: SessionUser.objects.global.language.usage_log,
        value: '/xlvask/usagelogs',
        icon: 'fas fa-users',
        children: [],
        hidden: false
      },
      {
        label: SessionUser.objects.global.language.configuration,
        value: SessionUser.superUser.modules.xlvask.meta.config_endpoint,
        icon: SessionUser.superUser.modules.xlvask.meta.icon,
        children: [],
        hidden: false
      },
    ],
    onSelect: async (value) => {
      SessionUser.functions.redirectTo.superUser(value);
    },
    hidden: false
  },
]);

const selectDepartment = (department) => {
  // Get the current path (After /admin/:department_id)
  const currentPath = window.location.pathname.split('/').slice(3).join('/');
  console.log('Selected department: ' + department);
  menu_items.value[1].selected = department;
  // Hide the menu
  menu_items.value[1].isExpanded = false;
  // Redirect to the department
  SessionUser.functions.redirectTo.department(department, currentPath);
}

</script>

<template>
  <MenuDefault v-if="isLoaded"
      v-bind:menu_items="menu_items"
      :show_icons="false"
  />
</template>

<style scoped>

</style>