codevdesign 0.0.15 → 0.0.16

package/composants/gabarit/csqcMenu.vue

@@ -1,241 +1,241 @@
-<template>
-  <!-- desktop -->
-  <div v-if="!estMobile">
-    <v-toolbar
-      class="pa-0 ajouterPointeur barreMenu"
-      :border="false"
-      elevation="2"
-    >
-      <div
-        v-for="item in filtrerMenuItems"
-        :key="item.title"
-        class="pt-1"
-      >
-        <v-btn
-          variant="text"
-          v-if="doitAfficherItemMenu(item)"
-          :to="item.path"
-          :active="item.path === route"
-          :active-color="'white'"
-          >{{ item.title }}</v-btn
-        >
-      </div>
-      <v-spacer></v-spacer>
-      <!-- Sous Liste -->
-      <v-menu
-        open-on-hover
-        v-for="(item, index) in filtrerSousListe"
-        :key="index"
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn
-            color="white"
-            v-bind="props"
-            :active="estActifSousliste"
-          >
-            {{ item.nom }}
-          </v-btn>
-        </template>
-
-        <v-list
-          style="background-color: #223654 !important"
-          min-width="230px"
-        >
-          <v-list-item
-            v-for="(sousitem, sousindex) in obtenirItemsSousListeSelonDroits(item.id)"
-            :key="sousindex"
-          >
-            <v-btn
-              :max-height="35"
-              width="100%"
-              class="params_item"
-              :to="sousitem.path"
-              variant="text"
-              >{{ sousitem.title }}</v-btn
-            >
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </v-toolbar>
-  </div>
-
-  <!-- mobile -->
-  <div v-else>
-    <v-toolbar class="pa-0 ajouterPointeur barreMenuMobile">
-      <v-app-bar-nav-icon
-        variant="text"
-        @click.stop="menu = !menu"
-      ></v-app-bar-nav-icon>
-      <v-toolbar-title
-        ><label
-          class="ajouterPointeur"
-          style="color: white !important"
-          >{{ $t('menu.menu') }}</label
-        >
-      </v-toolbar-title>
-    </v-toolbar>
-
-    <v-navigation-drawer v-model="menu">
-      <v-list>
-        <div
-          v-for="item in filtrerMenuItems"
-          :key="item.title"
-        >
-          <v-list-item
-            :to="item.path"
-            :active="item.path === route"
-            :title="item.title"
-          />
-        </div>
-        <div
-          v-for="item in filtrerSousListe"
-          :key="item.id"
-        >
-          <v-list-group :value="item.nom">
-            <template v-slot:activator="{ props }">
-              <v-list-item
-                v-bind="props"
-                :title="item.nom"
-              />
-            </template>
-            <div
-              v-for="(sousitem, index) in obtenirItemsSousListeSelonDroits(item.id)"
-              :key="index"
-            >
-              <v-list-item
-                :title="sousitem.title"
-                :value="sousitem.title"
-                :to="sousitem.path"
-              />
-            </div>
-          </v-list-group>
-        </div>
-      </v-list>
-    </v-navigation-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import type { MenuItem, SousListe, SousListeItems } from '../../modeles/composants/csqcMenuModele'
-  import { ref, computed } from 'vue'
-  const props = defineProps({
-    estMobile: {
-      type: Boolean,
-      required: true,
-    },
-    route: {
-      type: String,
-      required: true,
-    },
-    menuItems: {
-      type: Array as () => MenuItem[],
-      required: true,
-    },
-    sousliste: {
-      type: Array as () => SousListe[],
-      required: false,
-      default: () => [],
-    },
-    souslisteItems: {
-      type: Array as () => SousListeItems[],
-      required: false,
-      default: () => [],
-    },
-    droitsMap: {
-      type: Object as () => Record<string, boolean>,
-      required: true,
-      default: () => ({}),
-    },
-  })
-  const menu = ref<boolean>(false)
-
-  /*const verifierDroits = (monelement: string) => {
-    return props.droitsMap[monelement] || false
-  }*/
-
-  const doitAfficherItemMenu = (item: MenuItem) => {
-    return props.droitsMap[item.droit] || false
-  }
-
-  const filtrerMenuItems = computed(() => {
-    return props.menuItems.filter(item => props.droitsMap[item.droit])
-  })
-
-  const filtrerSousListe = computed(() => {
-    return props.sousliste.filter(item => props.droitsMap[item.droit])
-  })
-
-  const obtenirItemsSousListeSelonDroits = (monitemId: number) => {
-    return props.souslisteItems.filter(item => item.parentId === monitemId && props.droitsMap[item.droit])
-  }
-
-  // Vérifie si un item de la sous-liste est actif (route correspond à un item)
-  const estActifSousliste = computed(() => {
-    return props.souslisteItems.some(item => props.route === item.path)
-  })
-</script>
-<style lang="css" scoped>
-  /* desktop background de la barre de menu et hauteur */
-  .v-toolbar {
-    background-color: #223654;
-    height: 66px;
-  }
-
-  /* desktop couleur du texte de la barre, marge du haut, padding */
-  .barreMenu {
-    color: white !important;
-    padding: 0 10px 0 10px !important;
-  }
-  /* desktop */
-  .v-btn {
-    font-weight: 400;
-    height: 72px !important;
-  }
-  /* desktop */
-  .v-btn--active {
-    font-weight: 600 !important;
-  }
-
-  /* desktop empeche le texte parametre detre trop bas */
-  .params {
-    padding-top: 5px !important;
-  }
-  /* desktop */
-  .params_item {
-    font-weight: 400;
-    color: white !important;
-    background-color: #223654 !important;
-  }
-  /* desktop */
-  .params_item.v-btn--active {
-    color: white !important;
-    font-weight: 600 !important;
-  }
-  /* desktop */
-  .params_item.v-btn--active:hover {
-    color: white !important;
-    background-color: #223654 !important;
-  }
-  /* desktop */
-  .params_item.v-btn--active:hover::before {
-    color: #ffffff80 !important;
-  }
-  /* desktop */
-  .params_item.v-btn--active::before {
-    opacity: 0.24;
-    border-radius: 0;
-    color: #ffffff80 !important;
-    margin-top: 1px !important;
-  }
-
-  /* mobile couleur du texte de la barre, marge du haut, padding */
-  .barreMenuMobile {
-    color: white !important;
-    padding: 0 10px 0 10px !important;
-  }
-
-  /* mobile drawer apparait sous les app bar */
-  .v-navigation-drawer {
-    top: 132px !important;
-  }
-</style>
+<template>
+  <!-- desktop -->
+  <div v-if="!estMobile">
+    <v-toolbar
+      class="pa-0 ajouterPointeur barreMenu"
+      :border="false"
+      elevation="2"
+    >
+      <div
+        v-for="item in filtrerMenuItems"
+        :key="item.title"
+        class="pt-1"
+      >
+        <v-btn
+          variant="text"
+          v-if="doitAfficherItemMenu(item)"
+          :to="item.path"
+          :active="item.path === route"
+          :active-color="'white'"
+          >{{ item.title }}</v-btn
+        >
+      </div>
+      <v-spacer></v-spacer>
+      <!-- Sous Liste -->
+      <v-menu
+        open-on-hover
+        v-for="(item, index) in filtrerSousListe"
+        :key="index"
+      >
+        <template v-slot:activator="{ props }">
+          <v-btn
+            color="white"
+            v-bind="props"
+            :active="estActifSousliste"
+          >
+            {{ item.nom }}
+          </v-btn>
+        </template>
+
+        <v-list
+          style="background-color: #223654 !important"
+          min-width="230px"
+        >
+          <v-list-item
+            v-for="(sousitem, sousindex) in obtenirItemsSousListeSelonDroits(item.id)"
+            :key="sousindex"
+          >
+            <v-btn
+              :max-height="35"
+              width="100%"
+              class="params_item"
+              :to="sousitem.path"
+              variant="text"
+              >{{ sousitem.title }}</v-btn
+            >
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-toolbar>
+  </div>
+
+  <!-- mobile -->
+  <div v-else>
+    <v-toolbar class="pa-0 ajouterPointeur barreMenuMobile">
+      <v-app-bar-nav-icon
+        variant="text"
+        @click.stop="menu = !menu"
+      ></v-app-bar-nav-icon>
+      <v-toolbar-title
+        ><label
+          class="ajouterPointeur"
+          style="color: white !important"
+          >{{ $t('menu.menu') }}</label
+        >
+      </v-toolbar-title>
+    </v-toolbar>
+
+    <v-navigation-drawer v-model="menu">
+      <v-list>
+        <div
+          v-for="item in filtrerMenuItems"
+          :key="item.title"
+        >
+          <v-list-item
+            :to="item.path"
+            :active="item.path === route"
+            :title="item.title"
+          />
+        </div>
+        <div
+          v-for="item in filtrerSousListe"
+          :key="item.id"
+        >
+          <v-list-group :value="item.nom">
+            <template v-slot:activator="{ props }">
+              <v-list-item
+                v-bind="props"
+                :title="item.nom"
+              />
+            </template>
+            <div
+              v-for="(sousitem, index) in obtenirItemsSousListeSelonDroits(item.id)"
+              :key="index"
+            >
+              <v-list-item
+                :title="sousitem.title"
+                :value="sousitem.title"
+                :to="sousitem.path"
+              />
+            </div>
+          </v-list-group>
+        </div>
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { MenuItem, SousListe, SousListeItems } from '../../modeles/composants/csqcMenuModele'
+  import { ref, computed } from 'vue'
+  const props = defineProps({
+    estMobile: {
+      type: Boolean,
+      required: true,
+    },
+    route: {
+      type: String,
+      required: true,
+    },
+    menuItems: {
+      type: Array as () => MenuItem[],
+      required: true,
+    },
+    sousliste: {
+      type: Array as () => SousListe[],
+      required: false,
+      default: () => [],
+    },
+    souslisteItems: {
+      type: Array as () => SousListeItems[],
+      required: false,
+      default: () => [],
+    },
+    droitsMap: {
+      type: Object as () => Record<string, boolean>,
+      required: true,
+      default: () => ({}),
+    },
+  })
+  const menu = ref<boolean>(false)
+
+  /*const verifierDroits = (monelement: string) => {
+    return props.droitsMap[monelement] || false
+  }*/
+
+  const doitAfficherItemMenu = (item: MenuItem) => {
+    return props.droitsMap[item.droit] || false
+  }
+
+  const filtrerMenuItems = computed(() => {
+    return props.menuItems.filter(item => props.droitsMap[item.droit])
+  })
+
+  const filtrerSousListe = computed(() => {
+    return props.sousliste.filter(item => props.droitsMap[item.droit])
+  })
+
+  const obtenirItemsSousListeSelonDroits = (monitemId: number) => {
+    return props.souslisteItems.filter(item => item.parentId === monitemId && props.droitsMap[item.droit])
+  }
+
+  // Vérifie si un item de la sous-liste est actif (route correspond à un item)
+  const estActifSousliste = computed(() => {
+    return props.souslisteItems.some(item => props.route === item.path)
+  })
+</script>
+<style lang="css" scoped>
+  /* desktop background de la barre de menu et hauteur */
+  .v-toolbar {
+    background-color: #223654;
+    height: 66px;
+  }
+
+  /* desktop couleur du texte de la barre, marge du haut, padding */
+  .barreMenu {
+    color: white !important;
+    padding: 0 10px 0 10px !important;
+  }
+  /* desktop */
+  .v-btn {
+    font-weight: 400;
+    height: 72px !important;
+  }
+  /* desktop */
+  .v-btn--active {
+    font-weight: 600 !important;
+  }
+
+  /* desktop empeche le texte parametre detre trop bas */
+  .params {
+    padding-top: 5px !important;
+  }
+  /* desktop */
+  .params_item {
+    font-weight: 400;
+    color: white !important;
+    background-color: #223654 !important;
+  }
+  /* desktop */
+  .params_item.v-btn--active {
+    color: white !important;
+    font-weight: 600 !important;
+  }
+  /* desktop */
+  .params_item.v-btn--active:hover {
+    color: white !important;
+    background-color: #223654 !important;
+  }
+  /* desktop */
+  .params_item.v-btn--active:hover::before {
+    color: #ffffff80 !important;
+  }
+  /* desktop */
+  .params_item.v-btn--active::before {
+    opacity: 0.24;
+    border-radius: 0;
+    color: #ffffff80 !important;
+    margin-top: 1px !important;
+  }
+
+  /* mobile couleur du texte de la barre, marge du haut, padding */
+  .barreMenuMobile {
+    color: white !important;
+    padding: 0 10px 0 10px !important;
+  }
+
+  /* mobile drawer apparait sous les app bar */
+  .v-navigation-drawer {
+    top: 132px !important;
+  }
+</style>