codevdesign 1.0.43 → 1.0.44

package/composants/csqcDialogue.vue

@@ -1,118 +1,118 @@
-<template>
-  <v-dialog
-    v-model="dialog"
-    v-bind="$attrs"
-    class="pa-0 ma-0"
-    :width="largeur"
-    :fullscreen="display.xs.value"
-    max-width="650"
-    :persistent="props.persistant"
-    @keydown.esc="!persistant ? annuler : ''"
-    @click:outside="!persistant ? annuler : ''"
-  >
-    <v-card class="pa-0 ma-0 pl-8 pt-8">
-      <!-- Bouton en haut à droite -->
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        class="position-absolute couleurHover"
-        style="top: 5px; right: 5px"
-        @click="annuler"
-      ></v-btn>
-
-      <v-card-title
-        class="pa-0 ma-0 pb-6"
-        style="font-size: 24px; white-space: normal; word-break: break-word"
-      >
-        <slot name="titre"></slot>
-        <div text-h5><span v-html="titre"></span></div>
-      </v-card-title>
-
-      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
-        <v-container>
-          <slot></slot>
-          <slot name="content"></slot>
-        </v-container>
-      </v-card-text>
-      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
-        <slot name="actions"></slot>
-        <v-btn
-          v-if="btnAnnuler"
-          color="primary"
-          :loading="operationEnCours"
-          variant="text"
-          @click="annuler"
-        >
-          {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
-        </v-btn>
-
-        <v-btn
-          v-if="btnOk"
-          class="Gouttiere"
-          color="primary"
-          :loading="operationEnCours"
-          :disabled="btnOkDesactiver"
-          variant="flat"
-          @click="okBouton"
-        >
-          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import { useDisplay } from 'vuetify'
-
-  const display = useDisplay()
-
-  // Déclaration des props
-  const props = defineProps({
-    largeur: { type: String, default: '50vw' },
-    persistant: { type: Boolean, default: true },
-    operationEnCours: { type: Boolean, default: false },
-    btnAnnuler: { type: Boolean, default: true },
-    btnOk: { type: Boolean, default: true },
-    btnAnnulerTexte: { type: String, default: '' },
-    btnOkTexte: { type: String, default: '' },
-    titre: { type: String, default: '' },
-    btnOkDesactiver: { type: Boolean, default: false },
-  })
-
-  // Déclaration des événements émis
-  const emit = defineEmits(['annuler', 'ok'])
-
-  // Gestion de l'état du dialogue
-  const dialog = ref(false)
-
-  // Méthodes pour gérer l'ouverture et la fermeture
-  const ouvrir = () => {
-    dialog.value = true
-  }
-
-  const fermer = () => {
-    dialog.value = false
-  }
-
-  // Gestion des actions des boutons
-  const annuler = () => {
-    emit('annuler')
-    fermer()
-  }
-
-  const okBouton = () => {
-    emit('ok')
-  }
-
-  // permet d'exporter les 2 actions
-  defineExpose({ ouvrir, fermer })
-</script>
-
-<style lang="css" scoped>
-  .v-card__text,
-  .v-card__title {
-    word-break: normal; /* empeche le wrap de couper un mot en XS  */
-  }
-</style>
+<template>
+  <v-dialog
+    v-model="dialog"
+    v-bind="$attrs"
+    class="pa-0 ma-0"
+    :width="largeur"
+    :fullscreen="display.xs.value"
+    max-width="650"
+    :persistent="props.persistant"
+    @keydown.esc="!persistant ? annuler : ''"
+    @click:outside="!persistant ? annuler : ''"
+  >
+    <v-card class="pa-0 ma-0 pl-8 pt-8">
+      <!-- Bouton en haut à droite -->
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        class="position-absolute iconeHover"
+        style="top: 5px; right: 5px"
+        @click="annuler"
+      ></v-btn>
+
+      <v-card-title
+        class="pa-0 ma-0 pb-6"
+        style="font-size: 24px; white-space: normal; word-break: break-word"
+      >
+        <slot name="titre"></slot>
+        <div text-h5><span v-html="titre"></span></div>
+      </v-card-title>
+
+      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
+        <v-container>
+          <slot></slot>
+          <slot name="content"></slot>
+        </v-container>
+      </v-card-text>
+      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
+        <slot name="actions"></slot>
+        <v-btn
+          v-if="btnAnnuler"
+          color="primary"
+          :loading="operationEnCours"
+          variant="text"
+          @click="annuler"
+        >
+          {{ btnAnnulerTexte ? btnAnnulerTexte : $t('csqc.bouton.annuler') }}
+        </v-btn>
+
+        <v-btn
+          v-if="btnOk"
+          class="Gouttiere"
+          color="primary"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver"
+          variant="flat"
+          @click="okBouton"
+        >
+          {{ btnOkTexte ? btnOkTexte : $t('csqc.bouton.ok') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const display = useDisplay()
+
+  // Déclaration des props
+  const props = defineProps({
+    largeur: { type: String, default: '50vw' },
+    persistant: { type: Boolean, default: true },
+    operationEnCours: { type: Boolean, default: false },
+    btnAnnuler: { type: Boolean, default: true },
+    btnOk: { type: Boolean, default: true },
+    btnAnnulerTexte: { type: String, default: '' },
+    btnOkTexte: { type: String, default: '' },
+    titre: { type: String, default: '' },
+    btnOkDesactiver: { type: Boolean, default: false },
+  })
+
+  // Déclaration des événements émis
+  const emit = defineEmits(['annuler', 'ok'])
+
+  // Gestion de l'état du dialogue
+  const dialog = ref(false)
+
+  // Méthodes pour gérer l'ouverture et la fermeture
+  const ouvrir = () => {
+    dialog.value = true
+  }
+
+  const fermer = () => {
+    dialog.value = false
+  }
+
+  // Gestion des actions des boutons
+  const annuler = () => {
+    emit('annuler')
+    fermer()
+  }
+
+  const okBouton = () => {
+    emit('ok')
+  }
+
+  // permet d'exporter les 2 actions
+  defineExpose({ ouvrir, fermer })
+</script>
+
+<style lang="css" scoped>
+  .v-card__text,
+  .v-card__title {
+    word-break: normal; /* empeche le wrap de couper un mot en XS  */
+  }
+</style>

package/composants/csqcTable/csqcTable.vue

@@ -41,6 +41,14 @@
               :nom-fichier="excelNomFichier"
               class="mt-1 ml-1 float-right"
             />
+            <v-icon
+              v-if="permettreChoixColonnes"
+              color="grisMoyen"
+              class="mt-1 ml-1 float-right"
+              @click.stop="ouvrirChoixColonnes"
+            >
+              mdi-table-edit
+            </v-icon>
           </template>
           <template #rechercheAvanceeTitre>
             <slot name="rechercheAvanceeTitre" />
@@ -64,7 +72,7 @@
         <v-data-table
           ref="datatable"
           v-bind="$attrs"
-          :headers="colonnes"
+          :headers="colonnesAffichees"
           :item-key="itemKey"
           :items="liste"
           :search="recherche"
@@ -123,166 +131,311 @@
           :largeur="modaleSupprimerLargeur"
           @confirmer="supprimer"
         />
+        <modale-choix
+          ref="modaleChoix"
+          v-if="permettreChoixColonnes"
+          :urlbase="urlbase"
+          :formulaire-id="formulaireId"
+          :identifiant="identifiant"
+          :colonnes="colonnesPourChoix"
+          :choix-origine="choixOrigineNormalise"
+          @selection="selectionChoix"
+          @sauvegarde="sauvegardeChoix"
+        />
       </v-col>
     </v-row>
   </div>
 </template>
-
 <script setup lang="ts">
   /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { computed, onMounted, ref, type PropType, type Slots } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import type { SortItem } from 'vuetify/lib/components/VDataTable/composables/sort.mjs'
 
-  import { ref, computed, type Slots, type PropType } from 'vue'
   import Recherche from '../csqcRecherche.vue'
   import confirmation from '../csqcConfirmation.vue'
   import exportExcelComponent from './csqcTableExportExcel.vue'
-  //import ModaleChoix from './csqc-table-modale-choix-colonnes.vue';
-  //import axios from 'axios'
-  import { useI18n } from 'vue-i18n'
+  import ModaleChoix from './csqcTableModaleChoixColonnes.vue'
+  import axios from '../../outils/appAxios'
   import Colonne from '../../modeles/composants/datatableColonne'
-  import type { SortItem } from 'vuetify/lib/components/VDataTable/composables/sort.mjs'
 
+  type VueColonnes = {
+    nomVue: string
+    colonnes: string[]
+    defaut?: boolean
+  }
+
+  const slots = defineSlots<Slots>()
+  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier', 'donneesExportees', 'panneau:etat'])
+
+  // ============================================================================
   // Props
+  // ============================================================================
   const props = defineProps({
     barreHautAfficher: { type: Boolean, default: true },
+
     btnAjouter: { type: Boolean, default: true },
     btnAjouterTexte: { type: String, default: '' },
     btnModifier: { type: Boolean, default: true },
     btnSupprimer: { type: Boolean, default: true },
+
     chargementListe: { type: Boolean, default: false },
     operationEnCours: { type: Boolean, default: false },
-    //choixSwitchOptionDepart: { type: Boolean, default: false },
-    // classeRangee: { type: String, default: '' },
+
+    // Headers Vuetify
     colonnes: {
       type: Array as PropType<Colonne[]>,
       default: () => [],
     },
+
     densite: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'default' },
+
     excel: { type: Boolean, default: false },
     excelNomFichier: { type: String, default: 'csqc' },
-    //filtresDepart: { type: Object, default: null },
-    //flechesTri: { type: Boolean, default: false },
+
+    // Choix colonnes
     formulaireId: { type: Number, default: -1 },
-    identifiant: {
-      type: [String, null] as PropType<string | null>,
-      default: null,
-    },
+    identifiant: { type: String, default: '' },
+    urlbase: { type: String, default: '' },
+    permettreChoixColonnes: { type: Boolean, default: false },
+
+    // Table
     itemKey: { type: String, default: 'id' },
     itemsParPage: { type: Number, default: 10 },
+    itemsParPageOptions: { type: Array, default: () => [10, 25, 30, -1] },
     liste: {
       type: Array as PropType<Record<string, any>[]>,
       default: () => [],
     },
     hover: { type: Boolean, default: false },
-    // modulerDense: { type: Boolean, default: false },
-    // multifiltre: { type: Boolean, default: false },
-    itemsParPageOptions: { type: Array, default: () => [10, 25, 30, -1] },
-    //pageCourante: { type: Number, default: 1 },
-    //paginationBottom: { type: Boolean, default: true },
-    // paginationTop: { type: Boolean, default: false },
-    //  permettreChoixColonnes: { type: Boolean, default: false },
-    // rechercheDepart: { type: String, default: '' },
+
+    // Recherche
     rechercheTexte: { type: String, default: '' },
     rechercheAfficher: { type: Boolean, default: true },
     rechercheAvancee: { type: Boolean, default: false },
     rechercheAvanceeTexte: { type: String, default: '' },
     rechercheAvanceeLargeur: { type: Number, default: 12 },
     rechercheAvanceeStyle: { type: String, default: '' },
-    // selectionChoixColonnesDepart: { type: String, default: '' },
-    // showSelect: { type: Boolean, default: false },
 
+    // Modale suppression
     modaleSupprimerChamp: { type: String, default: '' },
     modaleSupprimerTexte: { type: String, default: '' },
     modaleSupprimerTitre: { type: String, default: '' },
     modaleSupprimerLargeur: { type: String, default: '525px' },
+
+    // Tri
     triDescDepart: { type: Boolean, default: false },
     triParDepart: {
       type: [Array, String] as PropType<string | string[] | SortItem[] | undefined>,
       default: undefined,
     },
-    //urlbase: { type: String, default: '' },
   })
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const slots = defineSlots<Slots>()
   const { t } = useI18n({ useScope: 'global' })
-  const itemSelectionne = ref(null)
-  const modaleSupprimer = ref<InstanceType<typeof confirmation> | null>(null)
-  const supprimerTexte = computed(() => {
-    if (itemSelectionne.value == null) return ''
-
-    if (props.modaleSupprimerTexte != null && props.modaleSupprimerTexte != '') return props.modaleSupprimerTexte
+  const recherche = ref<string>('')
 
-    return t('csqc.message.supprimerMessage', { nom: itemSelectionne?.value[props.modaleSupprimerChamp] ?? '' })
+  // Modale suppression (on garde l’item sélectionné)
+  const itemSelectionne = ref<any>(null)
+
+  // ============================================================================
+  // State - Choix de colonnes (vues sauvegardées) + sélection courante
+  // ============================================================================
+  const modaleChoix = ref<InstanceType<typeof ModaleChoix> | null>(null)
+  const openChoixColonnes = ref(false)
+  const choix = ref<VueColonnes[]>([]) // la liste des vues disponibles
+  const vueActive = ref<VueColonnes | null>(null) // optionnel: la vue "appliquée"
+  const valeurSelectionChoixColonnes = ref<string | null>(null) // nomVue sélectionné dans la modale / UI
+
+  // ============================================================================
+  // Charger le choix de colonnes sauvegardé s'il y a lieu
+  // ============================================================================
+  onMounted(async () => {
+    if (!props.permettreChoixColonnes) return
+
+    try {
+      const res: any = await axios
+        .getAxios()
+        .get(`${props.urlbase}/api/ComposantUI/Colonnes/${props.formulaireId}/Identifiant/${props.identifiant}`)
+
+      const payload = res?.data ?? res
+
+      if (!payload) {
+        choix.value = []
+        return
+      }
+
+      choix.value = typeof payload === 'string' ? JSON.parse(payload) : payload
+    } catch (e) {
+      choix.value = []
+      // console.debug(e)
+    }
   })
 
-  const supprimerTitreTexte = computed(() => props.modaleSupprimerTitre || t('csqc.message.supprimerTitre'))
-
-  // Fonction pour ouvrir le dialogue pour un item spécifique
-  const ouvrirModaleSupprimer = (item: any) => {
-    itemSelectionne.value = item
-
-    //modaleSupprimer.value?.ouvrir()
-    emit('supprimer', itemSelectionne.value)
+  // ============================================================================
+  // Computed - Normaliser pour la modale Choix colonne
+  // ============================================================================
+  const choixOrigineNormalise = computed(() =>
+    (choix.value ?? []).map(c => ({
+      _id: '',
+      nomVue: c.nomVue,
+      colonnes: c.colonnes ?? [],
+      defaut: c.defaut ?? false,
+    })),
+  )
+
+  // ============================================================================
+  // Actions - Modale choix colonnes
+  // ============================================================================
+  function ouvrirChoixColonnes() {
+    modaleChoix.value?.ouvrir()
   }
 
-  const supprimer = () => {
-    emit('supprimer', itemSelectionne.value)
+  function appliquerVue(vue: VueColonnes) {
+    vueActive.value = vue
+    openChoixColonnes.value = false
   }
 
-  const recherche = ref<string>('')
-  const chargerRecherche = (val: string) => {
-    recherche.value = val
+  function selectionChoix(vue: VueColonnes) {
+    // on garde une trace du nom sélectionné (pour retrouver la vue plus tard)
+    valeurSelectionChoixColonnes.value = vue.nomVue
+    appliquerVue(vue)
   }
 
-  const ajouter = () => {
-    emit('ajouter')
-  }
+  function sauvegardeChoix(vues: VueColonnes[]) {
+    if (!props.permettreChoixColonnes) return
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const cliqueLigne = (e: Event, { item }: { item: any }) => {
-    emit('cliqueLigne', item)
-  }
+    // si la sélection courante n’existe plus, on reset
+    if (
+      valeurSelectionChoixColonnes.value != null &&
+      vues.find(x => x.nomVue === valeurSelectionChoixColonnes.value) == null
+    ) {
+      valeurSelectionChoixColonnes.value = null
+    }
 
-  const modifier = (item: any) => {
-    emit('modifier', item)
+    choix.value = vues
+
+    // optionnel: appliquer automatiquement la vue par défaut
+    const defaut = vues.find(v => v.defaut)
+    if (defaut) appliquerVue(defaut)
   }
-  const filteredItems = computed(() => {
-    if (!recherche.value) return props.liste // Si rien écrit, affiche tout
 
-    return props.liste.filter(item =>
-      Object.values(item).some(val => String(val).toLowerCase().includes(recherche.value.toLowerCase())),
+  // ============================================================================
+  // Computed - Colonnes à envoyer à la modale (liste ordonnée + libellé)
+  // ============================================================================
+  const colonnesPourChoix = computed(() =>
+    props.colonnes
+      // on exclut l'action (souvent toujours visible) + colonnes "cachées"
+      .filter(c => c.key && c.key !== 'action' && (c as any).align !== 'd-none')
+      .map((c, idx) => ({
+        title: (c as any).title ?? (c as any).text ?? String((c as any).key ?? (c as any).value),
+        value: String((c as any).key ?? (c as any).value), // ← on force string
+        ordre: idx + 1,
+      })),
+  )
+
+  // ============================================================================
+  // Computed - Headers réellement affichés par la table (selon le choix actif)
+  // ============================================================================
+  const colonnesAffichees = computed(() => {
+    // 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
+
+    // 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
+
+    // 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[]
   })
 
+  // ============================================================================
+  // Computed - Tri initial (Vuetify sort-by)
+  // ============================================================================
   const triDepart = computed<SortItem[] | undefined>(() => {
     if (props.triParDepart == null) return undefined
 
     const ordre = props.triDescDepart ? 'desc' : 'asc'
-
     if (typeof props.triParDepart === 'string') return [{ key: props.triParDepart, order: ordre }]
 
-    //On a un tableau de tri
-    let retour: SortItem[] = []
+    const retour: SortItem[] = []
     for (let i = 0; i < props.triParDepart.length; i += 1) {
       const tri = props.triParDepart[i]!
-      if (typeof tri == 'string') retour.push({ key: tri, order: ordre })
-      else retour.push(tri) //C'est un SortItem déjà bâti
+      if (typeof tri === 'string') retour.push({ key: tri, order: ordre })
+      else retour.push(tri)
     }
     return retour
   })
 
   const estMultiTriActif = computed(() => {
     if (props.triParDepart == null) return false
-
     if (typeof props.triParDepart === 'string') return false
-
     return true
   })
 
-  const onPanelChange = (val: boolean) => {
+  // ============================================================================
+  // Computed - Export (filtrage local basé sur recherche)
+  // ============================================================================
+  const filteredItems = computed(() => {
+    if (!recherche.value) return props.liste
+    const q = recherche.value.toLowerCase()
+    return props.liste.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(q)))
+  })
+
+  // ============================================================================
+  // UI Actions - Recherche / Table events
+  // ============================================================================
+  function chargerRecherche(val: string) {
+    recherche.value = val
+  }
+
+  function ajouter() {
+    emit('ajouter')
+  }
+
+  function cliqueLigne(_e: Event, { item }: { item: any }) {
+    emit('cliqueLigne', item)
+  }
+
+  function modifier(item: any) {
+    emit('modifier', item)
+  }
+
+  // ============================================================================
+  // Suppression - Texte + actions
+  // ============================================================================
+  const supprimerTexte = computed(() => {
+    if (itemSelectionne.value == null) return ''
+
+    if (props.modaleSupprimerTexte) return props.modaleSupprimerTexte
+
+    return t('csqc.message.supprimerMessage', {
+      nom: itemSelectionne?.value?.[props.modaleSupprimerChamp] ?? '',
+    })
+  })
+
+  const supprimerTitreTexte = computed(() => props.modaleSupprimerTitre || t('csqc.message.supprimerTitre'))
+
+  function ouvrirModaleSupprimer(item: any) {
+    itemSelectionne.value = item
+    emit('supprimer', itemSelectionne.value) // tu sembles gérer la modale ailleurs
+  }
+
+  function supprimer() {
+    emit('supprimer', itemSelectionne.value)
+  }
+
+  // ============================================================================
+  // UI - Panneau recherche avancée
+  // ============================================================================
+  function onPanelChange(val: boolean) {
     emit('panneau:etat', val)
   }
-  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier', 'donneesExportees', 'panneau:etat'])
 </script>
 
 <style scoped lang="css">