codevdesign 1.0.63 → 1.0.65

package/composants/csqcTable/csqcTable.vue

@@ -74,7 +74,7 @@
           v-bind="$attrs"
           :headers="colonnesAffichees"
           :item-key="itemKey"
-          :items="liste"
+          :items="listeEffective"
           :search="recherche"
           :loading="chargementListe"
           :hover="hover"
@@ -98,6 +98,14 @@
             />
           </template>
 
+          <!-- Icône ancre (drag & drop) -->
+          <template
+            v-if="estEnModeModificateurOrdre"
+            #item.ancre
+          >
+            <v-icon class="ancre-drag">mdi-drag-vertical</v-icon>
+          </template>
+
           <!-- boutons supprimer et modifier -->
           <!-- eslint-disable-next-line -->
           <template v-slot:item.action="{ item }">
@@ -148,7 +156,7 @@
 </template>
 <script setup lang="ts">
   /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { computed, onMounted, ref, type PropType, type Slots } from 'vue'
+  import { computed, onBeforeUnmount, nextTick, onMounted, ref, watch, type PropType, type Slots } from 'vue'
   import { useI18n } from 'vue-i18n'
   import type { SortItem } from 'vuetify/lib/components/VDataTable/composables/sort.mjs'
 
@@ -158,6 +166,7 @@
   import ModaleChoix from './csqcTableModaleChoixColonnes.vue'
   import axios from '../../outils/appAxios'
   import Colonne from '../../modeles/composants/datatableColonne'
+  import Sortable from 'sortablejs'
 
   type VueColonnes = {
     nomVue: string
@@ -166,7 +175,15 @@
   }
 
   const slots = defineSlots<Slots>()
-  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier', 'donneesExportees', 'panneau:etat'])
+  const emit = defineEmits([
+    'ajouter',
+    'cliqueLigne',
+    'supprimer',
+    'modifier',
+    'donneesExportees',
+    'panneau:etat',
+    'ordreRangeeModifie',
+  ])
 
   // ============================================================================
   // Props
@@ -229,6 +246,9 @@
       type: [Array, String] as PropType<string | string[] | SortItem[] | undefined>,
       default: undefined,
     },
+
+    // Ordre manuel (drag & drop)
+    modificateurOrdreChamp: { type: String, default: undefined },
   })
 
   const { t } = useI18n({ useScope: 'global' })
@@ -240,6 +260,8 @@
   // ============================================================================
   // State - Choix de colonnes (vues sauvegardées) + sélection courante
   // ============================================================================
+  const datatable = ref<any>(null)
+  const listeInterne = ref<Record<string, any>[]>([])
   const modaleChoix = ref<InstanceType<typeof ModaleChoix> | null>(null)
   const openChoixColonnes = ref(false)
   const choix = ref<VueColonnes[]>([]) // la liste des vues disponibles
@@ -319,6 +341,29 @@
     if (defaut) appliquerVue(defaut)
   }
 
+  // ============================================================================
+  // Computed - Mode ordre manuel
+  // ============================================================================
+  const estEnModeModificateurOrdre = computed(() => {
+    if (!props.modificateurOrdreChamp) return false
+
+    if (props.liste == null) return false
+
+    // Vérifie que le champ existe dans les données (pas nécessairement une colonne visible)
+    if (!props.liste.length) return false // liste vide, on attend sans avertissement
+
+    const premierItem = props.liste[0]
+
+    if (!(props.modificateurOrdreChamp in premierItem)) {
+      console.log(
+        `[csqcTable] modificateurOrdreChamp="${props.modificateurOrdreChamp}" n'existe pas dans les données. Le mode d'ordonnancement est désactivé.`,
+      )
+      return false
+    }
+
+    return true
+  })
+
   // ============================================================================
   // Computed - Colonnes à envoyer à la modale (liste ordonnée + libellé)
   // ============================================================================
@@ -340,24 +385,36 @@
     // 1) colonnes "disponibles" (on enlève celles explicitement cachées)
     const colonnesFiltre = props.colonnes.filter(c => (c as any).align !== 'd-none')
 
-    // 2) si feature OFF ou pas de vues sauvegardées => on retourne tout
-    if (!props.permettreChoixColonnes) return colonnesFiltre
-    if (!choix.value?.length) return colonnesFiltre
+    // 2) résoudre la liste selon les vues sauvegardées (choix colonnes)
+    let colonnesBase: Colonne[]
+    if (!props.permettreChoixColonnes || !choix.value?.length) {
+      colonnesBase = colonnesFiltre
+    } else {
+      // retrouver la vue sélectionnée (sinon la défaut)
+      const choixSelection = choix.value.find(
+        x => valeurSelectionChoixColonnes.value === x.nomVue || (!valeurSelectionChoixColonnes.value && x.defaut),
+      )
+      colonnesBase = choixSelection
+        ? (choixSelection.colonnes.map(k => colonnesFiltre.find(c => String(c.key) === k)).filter(Boolean) as Colonne[])
+        : colonnesFiltre
+    }
 
-    // 3) retrouver la vue sélectionnée (sinon la défaut)
-    const choixSelection = choix.value.find(
-      x => valeurSelectionChoixColonnes.value === x.nomVue || (!valeurSelectionChoixColonnes.value && x.defaut),
-    )
-    if (!choixSelection) return colonnesFiltre
+    // 3) ordre manuel actif : colonne ancre en tête + toutes les colonnes non triables
+    if (estEnModeModificateurOrdre.value) {
+      const colonneAncre = { key: 'ancre', title: '', sortable: false, width: '40px' } as Colonne
+      return [colonneAncre, ...colonnesBase.map(c => ({ ...c, sortable: false }))]
+    }
 
-    // 4) reconstruire la liste de headers dans l’ordre sauvegardé
-    return choixSelection.colonnes.map(k => colonnesFiltre.find(c => String(c.key) === k)).filter(Boolean) as Colonne[]
+    return colonnesBase
   })
 
   // ============================================================================
   // Computed - Tri initial (Vuetify sort-by)
   // ============================================================================
   const triDepart = computed<SortItem[] | undefined>(() => {
+    // ordre manuel : tri forcé sur le champ ordre, croissant
+    if (estEnModeModificateurOrdre.value) return [{ key: props.modificateurOrdreChamp!, order: 'asc' }]
+
     if (props.triParDepart == null) return undefined
 
     const ordre = props.triDescDepart ? 'desc' : 'asc'
@@ -373,6 +430,7 @@
   })
 
   const estMultiTriActif = computed(() => {
+    if (estEnModeModificateurOrdre.value) return false
     if (props.triParDepart == null) return false
     if (typeof props.triParDepart === 'string') return false
     return true
@@ -387,6 +445,73 @@
     return props.liste.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(q)))
   })
 
+  const listeEffective = computed(() => (estEnModeModificateurOrdre.value ? listeInterne.value : props.liste))
+
+  // ============================================================================
+  // Drag & drop - Ordre manuel (Sortable.js)
+  // ============================================================================
+  let sortableInstance: Sortable | null = null
+
+  // Synchronise listeInterne quand le parent met à jour props.liste
+  watch(
+    () => props.liste,
+    val => {
+      listeInterne.value = [...val]
+    },
+    { immediate: true },
+  )
+
+  // Init/destroy Sortable si la prop change en cours de vie du composant
+  watch(estEnModeModificateurOrdre, actif => {
+    if (actif) nextTick(initSortable)
+    else destroySortable()
+  })
+
+  onMounted(() => {
+    if (estEnModeModificateurOrdre.value) nextTick(initSortable)
+  })
+
+  onBeforeUnmount(() => {
+    destroySortable()
+  })
+
+  function initSortable() {
+    const tableEl = datatable.value?.$el as HTMLElement | undefined
+    if (!tableEl) return
+    const tbody = tableEl.querySelector('tbody')
+    if (!tbody) return
+
+    destroySortable() // garantit une seule instance active
+
+    sortableInstance = Sortable.create(tbody, {
+      animation: 150,
+      handle: '.ancre-drag',
+      onEnd(event) {
+        const oldIndex = event.oldIndex
+        const newIndex = event.newIndex
+        if (oldIndex == null || newIndex == null || oldIndex === newIndex) return
+
+        const items = [...listeInterne.value]
+        const moved = items.splice(oldIndex, 1)[0]
+        items.splice(newIndex, 0, moved)
+
+        // Recalcule la valeur du champ ordre pour maintenir la cohérence
+        const champ = props.modificateurOrdreChamp!
+        items.forEach((item, idx) => {
+          item[champ] = idx + 1
+        })
+
+        listeInterne.value = items
+        emit('ordreRangeeModifie', [...items])
+      },
+    })
+  }
+
+  function destroySortable() {
+    sortableInstance?.destroy()
+    sortableInstance = null
+  }
+
   // ============================================================================
   // UI Actions - Recherche / Table events
   // ============================================================================
@@ -534,4 +659,13 @@
   .text-grisMoyen:hover {
     color: #095797 !important;
   }
+
+  /* icône d'ancre drag & drop */
+  .ancre-drag {
+    cursor: grab;
+    color: #808a9d;
+  }
+  .ancre-drag:active {
+    cursor: grabbing;
+  }
 </style>

package/outils/rafraichisseurToken.ts

@@ -1,187 +1,188 @@
-class RafraichisseurToken {
-  private intervalleEnSecondes = 15
-  private secondesAvantExpirationTokenPourRafraichir = 20
-  private skewSeconds = 5 // marge anti-derives d’horloge
-  private popupAffiche = false
-  private timerId: number | null = null
-
-  // Lance une seule fois
-  public async demarrer(nomTemoin: string | null, urlPortail: string): Promise<void> {
-    urlPortail = urlPortail.replace(/\/+$/, '')
-    if (nomTemoin == null || nomTemoin === '') nomTemoin = 'csqc_jeton_secure_expiration'
-    await this.verifierJeton(nomTemoin, urlPortail)
-    if (this.timerId != null) return
-    this.timerId = window.setInterval(() => {
-      this.verifierJeton(nomTemoin, urlPortail)
-    }, this.intervalleEnSecondes * 1000)
-  }
-
-  // Permet d’arrêter le timer (ex: au logout / destroy)
-  public arreter(): void {
-    if (this.timerId != null) {
-      clearInterval(this.timerId)
-      this.timerId = null
-    }
-  }
-
-  public existeJeton = (nomTemoin: string) => {
-    return this.estJetonValide(nomTemoin)
-  }
-
-  private async verifierJeton(nomTemoin: string, urlPortail: string): Promise<void> {
-    if (this.popupAffiche) return
-
-    if (!this.estJetonValide(nomTemoin)) {
-      this.rafraichir(nomTemoin, urlPortail)
-      return
-    }
-  }
-
-  private estJetonValide(nomTemoin: string): boolean {
-    if (this.popupAffiche || !nomTemoin) return true //On fait semblant que c'est valide pour ne pas provoquer un autre affichage du popup.
-
-    const tokenEncode = this.lireCookie(nomTemoin)
-    if (!tokenEncode) {
-      return false
-    }
-
-    let token: any
-    try {
-      token = this.parseJwt(tokenEncode)
-    } catch {
-      return false
-    }
-
-    const exp = Number(token?.exp)
-    if (!Number.isFinite(exp)) {
-      // exp manquant/invalide → tente refresh
-
-      return false
-    }
-
-    const now = Math.floor(Date.now() / 1000)
-    const refreshAt = exp - this.secondesAvantExpirationTokenPourRafraichir - this.skewSeconds
-    if (now >= refreshAt) {
-      return false
-    }
-
-    return true
-  }
-
-  private async rafraichir(nomCookie: string, urlPortail: string): Promise<void> {
-    if (!nomCookie) return
-    const url = this.getRefreshUrl(urlPortail)
-    const controller = new AbortController()
-    const timeout = setTimeout(() => controller.abort(), 10_000)
-
-    try {
-      //Première tentative sans iframe, pour la majorité des cas.
-      const resp = await fetch(url, {
-        method: 'POST',
-        credentials: 'include',
-        headers: { Accept: 'application/json' },
-        redirect: 'manual',
-        signal: controller.signal,
-      })
-
-      // redirection (souvent => login) → traiter comme non auth
-
-      if (resp.type === 'opaqueredirect' || resp.status === 302) {
-        this.rafraichirParIframe(nomCookie, urlPortail)
-        return
-      }
-
-      // OK ou No Content: le cookie devrait être réécrit
-      if (resp.status === 200 || resp.status === 204) {
-        const jeton = this.lireCookie(nomCookie)
-        if (!jeton) this.rafraichirParIframe(nomCookie, urlPortail)
-        return
-      }
-
-      // non auth / expiré (401, 419) + IIS timeout (440)
-      if (resp.status === 401 || resp.status === 419 || resp.status === 440) {
-        this.rafraichirParIframe(nomCookie, urlPortail)
-        return
-      }
-
-      console.warn('Rafraichisseur token: statut inattendu', resp.status)
-    } catch (err: any) {
-      if (err?.name === 'AbortError') console.warn('RafraichisseurToken timeout')
-      else console.error('Erreur rafraichisseur de token', err)
-      // on réessaiera au prochain tick
-    } finally {
-      clearTimeout(timeout)
-    }
-  }
-
-  private rafraichirParIframe(nomCookie: string, urlPortail: string): void {
-    // Pour éviter les cross référence, on créé un iframe qui appel portail et force la MAJ du jeton ou l'invalidation du jeton, si jamais l'utilisateur n'est plus connecté
-    // ajax vers le refresh
-    let iframe = document.createElement('iframe')
-    const url = this.getRefreshUrl(urlPortail)
-    iframe.src = `${url}?urlRetour=${encodeURI(window.location.href)}`
-    iframe.id = 'idRafrToken'
-    iframe.style.display = 'none'
-    document.body.appendChild(iframe)
-    iframe.onload = () => {
-      const jetonCSQC = this.lireCookie(nomCookie)
-      if (jetonCSQC == null || jetonCSQC === '') {
-        this.estDeconnecteAzure(urlPortail)
-      }
-
-      iframe.remove()
-    }
-  }
-
-  private estDeconnecteAzure(urlPortail: string): void {
-    //on envoie au portail, pas le choix
-
-    const retour = encodeURI(window.location.href)
-    window.open(`${urlPortail}/home/SeConnecter?urlRetour=${retour}`, '_self')
-    return
-  }
-
-  public deconnecterPortail(urlPortail: string): void {
-    window.location.replace(`${urlPortail}/deconnecte?urlRetour=${encodeURIComponent(window.location.href)}`)
-  }
-
-  private lireCookie(nom: string): string | null {
-    if (!document.cookie) return null
-    const cookies = document.cookie.split(';').map(c => c.trim())
-    for (const cookie of cookies) {
-      if (cookie.startsWith(`${nom}=`)) {
-        try {
-          return decodeURIComponent(cookie.substring(nom.length + 1))
-        } catch {
-          return cookie.substring(nom.length + 1)
-        }
-      }
-    }
-    return null
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private parseJwt(token: string): any {
-    const parts = token.split('.')
-    const base64Url = parts[1]
-    if (!base64Url) throw new Error('Invalid JWT format')
-    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
-    const jsonPayload = decodeURIComponent(
-      atob(base64)
-        .split('')
-        .map(c => `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`)
-        .join(''),
-    )
-    return JSON.parse(jsonPayload)
-  }
-
-  // URL refresh selon env (dev = proxy Vite ; prod = portail)
-  private getRefreshUrl(urlPortail: string): string {
-    if (import.meta.env.MODE === 'development') return '/portail-refresh'
-    return urlPortail + '/home/Refresh'
-  }
-}
-
-// Instance
-const rafraichisseurToken = new RafraichisseurToken()
-export default rafraichisseurToken
+class RafraichisseurToken {
+  private intervalleEnSecondes = 15
+  private secondesAvantExpirationTokenPourRafraichir = 20
+  private skewSeconds = 5 // marge anti-derives d’horloge
+  private popupAffiche = false
+  private timerId: number | null = null
+
+  // Lance une seule fois
+  public async demarrer(nomTemoin: string | null, urlPortail: string): Promise<void> {
+    urlPortail = urlPortail.replace(/\/+$/, '')
+    if (nomTemoin == null || nomTemoin === '') nomTemoin = 'csqc_jeton_secure_expiration'
+    await this.verifierJeton(nomTemoin, urlPortail)
+    if (this.timerId != null) return
+    this.timerId = window.setInterval(() => {
+      this.verifierJeton(nomTemoin, urlPortail)
+    }, this.intervalleEnSecondes * 1000)
+  }
+
+  // Permet d’arrêter le timer (ex: au logout / destroy)
+  public arreter(): void {
+    if (this.timerId != null) {
+      clearInterval(this.timerId)
+      this.timerId = null
+    }
+  }
+
+  public existeJeton = (nomTemoin: string) => {
+    return this.estJetonValide(nomTemoin)
+  }
+
+  private async verifierJeton(nomTemoin: string, urlPortail: string): Promise<void> {
+    if (this.popupAffiche) return
+
+    if (!this.estJetonValide(nomTemoin)) {
+      this.rafraichir(nomTemoin, urlPortail)
+      return
+    }
+  }
+
+  private estJetonValide(nomTemoin: string): boolean {
+    if (this.popupAffiche || !nomTemoin) return true //On fait semblant que c'est valide pour ne pas provoquer un autre affichage du popup.
+
+    const tokenEncode = this.lireCookie(nomTemoin)
+    if (!tokenEncode) {
+      return false
+    }
+
+    let token: any
+    try {
+      token = this.parseJwt(tokenEncode)
+    } catch {
+      return false
+    }
+
+    const exp = Number(token?.exp)
+    if (!Number.isFinite(exp)) {
+      // exp manquant/invalide → tente refresh
+
+      return false
+    }
+
+    const now = Math.floor(Date.now() / 1000)
+    const refreshAt = exp - this.secondesAvantExpirationTokenPourRafraichir - this.skewSeconds
+    if (now >= refreshAt) {
+      return false
+    }
+
+    return true
+  }
+
+  private async rafraichir(nomCookie: string, urlPortail: string): Promise<void> {
+    if (!nomCookie) return
+    const url = this.getRefreshUrl(urlPortail)
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 10_000)
+
+    try {
+      //Première tentative sans iframe, pour la majorité des cas.
+      const resp = await fetch(url, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+        redirect: 'manual',
+        signal: controller.signal,
+      })
+
+      // redirection (souvent => login) → traiter comme non auth
+
+      if (resp.type === 'opaqueredirect' || resp.status === 302) {
+        this.rafraichirParIframe(nomCookie, urlPortail)
+        return
+      }
+
+      // OK ou No Content: le cookie devrait être réécrit
+      if (resp.status === 200 || resp.status === 204) {
+        const jeton = this.lireCookie(nomCookie)
+        if (!jeton) this.rafraichirParIframe(nomCookie, urlPortail)
+        return
+      }
+
+      // non auth / expiré (401, 419) + IIS timeout (440)
+      if (resp.status === 401 || resp.status === 419 || resp.status === 440) {
+        this.rafraichirParIframe(nomCookie, urlPortail)
+        return
+      }
+
+      console.warn('Rafraichisseur token: statut inattendu', resp.status)
+    } catch (err: any) {
+      if (err?.name === 'AbortError') console.warn('RafraichisseurToken timeout')
+      else console.error('Erreur rafraichisseur de token', err)
+      // on réessaiera au prochain tick
+    } finally {
+      clearTimeout(timeout)
+    }
+  }
+
+  private rafraichirParIframe(nomCookie: string, urlPortail: string): void {
+    // Pour éviter les cross référence, on créé un iframe qui appel portail et force la MAJ du jeton ou l'invalidation du jeton, si jamais l'utilisateur n'est plus connecté
+    // ajax vers le refresh
+    let iframe = document.createElement('iframe')
+    const url = this.getRefreshUrl(urlPortail)
+    iframe.src = `${url}?urlRetour=${encodeURI(window.location.href)}`
+    iframe.id = 'idRafrToken'
+    iframe.style.display = 'none'
+    document.body.appendChild(iframe)
+    iframe.onload = () => {
+      const jetonCSQC = this.lireCookie(nomCookie)
+      if (jetonCSQC == null || jetonCSQC === '') {
+        this.estDeconnecteAzure(urlPortail)
+      }
+
+      iframe.remove()
+    }
+  }
+
+  private estDeconnecteAzure(urlPortail: string): void {
+    //on envoie au portail, pas le choix
+    urlPortail = urlPortail.replace(/\/+$/, '')
+    const retour = encodeURI(window.location.href)
+    window.open(`${urlPortail}/home/SeConnecter?urlRetour=${retour}`, '_self')
+    return
+  }
+
+  public deconnecterPortail(urlPortail: string): void {
+    urlPortail = urlPortail.replace(/\/+$/, '')
+    window.location.replace(`${urlPortail}/deconnecte?urlRetour=${encodeURIComponent(window.location.href)}`)
+  }
+
+  private lireCookie(nom: string): string | null {
+    if (!document.cookie) return null
+    const cookies = document.cookie.split(';').map(c => c.trim())
+    for (const cookie of cookies) {
+      if (cookie.startsWith(`${nom}=`)) {
+        try {
+          return decodeURIComponent(cookie.substring(nom.length + 1))
+        } catch {
+          return cookie.substring(nom.length + 1)
+        }
+      }
+    }
+    return null
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private parseJwt(token: string): any {
+    const parts = token.split('.')
+    const base64Url = parts[1]
+    if (!base64Url) throw new Error('Invalid JWT format')
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map(c => `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`)
+        .join(''),
+    )
+    return JSON.parse(jsonPayload)
+  }
+
+  // URL refresh selon env (dev = proxy Vite ; prod = portail)
+  private getRefreshUrl(urlPortail: string): string {
+    if (import.meta.env.MODE === 'development') return '/portail-refresh'
+    return urlPortail + '/home/Refresh'
+  }
+}
+
+// Instance
+const rafraichisseurToken = new RafraichisseurToken()
+export default rafraichisseurToken

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",