405 lines
10 KiB
Vue
405 lines
10 KiB
Vue
<template>
|
|
<div
|
|
id="sidenav-collapse-main"
|
|
class="w-auto h-auto collapse navbar-collapse max-height-vh-100 h-100"
|
|
>
|
|
<ul class="navbar-nav">
|
|
<!-- Render navigation items from data array -->
|
|
<li
|
|
v-for="item in navigationItems"
|
|
:key="item.id"
|
|
:class="{
|
|
'nav-item': true,
|
|
'mt-3': item.type === 'section-header',
|
|
}"
|
|
>
|
|
<!-- Section Header -->
|
|
<h6
|
|
v-if="item.type === 'section-header'"
|
|
class="text-xs ps-4 text-uppercase font-weight-bolder opacity-6"
|
|
:class="isRTL ? 'me-4' : 'ms-2'"
|
|
>
|
|
{{ item.text }}
|
|
</h6>
|
|
|
|
<!-- Single Navigation Item -->
|
|
<sidenav-item
|
|
v-else-if="item.type === 'single'"
|
|
:to="item.route"
|
|
:mini-icon="item.miniIcon"
|
|
:text="item.text"
|
|
>
|
|
<template #icon>
|
|
<component :is="getIconComponent(item.icon)" />
|
|
</template>
|
|
</sidenav-item>
|
|
|
|
<!-- Collapsible Navigation Item -->
|
|
<sidenav-collapse
|
|
v-else-if="item.type === 'collapse'"
|
|
:collapse-ref="item.collapseRef"
|
|
:nav-text="item.text"
|
|
:class="isItemActive(item) ? 'active' : ''"
|
|
>
|
|
<template #icon>
|
|
<component :is="getIconComponent(item.icon)" />
|
|
</template>
|
|
<template #list>
|
|
<ul class="nav ms-4 ps-3">
|
|
<sidenav-item
|
|
v-for="subItem in item.children"
|
|
:key="subItem.id"
|
|
:to="subItem.route"
|
|
:mini-icon="subItem.miniIcon"
|
|
:text="subItem.text"
|
|
/>
|
|
</ul>
|
|
</template>
|
|
</sidenav-collapse>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SidenavItem from "./SidenavItem.vue";
|
|
import SidenavCollapse from "./SidenavCollapse.vue";
|
|
|
|
import Shop from "../../components/Icon/Shop.vue";
|
|
import Office from "../../components/Icon/Office.vue";
|
|
|
|
import { mapState } from "vuex";
|
|
|
|
export default {
|
|
name: "SidenavList",
|
|
components: {
|
|
SidenavItem,
|
|
SidenavCollapse,
|
|
Shop,
|
|
Office,
|
|
},
|
|
props: {
|
|
cardBg: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState(["isRTL"]),
|
|
|
|
// Navigation data structure
|
|
navigationItems() {
|
|
return [
|
|
{
|
|
id: "dashboard",
|
|
type: "collapse",
|
|
text: "Dashboards",
|
|
icon: "Shop",
|
|
collapseRef: "dashboardsExamples",
|
|
children: [
|
|
{
|
|
id: "default",
|
|
route: { name: "Default" },
|
|
miniIcon: "D",
|
|
text: "Default",
|
|
},
|
|
{
|
|
id: "crm-dashboard",
|
|
route: { name: "CRM" },
|
|
miniIcon: "C",
|
|
text: "CRM",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "agenda",
|
|
type: "single",
|
|
text: "Agenda",
|
|
icon: "Office",
|
|
miniIcon: "A",
|
|
route: { name: "Agenda" },
|
|
},
|
|
{
|
|
id: "courriel",
|
|
type: "single",
|
|
text: "Courriel",
|
|
icon: "Office",
|
|
miniIcon: "C",
|
|
route: { name: "Courriel" },
|
|
},
|
|
{
|
|
id: "contacts",
|
|
type: "single",
|
|
text: "Contacts",
|
|
icon: "Office",
|
|
miniIcon: "C",
|
|
route: { name: "Gestion contacts" },
|
|
},
|
|
{
|
|
id: "interventions",
|
|
type: "single",
|
|
text: "Interventions",
|
|
icon: "Office",
|
|
miniIcon: "I",
|
|
route: { name: "Interventions" },
|
|
},
|
|
{
|
|
id: "Defunts",
|
|
type: "single",
|
|
text: "Defunts",
|
|
icon: "Office",
|
|
miniIcon: "I",
|
|
route: { name: "Defunts" },
|
|
},
|
|
{
|
|
id: "gestion-section",
|
|
type: "section-header",
|
|
text: "GESTION",
|
|
},
|
|
{
|
|
id: "clients",
|
|
type: "collapse",
|
|
text: "Clients",
|
|
icon: "Office",
|
|
collapseRef: "clientsMenu",
|
|
routeKey: "clients",
|
|
children: [
|
|
{
|
|
id: "clients-list",
|
|
route: { name: "Gestion clients" },
|
|
miniIcon: "C",
|
|
text: "Clients",
|
|
},
|
|
{
|
|
id: "clients-locations",
|
|
route: { name: "Localisation clients" },
|
|
miniIcon: "L",
|
|
text: "Lieux",
|
|
},
|
|
{
|
|
id: "clients-stats",
|
|
route: { name: "Statistiques clients" },
|
|
miniIcon: "S",
|
|
text: "Statistiques",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "fournisseurs",
|
|
type: "collapse",
|
|
text: "Fournisseurs",
|
|
icon: "Office",
|
|
collapseRef: "fournisseursMenu",
|
|
routeKey: "fournisseurs",
|
|
children: [
|
|
{
|
|
id: "fournisseurs-list",
|
|
route: { name: "Gestion fournisseurs" },
|
|
miniIcon: "F",
|
|
text: "Fournisseurs",
|
|
},
|
|
{
|
|
id: "fournisseurs-orders",
|
|
route: { name: "Commandes fournisseurs" },
|
|
miniIcon: "C",
|
|
text: "Commandes",
|
|
},
|
|
{
|
|
id: "fournisseurs-invoices",
|
|
route: { name: "Factures fournisseurs" },
|
|
miniIcon: "F",
|
|
text: "Factures",
|
|
},
|
|
{
|
|
id: "fournisseurs-stats",
|
|
route: { name: "Statistiques fournisseurs" },
|
|
miniIcon: "S",
|
|
text: "Statistiques",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "sous-traitants",
|
|
type: "collapse",
|
|
text: "Sous-Traitants",
|
|
icon: "Office",
|
|
collapseRef: "sousTraitantsMenu",
|
|
routeKey: "sous-traitants",
|
|
children: [
|
|
{
|
|
id: "sous-traitants-list",
|
|
route: { name: "Gestion sous-traitants" },
|
|
miniIcon: "S",
|
|
text: "Sous-Traitants",
|
|
},
|
|
{
|
|
id: "sous-traitants-orders",
|
|
route: { name: "Commandes sous-traitants" },
|
|
miniIcon: "C",
|
|
text: "Commandes",
|
|
},
|
|
{
|
|
id: "sous-traitants-invoices",
|
|
route: { name: "Factures sous-traitants" },
|
|
miniIcon: "F",
|
|
text: "Factures",
|
|
},
|
|
{
|
|
id: "sous-traitants-stats",
|
|
route: { name: "Statistiques sous-traitants" },
|
|
miniIcon: "S",
|
|
text: "Statistiques",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "ventes",
|
|
type: "collapse",
|
|
text: "Ventes",
|
|
icon: "Shop",
|
|
collapseRef: "ventesMenu",
|
|
routeKey: "ventes",
|
|
children: [
|
|
{
|
|
id: "devis",
|
|
route: { name: "Devis" },
|
|
miniIcon: "D",
|
|
text: "Devis",
|
|
},
|
|
{
|
|
id: "factures-ventes",
|
|
route: { name: "Factures ventes" },
|
|
miniIcon: "F",
|
|
text: "Factures",
|
|
},
|
|
{
|
|
id: "ventes-stats",
|
|
route: { name: "Statistiques ventes" },
|
|
miniIcon: "S",
|
|
text: "Statistiques",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "stock",
|
|
type: "collapse",
|
|
text: "Stock",
|
|
icon: "Office",
|
|
collapseRef: "stockMenu",
|
|
routeKey: "stock",
|
|
children: [
|
|
{
|
|
id: "produits",
|
|
route: { name: "Gestion de produits" },
|
|
miniIcon: "R",
|
|
text: "Produits",
|
|
},
|
|
{
|
|
id: "reception",
|
|
route: { name: "Reception stock" },
|
|
miniIcon: "R",
|
|
text: "Réception",
|
|
},
|
|
{
|
|
id: "stock-gestion",
|
|
route: { name: "Gestion stock" },
|
|
miniIcon: "S",
|
|
text: "Stock",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "employes",
|
|
type: "collapse",
|
|
text: "Employés",
|
|
icon: "Office",
|
|
collapseRef: "employesMenu",
|
|
routeKey: "employes",
|
|
children: [
|
|
{
|
|
id: "employes-list",
|
|
route: { name: "Gestion employes" },
|
|
miniIcon: "E",
|
|
text: "Employés",
|
|
},
|
|
{
|
|
id: "employes-thanatopracteurs",
|
|
route: { name: "Gestion thanatopractitioners" },
|
|
miniIcon: "T",
|
|
text: "Employés & Thanatopracteurs",
|
|
},
|
|
{
|
|
id: "ndf",
|
|
route: { name: "NDF" },
|
|
miniIcon: "N",
|
|
text: "NDF",
|
|
},
|
|
{
|
|
id: "vehicules",
|
|
route: { name: "Véhicules" },
|
|
miniIcon: "V",
|
|
text: "Véhicules",
|
|
},
|
|
{
|
|
id: "absences",
|
|
route: { name: "Absences" },
|
|
miniIcon: "A",
|
|
text: "Absences",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "parametrage",
|
|
type: "collapse",
|
|
text: "Paramétrage",
|
|
icon: "Office",
|
|
collapseRef: "parametrageMenu",
|
|
routeKey: "parametrage",
|
|
children: [
|
|
{
|
|
id: "droits",
|
|
route: { name: "Gestion droits" },
|
|
miniIcon: "D",
|
|
text: "Gestion des droits",
|
|
},
|
|
{
|
|
id: "emails",
|
|
route: { name: "Gestion emails" },
|
|
miniIcon: "E",
|
|
text: "Gestion des emails",
|
|
},
|
|
{
|
|
id: "modeles",
|
|
route: { name: "Gestion modeles" },
|
|
miniIcon: "M",
|
|
text: "Gestion des modèles",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
},
|
|
},
|
|
methods: {
|
|
getRoute() {
|
|
const routeArr = this.$route.path.split("/");
|
|
return routeArr[1];
|
|
},
|
|
|
|
getIconComponent(iconName) {
|
|
const iconMap = {
|
|
Shop: "Shop",
|
|
Office: "Office",
|
|
};
|
|
return iconMap[iconName] || "Office";
|
|
},
|
|
|
|
isItemActive(item) {
|
|
if (item.type === "collapse" && item.routeKey) {
|
|
return this.getRoute() === item.routeKey;
|
|
}
|
|
return false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|