codevdesign 0.0.91 → 0.0.92

package/composants/csqcOptionSwitch.vue

@@ -1,124 +1,120 @@
-<template>
-  <div>
-    <v-row dense>
-      <v-col
-        cols="9"
-        md="8"
-        lg="6"
-        class="d-flex align-end"
-      >
-        <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
-      </v-col>
-      <v-col
-        cols="2"
-        class="d-flex align-end justify-end"
-      >
-        <v-switch
-          v-model="maValeur"
-          :disabled="desactiver"
-          :density="densite"
-          :inset="inset"
-          hide-details
-          @update:model-value="sauvegarder"
-        />
-      </v-col>
-    </v-row>
-    <v-row dense>
-      <v-col
-        cols="9"
-        md="8"
-      >
-        <span v-html="texteDetaille"></span>
-      </v-col>
-    </v-row>
-  </div>
-</template>
-<script setup lang="ts">
-  import { ref, watch, onMounted, type PropType } from 'vue'
-
-  // Définition des props
-  const props = defineProps({
-    valeurInverse: {
-      type: Boolean,
-      default: false,
-    },
-    desactiver: {
-      type: Boolean,
-      default: false,
-    },
-    inset: {
-      type: Boolean,
-      default: true,
-    },
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    texte: {
-      type: String,
-      required: true,
-    },
-    texteDetaille: {
-      type: String,
-      required: true,
-    },
-    densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'compact' },
-  })
-
-  // Définition de l'événement
-  const emit = defineEmits(['update:modelValue'])
-
-  // Référence pour la valeur interne
-  const maValeur = ref<boolean>(false)
-
-  // Montée du composant
-  onMounted(() => {
-    if (props.valeurInverse) {
-      maValeur.value = !props.modelValue
-    } else {
-      maValeur.value = props.modelValue
-    }
-  })
-
-  // Watcher pour suivre les changements de la prop 'value'
-  watch(
-    () => props.modelValue,
-    newValue => {
-      if (props.valeurInverse) {
-        maValeur.value = !newValue
-      } else {
-        maValeur.value = newValue
-      }
-    },
-  )
-
-  watch(
-    () => props.valeurInverse,
-    newValue => {
-      if (props.valeurInverse) {
-        maValeur.value = newValue
-      } else {
-        maValeur.value = !newValue
-      }
-    },
-  )
-
-  // Méthode pour sauvegarder la valeur
-  const sauvegarder = () => {
-    if (props.valeurInverse) {
-      emit('update:modelValue', !maValeur.value)
-    } else {
-      emit('update:modelValue', maValeur.value)
-    }
-  }
-</script>
-
-<style lang="css" scoped>
-  .labelSwitchSiSwitchApres {
-    font-weight: bold;
-    margin-top: 25px;
-  }
-  .v-switch {
-    margin-bottom: -10px; /* aligner le switch avec son texte*/
-  }
-</style>
+<template>
+  <div>
+    <v-row dense>
+      <v-col
+        cols="9"
+        md="8"
+        lg="6"
+        class="d-flex align-end"
+      >
+        <div class="labelSwitchSiSwitchApres">{{ texte }}</div>
+      </v-col>
+      <v-col
+        cols="2"
+        class="d-flex align-end justify-end"
+      >
+        <v-switch
+          v-model="maValeur"
+          :disabled="desactiver"
+          density="compact"
+          inset
+          v-bind="$attrs"
+          hide-details
+          @update:model-value="sauvegarder"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col
+        cols="9"
+        md="8"
+      >
+        <span v-html="texteDetaille"></span>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, watch, onMounted, type PropType } from 'vue'
+
+  // Définition des props
+  const props = defineProps({
+    valeurInverse: {
+      type: Boolean,
+      default: false,
+    },
+    desactiver: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    texte: {
+      type: String,
+      required: true,
+    },
+    texteDetaille: {
+      type: String,
+      required: true,
+    },
+  })
+
+  // Définition de l'événement
+  const emit = defineEmits(['update:modelValue'])
+
+  // Référence pour la valeur interne
+  const maValeur = ref<boolean>(false)
+
+  // Montée du composant
+  onMounted(() => {
+    if (props.valeurInverse) {
+      maValeur.value = !props.modelValue
+    } else {
+      maValeur.value = props.modelValue
+    }
+  })
+
+  // Watcher pour suivre les changements de la prop 'value'
+  watch(
+    () => props.modelValue,
+    newValue => {
+      if (props.valeurInverse) {
+        maValeur.value = !newValue
+      } else {
+        maValeur.value = newValue
+      }
+    },
+  )
+
+  watch(
+    () => props.valeurInverse,
+    newValue => {
+      if (props.valeurInverse) {
+        maValeur.value = newValue
+      } else {
+        maValeur.value = !newValue
+      }
+    },
+  )
+
+  // Méthode pour sauvegarder la valeur
+  const sauvegarder = () => {
+    if (props.valeurInverse) {
+      emit('update:modelValue', !maValeur.value)
+    } else {
+      emit('update:modelValue', maValeur.value)
+    }
+  }
+</script>
+
+<style lang="css" scoped>
+  .labelSwitchSiSwitchApres {
+    font-weight: bold;
+    margin-top: 25px;
+  }
+  .v-switch {
+    margin-bottom: -10px; /* aligner le switch avec son texte*/
+  }
+</style>

package/composants/csqcRechercheUtilisateur.vue

@@ -1,197 +1,197 @@
-<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"
+      :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>