codevdesign 1.0.34 → 1.0.36

package/composants/csqcModaleSaisie.vue

@@ -0,0 +1,95 @@
+<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,
+    multiligneParam: boolean = false,
+    largeurParam = '525px',
+  ) => {
+    texte.value = message
+    titre.value = titreParam
+    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/csqcOptionSwitch.vue

@@ -0,0 +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="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/csqcRecherche.vue

@@ -0,0 +1,213 @@
+<template>
+  <div>
+    <v-row
+      dense
+      class="pt-0 mt-0"
+    >
+      <v-col
+        cols="12"
+        sm="auto"
+      >
+        <slot name="recherche"></slot>
+        <v-text-field
+          v-if="afficher"
+          v-model="rechercheLocale"
+          :label="rechercheTexte ? rechercheTexte : $t('csqc.label.recherche')"
+          single-line
+          density="compact"
+          hide-details
+          v-bind="$attrs"
+          clearable
+          :rounded="0"
+          variant="outlined"
+          max-width="640"
+          min-width="500"
+          class="BarreRecherche"
+          :loading="chargement"
+          :disabled="chargement || desactiver"
+        >
+          <template #append>
+            <v-btn
+              class="BarreRechercheBackIcone"
+              :loading="chargement"
+              :disabled="chargement || desactiver"
+            >
+              <v-icon
+                class="BarreRechercheIcone"
+                icon="mdi-magnify"
+              />
+            </v-btn>
+          </template>
+        </v-text-field>
+      </v-col>
+      <!-- Entre recherche et ajouté-->
+      <v-col
+        cols="12"
+        sm="auto"
+        class="pt-1 mt-0 pb-0 mb-0"
+      >
+        <slot name="milieu" />
+      </v-col>
+
+      <!-- Affichage des boutons et icônes-->
+      <v-col
+        cols="12"
+        sm="auto"
+        class="flex-grow-1 d-flex justify-end"
+      >
+        <slot name="droite" />
+      </v-col>
+    </v-row>
+    <v-row
+      dense
+      class="pt-0 mt-0"
+    >
+      <v-col
+        cols="12"
+        :lg="rechercheAvanceeLargeur"
+      >
+        <v-expansion-panels
+          v-if="rechercheAvancee"
+          static
+          :readonly="chargement || desactiver"
+          expand-icon=""
+          @update:model-value="onPanelChange"
+        >
+          <v-expansion-panel
+            flat
+            elevation="0"
+          >
+            <v-expansion-panel-title
+              style="color: #095797"
+              class="pl-0 ml-0"
+              ><slot name="rechercheAvanceeTitre">
+                <span
+                  style="text-decoration: underline"
+                  v-html="rechercheAvanceeTexte ? rechercheAvanceeTexte : $t('csqc.label.rechercheAvanceeDefaut')"
+                ></span>
+                <slot name="rechercheAvanceeApresTitre"></slot
+              ></slot>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text :style="rechercheAvanceeStyle">
+              <slot name="rechercheAvancee"></slot>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue'
+
+  // Props
+  const props = defineProps({
+    afficher: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    rechercheTexte: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    rechercheAvanceeTexte: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    rechercheAvanceeLargeur: {
+      type: Number,
+      required: false,
+      default: 12,
+    },
+    chargement: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    desactiver: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    recherche: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    rechercheAvancee: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    rechercheAvanceeStyle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  })
+
+  const emit = defineEmits<{
+    (e: 'update:recherche', recherche: string): void
+    (e: 'panneau:etat', isOpen: boolean): void //  événement pour l'ouverture/fermeture du panneau
+  }>()
+
+  // Création d'une variable locale pour gérer la recherche
+  const rechercheLocale = ref(props.recherche)
+
+  // Surveiller les changements de la prop `recherche` et mettre à jour `rechercheLocale`
+  watch(
+    () => props.recherche,
+    nouvelleValeur => {
+      rechercheLocale.value = nouvelleValeur
+    },
+  )
+
+  // Émettre l'événement `update:recherche` chaque fois que l'utilisateur tape
+  watch(rechercheLocale, nouvelleValeur => {
+    emit('update:recherche', nouvelleValeur!)
+  })
+
+  // Fonction pour émettre l'événement d'ouverture/fermeture du panneau
+  const onPanelChange = (val: unknown) => {
+    if (typeof val === 'string' || typeof val === 'number' || val === null) {
+      const isOpen = val !== null && val !== ''
+      emit('panneau:etat', isOpen)
+    } else {
+      emit('panneau:etat', false)
+    }
+  }
+</script>
+
+<style lang="css">
+  /* barre de recherche design QC*/
+  .BarreRecherche {
+    min-height: 40px;
+  }
+
+  .BarreRechercheBackIcone {
+    border-right: 1px solid #808a9d;
+    border-top: 1px solid #808a9d;
+    border-bottom: 1px solid #808a9d;
+    background-color: #095797 !important;
+    height: 40px !important;
+    width: 40px !important;
+    max-width: 40px !important;
+    min-width: 40px !important;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    border-radius: 0;
+    margin-left: -16px;
+  }
+
+  /* icone loupe */
+  .BarreRechercheIcone {
+    font-size: 34px !important;
+    margin-left: 1px !important;
+    margin-top: 2px !important;
+    color: white !important;
+  }
+</style>

package/composants/csqcRechercheUtilisateur.vue

@@ -0,0 +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>

package/composants/csqcSnackbar.vue

@@ -0,0 +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>