codevdesign 2.0.12 → 2.0.13

package/composants/csqcTable/csqcTableModaleChoixColonnes.vue

@@ -1,831 +1,829 @@
-<template>
-  <csqc-modale
-    ref="modale"
-    :titre="t('csqc.csqcDatatable.choixColonnes.titre')"
-    :btn-annuler="!sauvegardeEnCours"
-    :largeur="'80vw'"
-    :max-width="'1000px'"
-    @annuler="fermer"
-    @ok="sauvegarder"
-  >
-    <!-- Erreurs -->
-    <v-alert
-      v-model="afficherErreur"
-      type="error"
-      closable
-    >
-      {{ erreur }}
-    </v-alert>
-
-    <v-row>
-      <v-col
-        cols="12"
-        class="pa-0 relative"
-      >
-        <!-- Retour en haut (table des vues) -->
-        <v-btn
-          v-show="choixRetourEnHaut"
-          class="BarreRechercheBackIcone retourHautChoix"
-          icon
-          color="primary"
-          style="position: absolute"
-          @click="retourEnHaut('#choixColonnes-choix > .v-data-table__wrapper')"
-        >
-          <v-icon>mdi-arrow-up</v-icon>
-        </v-btn>
-
-        <v-card
-          rounded
-          class="pr-0"
-        >
-          <!-- TABLE 1 : Liste des vues -->
-          <v-data-table
-            id="choixColonnes-choix"
-            v-model:expanded="expandedChoixIds"
-            class="limiteHauteurChoix"
-            :headers="colonnesChoix"
-            :items="choix"
-            :item-value="row => choixOf(row)._id"
-            show-expand
-            :single-expand="true"
-            :items-per-page="-1"
-            hide-default-footer
-            fixed-header
-            @click:row="onClickRowChoix"
-          >
-            <!-- Bouton ajouter une vue -->
-            <template #header.action>
-              <v-btn
-                color="primary"
-                class="float-right"
-                size="small"
-                :disabled="desactiverAjout"
-                @click.stop="ajouter"
-              >
-                {{ t('csqc.bouton.ajouter') }}
-              </v-btn>
-            </template>
-            <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
-              <v-btn
-                :append-icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-                :text="isExpanded(internalItem) ? 'Fermer' : 'Ouvrir'"
-                class="text-none"
-                color="medium-emphasis"
-                size="small"
-                variant="text"
-                width="105"
-                border
-                slim
-                data-expander
-                @click.stop="() => toggleExpand(internalItem)"
-              ></v-btn>
-            </template>
-            <!-- Expansion : Table des colonnes -->
-            <template #expanded-row="{ columns }">
-              <tr>
-                <td
-                  :colspan="columns.length"
-                  class="pa-0 ma-0"
-                >
-                  <v-row
-                    class="pa-0 ma-0"
-                    no-gutters
-                  >
-                    <v-col
-                      cols="12"
-                      class="pa-0 ma-0"
-                    >
-                      <!-- Retour en haut (table des colonnes) -->
-                      <v-btn
-                        v-show="colonnesRetourEnHaut"
-                        class="BarreRechercheBackIcone retourHautChoix colonnes"
-                        icon
-                        color="primary"
-                        style="position: absolute"
-                        @click="retourEnHaut('#choixColonnes-vue > .v-data-table__wrapper')"
-                      >
-                        <v-icon>mdi-arrow-up</v-icon>
-                      </v-btn>
-
-                      <!-- TABLE 2 : Colonnes de la vue sélectionnée -->
-                      <v-data-table
-                        id="choixColonnes-vue"
-                        v-sortable-data-table
-                        class="limiteHauteurChoix colonnes mt-1 mb-4 ordonable"
-                        :headers="colonnesChoixColonne"
-                        :items="colonnesEnCours"
-                        hover
-                        item-value="value"
-                        hide-default-footer
-                        :items-per-page="-1"
-                        fixed-header
-                        :sort-by="triColonnesChoix"
-                        @sorted="changeOrdre"
-                      >
-                        <!-- Alerte dans l'entête si aucune colonne n'est sélectionnée -->
-                        <template #header.action>
-                          <v-tooltip
-                            v-if="nbColonnesSelectionnees <= 0"
-                            location="start"
-                            color="warning"
-                          >
-                            <template #activator="{ props }">
-                              <v-icon
-                                color="warning"
-                                v-bind="props"
-                              >
-                                mdi-alert
-                              </v-icon>
-                            </template>
-                            {{ t('csqc.csqcDatatable.choixColonnes.activezUneColonne') }}
-                          </v-tooltip>
-                        </template>
-
-                        <!-- Toggle (oeil) -->
-                        <template #item.action="{ item }">
-                          <v-icon
-                            :color="couleurColonneCliquee(colonneOf(item))"
-                            @click.stop="basculeColonneClique(colonneOf(item))"
-                          >
-                            {{ colonneEstClique(colonneOf(item)) ? 'mdi-eye' : 'mdi-eye-off' }}
-                          </v-icon>
-                        </template>
-
-                        <!-- Label de colonne -->
-                        <template #item.title="{ value, item }">
-                          {{ value ?? colonneOf(item).value }}
-                        </template>
-                      </v-data-table>
-                    </v-col>
-                  </v-row>
-                </td>
-              </tr>
-            </template>
-
-            <!-- Nom de vue (édition inline) -->
-            <template #item.nomVue="{ item }">
-              <v-text-field
-                v-if="choixOf(item).nomVue === vueEnEdition"
-                v-model.trim="nomVueEnCours"
-                :label="t('csqc.csqcDatatable.choixColonnes.nomVue')"
-                single-line
-                density="compact"
-                autofocus
-                class="py-0 my-0"
-                :rules="regles.nomVue"
-                hide-details
-                @keydown.enter="accepterEdition"
-                @keydown.esc.stop="annulerEdition"
-              />
-              <span
-                v-else
-                :class="{ 'error--text': !choixOf(item).nomVue }"
-              >
-                {{ choixOf(item).nomVue || t('csqc.csqcDatatable.choixColonnes.nomVueRequis') }}
-              </span>
-            </template>
-
-            <!-- Actions (vue) -->
-            <template #item.action="{ item }">
-              <template v-if="choixOf(item).nomVue === vueEnEdition">
-                <v-icon
-                  class="iconeSupprimer GouttiereSmall"
-                  @click.stop.prevent="annulerEdition"
-                >
-                  mdi-window-close
-                </v-icon>
-
-                <v-icon
-                  class="iconeHover GouttiereSmall"
-                  @click.stop.prevent="accepterEdition"
-                >
-                  mdi-check
-                </v-icon>
-              </template>
-
-              <template v-else>
-                <v-tooltip
-                  location="start"
-                  color="warning"
-                >
-                  <template #activator="{ props }">
-                    <v-icon
-                      class="iconeHover GouttiereSmall"
-                      v-bind="props"
-                      @click.stop.prevent="selectionner(choixOf(item))"
-                    >
-                      mdi-eye
-                    </v-icon>
-                  </template>
-                  {{ t('csqc.csqcDatatable.choixColonnes.activerTooltip') }}
-                </v-tooltip>
-                <v-tooltip
-                  location="start"
-                  color="warning"
-                >
-                  <template #activator="{ props }">
-                    <v-icon
-                      v-bind="props"
-                      class="iconeHover GouttiereSmall"
-                      :color="couleurDefaut(choixOf(item))"
-                      @click.stop.prevent="mettreDefaut(choixOf(item))"
-                    >
-                      mdi-star
-                    </v-icon>
-                  </template>
-                  {{ t('csqc.csqcDatatable.choixColonnes.defautTooltip') }}
-                </v-tooltip>
-                <!-- <v-icon
-                  class="iconeHover GouttiereSmall"
-                  @click.stop.prevent="editer(choixOf(item))"
-                >
-                  mdi-pencil
-                </v-icon> -->
-
-                <v-icon
-                  class="iconeSupprimer GouttiereSmall"
-                  @click.stop.prevent="supprimer(choixOf(item))"
-                >
-                  mdi-delete
-                </v-icon>
-              </template>
-            </template>
-          </v-data-table>
-        </v-card>
-      </v-col>
-    </v-row>
-  </csqc-modale>
-</template>
-
-<script setup lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-
-  /**
-   * csqcTableModaleChoixColonnes.vue
-   * - Permet de créer/éditer des "vues" de colonnes (ensembles de colonnes visibles)
-   * - Drag & drop pour réordonner les colonnes
-   * - Persistance via endpoint ComposantUI/Colonnes/...
-   */
-
-  import axios from '../../outils/appAxios'
-  import Sortable from 'sortablejs'
-  import { computed, nextTick, reactive, ref, watch } from 'vue'
-  import { useGoTo } from 'vuetify'
-  import { useI18n } from 'vue-i18n'
-  import CsqcModale from '../csqcDialogue.vue'
-
-  type SortableEvent = import('sortablejs').SortableEvent
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Types
-  // ─────────────────────────────────────────────────────────────────────────────
-  type ColonneChoix = {
-    value: string
-    text?: string
-    ordre?: number
-  }
-
-  type Colonne = {
-    value: string
-    title?: string
-    ordre?: number
-  }
-
-  type ChoixVue = {
-    nomVue: string
-    colonnes: string[]
-    defaut: boolean
-    _id: string // interne (clé stable si nomVue est vide)
-  }
-
-  type DataTableItemLike<T> = { raw: T }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Helpers "unwrap" (évite item.raw dans le template + évite génériques TS dans template)
-  // ─────────────────────────────────────────────────────────────────────────────
-  function asRaw<T>(item: T | DataTableItemLike<T>): T {
-    return (item as any) ?? (item as T)
-  }
-
-  const choixOf = (x: any) => asRaw<ChoixVue>(x)
-  const colonneOf = (x: any) => asRaw<Colonne>(x)
-
-  // Génère des ids pour stabiliser l’expansion / l’édition même si nomVue = ''
-  function assurerIds(vues: ChoixVue[]) {
-    for (const v of vues) {
-      if (!v._id) v._id = crypto.randomUUID()
-    }
-  }
-
-  // Clone profond simple (OK ici car données sérialisables)
-  function deepClone<T>(x: T): T {
-    return JSON.parse(JSON.stringify(x)) as T
-  }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Props / Emits / Expose
-  // ─────────────────────────────────────────────────────────────────────────────
-  type ModaleExpose = { ouvrir: () => void; fermer: () => void }
-
-  const props = defineProps<{
-    urlbase: string
-    formulaireId: number
-    identifiant: string
-    colonnes: ColonneChoix[]
-    choixOrigine: ChoixVue[]
-  }>()
-
-  const emit = defineEmits<{
-    (e: 'selection', choix: ChoixVue): void
-    (e: 'sauvegarde', choix: ChoixVue[]): void
-  }>()
-
-  const modale = ref<ModaleExpose | null>(null)
-
-  defineExpose({ ouvrir, fermer })
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Directive: drag & drop (sortablejs)
-  // ─────────────────────────────────────────────────────────────────────────────
-  defineOptions({
-    directives: {
-      sortableDataTable: {
-        mounted(el: HTMLElement, _binding: any, vnode: any) {
-          const tbody = el.getElementsByTagName('tbody')?.[0]
-          if (!tbody) return
-
-          Sortable.create(tbody, {
-            animation: 150,
-            onUpdate(event: SortableEvent) {
-              if (event.oldIndex == null || event.newIndex == null) return
-              vnode?.component?.emit?.('sorted', event)
-            },
-          })
-        },
-      },
-    },
-  })
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // UI / i18n / scroll helpers
-  // ─────────────────────────────────────────────────────────────────────────────
-  const { t } = useI18n()
-  const goTo = useGoTo()
-
-  const erreur = ref('')
-  const afficherErreur = ref(false)
-
-  const choixRetourEnHaut = ref(false)
-  const colonnesRetourEnHaut = ref(false)
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // State
-  // ─────────────────────────────────────────────────────────────────────────────
-  const choix = ref<ChoixVue[]>([])
-  const choixEnCours = ref<ChoixVue | null>(null)
-  const colonnesEnCours = ref<Colonne[]>([])
-
-  const sauvegardeEnCours = ref(false)
-
-  // Edition du nom de vue
-  const nomVueEnCours = ref('')
-  const vueEnEdition = ref('')
-  const desactiverAjout = ref(false)
-
-  // Tri visuel (on veut ordre asc)
-  const triColonnesChoix = ref<{ key: string; order?: 'asc' | 'desc' }[]>([{ key: 'ordre', order: 'asc' }])
-
-  // Règles validation
-  const regles = reactive({
-    nomVue: [
-      (v: string) => (v && v.trim().length >= 1) || t('csqc.csqcDatatable.choixColonnes.nomVueRequis'),
-      (v: string) =>
-        !choix.value.some(({ nomVue }) => v.trim() === nomVue) || t('csqc.csqcDatatable.choixColonnes.nomVueExiste'),
-    ],
-  })
-
-  // Affiche l'alerte si aucune colonne sélectionnée dans la vue courante
-  const nbColonnesSelectionnees = computed(() => choixEnCours.value?.colonnes?.length ?? 0)
-
-  function ouvrirVue(ch: ChoixVue) {
-    // remonte en haut la table des colonnes quand on change
-    if (choixEnCours.value) retourEnHaut('#choixColonnes-vue > .v-data-table__wrapper')
-
-    // Build colonnesEnCours à partir des colonnes disponibles
-    colonnesEnCours.value = deepClone(props.colonnes)
-
-    // Référence réactive dans la liste
-    const refDansListe = choix.value.find(x => x._id === ch._id) ?? ch
-    choixEnCours.value = refDansListe
-
-    // Colonnes sélectionnées d'abord, puis le reste
-    const selected: Colonne[] = []
-    const missing: string[] = []
-
-    for (const key of choixEnCours.value.colonnes) {
-      const col = colonnesEnCours.value.find(c => c.value === key)
-      if (!col) missing.push(key)
-      else selected.push(col)
-    }
-
-    // Nettoyage des colonnes disparues
-    if (missing.length) {
-      choixEnCours.value.colonnes = choixEnCours.value.colonnes.filter(k => !missing.includes(k))
-    }
-
-    // selected puis disponibles non sélectionnées
-    colonnesEnCours.value = selected.concat(
-      colonnesEnCours.value.filter(c => !choixEnCours.value!.colonnes.includes(c.value)),
-    )
-
-    calculOrdreColonnes()
-    ecouteDefilerColonnes()
-  }
-
-  const expandedChoixIds = ref<string[]>([])
-
-  // colonnes
-  const colonnesChoixColonne = computed(() => [
-    {
-      title: t('csqc.csqcDatatable.choixColonnes.ordre'),
-      key: 'ordre',
-      align: 'start' as const,
-      sortable: false,
-      width: '5%',
-    },
-    {
-      title: t('csqc.csqcDatatable.choixColonnes.nomColonne', colonnesEnCours.value.length),
-      key: 'title',
-      align: 'start' as const,
-      sortable: false,
-      width: '85%',
-    },
-    { title: '', key: 'action', align: 'end' as const, sortable: false, width: '10%' },
-  ])
-
-  const colonnesChoix = computed(() => [
-    {
-      title: t('csqc.csqcDatatable.choixColonnes.vues', choix.value.length),
-      key: 'nomVue',
-      width: '70%',
-      align: 'start' as const,
-    },
-    { title: '', key: 'action', width: '30%', align: 'end' as const, sortable: false },
-  ])
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // actions
-  // ─────────────────────────────────────────────────────────────────────────────
-  function ouvrir() {
-    choix.value = deepClone(props.choixOrigine)
-    assurerIds(choix.value) // obligatoire
-    expandedChoixIds.value = [] // reset
-    modale.value?.ouvrir()
-  }
-  function fermer() {
-    // Reset UI
-    sauvegardeEnCours.value = false
-    desactiverAjout.value = false
-    vueEnEdition.value = ''
-    nomVueEnCours.value = ''
-
-    // Reset sélection
-    choixEnCours.value = null
-    colonnesEnCours.value = []
-
-    // Reset erreurs
-    afficherErreur.value = false
-    erreur.value = ''
-
-    modale.value?.fermer()
-  }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Actions : vues
-  // ─────────────────────────────────────────────────────────────────────────────
-  function ajouter() {
-    const ch: ChoixVue = {
-      _id: crypto.randomUUID(),
-      nomVue: '',
-      colonnes: [],
-      defaut: choix.value.length === 0,
-    }
-    choix.value.push(ch)
-    expandedChoixIds.value = [ch._id] // ouvre celle-là
-    editer(ch)
-  }
-
-  function editer(ch: ChoixVue) {
-    desactiverAjout.value = true
-
-    // Nettoyage d’un placeholder vide précédent (si on relance edit)
-    if (ch.nomVue !== '') supprimer({ _id: 'placeholder', nomVue: '', colonnes: [], defaut: false })
-
-    erreur.value = ''
-    nomVueEnCours.value = ch.nomVue
-    vueEnEdition.value = ch.nomVue
-  }
-
-  function accepterEdition() {
-    const nom = nomVueEnCours.value?.trim()
-
-    if (!nom) {
-      erreur.value = t('csqc.csqcDatatable.choixColonnes.nomVueRequis')
-      return
-    }
-
-    if (choix.value.some(({ nomVue }) => nomVue === nom)) {
-      erreur.value = t('csqc.csqcDatatable.choixColonnes.nomVueExiste')
-      return
-    }
-
-    const ch = choix.value.find(({ nomVue }) => nomVue === vueEnEdition.value)
-    if (!ch) return
-
-    const etaitSelectionnee = choixEstClique(ch)
-    ch.nomVue = nom
-
-    // Si c’était la vue active, on s’assure que la ref active reste valide
-    if (etaitSelectionnee) {
-      choixEnCours.value = ch
-    }
-
-    // Reset édition
-    vueEnEdition.value = ''
-    nomVueEnCours.value = ''
-    desactiverAjout.value = false
-  }
-
-  function annulerEdition() {
-    const ch = choix.value.find(({ nomVue }) => nomVue === vueEnEdition.value)
-    if (!ch) return
-
-    // Si c'était une nouvelle vue vide, on la retire
-    if (ch.nomVue === '') supprimer(ch)
-
-    vueEnEdition.value = ''
-    nomVueEnCours.value = ''
-    desactiverAjout.value = false
-  }
-
-  function selectionner(ch: ChoixVue) {
-    emit('selection', ch)
-    fermer()
-  }
-
-  function supprimer(ch: ChoixVue) {
-    if (choixEstClique(ch)) choixEnCours.value = null
-
-    const index = choix.value.findIndex(({ nomVue }) => nomVue === ch.nomVue)
-    if (index === -1) return
-
-    // Si on supprime le défaut, on transfère le défaut ailleurs
-    if (choix.value[index].defaut) {
-      const autre = choix.value.find(({ nomVue }) => nomVue !== ch.nomVue)
-      if (autre) autre.defaut = true
-    }
-
-    choix.value.splice(index, 1)
-  }
-
-  function mettreDefaut(ch: ChoixVue) {
-    const actuel = choix.value.find(v => v.defaut)
-    if (actuel) actuel.defaut = false
-
-    const cible = choix.value.find(v => v.nomVue === ch.nomVue)
-    if (cible) cible.defaut = true
-  }
-
-  function couleurDefaut(ch: ChoixVue) {
-    return ch.defaut ? '#daa520' : 'gray'
-  }
-
-  function choixEstClique(ch: ChoixVue) {
-    return ch.nomVue === choixEnCours.value?.nomVue
-  }
-
-  // Click row Vuetify (payload = { item })
-  function onClickRowChoix(_e: Event, payload: any) {
-    cliquer(choixOf(payload?.item ?? payload))
-  }
-
-  /**
-   * Sélection d’une vue :
-   * - recalcul de colonnesEnCours (selected d'abord, puis le reste)
-   * - nettoyage des colonnes "non disponibles" (si props.colonnes a changé)
-   */
-  function cliquer(ch: ChoixVue) {
-    const id = ch._id
-    if (!id) return
-
-    expandedChoixIds.value = expandedChoixIds.value[0] === id ? [] : [id]
-  }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Actions : colonnes
-  // ─────────────────────────────────────────────────────────────────────────────
-  function colonneEstClique(colonne: Colonne) {
-    if (!choixEnCours.value) return false
-    return choixEnCours.value.colonnes.includes(colonne.value)
-  }
-
-  function couleurColonneCliquee(colonne: Colonne) {
-    return colonneEstClique(colonne) ? 'primary' : 'gray'
-  }
-
-  function basculeColonneClique(colonne: Colonne) {
-    if (!choixEnCours.value) return
-
-    if (colonneEstClique(colonne)) {
-      choixEnCours.value.colonnes = choixEnCours.value.colonnes.filter(x => x !== colonne.value)
-      return
-    }
-
-    choixEnCours.value.colonnes.push(colonne.value)
-  }
-
-  // Liste des colonnes actuellement "cliquées" selon l’ordre affiché
-  const colonnesCliquees = computed(() => {
-    if (!choixEnCours.value) return []
-    return colonnesEnCours.value.filter(c => choixEnCours.value!.colonnes.includes(c.value)).map(c => c.value)
-  })
-
-  function changeOrdre(event: SortableEvent) {
-    if (event.oldIndex == null || event.newIndex == null) return
-
-    const moved = colonnesEnCours.value.splice(event.oldIndex, 1)[0]
-    colonnesEnCours.value.splice(event.newIndex, 0, moved)
-
-    calculOrdreColonnes()
-
-    // Après reorder, on sauvegarde la sélection dans le nouvel ordre visuel
-    if (choixEnCours.value) {
-      choixEnCours.value.colonnes = colonnesCliquees.value
-    }
-  }
-
-  function calculOrdreColonnes() {
-    for (let i = 0; i < colonnesEnCours.value.length; i += 1) {
-      colonnesEnCours.value[i].ordre = i + 1
-    }
-  }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // axios
-  // ─────────────────────────────────────────────────────────────────────────────
-  async function sauvegarder() {
-    sauvegardeEnCours.value = true
-
-    try {
-      const res: any = await axios
-        .getAxios()
-        .post(`${props.urlbase}/api/ComposantUI/Colonnes/${props.formulaireId}/Identifiant/${props.identifiant}`, {
-          valeur: JSON.stringify(choix.value),
-        })
-
-      const payload = res?.data ?? res
-
-      // payload peut être un json string ou déjà un tableau
-      choix.value = typeof payload === 'string' ? (JSON.parse(payload) as ChoixVue[]) : (payload as ChoixVue[])
-
-      assurerIds(choix.value)
-
-      // Notifie le parent
-      emit('sauvegarde', choix.value)
-      if (choixEnCours.value) emit('selection', choixEnCours.value)
-
-      fermer()
-    } catch (e) {
-      erreur.value = String(e)
-    } finally {
-      sauvegardeEnCours.value = false
-    }
-  }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Scroll helpers
-  // ─────────────────────────────────────────────────────────────────────────────
-  function retourEnHaut(cible: string) {
-    goTo(0, { container: cible })
-  }
-
-  function defilerChoix(e: Event) {
-    const target = e.target as HTMLElement
-    choixRetourEnHaut.value = target.scrollTop >= 200
-  }
-
-  function ecouteDefilerChoix() {
-    const el = document.querySelector('#choixColonnes-choix > .v-data-table__wrapper')
-    if (!el) {
-      setTimeout(ecouteDefilerChoix, 100)
-      return
-    }
-    el.addEventListener('scroll', defilerChoix)
-  }
-
-  function defilerColonnes(e: Event) {
-    const target = e.target as HTMLElement
-    colonnesRetourEnHaut.value = target.scrollTop >= 200
-  }
-
-  function ecouteDefilerColonnes() {
-    nextTick(() => {
-      const el = document.querySelector('#choixColonnes-vue > .v-data-table__wrapper')
-      if (!el) {
-        setTimeout(ecouteDefilerColonnes, 100)
-        return
-      }
-      el.addEventListener('scroll', defilerColonnes)
-    })
-  }
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // Watchers
-  // ─────────────────────────────────────────────────────────────────────────────
-  watch(erreur, () => {
-    afficherErreur.value = erreur.value !== ''
-  })
-
-  watch(afficherErreur, v => {
-    if (v === false) erreur.value = ''
-  })
-
-  watch(
-    expandedChoixIds,
-    v => {
-      const id = v?.[0]
-
-      // Fermeture
-      if (!id) {
-        choixEnCours.value = null
-        colonnesEnCours.value = []
-        return
-      }
-
-      // Ouverture / changement
-      const ch = choix.value.find(x => x._id === id)
-      if (!ch) return
-
-      ouvrirVue(ch) // IMPORTANT: ouverture "force", pas toggle
-    },
-    { flush: 'post' }, // <-- clé du fix
-  )
-  watch(
-    expandedChoixIds,
-    v => {
-      if (v.length > 1) expandedChoixIds.value = [v[v.length - 1]] // garde le dernier
-    },
-    { flush: 'sync' },
-  )
-</script>
-
-<style scoped>
-  /* Layout */
-  .relative {
-    position: relative;
-  }
-
-  /* Boutons "retour en haut" */
-  .retourHautChoix {
-    bottom: 4px !important;
-    right: 4px;
-  }
-  .retourHautChoix.colonnes {
-    bottom: 8px !important;
-    right: 48px;
-  }
-
-  /* Scroll vertical des tables */
-  .limiteHauteurChoix > .v-data-table__wrapper {
-    max-height: min(80vh - 200px, 900px);
-    overflow-y: auto;
-  }
-  .limiteHauteurChoix.colonnes > .v-data-table__wrapper {
-    max-height: min(80vh - 294px, 600px);
-  }
-
-  /* Z-index du header table 1 */
-  #choixColonnes-choix > .v-data-table__wrapper > table > thead > tr > th {
-    z-index: 3;
-  }
-
-  /* Drag cursor */
-  .v-data-table.ordonable > .v-data-table__wrapper > table > tbody > tr {
-    cursor: move;
-  }
-
-  /* Icons */
-  .iconeSupprimer:hover {
-    color: red;
-  }
-  .v-icon.v-icon.v-icon--link.iconeSupprimer:hover {
-    color: red !important;
-  }
-  .iconeEditer:hover {
-    color: #095797;
-  }
-
-  .GouttiereSmall {
-    margin-left: 8px;
-  }
-</style>
+<template>
+  <csqc-modale
+    ref="modale"
+    :titre="t('csqc.csqcDatatable.choixColonnes.titre')"
+    :btn-annuler="!sauvegardeEnCours"
+    :largeur="'80vw'"
+    :max-width="'1000px'"
+    @annuler="fermer"
+    @ok="sauvegarder"
+  >
+    <!-- Erreurs -->
+    <v-alert
+      v-model="afficherErreur"
+      type="error"
+      closable
+    >
+      {{ erreur }}
+    </v-alert>
+
+    <v-row>
+      <v-col
+        cols="12"
+        class="pa-0 relative"
+      >
+        <!-- Retour en haut (table des vues) -->
+        <v-btn
+          v-show="choixRetourEnHaut"
+          class="BarreRechercheBackIcone retourHautChoix"
+          icon
+          color="primary"
+          style="position: absolute"
+          @click="retourEnHaut('#choixColonnes-choix > .v-data-table__wrapper')"
+        >
+          <v-icon>mdi-arrow-up</v-icon>
+        </v-btn>
+
+        <v-card
+          rounded
+          class="pr-0"
+        >
+          <!-- TABLE 1 : Liste des vues -->
+          <v-data-table
+            id="choixColonnes-choix"
+            v-model:expanded="expandedChoixIds"
+            class="limiteHauteurChoix"
+            :headers="colonnesChoix"
+            :items="choix"
+            :item-value="row => choixOf(row)._id"
+            show-expand
+            :single-expand="true"
+            :items-per-page="-1"
+            hide-default-footer
+            fixed-header
+            @click:row="onClickRowChoix"
+          >
+            <!-- Bouton ajouter une vue -->
+            <template #header.action>
+              <bouton-primaire
+                class="float-right"
+                size="small"
+                :disabled="desactiverAjout"
+                @click.stop="ajouter"
+              >
+                {{ t('csqc.bouton.ajouter') }}
+              </bouton-primaire>
+            </template>
+            <template #item.data-table-expand="{ internalItem, isExpanded, toggleExpand }">
+              <bouton-tertiaire
+                :append-icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                :text="isExpanded(internalItem) ? 'Fermer' : 'Ouvrir'"
+                class="text-none"
+                color="medium-emphasis"
+                size="small"
+                width="105"
+                border
+                slim
+                data-expander
+                @click.stop="() => toggleExpand(internalItem)"
+              ></bouton-tertiaire>
+            </template>
+            <!-- Expansion : Table des colonnes -->
+            <template #expanded-row="{ columns }">
+              <tr>
+                <td
+                  :colspan="columns.length"
+                  class="pa-0 ma-0"
+                >
+                  <v-row
+                    class="pa-0 ma-0"
+                    no-gutters
+                  >
+                    <v-col
+                      cols="12"
+                      class="pa-0 ma-0"
+                    >
+                      <!-- Retour en haut (table des colonnes) -->
+                      <v-btn
+                        v-show="colonnesRetourEnHaut"
+                        class="BarreRechercheBackIcone retourHautChoix colonnes"
+                        icon
+                        color="primary"
+                        style="position: absolute"
+                        @click="retourEnHaut('#choixColonnes-vue > .v-data-table__wrapper')"
+                      >
+                        <v-icon>mdi-arrow-up</v-icon>
+                      </v-btn>
+
+                      <!-- TABLE 2 : Colonnes de la vue sélectionnée -->
+                      <v-data-table
+                        id="choixColonnes-vue"
+                        v-sortable-data-table
+                        class="limiteHauteurChoix colonnes mt-1 mb-4 ordonable"
+                        :headers="colonnesChoixColonne"
+                        :items="colonnesEnCours"
+                        hover
+                        item-value="value"
+                        hide-default-footer
+                        :items-per-page="-1"
+                        fixed-header
+                        :sort-by="triColonnesChoix"
+                        @sorted="changeOrdre"
+                      >
+                        <!-- Alerte dans l'entête si aucune colonne n'est sélectionnée -->
+                        <template #header.action>
+                          <v-tooltip
+                            v-if="nbColonnesSelectionnees <= 0"
+                            location="start"
+                            color="warning"
+                          >
+                            <template #activator="{ props }">
+                              <v-icon
+                                color="warning"
+                                v-bind="props"
+                              >
+                                mdi-alert
+                              </v-icon>
+                            </template>
+                            {{ t('csqc.csqcDatatable.choixColonnes.activezUneColonne') }}
+                          </v-tooltip>
+                        </template>
+
+                        <!-- Toggle (oeil) -->
+                        <template #item.action="{ item }">
+                          <v-icon
+                            :color="couleurColonneCliquee(colonneOf(item))"
+                            @click.stop="basculeColonneClique(colonneOf(item))"
+                          >
+                            {{ colonneEstClique(colonneOf(item)) ? 'mdi-eye' : 'mdi-eye-off' }}
+                          </v-icon>
+                        </template>
+
+                        <!-- Label de colonne -->
+                        <template #item.title="{ value, item }">
+                          {{ value ?? colonneOf(item).value }}
+                        </template>
+                      </v-data-table>
+                    </v-col>
+                  </v-row>
+                </td>
+              </tr>
+            </template>
+
+            <!-- Nom de vue (édition inline) -->
+            <template #item.nomVue="{ item }">
+              <v-text-field
+                v-if="choixOf(item).nomVue === vueEnEdition"
+                v-model.trim="nomVueEnCours"
+                :label="t('csqc.csqcDatatable.choixColonnes.nomVue')"
+                single-line
+                density="compact"
+                autofocus
+                class="py-0 my-0"
+                :rules="regles.nomVue"
+                hide-details
+                @keydown.enter="accepterEdition"
+                @keydown.esc.stop="annulerEdition"
+              />
+              <span
+                v-else
+                :class="{ 'error--text': !choixOf(item).nomVue }"
+              >
+                {{ choixOf(item).nomVue || t('csqc.csqcDatatable.choixColonnes.nomVueRequis') }}
+              </span>
+            </template>
+
+            <!-- Actions (vue) -->
+            <template #item.action="{ item }">
+              <template v-if="choixOf(item).nomVue === vueEnEdition">
+                <v-icon
+                  class="iconeSupprimer GouttiereSmall"
+                  @click.stop.prevent="annulerEdition"
+                >
+                  mdi-window-close
+                </v-icon>
+
+                <v-icon
+                  class="iconeHover GouttiereSmall"
+                  @click.stop.prevent="accepterEdition"
+                >
+                  mdi-check
+                </v-icon>
+              </template>
+
+              <template v-else>
+                <v-tooltip
+                  location="start"
+                  color="warning"
+                >
+                  <template #activator="{ props }">
+                    <v-icon
+                      class="iconeHover GouttiereSmall"
+                      v-bind="props"
+                      @click.stop.prevent="selectionner(choixOf(item))"
+                    >
+                      mdi-eye
+                    </v-icon>
+                  </template>
+                  {{ t('csqc.csqcDatatable.choixColonnes.activerTooltip') }}
+                </v-tooltip>
+                <v-tooltip
+                  location="start"
+                  color="warning"
+                >
+                  <template #activator="{ props }">
+                    <v-icon
+                      v-bind="props"
+                      class="iconeHover GouttiereSmall"
+                      :color="couleurDefaut(choixOf(item))"
+                      @click.stop.prevent="mettreDefaut(choixOf(item))"
+                    >
+                      mdi-star
+                    </v-icon>
+                  </template>
+                  {{ t('csqc.csqcDatatable.choixColonnes.defautTooltip') }}
+                </v-tooltip>
+                <!-- <v-icon
+                  class="iconeHover GouttiereSmall"
+                  @click.stop.prevent="editer(choixOf(item))"
+                >
+                  mdi-pencil
+                </v-icon> -->
+
+                <v-icon
+                  class="iconeSupprimer GouttiereSmall"
+                  @click.stop.prevent="supprimer(choixOf(item))"
+                >
+                  mdi-delete
+                </v-icon>
+              </template>
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-col>
+    </v-row>
+  </csqc-modale>
+</template>
+
+<script setup lang="ts">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+
+  /**
+   * csqcTableModaleChoixColonnes.vue
+   * - Permet de créer/éditer des "vues" de colonnes (ensembles de colonnes visibles)
+   * - Drag & drop pour réordonner les colonnes
+   * - Persistance via endpoint ComposantUI/Colonnes/...
+   */
+
+  import axios from '../../outils/appAxios'
+  import Sortable from 'sortablejs'
+  import { computed, nextTick, reactive, ref, watch } from 'vue'
+  import { useGoTo } from 'vuetify'
+  import { useI18n } from 'vue-i18n'
+  import CsqcModale from '../csqcDialogue.vue'
+
+  type SortableEvent = import('sortablejs').SortableEvent
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Types
+  // ─────────────────────────────────────────────────────────────────────────────
+  type ColonneChoix = {
+    value: string
+    text?: string
+    ordre?: number
+  }
+
+  type Colonne = {
+    value: string
+    title?: string
+    ordre?: number
+  }
+
+  type ChoixVue = {
+    nomVue: string
+    colonnes: string[]
+    defaut: boolean
+    _id: string // interne (clé stable si nomVue est vide)
+  }
+
+  type DataTableItemLike<T> = { raw: T }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Helpers "unwrap" (évite item.raw dans le template + évite génériques TS dans template)
+  // ─────────────────────────────────────────────────────────────────────────────
+  function asRaw<T>(item: T | DataTableItemLike<T>): T {
+    return (item as any) ?? (item as T)
+  }
+
+  const choixOf = (x: any) => asRaw<ChoixVue>(x)
+  const colonneOf = (x: any) => asRaw<Colonne>(x)
+
+  // Génère des ids pour stabiliser l’expansion / l’édition même si nomVue = ''
+  function assurerIds(vues: ChoixVue[]) {
+    for (const v of vues) {
+      if (!v._id) v._id = crypto.randomUUID()
+    }
+  }
+
+  // Clone profond simple (OK ici car données sérialisables)
+  function deepClone<T>(x: T): T {
+    return JSON.parse(JSON.stringify(x)) as T
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Props / Emits / Expose
+  // ─────────────────────────────────────────────────────────────────────────────
+  type ModaleExpose = { ouvrir: () => void; fermer: () => void }
+
+  const props = defineProps<{
+    urlbase: string
+    formulaireId: number
+    identifiant: string
+    colonnes: ColonneChoix[]
+    choixOrigine: ChoixVue[]
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'selection', choix: ChoixVue): void
+    (e: 'sauvegarde', choix: ChoixVue[]): void
+  }>()
+
+  const modale = ref<ModaleExpose | null>(null)
+
+  defineExpose({ ouvrir, fermer })
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Directive: drag & drop (sortablejs)
+  // ─────────────────────────────────────────────────────────────────────────────
+  defineOptions({
+    directives: {
+      sortableDataTable: {
+        mounted(el: HTMLElement, _binding: any, vnode: any) {
+          const tbody = el.getElementsByTagName('tbody')?.[0]
+          if (!tbody) return
+
+          Sortable.create(tbody, {
+            animation: 150,
+            onUpdate(event: SortableEvent) {
+              if (event.oldIndex == null || event.newIndex == null) return
+              vnode?.component?.emit?.('sorted', event)
+            },
+          })
+        },
+      },
+    },
+  })
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // UI / i18n / scroll helpers
+  // ─────────────────────────────────────────────────────────────────────────────
+  const { t } = useI18n()
+  const goTo = useGoTo()
+
+  const erreur = ref('')
+  const afficherErreur = ref(false)
+
+  const choixRetourEnHaut = ref(false)
+  const colonnesRetourEnHaut = ref(false)
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // State
+  // ─────────────────────────────────────────────────────────────────────────────
+  const choix = ref<ChoixVue[]>([])
+  const choixEnCours = ref<ChoixVue | null>(null)
+  const colonnesEnCours = ref<Colonne[]>([])
+
+  const sauvegardeEnCours = ref(false)
+
+  // Edition du nom de vue
+  const nomVueEnCours = ref('')
+  const vueEnEdition = ref('')
+  const desactiverAjout = ref(false)
+
+  // Tri visuel (on veut ordre asc)
+  const triColonnesChoix = ref<{ key: string; order?: 'asc' | 'desc' }[]>([{ key: 'ordre', order: 'asc' }])
+
+  // Règles validation
+  const regles = reactive({
+    nomVue: [
+      (v: string) => (v && v.trim().length >= 1) || t('csqc.csqcDatatable.choixColonnes.nomVueRequis'),
+      (v: string) =>
+        !choix.value.some(({ nomVue }) => v.trim() === nomVue) || t('csqc.csqcDatatable.choixColonnes.nomVueExiste'),
+    ],
+  })
+
+  // Affiche l'alerte si aucune colonne sélectionnée dans la vue courante
+  const nbColonnesSelectionnees = computed(() => choixEnCours.value?.colonnes?.length ?? 0)
+
+  function ouvrirVue(ch: ChoixVue) {
+    // remonte en haut la table des colonnes quand on change
+    if (choixEnCours.value) retourEnHaut('#choixColonnes-vue > .v-data-table__wrapper')
+
+    // Build colonnesEnCours à partir des colonnes disponibles
+    colonnesEnCours.value = deepClone(props.colonnes)
+
+    // Référence réactive dans la liste
+    const refDansListe = choix.value.find(x => x._id === ch._id) ?? ch
+    choixEnCours.value = refDansListe
+
+    // Colonnes sélectionnées d'abord, puis le reste
+    const selected: Colonne[] = []
+    const missing: string[] = []
+
+    for (const key of choixEnCours.value.colonnes) {
+      const col = colonnesEnCours.value.find(c => c.value === key)
+      if (!col) missing.push(key)
+      else selected.push(col)
+    }
+
+    // Nettoyage des colonnes disparues
+    if (missing.length) {
+      choixEnCours.value.colonnes = choixEnCours.value.colonnes.filter(k => !missing.includes(k))
+    }
+
+    // selected puis disponibles non sélectionnées
+    colonnesEnCours.value = selected.concat(
+      colonnesEnCours.value.filter(c => !choixEnCours.value!.colonnes.includes(c.value)),
+    )
+
+    calculOrdreColonnes()
+    ecouteDefilerColonnes()
+  }
+
+  const expandedChoixIds = ref<string[]>([])
+
+  // colonnes
+  const colonnesChoixColonne = computed(() => [
+    {
+      title: t('csqc.csqcDatatable.choixColonnes.ordre'),
+      key: 'ordre',
+      align: 'start' as const,
+      sortable: false,
+      width: '5%',
+    },
+    {
+      title: t('csqc.csqcDatatable.choixColonnes.nomColonne', colonnesEnCours.value.length),
+      key: 'title',
+      align: 'start' as const,
+      sortable: false,
+      width: '85%',
+    },
+    { title: '', key: 'action', align: 'end' as const, sortable: false, width: '10%' },
+  ])
+
+  const colonnesChoix = computed(() => [
+    {
+      title: t('csqc.csqcDatatable.choixColonnes.vues', choix.value.length),
+      key: 'nomVue',
+      width: '70%',
+      align: 'start' as const,
+    },
+    { title: '', key: 'action', width: '30%', align: 'end' as const, sortable: false },
+  ])
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // actions
+  // ─────────────────────────────────────────────────────────────────────────────
+  function ouvrir() {
+    choix.value = deepClone(props.choixOrigine)
+    assurerIds(choix.value) // obligatoire
+    expandedChoixIds.value = [] // reset
+    modale.value?.ouvrir()
+  }
+  function fermer() {
+    // Reset UI
+    sauvegardeEnCours.value = false
+    desactiverAjout.value = false
+    vueEnEdition.value = ''
+    nomVueEnCours.value = ''
+
+    // Reset sélection
+    choixEnCours.value = null
+    colonnesEnCours.value = []
+
+    // Reset erreurs
+    afficherErreur.value = false
+    erreur.value = ''
+
+    modale.value?.fermer()
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Actions : vues
+  // ─────────────────────────────────────────────────────────────────────────────
+  function ajouter() {
+    const ch: ChoixVue = {
+      _id: crypto.randomUUID(),
+      nomVue: '',
+      colonnes: [],
+      defaut: choix.value.length === 0,
+    }
+    choix.value.push(ch)
+    expandedChoixIds.value = [ch._id] // ouvre celle-là
+    editer(ch)
+  }
+
+  function editer(ch: ChoixVue) {
+    desactiverAjout.value = true
+
+    // Nettoyage d’un placeholder vide précédent (si on relance edit)
+    if (ch.nomVue !== '') supprimer({ _id: 'placeholder', nomVue: '', colonnes: [], defaut: false })
+
+    erreur.value = ''
+    nomVueEnCours.value = ch.nomVue
+    vueEnEdition.value = ch.nomVue
+  }
+
+  function accepterEdition() {
+    const nom = nomVueEnCours.value?.trim()
+
+    if (!nom) {
+      erreur.value = t('csqc.csqcDatatable.choixColonnes.nomVueRequis')
+      return
+    }
+
+    if (choix.value.some(({ nomVue }) => nomVue === nom)) {
+      erreur.value = t('csqc.csqcDatatable.choixColonnes.nomVueExiste')
+      return
+    }
+
+    const ch = choix.value.find(({ nomVue }) => nomVue === vueEnEdition.value)
+    if (!ch) return
+
+    const etaitSelectionnee = choixEstClique(ch)
+    ch.nomVue = nom
+
+    // Si c’était la vue active, on s’assure que la ref active reste valide
+    if (etaitSelectionnee) {
+      choixEnCours.value = ch
+    }
+
+    // Reset édition
+    vueEnEdition.value = ''
+    nomVueEnCours.value = ''
+    desactiverAjout.value = false
+  }
+
+  function annulerEdition() {
+    const ch = choix.value.find(({ nomVue }) => nomVue === vueEnEdition.value)
+    if (!ch) return
+
+    // Si c'était une nouvelle vue vide, on la retire
+    if (ch.nomVue === '') supprimer(ch)
+
+    vueEnEdition.value = ''
+    nomVueEnCours.value = ''
+    desactiverAjout.value = false
+  }
+
+  function selectionner(ch: ChoixVue) {
+    emit('selection', ch)
+    fermer()
+  }
+
+  function supprimer(ch: ChoixVue) {
+    if (choixEstClique(ch)) choixEnCours.value = null
+
+    const index = choix.value.findIndex(({ nomVue }) => nomVue === ch.nomVue)
+    if (index === -1) return
+
+    // Si on supprime le défaut, on transfère le défaut ailleurs
+    if (choix.value[index].defaut) {
+      const autre = choix.value.find(({ nomVue }) => nomVue !== ch.nomVue)
+      if (autre) autre.defaut = true
+    }
+
+    choix.value.splice(index, 1)
+  }
+
+  function mettreDefaut(ch: ChoixVue) {
+    const actuel = choix.value.find(v => v.defaut)
+    if (actuel) actuel.defaut = false
+
+    const cible = choix.value.find(v => v.nomVue === ch.nomVue)
+    if (cible) cible.defaut = true
+  }
+
+  function couleurDefaut(ch: ChoixVue) {
+    return ch.defaut ? '#daa520' : 'gray'
+  }
+
+  function choixEstClique(ch: ChoixVue) {
+    return ch.nomVue === choixEnCours.value?.nomVue
+  }
+
+  // Click row Vuetify (payload = { item })
+  function onClickRowChoix(_e: Event, payload: any) {
+    cliquer(choixOf(payload?.item ?? payload))
+  }
+
+  /**
+   * Sélection d’une vue :
+   * - recalcul de colonnesEnCours (selected d'abord, puis le reste)
+   * - nettoyage des colonnes "non disponibles" (si props.colonnes a changé)
+   */
+  function cliquer(ch: ChoixVue) {
+    const id = ch._id
+    if (!id) return
+
+    expandedChoixIds.value = expandedChoixIds.value[0] === id ? [] : [id]
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Actions : colonnes
+  // ─────────────────────────────────────────────────────────────────────────────
+  function colonneEstClique(colonne: Colonne) {
+    if (!choixEnCours.value) return false
+    return choixEnCours.value.colonnes.includes(colonne.value)
+  }
+
+  function couleurColonneCliquee(colonne: Colonne) {
+    return colonneEstClique(colonne) ? 'primary' : 'gray'
+  }
+
+  function basculeColonneClique(colonne: Colonne) {
+    if (!choixEnCours.value) return
+
+    if (colonneEstClique(colonne)) {
+      choixEnCours.value.colonnes = choixEnCours.value.colonnes.filter(x => x !== colonne.value)
+      return
+    }
+
+    choixEnCours.value.colonnes.push(colonne.value)
+  }
+
+  // Liste des colonnes actuellement "cliquées" selon l’ordre affiché
+  const colonnesCliquees = computed(() => {
+    if (!choixEnCours.value) return []
+    return colonnesEnCours.value.filter(c => choixEnCours.value!.colonnes.includes(c.value)).map(c => c.value)
+  })
+
+  function changeOrdre(event: SortableEvent) {
+    if (event.oldIndex == null || event.newIndex == null) return
+
+    const moved = colonnesEnCours.value.splice(event.oldIndex, 1)[0]
+    colonnesEnCours.value.splice(event.newIndex, 0, moved)
+
+    calculOrdreColonnes()
+
+    // Après reorder, on sauvegarde la sélection dans le nouvel ordre visuel
+    if (choixEnCours.value) {
+      choixEnCours.value.colonnes = colonnesCliquees.value
+    }
+  }
+
+  function calculOrdreColonnes() {
+    for (let i = 0; i < colonnesEnCours.value.length; i += 1) {
+      colonnesEnCours.value[i].ordre = i + 1
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // axios
+  // ─────────────────────────────────────────────────────────────────────────────
+  async function sauvegarder() {
+    sauvegardeEnCours.value = true
+
+    try {
+      const res: any = await axios
+        .getAxios()
+        .post(`${props.urlbase}/api/ComposantUI/Colonnes/${props.formulaireId}/Identifiant/${props.identifiant}`, {
+          valeur: JSON.stringify(choix.value),
+        })
+
+      const payload = res?.data ?? res
+
+      // payload peut être un json string ou déjà un tableau
+      choix.value = typeof payload === 'string' ? (JSON.parse(payload) as ChoixVue[]) : (payload as ChoixVue[])
+
+      assurerIds(choix.value)
+
+      // Notifie le parent
+      emit('sauvegarde', choix.value)
+      if (choixEnCours.value) emit('selection', choixEnCours.value)
+
+      fermer()
+    } catch (e) {
+      erreur.value = String(e)
+    } finally {
+      sauvegardeEnCours.value = false
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Scroll helpers
+  // ─────────────────────────────────────────────────────────────────────────────
+  function retourEnHaut(cible: string) {
+    goTo(0, { container: cible })
+  }
+
+  function defilerChoix(e: Event) {
+    const target = e.target as HTMLElement
+    choixRetourEnHaut.value = target.scrollTop >= 200
+  }
+
+  function ecouteDefilerChoix() {
+    const el = document.querySelector('#choixColonnes-choix > .v-data-table__wrapper')
+    if (!el) {
+      setTimeout(ecouteDefilerChoix, 100)
+      return
+    }
+    el.addEventListener('scroll', defilerChoix)
+  }
+
+  function defilerColonnes(e: Event) {
+    const target = e.target as HTMLElement
+    colonnesRetourEnHaut.value = target.scrollTop >= 200
+  }
+
+  function ecouteDefilerColonnes() {
+    nextTick(() => {
+      const el = document.querySelector('#choixColonnes-vue > .v-data-table__wrapper')
+      if (!el) {
+        setTimeout(ecouteDefilerColonnes, 100)
+        return
+      }
+      el.addEventListener('scroll', defilerColonnes)
+    })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Watchers
+  // ─────────────────────────────────────────────────────────────────────────────
+  watch(erreur, () => {
+    afficherErreur.value = erreur.value !== ''
+  })
+
+  watch(afficherErreur, v => {
+    if (v === false) erreur.value = ''
+  })
+
+  watch(
+    expandedChoixIds,
+    v => {
+      const id = v?.[0]
+
+      // Fermeture
+      if (!id) {
+        choixEnCours.value = null
+        colonnesEnCours.value = []
+        return
+      }
+
+      // Ouverture / changement
+      const ch = choix.value.find(x => x._id === id)
+      if (!ch) return
+
+      ouvrirVue(ch) // IMPORTANT: ouverture "force", pas toggle
+    },
+    { flush: 'post' }, // <-- clé du fix
+  )
+  watch(
+    expandedChoixIds,
+    v => {
+      if (v.length > 1) expandedChoixIds.value = [v[v.length - 1]] // garde le dernier
+    },
+    { flush: 'sync' },
+  )
+</script>
+
+<style scoped>
+  /* Layout */
+  .relative {
+    position: relative;
+  }
+
+  /* Boutons "retour en haut" */
+  .retourHautChoix {
+    bottom: 4px !important;
+    right: 4px;
+  }
+  .retourHautChoix.colonnes {
+    bottom: 8px !important;
+    right: 48px;
+  }
+
+  /* Scroll vertical des tables */
+  .limiteHauteurChoix > .v-data-table__wrapper {
+    max-height: min(80vh - 200px, 900px);
+    overflow-y: auto;
+  }
+  .limiteHauteurChoix.colonnes > .v-data-table__wrapper {
+    max-height: min(80vh - 294px, 600px);
+  }
+
+  /* Z-index du header table 1 */
+  #choixColonnes-choix > .v-data-table__wrapper > table > thead > tr > th {
+    z-index: 3;
+  }
+
+  /* Drag cursor */
+  .v-data-table.ordonable > .v-data-table__wrapper > table > tbody > tr {
+    cursor: move;
+  }
+
+  /* Icons */
+  .iconeSupprimer:hover {
+    color: red;
+  }
+  .v-icon.v-icon.v-icon--link.iconeSupprimer:hover {
+    color: red !important;
+  }
+  .iconeEditer:hover {
+    color: #095797;
+  }
+
+  .GouttiereSmall {
+    margin-left: 8px;
+  }
+</style>