codevdesign 1.0.39 → 1.0.40

package/composants/csqcRechercheUtilisateur.vue

@@ -1,197 +1,198 @@
-<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>
+<template>
+  <div>
+    <v-autocomplete
+      v-model="selection"
+      v-model:search="search"
+      :items="items"
+      v-bind="$attrs"
+      :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/csqcSnackbar.vue

@@ -1,88 +1,88 @@
-<template>
-  <v-snackbar
-    v-model="snackbar"
-    v-bind="$attrs"
-    :timeout="tempsFinal"
-    :style="styleCss"
-    color="success"
-    multi-line
-    @update:model-value="fermer"
-  >
-    <template v-if="props.titre || props.message">
-      <b style="font-size: 12pt">{{ props.titre }}</b>
-      <br v-if="props.titre" />
-      <b>{{ props.message }}</b>
-    </template>
-
-    <template #actions>
-      <!-- on affiche tjrs si c'est -1 car on ne pourra pas fermer le snack -->
-      <v-icon
-        v-if="props.btnFermer || props.temps === -1"
-        color="white"
-        style="cursor: pointer"
-        @click.stop="fermer"
-      >
-        mdi-close
-      </v-icon>
-    </template>
-  </v-snackbar>
-</template>
-<script lang="ts" setup>
-  import { computed, ref, watch, type PropType } from 'vue'
-
-  // Définir les props avec les types
-  const props = defineProps({
-    styleCss: {
-      type: String,
-      required: false,
-    },
-    temps: {
-      type: Number,
-      required: false,
-      default: 4000,
-      validator(value: number) {
-        // Si la valeur est inférieure à -1, on la remplace par -1
-        if (value < -1) {
-          return false // Laisser échouer la validation pour gérer ça dans une logique personnalisée
-        }
-        // Validation que la valeur soit comprise entre -1 et Number.MAX_VALUE
-        return value <= Number.MAX_VALUE
-      },
-    },
-    message: {
-      type: String,
-      required: true,
-    },
-    titre: {
-      type: String,
-      required: false,
-    },
-    btnFermer: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  })
-  const emit = defineEmits(['fermer:snackbar'])
-  const fermer = (): void => {
-    snackbar.value = false
-    emit('fermer:snackbar')
-  }
-  // Déclarer l'état réactif pour snackbar
-  const snackbar = ref(false)
-  const message = computed(() => props.message)
-  const tempsFinal = computed(() => {
-    if (props.temps < -1) {
-      return -1 // Si la valeur est inférieure à -1, on la met à -1
-    }
-    if (props.temps >= 0 && props.temps < 1000) return 1000 // on met 1 seconde minimum sinon one ne la voit pas
-
-    return props.temps // Sinon, on retourne la valeur de la prop
-  })
-
-  watch(message, nouveau => {
-    if (nouveau != null && nouveau !== '') {
-      snackbar.value = true
-    }
-  })
-</script>
+<template>
+  <v-snackbar
+    v-model="snackbar"
+    v-bind="$attrs"
+    :timeout="tempsFinal"
+    :style="styleCss"
+    color="success"
+    multi-line
+    @update:model-value="fermer"
+  >
+    <template v-if="props.titre || props.message">
+      <b style="font-size: 12pt">{{ props.titre }}</b>
+      <br v-if="props.titre" />
+      <b>{{ props.message }}</b>
+    </template>
+
+    <template #actions>
+      <!-- on affiche tjrs si c'est -1 car on ne pourra pas fermer le snack -->
+      <v-icon
+        v-if="props.btnFermer || props.temps === -1"
+        color="white"
+        style="cursor: pointer"
+        @click.stop="fermer"
+      >
+        mdi-close
+      </v-icon>
+    </template>
+  </v-snackbar>
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch, type PropType } from 'vue'
+
+  // Définir les props avec les types
+  const props = defineProps({
+    styleCss: {
+      type: String,
+      required: false,
+    },
+    temps: {
+      type: Number,
+      required: false,
+      default: 4000,
+      validator(value: number) {
+        // Si la valeur est inférieure à -1, on la remplace par -1
+        if (value < -1) {
+          return false // Laisser échouer la validation pour gérer ça dans une logique personnalisée
+        }
+        // Validation que la valeur soit comprise entre -1 et Number.MAX_VALUE
+        return value <= Number.MAX_VALUE
+      },
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    titre: {
+      type: String,
+      required: false,
+    },
+    btnFermer: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  })
+  const emit = defineEmits(['fermer:snackbar'])
+  const fermer = (): void => {
+    snackbar.value = false
+    emit('fermer:snackbar')
+  }
+  // Déclarer l'état réactif pour snackbar
+  const snackbar = ref(false)
+  const message = computed(() => props.message)
+  const tempsFinal = computed(() => {
+    if (props.temps < -1) {
+      return -1 // Si la valeur est inférieure à -1, on la met à -1
+    }
+    if (props.temps >= 0 && props.temps < 1000) return 1000 // on met 1 seconde minimum sinon one ne la voit pas
+
+    return props.temps // Sinon, on retourne la valeur de la prop
+  })
+
+  watch(message, nouveau => {
+    if (nouveau != null && nouveau !== '') {
+      snackbar.value = true
+    }
+  })
+</script>