codevdesign 1.0.76 → 1.0.78

package/composants/csqcModaleSaisie.vue

@@ -1,97 +1,97 @@
-<template>
-  <csqcDialogue
-    ref="modale"
-    :titre="titre"
-    activator="supprimer"
-    v-bind="$attrs"
-    :largeur="largeur"
-    @ok="confirmer"
-    @annuler="annuler"
-  >
-    <v-form
-      ref="form"
-      @submit.prevent
-    >
-      <v-row>
-        <v-col
-          cols="12"
-          class="pa-0 ma-0"
-        >
-          <span v-html="texte"></span>
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <v-col
-          cols="12"
-          class="pa-0 ma-0"
-        >
-          <v-text-field
-            v-if="!multiligne"
-            v-model="reponse"
-            autofocus
-            @keyup.enter="confirmer"
-          />
-          <v-textarea
-            v-if="multiligne"
-            v-model="reponse"
-            :rows="3"
-            autofocus
-          />
-        </v-col>
-      </v-row>
-    </v-form>
-  </csqcDialogue>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import csqcDialogue from './csqcDialogue.vue'
-
-  const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
-  const utilisateurATermine = ref(false)
-  const reponse = ref<string | null>(null)
-  const texte = ref('')
-  const titre = ref('')
-  const largeur = ref('525px')
-  const multiligne = ref(false)
-
-  const ouvrir = async (
-    titreParam: string,
-    message: string,
-    valeurDefaut: string | null = null,
-    multiligneParam: boolean = false,
-    largeurParam = '525px',
-  ) => {
-    texte.value = message
-    titre.value = titreParam
-    reponse.value = valeurDefaut
-    multiligne.value = multiligneParam
-    largeur.value = largeurParam
-    utilisateurATermine.value = false
-    modale.value?.ouvrir()
-
-    while (!utilisateurATermine.value) {
-      await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
-    }
-
-    return reponse.value
-  }
-
-  const confirmer = (): void => {
-    utilisateurATermine.value = true
-    fermer()
-  }
-
-  const annuler = (): void => {
-    reponse.value = null
-    utilisateurATermine.value = true
-    fermer()
-  }
-
-  const fermer = (): void => {
-    modale.value?.fermer()
-  }
-
-  defineExpose({ ouvrir, fermer })
-</script>
+<template>
+  <csqcDialogue
+    ref="modale"
+    :titre="titre"
+    activator="supprimer"
+    :largeur="largeur"
+    v-bind="$attrs"
+    @ok="confirmer"
+    @annuler="annuler"
+  >
+    <v-form
+      ref="form"
+      @submit.prevent
+    >
+      <v-row>
+        <v-col
+          cols="12"
+          class="pa-0 ma-0"
+        >
+          <span v-html="texte"></span>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col
+          cols="12"
+          class="pa-0 ma-0"
+        >
+          <v-text-field
+            v-if="!multiligne"
+            v-model="reponse"
+            autofocus
+            @keyup.enter="confirmer"
+          />
+          <v-textarea
+            v-if="multiligne"
+            v-model="reponse"
+            :rows="3"
+            autofocus
+          />
+        </v-col>
+      </v-row>
+    </v-form>
+  </csqcDialogue>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import csqcDialogue from './csqcDialogue.vue'
+
+  const modale = ref<InstanceType<typeof csqcDialogue> | null>(null)
+  const utilisateurATermine = ref(false)
+  const reponse = ref<string | null>(null)
+  const texte = ref('')
+  const titre = ref('')
+  const largeur = ref('525px')
+  const multiligne = ref(false)
+
+  const ouvrir = async (
+    titreParam: string,
+    message: string,
+    valeurDefaut: string | null = null,
+    multiligneParam: boolean = false,
+    largeurParam = '525px',
+  ) => {
+    texte.value = message
+    titre.value = titreParam
+    reponse.value = valeurDefaut
+    multiligne.value = multiligneParam
+    largeur.value = largeurParam
+    utilisateurATermine.value = false
+    modale.value?.ouvrir()
+
+    while (!utilisateurATermine.value) {
+      await new Promise(resolve => setTimeout(resolve, 100)) // Attendre 100ms
+    }
+
+    return reponse.value
+  }
+
+  const confirmer = (): void => {
+    utilisateurATermine.value = true
+    fermer()
+  }
+
+  const annuler = (): void => {
+    reponse.value = null
+    utilisateurATermine.value = true
+    fermer()
+  }
+
+  const fermer = (): void => {
+    modale.value?.fermer()
+  }
+
+  defineExpose({ ouvrir, fermer })
+</script>

package/composants/csqcRechercheUtilisateur.vue

@@ -1,198 +1,198 @@
-<template>
-  <div>
-    <v-autocomplete
-      v-model="selection"
-      v-model:search="search"
-      :items="items"
-      v-bind="$attrs"
-      :loading="chargementInterne"
-      :density="($attrs.density as any) ?? '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="($attrs.autofocus as any) ?? true"
-      auto-select-first
-      :variant="($attrs.variant as any) ?? '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"
+      :loading="chargementInterne"
+      :density="($attrs.density as any) ?? '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="($attrs.autofocus as any) ?? true"
+      auto-select-first
+      :variant="($attrs.variant as any) ?? 'outlined'"
+      v-bind="$attrs"
+    />
+  </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>