codevdesign 0.0.80 → 0.0.81

package/composants/csqcRechercheUtilisateur.vue

@@ -1,125 +1,197 @@
-<template>
-  <div>
-    <v-autocomplete
-      v-model="selection"
-      v-model:search="search"
-      :items="items"
-      :loading="chargement"
-      density="compact"
-      :hide-no-data="!doitAfficherAucunResultat"
-      :no-data-text="$t('csqcRechercheUtilisateur.aucunResultat')"
-      :item-title="formatterUtilisateur"
-      item-value="id"
-      :placeholder="$t('csqcRechercheUtilisateur.placeholderRechercheUtilisateur')"
-      return-object
-      autofocus
-      auto-select-first
-      variant="outlined"
-      :rules="props.rules"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, watch, computed, onMounted } from 'vue'
-  import type { EmployeMinsLsCodev } from '@/modeles/employeMinsLsCodev'
-  import appAxios from '@/outils/appAxios'
-  import { useI18n } from 'vue-i18n'
-
-  const props = defineProps<{
-    rules: ((value: string) => boolean | string)[]
-    matriculeDefaut?: string | null
-  }>()
-
-  const emit = defineEmits<{
-    (e: 'selection', value: string | null): void
-    (e: 'selectionPlus', utilisateur: EmployeMinsLsCodev | null): void
-    (e: 'erreur', message: string): void
-  }>()
-
-  const { t } = useI18n({ useScope: 'global' })
-
-  const selection = ref<EmployeMinsLsCodev | null>(null)
-  const utilisateurs = ref<EmployeMinsLsCodev[]>([])
-  const chargement = ref(false)
-  const search = ref<string>('')
-  const items = computed(() => utilisateurs.value)
-  const erreur = ref<string | null>(null)
-
-  const cache = ref<Record<string, EmployeMinsLsCodev[]>>({})
-
-  const estTermeValide = (terme?: string): boolean => !!terme && terme.length >= 4 && !terme.includes('(')
-
-  onMounted(async () => {
-    if (props.matriculeDefaut) {
-      await rechercherUtilisateurs(props.matriculeDefaut)
-      if (utilisateurs.value.length > 0) {
-        const utilisateur: EmployeMinsLsCodev | null =
-          utilisateurs.value.find(user => user.matricule == props.matriculeDefaut) ?? null
-
-        if (utilisateur) {
-          search.value = `${utilisateur.prenom} ${utilisateur.nom} (${utilisateur.matricule}), ${utilisateur.courrielProfessionnel}, ${utilisateur.nomLieuPrincipal}, ${utilisateur.corpsEmploiPrincipalDescription}`
-          selection.value = utilisateur
-        }
-      }
-    }
-  })
-
-  const doitAfficherAucunResultat = computed(
-    () => estTermeValide(search.value) && !chargement.value && items.value.length === 0,
-  )
-
-  const formatterUtilisateur = (item: EmployeMinsLsCodev): string => {
-    return `${item.prenom} ${item.nom} (${item.matricule}), ${item.courrielProfessionnel}, ${item.numeroLieuPrincipal}-${item.nomLieuPrincipal}, ${item.corpsEmploiPrincipal}-${item.corpsEmploiPrincipalDescription}`
-  }
-
-  const rechercherUtilisateurs = async (terme?: string) => {
-    if (!estTermeValide(terme)) {
-      utilisateurs.value = []
-      return
-    }
-
-    const termeLower = terme!.toLowerCase()
-
-    const cachedKey = Object.keys(cache.value)
-      .filter(k => termeLower.startsWith(k))
-      .sort((a, b) => b.length - a.length)[0]
-
-    if (cachedKey) {
-      utilisateurs.value = cache.value[cachedKey].filter(user =>
-        formatterUtilisateur(user).toLowerCase().includes(termeLower),
-      )
-      return
-    }
-
-    try {
-      chargement.value = true
-      const reponse = await appAxios.getAxios().get<EmployeMinsLsCodev[]>(`Application/Utilisateurs/${terme}`)
-      const donnee = reponse.data ?? reponse // fallback si .data est absent
-
-      utilisateurs.value = donnee
-      cache.value[termeLower] = donnee
-    } catch (e: unknown) {
-      let message = t('csqcRechercheUtilisateur.erreur')
-      if (e instanceof Error) message = e.message
-      else if (typeof e === 'string') message = e
-      erreur.value = message
-      emit('erreur', message)
-    } finally {
-      chargement.value = false
-    }
-  }
-
-  watch(selection, utilisateur => {
-    emit('selection', utilisateur?.courrielProfessionnel ?? null)
-    emit('selectionPlus', utilisateur ?? null)
-  })
-
-  watch(
-    search,
-    terme => {
-      if (!chargement.value) rechercherUtilisateurs(terme)
-    },
-    { immediate: false },
-  )
-</script>
+<template>
+  <div>
+    <v-autocomplete
+      v-model="selection"
+      v-model:search="search"
+      :items="items"
+      :loading="chargementInterne"
+      density="compact"
+      :hide-no-data="!doitAfficherAucunResultat"
+      :no-data-text="$t('csqc.csqcRechercheUtilisateur.aucunResultat')"
+      :item-title="formatterUtilisateur"
+      item-value="id"
+      :placeholder="$t('csqc.csqcRechercheUtilisateur.placeholderRechercheUtilisateur')"
+      return-object
+      autofocus
+      auto-select-first
+      variant="outlined"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import appAxios from '@/outils/appAxios'
+  import type { EmployeMinsLsCodev } from '../modeles/employeMinsLsCodev'
+
+  const props = defineProps<{
+    matriculeDefaut?: string | null
+    chargement?: boolean
+    urlBase: string
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'selection', value: string | null): void
+    (e: 'selectionPlus', utilisateur: EmployeMinsLsCodev | null): void
+    (e: 'erreur', message: string): void
+  }>()
+
+  const { t } = useI18n({ useScope: 'global' })
+
+  /** État interne */
+  const selection = ref<EmployeMinsLsCodev | null>(null)
+  const utilisateurs = ref<EmployeMinsLsCodev[]>([])
+  const search = ref<string>('')
+  const erreur = ref<string | null>(null)
+
+  /** Charge interne : on combine le chargement externe (prop) et l’interne */
+  const chargementInterne = ref(false)
+  const chargementEffectif = computed(() => props.chargement === true || chargementInterne.value)
+
+  /** Items sécurisés pour l’autocomplete */
+  const items = computed<EmployeMinsLsCodev[]>(() => (Array.isArray(utilisateurs.value) ? utilisateurs.value : []))
+
+  /** Cache clé→liste (toujours des arrays valides) */
+  const cache = ref<Record<string, EmployeMinsLsCodev[]>>({})
+
+  /** Détection d’un terme valide (limite les calls) */
+  const estTermeValide = (terme?: string): boolean => !!terme && terme.trim().length >= 4 && !terme.includes('(')
+
+  /** Affichage “aucun résultat” contrôlé */
+  const doitAfficherAucunResultat = computed(
+    () => estTermeValide(search.value) && !chargementEffectif.value && items.value.length === 0,
+  )
+
+  /** Formattage d’un employé en ligne lisible */
+  const formatterUtilisateur = (item: EmployeMinsLsCodev): string => {
+    const lieu = [item.numeroLieuPrincipal, item.nomLieuPrincipal].filter(Boolean).join('-')
+    const corps = [item.corpsEmploiPrincipal, item.corpsEmploiPrincipalDescription].filter(Boolean).join('-')
+    return `${item.prenom} ${item.nom} (${item.matricule}), ${item.courrielProfessionnel}${lieu ? `, ${lieu}` : ''}${corps ? `, ${corps}` : ''}`
+  }
+
+  /** Type guard: on s’assure qu’on a bien un tableau d’employés */
+  function isEmployeArray(x: unknown): x is EmployeMinsLsCodev[] {
+    return (
+      Array.isArray(x) && x.every(u => u && typeof u === 'object' && 'prenom' in u && 'nom' in u && 'matricule' in u)
+    )
+  }
+
+  /** Réinitialise proprement la liste + émet une erreur optionnelle */
+  function safeClearUsers(msg?: string) {
+    utilisateurs.value = []
+    if (msg) {
+      erreur.value = msg
+      emit('erreur', msg)
+    }
+  }
+
+  /** Anti-race condition: on ne retient le résultat que si l’ID correspond */
+  let lastQueryId = 0
+
+  async function rechercherUtilisateurs(terme?: string) {
+    if (!estTermeValide(terme)) {
+      utilisateurs.value = []
+      return
+    }
+
+    const queryId = ++lastQueryId
+    const termeLower = terme!.toLowerCase()
+
+    // Cache prefix-match: on prend la plus longue clé qui matche le début
+    const cachedKey = Object.keys(cache.value)
+      .filter(k => termeLower.startsWith(k))
+      .sort((a, b) => b.length - a.length)[0]
+
+    if (cachedKey) {
+      const cached = cache.value[cachedKey]
+      if (isEmployeArray(cached)) {
+        // Filtre côté client pour les affiner
+        const tl = termeLower
+        utilisateurs.value = cached.filter(user => formatterUtilisateur(user).toLowerCase().includes(tl))
+        return
+      } else {
+        // Cache corrompu (théorique)
+        delete cache.value[cachedKey]
+      }
+    }
+
+    try {
+      chargementInterne.value = true
+      const url = `${props.urlBase}/api/ComposantUI/Utilisateurs/${encodeURIComponent(terme as string)}`
+      const reponse = await appAxios.getAxios().get<unknown>(url)
+      const data = (reponse as any)?.data ?? reponse
+
+      if (queryId !== lastQueryId) {
+        // Une requête plus récente est arrivée, on ignore
+        return
+      }
+
+      if (!isEmployeArray(data)) {
+        // Probable HTML/redirect login/erreur
+        safeClearUsers(t('csqc.csqcRechercheUtilisateur.erreur'))
+        return
+      }
+
+      utilisateurs.value = data
+      cache.value[termeLower] = data
+    } catch (e: unknown) {
+      let message = t('csqc.csqcRechercheUtilisateur.erreur')
+      if (e instanceof Error) message = e.message
+      else if (typeof e === 'string') message = e
+      safeClearUsers(message)
+    } finally {
+      chargementInterne.value = false
+    }
+  }
+
+  /** Debounce recherche */
+  let timer: number | undefined
+  watch(
+    search,
+    terme => {
+      if (chargementEffectif.value) return
+      window.clearTimeout(timer)
+      timer = window.setTimeout(() => rechercherUtilisateurs(terme), 250)
+    },
+    { flush: 'post' },
+  )
+
+  /** Émettre la sélection (email & objet complet) */
+  watch(selection, utilisateur => {
+    emit('selection', utilisateur?.courrielProfessionnel ?? null)
+    emit('selectionPlus', utilisateur ?? null)
+  })
+
+  /** Préchargement par matricule par défaut */
+  watch(
+    () => props.matriculeDefaut,
+    async (nv, ov) => {
+      // Si vide / nul → on nettoie
+      if (!nv || nv.trim() === '') {
+        selection.value = null
+        search.value = ''
+        utilisateurs.value = []
+        return
+      }
+
+      // Si la même valeur est déjà sélectionnée → rien à faire
+      if (selection.value?.matricule === nv) return
+
+      // Recherche par matricule par défaut
+      await rechercherUtilisateurs(nv)
+      if (utilisateurs.value.length > 0) {
+        const utilisateur = utilisateurs.value.find(u => u.matricule === nv) ?? null
+        if (utilisateur) {
+          search.value = formatterUtilisateur(utilisateur)
+          selection.value = utilisateur
+        } else {
+          // Pas trouvé → reset “propre”
+          selection.value = null
+          search.value = nv // ou ''
+        }
+      }
+    },
+    { immediate: true },
+  )
+</script>

package/composants/gabarit/csqcMenu.vue

@@ -1,274 +1,274 @@
-<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
-          v-if="doitAfficherItemMenu(item)"
-          variant="text"
-          :to="item.path"
-          :active="item.path === route"
-          :active-color="'white'"
-          :style="'min-width: 100px;'"
-          >{{ item.title }}</v-btn
-        >
-      </div>
-      <v-spacer></v-spacer>
-      <!-- Sous Liste -->
-      <v-menu
-        v-for="(item, index) in filtrerSousListe"
-        :key="index"
-        open-on-hover
-      >
-        <template #activator="{ props }">
-          <v-btn
-            color="white"
-            v-bind="props"
-            :active="estActifSousliste(item)"
-          >
-            {{ 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"
-              :active="sousitem.path === route"
-              >{{ sousitem.title }}</v-btn
-            >
-          </v-list-item>
-        </v-list>
-      </v-menu>
-      <v-btn
-        v-if="btnDeconnexion"
-        variant="text"
-        :style="'min-width: 100px;'"
-        @click="deconnexion"
-        >{{ $t('csqc.csqcMenu.deconnexion') }}</v-btn
-      >
-    </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"
-      nav
-    >
-      <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 #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>
-          <v-list-item
-            v-if="btnDeconnexion"
-            :title="$t('csqc.csqcMenu.deconnexion')"
-            @click="deconnexion"
-          />
-        </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,
-    },
-    btnDeconnexion: {
-      type: Boolean,
-      required: false,
-    },
-    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 emit = defineEmits(['deconnexion'])
-
-  /*const verifierDroits = (monelement: string) => {
-    return props.droitsMap[monelement] || false
-  }*/
-
-  const deconnexion = () => {
-    emit('deconnexion')
-  }
-
-  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 = (item: SousListe) => {
-    // Vérifie si un des sous-items correspond à la route
-    return obtenirItemsSousListeSelonDroits(item.id).some(sousitem => sousitem.path === props.route)
-  }
-</script>
-<style lang="css" scoped>
-  /* desktop background de la barre de menu et hauteur */
-  .v-toolbar {
-    background-color: #223654;
-    height: 64px;
-  }
-
-  /* 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;
-  }
-  /* mobile drawer,  Calcule la hauteur comme étant 100% moins 132px pour afficher le scroll */
-  :deep(.v-navigation-drawer__content) {
-    height: calc(100% - 132px);
-  }
-</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.nom"
+        class="pt-1"
+      >
+        <v-btn
+          v-if="doitAfficherItemMenu(item)"
+          variant="text"
+          :to="item.path"
+          :active="item.path === route"
+          :active-color="'white'"
+          :style="'min-width: 100px;'"
+          >{{ item.nom }}</v-btn
+        >
+      </div>
+      <v-spacer></v-spacer>
+      <!-- Sous Liste -->
+      <v-menu
+        v-for="(item, index) in filtrerSousListe"
+        :key="index"
+        open-on-hover
+      >
+        <template #activator="{ props }">
+          <v-btn
+            color="white"
+            v-bind="props"
+            :active="estActifSousliste(item)"
+          >
+            {{ 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"
+              :active="sousitem.path === route"
+              >{{ sousitem.nom }}</v-btn
+            >
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-btn
+        v-if="btnDeconnexion"
+        variant="text"
+        :style="'min-width: 100px;'"
+        @click="deconnexion"
+        >{{ $t('csqc.csqcMenu.deconnexion') }}</v-btn
+      >
+    </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"
+      nav
+    >
+      <v-list>
+        <div
+          v-for="item in filtrerMenuItems"
+          :key="item.nom"
+        >
+          <v-list-item
+            :to="item.path"
+            :active="item.path === route"
+            :title="item.nom"
+          />
+        </div>
+        <div
+          v-for="item in filtrerSousListe"
+          :key="item.id"
+        >
+          <v-list-group :value="item.nom">
+            <template #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.nom"
+                :value="sousitem.nom"
+                :to="sousitem.path"
+              />
+            </div>
+          </v-list-group>
+          <v-list-item
+            v-if="btnDeconnexion"
+            :title="$t('csqc.csqcMenu.deconnexion')"
+            @click="deconnexion"
+          />
+        </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,
+    },
+    btnDeconnexion: {
+      type: Boolean,
+      required: false,
+    },
+    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 emit = defineEmits(['deconnexion'])
+
+  /*const verifierDroits = (monelement: string) => {
+    return props.droitsMap[monelement] || false
+  }*/
+
+  const deconnexion = () => {
+    emit('deconnexion')
+  }
+
+  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 = (item: SousListe) => {
+    // Vérifie si un des sous-items correspond à la route
+    return obtenirItemsSousListeSelonDroits(item.id).some(sousitem => sousitem.path === props.route)
+  }
+</script>
+<style lang="css" scoped>
+  /* desktop background de la barre de menu et hauteur */
+  .v-toolbar {
+    background-color: #223654;
+    height: 64px;
+  }
+
+  /* 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;
+  }
+  /* mobile drawer,  Calcule la hauteur comme étant 100% moins 132px pour afficher le scroll */
+  :deep(.v-navigation-drawer__content) {
+    height: calc(100% - 132px);
+  }
+</style>

package/index.ts

@@ -17,6 +17,7 @@ import csqcTexteBilingue from './composants/csqcTexteBilingue.vue'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 import csqcEditeurTexteRiche from './composants/csqcEditeurTexteRiche.vue'
 import csqcImportCSV from './composants/csqcImportCSV.vue'
+import csqcRechercheUtilisateur from './composants/csqcRechercheUtilisateur.vue'
 import validateurs from './composants/validateurs'
 
 // modèles
@@ -53,6 +54,7 @@ export {
   csqcEditeurTexteRiche,
   validateurs,
   csqcImportCSV,
+  csqcRechercheUtilisateur,
 
   modeleSnackbar,
   modeleDatatableColonne,

package/locales/fr.json

@@ -62,7 +62,9 @@
       "placeholderRechercheUtilisateur": "Rechercher un utilisateur",
       "revenirRecherche": "Retour à la recherche",
       "utilisateurIntrouvable": "Employé introuvable",
-      "utilisateurs": "Employé"
+      "utilisateurs": "Employé",
+      "aucunResultat": "Aucun résultat trouvé",
+      "erreur": "Une erreur est survenue lors de la recherche de l'utilisateur."
     },
     "label": {
       "actif": "Actif",

package/modeles/composants/csqcMenuModele.ts

@@ -1,18 +1,18 @@
-export interface MenuItem {
-  title: string
-  path: string
-  droit: string
-}
-
-export interface SousListe {
-  droit: string
-  id: number
-  nom: string
-}
-
-export interface SousListeItems {
-  parentId: number
-  title: string
-  path: string
-  droit: string
-}
+export interface MenuItem {
+  nom: string
+  path: string
+  droit: string
+}
+
+export interface SousListe {
+  droit: string
+  id: number
+  nom: string
+}
+
+export interface SousListeItems {
+  parentId: number
+  nom: string
+  path: string
+  droit: string
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",
@@ -13,7 +13,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "vuetify": "^3.8.0",
+    "vuetify": "^3.9.0",
     "vue-i18n": "^11.0.0",
     "@e965/xlsx": "^0.20.3",
     "tinymce": "^8.0.2",
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@types/node": "^22.13.5",
     "@vitejs/plugin-vue": "^5.2.1",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.3",
     "vite": "^7.0.0"
   },
   "peerDependencies": {