codevdesign 1.0.43 → 1.0.44

package/composants/csqcTable/csqcTableModaleChoixColonnes.vue

@@ -1,565 +1,791 @@
 <template>
   <csqc-modale
     ref="modale"
-    :titre="$tc('csqc-table.choixColonnes.titre')"
-    :afficher-ok="false"
-    :afficher-annuler="!sauvegardeEnCours"
-    width="90vw"
-    max-width="4000px"
-    @fermer="fermer"
+    :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
     >
+      {{ 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"
-          location="bottom right"
-          absolute
+          icon
           color="primary"
+          style="position: absolute"
           @click="retourEnHaut('#choixColonnes-choix > .v-data-table__wrapper')"
         >
           <v-icon>mdi-arrow-up</v-icon>
         </v-btn>
-        <v-data-table
-          id="choixColonnes-choix"
-          v-model:expanded="choixEnCours"
-          class="limiteHauteurChoix"
-          :headers="colonnesChoix"
-          item-key="nomVue"
-          :items="choix"
-          single-expand
-          disable-pagination
-          hide-default-footer
-          fixed-header
-          @click:row="cliquer"
+
+        <v-card
+          rounded
+          class="pr-0"
         >
-          <template #header.action>
-            <v-btn
-              color="primary"
-              class="float-right"
-              size="small"
-              :disabled="desactiverAjout"
-              @click.stop="ajouter"
-            >
-              {{ $tc('csqc-table.button.ajouter') }}
-            </v-btn>
-          </template>
-
-          <template #expanded-item="{ headers }">
-            <td
-              :colspan="headers.length"
-              class="pa-0 ma-0"
-            >
-              <v-row
-                class="pa-0 ma-0"
-                no-gutters
+          <!-- TABLE 1 : Liste des vues -->
+          <v-data-table
+            id="choixColonnes-choix"
+            class="limiteHauteurChoix"
+            :headers="colonnesChoix"
+            :items="choix"
+            :item-value="row => choixOf(row)._id"
+            v-model:expanded="expandedChoixIds"
+            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"
               >
-                <v-col
-                  cols="12"
+                {{ t('csqc.bouton.ajouter') }}
+              </v-btn>
+            </template>
+            <template v-slot: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-btn
-                    v-show="colonnesRetourEnHaut"
-                    class="BarreRechercheBackIcone retourHautChoix colonnes"
-                    location="bottom right"
-                    absolute
-                    color="primary"
-                    @click="retourEnHaut('#choixColonnes-vue > .v-data-table__wrapper')"
+                  <v-row
+                    class="pa-0 ma-0"
+                    no-gutters
                   >
-                    <v-icon>mdi-arrow-up</v-icon>
-                  </v-btn>
-                  <v-data-table
-                    id="choixColonnes-vue"
-                    v-model:sort-by="triColonnesChoix"
-                    v-sortable-data-table
-                    class="limiteHauteurChoix colonnes mt-1 mb-4 ml-2 ordonable"
-                    :headers="colonnesChoixColonne"
-                    :items="colonnesEnCours"
-                    item-key="value"
-                    hide-default-footer
-                    disable-pagination
-                    fixed-header
-                    :style="`margin-right: ${90 - $vuetify.breakpoint.scrollBarWidth}px;`"
-                    @sorted="changeOrdre"
-                  >
-                    <template
-                      v-if="choixEnCours[0]?.colonnes.length <= 0"
-                      #header.action
+                    <v-col
+                      cols="12"
+                      class="pa-0 ma-0"
                     >
-                      <v-tooltip
-                        location="left"
-                        color="warning"
+                      <!-- 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')"
                       >
-                        <template #activator="{ props }">
-                          <v-icon
+                        <v-icon>mdi-arrow-up</v-icon>
+                      </v-btn>
+
+                      <!-- TABLE 2 : Colonnes de la vue sélectionnée -->
+                      <v-data-table
+                        id="choixColonnes-vue"
+                        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"
+                        v-sortable-data-table
+                        @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"
-                            v-bind="props"
-                            >mdi-alert</v-icon
                           >
+                            <template #activator="{ props }">
+                              <v-icon
+                                color="warning"
+                                v-bind="props"
+                              >
+                                mdi-alert
+                              </v-icon>
+                            </template>
+                            {{ t('csqc.csqcDatatable.choixColonnes.activezUneColonne') }}
+                          </v-tooltip>
                         </template>
-                        {{ $tc('csqc-table.choixColonnes.activezUneColonne') }}
-                      </v-tooltip>
-                    </template>
 
-                    <template #item.action="{ item }">
-                      <v-btn
-                        class="mr-1"
-                        icon
-                        @click.stop="basculeColonneClique(item)"
-                      >
-                        <v-icon :color="couleurColonneCliquee(item)">{{
-                          colonneEstClique(item) ? 'mdi-eye' : 'mdi-eye-off'
-                        }}</v-icon>
-                      </v-btn>
-                    </template>
-                    <template #item.text="{ item }">{{ item.text ? item.text : item.value }}</template>
-                  </v-data-table>
-                </v-col>
-              </v-row>
-            </td>
-          </template>
-
-          <template #item.nomVue="{ item }">
-            <v-text-field
-              v-if="item.nomVue === vueEnEdition"
-              v-model.trim="nomVueEnCours"
-              :label="$tc('csqc-table.choixColonnes.nomVue')"
-              single-line
-              density="compact"
-              autofocus
-              class="py-0 my-0"
-              :rules="regles.nomVue"
-              hide-details
-              @keydown.enter="accepterEdition"
-              @keydown.esc.stop="annulerEdition"
-            ></v-text-field>
-            <span
-              v-else
-              :class="{ 'error--text': !item.nomVue }"
-            >
-              {{ item.nomVue || $tc('csqc-table.choixColonnes.nomVueRequis') }}
-            </span>
-          </template>
-          <template #item.action="{ item }">
-            <template v-if="item.nomVue === vueEnEdition">
-              <v-btn
-                icon
-                @click.stop.prevent="annulerEdition"
-                ><v-icon class="iconeSupprimer">mdi-window-close</v-icon></v-btn
-              >
-              <v-btn
-                icon
-                @click.stop.prevent="accepterEdition"
-                ><v-icon class="couleurHover">mdi-check</v-icon></v-btn
-              >
+                        <!-- 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>
-            <template v-else>
-              <v-btn
-                icon
-                @click.stop.prevent="selectionner(item)"
-                ><v-icon class="couleurHover">mdi-eye</v-icon></v-btn
-              >
-              <v-btn
-                icon
-                @click.stop.prevent="mettreDefaut(item)"
+
+            <!-- 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="couleurHover"
-                  :color="couleurDefaut(item)"
-                  >mdi-star</v-icon
+                  class="iconeSupprimer GouttiereSmall"
+                  @click.stop.prevent="annulerEdition"
                 >
-              </v-btn>
-              <v-btn
-                icon
-                @click.stop.prevent="editer(item)"
-                ><v-icon class="couleurHover">mdi-pencil</v-icon></v-btn
-              >
-              <v-btn
-                icon
-                @click.stop.prevent="supprimer(item)"
-                ><v-icon class="iconeSupprimer">mdi-delete</v-icon></v-btn
-              >
+                  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>
-          </template>
-        </v-data-table>
+          </v-data-table>
+        </v-card>
       </v-col>
     </v-row>
-
-    <template #actions>
-      <v-btn
-        color="primary"
-        class="elevation-0"
-        :disabled="!formValide"
-        :loading="sauvegardeEnCours"
-        @click.stop="sauvegarder"
-      >
-        {{ $tc('csqc-table.choixColonnes.ok') }}
-      </v-btn>
-    </template>
   </csqc-modale>
 </template>
 
-<script>
+<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 axios from '@/outils/appAxios'
-  import CsqcModale from '../CsqcDialogue/csqc-boite-dialogue.vue'
+  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)?.raw ?? (item as T)
+  }
 
-  export default {
+  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: {
-        bind(el, binding, vnode) {
-          const options = {
+        mounted(el: HTMLElement, _binding: any, vnode: any) {
+          const tbody = el.getElementsByTagName('tbody')?.[0]
+          if (!tbody) return
+
+          Sortable.create(tbody, {
             animation: 150,
-            onUpdate(event) {
-              vnode.child.$emit('sorted', event)
+            onUpdate(event: SortableEvent) {
+              if (event.oldIndex == null || event.newIndex == null) return
+              vnode?.component?.emit?.('sorted', event)
             },
-          }
-          Sortable.create(el.getElementsByTagName('tbody')[0], options)
+          })
         },
       },
     },
-    components: {
-      'csqc-modale': CsqcModale,
+  })
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // 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<Array<{ 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%',
     },
-    props: {
-      urlbase: {
-        required: true,
-        type: String,
-      },
-      formulaireId: {
-        required: true,
-        type: Number,
-      },
-      identifiant: {
-        required: true,
-        type: String,
-      },
-      colonnes: {
-        required: true,
-        type: Array,
-      },
-      choixOrigine: {
-        required: true,
-        type: Array,
-      },
+    {
+      title: t('csqc.csqcDatatable.choixColonnes.nomColonne', colonnesEnCours.value.length),
+      key: 'title',
+      align: 'start' as const,
+      sortable: false,
+      width: '85%',
     },
-    data() {
-      return {
-        erreur: '',
-        afficherErreur: false,
-        choixEnCours: [],
-        choix: [],
-        colonnesEnCours: [],
-        triColonnesChoix: ['ordre'],
-        sauvegardeEnCours: false,
-        choixRetourEnHaut: false,
-        colonnesRetourEnHaut: false,
-        nomVueEnCours: '',
-        vueEnEdition: '',
-        desactiverAjout: false,
-        regles: {
-          nomVue: [
-            v => (v && v.trim().length >= 1) || this.$tc('csqc-table.choixColonnes.nomVueRequis'),
-            v =>
-              !this.choix.some(({ nomVue }) => v.trim() === nomVue) ||
-              this.$tc('csqc-table.choixColonnes.nomVueExiste'),
-          ],
-        },
-      }
+    { 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()
+  }
 
-    computed: {
-      colonnesCliquees() {
-        if (this.choixEnCours.length <= 0) return []
+  // ─────────────────────────────────────────────────────────────────────────────
+  // 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)
+  }
 
-        const retour = this.colonnesEnCours
-          .filter(c => this.choixEnCours[0].colonnes.some(x => x === c.value))
-          .map(c => c.value)
-        return retour
-      },
-      colonnesChoixColonne() {
-        const cols = [
-          {
-            text: this.$tc('csqc-table.choixColonnes.ordre'),
-            align: 'start',
-            sortable: false,
-            value: 'ordre',
-            width: '5%',
-          },
-          {
-            text: this.$tc('csqc-table.choixColonnes.nomColonne', this.colonnesEnCours.length),
-            align: 'start',
-            sortable: false,
-            value: 'text',
-            width: '85%',
-          },
-          {
-            value: 'action',
-            sortable: false,
-            width: '10%',
-            align: 'right',
-          },
-        ]
-        return cols
-      },
-      colonnesChoix() {
-        return [
-          {
-            text: this.$tc('csqc-table.choixColonnes.vues', this.choix.length),
-            value: 'nomVue',
-            width: '70%',
-            align: 'start',
-          },
-          {
-            value: 'action',
-            width: '30%',
-            align: 'right',
-            sortable: false,
-          },
-        ]
-      },
-      formValide() {
-        return !this.choix.some(vue => vue.nomVue === '' || vue.colonnes.length <= 0)
-      },
-    },
+  function editer(ch: ChoixVue) {
+    desactiverAjout.value = true
 
-    watch: {
-      erreur() {
-        this.afficherErreur = this.erreur !== ''
-      },
-      afficherErreur() {
-        if (this.afficherErreur === false) {
-          this.erreur = ''
-        }
-      },
-    },
-    methods: {
-      ouvrir() {
-        this.choix = JSON.parse(JSON.stringify(this.choixOrigine))
-        this.$refs.modale.ouvrir()
-        this.ecouteDefilerChoix()
-      },
+    // Nettoyage d’un placeholder vide précédent (si on relance edit)
+    if (ch.nomVue !== '') supprimer({ _id: 'placeholder', nomVue: '', colonnes: [], defaut: false })
 
-      fermer() {
-        this.sauvegardeEnCours = false
-        this.desactiverAjout = false
-        this.vueEnEdition = ''
-        this.choixEnCours = []
-        this.colonnesEnCours = []
-        this.erreur = ''
-        this.$refs.modale.fermer()
-      },
+    erreur.value = ''
+    nomVueEnCours.value = ch.nomVue
+    vueEnEdition.value = ch.nomVue
+  }
 
-      ajouter() {
-        const ch = {
-          nomVue: '',
-          colonnes: [],
-          defaut: this.choix.length === 0,
-        }
-        this.choix.push(ch)
+  function accepterEdition() {
+    const nom = nomVueEnCours.value?.trim()
 
-        this.cliquer(ch)
-        this.editer(ch)
-      },
-      editer(ch) {
-        this.desactiverAjout = true
-        if (ch.nomVue !== '') this.supprimer({ nomVue: '' })
+    if (!nom) {
+      erreur.value = t('csqc.csqcDatatable.choixColonnes.nomVueRequis')
+      return
+    }
 
-        this.erreur = ''
-        this.nomVueEnCours = ch.nomVue
-        this.vueEnEdition = ch.nomVue
-      },
-      accepterEdition() {
-        if (!this.nomVueEnCours) {
-          this.erreur = this.$tc('csqc-table.choixColonnes.nomVueRequis')
-          return
-        }
-
-        if (this.choix.some(({ nomVue }) => nomVue === this.nomVueEnCours)) {
-          this.erreur = this.$tc('csqc-table.choixColonnes.nomVueExiste')
-          return
-        }
-
-        const ch = this.choix.find(({ nomVue }) => nomVue === this.vueEnEdition)
-        const choixClique = this.choixEstClique(ch)
-
-        ch.nomVue = this.nomVueEnCours
-        if (choixClique) this.choixEnCours = [ch]
-        this.vueEnEdition = ''
-        this.nomVueEnCours = ''
-        this.desactiverAjout = false
-      },
-      annulerEdition() {
-        const ch = this.choix.find(({ nomVue }) => nomVue === this.vueEnEdition)
-        if (ch.nomVue === '') this.supprimer(ch)
-        this.vueEnEdition = ''
-        this.nomVueEnCours = ''
-        this.desactiverAjout = false
-      },
+    if (choix.value.some(({ nomVue }) => nomVue === nom)) {
+      erreur.value = t('csqc.csqcDatatable.choixColonnes.nomVueExiste')
+      return
+    }
 
-      selectionner(ch) {
-        this.$emit('selection', ch)
-        this.fermer()
-      },
+    const ch = choix.value.find(({ nomVue }) => nomVue === vueEnEdition.value)
+    if (!ch) return
 
-      cliquer(ch) {
-        if (this.choixEnCours.length > 0) this.retourEnHaut('#choixColonnes-vue > .v-data-table__wrapper')
-        if (this.choixEstClique(ch)) {
-          this.choixEnCours = []
-          this.colonnesEnCours = []
-          return
-        }
-
-        this.colonnesEnCours = JSON.parse(JSON.stringify(this.colonnes)) // Toujours commencer avec les colonnes par défaut
-        this.choixEnCours = [ch]
-        const tempCols = []
-        const colsPlusDispo = []
-
-        this.choixEnCours[0].colonnes.forEach(colonne => {
-          const tCol = this.colonnesEnCours.find(c => c.value === colonne)
-          if (tCol == null)
-            colsPlusDispo.push(colonne) // Ne supprime pas dans la collection lors son itération
-          else tempCols.push(tCol)
-        })
+    const etaitSelectionnee = choixEstClique(ch)
+    ch.nomVue = nom
 
-        // Nettoyer la vue au besoin (effectif seulement si l'utilisateur sauve les choix)
-        if (colsPlusDispo.length > 0) {
-          this.choixEnCours[0].colonnes = this.choixEnCours[0].colonnes.filter(
-            c => !colsPlusDispo.some(cpd => c === cpd),
-          )
-        }
-
-        this.colonnesEnCours = tempCols.concat(
-          this.colonnesEnCours.filter(c => !this.choixEnCours[0].colonnes.some(cch => cch === c.value)),
-        )
-        this.calculOrdreColonnes()
-        this.ecouteDefilerColonnes()
-      },
+    // Si c’était la vue active, on s’assure que la ref active reste valide
+    if (etaitSelectionnee) {
+      choixEnCours.value = ch
+    }
 
-      choixEstClique(ch) {
-        return ch.nomVue === this.choixEnCours[0]?.nomVue
-      },
+    // Reset édition
+    vueEnEdition.value = ''
+    nomVueEnCours.value = ''
+    desactiverAjout.value = false
+  }
 
-      mettreDefaut(ch) {
-        this.choix.find(({ defaut }) => defaut).defaut = false
-        this.choix.find(({ nomVue }) => nomVue === ch.nomVue).defaut = true
-      },
-      couleurDefaut(ch) {
-        if (ch.defaut === true) {
-          return '#daa520'
-        }
+  function annulerEdition() {
+    const ch = choix.value.find(({ nomVue }) => nomVue === vueEnEdition.value)
+    if (!ch) return
 
-        return 'gray'
-      },
+    // Si c'était une nouvelle vue vide, on la retire
+    if (ch.nomVue === '') supprimer(ch)
 
-      colonneEstClique(colonne) {
-        if (this.choixEnCours.length <= 0) {
-          return false
-        }
+    vueEnEdition.value = ''
+    nomVueEnCours.value = ''
+    desactiverAjout.value = false
+  }
 
-        return this.choixEnCours[0].colonnes.some(x => x === colonne.value)
-      },
-      couleurColonneCliquee(colonne) {
-        if (this.colonneEstClique(colonne)) return 'primary'
-        return 'gray'
-      },
-      basculeColonneClique(colonne) {
-        if (this.colonneEstClique(colonne)) {
-          this.choixEnCours[0].colonnes = this.choixEnCours[0].colonnes.filter(x => x !== colonne.value)
-          return
-        }
+  function selectionner(ch: ChoixVue) {
+    emit('selection', ch)
+    fermer()
+  }
 
-        this.choixEnCours[0].colonnes.push(colonne.value)
-      },
+  function supprimer(ch: ChoixVue) {
+    if (choixEstClique(ch)) choixEnCours.value = null
 
-      changeOrdre(event) {
-        const movedItem = this.colonnesEnCours.splice(event.oldIndex, 1)[0]
-        this.colonnesEnCours.splice(event.newIndex, 0, movedItem)
-        this.calculOrdreColonnes()
-        this.choixEnCours[0].colonnes = this.colonnesCliquees
-      },
-      calculOrdreColonnes() {
-        for (let i = 0; i < this.colonnesEnCours.length; i += 1) {
-          this.colonnesEnCours[i].ordre = 1 + i
-        }
-      },
+    const index = choix.value.findIndex(({ nomVue }) => nomVue === ch.nomVue)
+    if (index === -1) return
 
-      supprimer(ch) {
-        if (this.choixEstClique(ch)) this.choixEnCours = []
+    // 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
+    }
 
-        const index = this.choix.findIndex(({ nomVue }) => nomVue === ch.nomVue)
-        if (index === -1) {
-          return
-        }
+    choix.value.splice(index, 1)
+  }
 
-        if (this.choix[index].defaut) {
-          const nonDefaut = this.choix.find(({ nomVue }) => nomVue !== ch.nomVue)
-          if (nonDefaut) {
-            nonDefaut.defaut = true
-          }
-        }
+  function mettreDefaut(ch: ChoixVue) {
+    const actuel = choix.value.find(v => v.defaut)
+    if (actuel) actuel.defaut = false
 
-        this.choix.splice(index, 1)
-      },
+    const cible = choix.value.find(v => v.nomVue === ch.nomVue)
+    if (cible) cible.defaut = true
+  }
 
-      // ENREGISTREMENT
-      sauvegarder() {
-        axios
-          .post(`${this.urlbase}/api/ComposantUI/Colonnes/${this.formulaireId}/Identifiant/${this.identifiant}`, {
-            valeur: JSON.stringify(this.choix),
-          })
-          .then(({ data }) => {
-            this.choix = JSON.parse(data.resultat)
-            this.$emit('sauvegarde', this.choix)
-            if (this.choixEnCours.length > 0) this.$emit('selection', this.choixEnCours[0])
-            this.fermer()
-          })
-          .catch(e => {
-            this.erreur = e
-          })
-      },
+  function couleurDefaut(ch: ChoixVue) {
+    return ch.defaut ? '#daa520' : 'gray'
+  }
 
-      retourEnHaut(cible) {
-        this.$vuetify.goTo(0, { container: cible })
-      },
-      defilerChoix(e) {
-        this.choixRetourEnHaut = e.target.scrollTop >= 200
-      },
-      ecouteDefilerChoix() {
-        const vdtwChoix = document.querySelector('#choixColonnes-choix > .v-data-table__wrapper')
-        if (vdtwChoix == null) {
-          setTimeout(this.ecouteDefilerChoix.bind(this), 100)
-          return
-        }
-        vdtwChoix.addEventListener('scroll', this.defilerChoix.bind(this))
-      },
-      defilerColonnes(e) {
-        this.colonnesRetourEnHaut = e.target.scrollTop >= 200
-      },
-      ecouteDefilerColonnes() {
-        const vdtwCols = document.querySelector('#choixColonnes-vue > .v-data-table__wrapper')
-        if (vdtwCols == null) {
-          setTimeout(this.ecouteDefilerColonnes.bind(this), 100)
-          return
-        }
-        vdtwCols.addEventListener('scroll', this.defilerColonnes.bind(this))
-      },
-    },
+  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;
@@ -568,19 +794,38 @@
     bottom: 8px !important;
     right: 48px;
   }
-</style>
-<style>
+
+  /* Scroll vertical des tables */
   .limiteHauteurChoix > .v-data-table__wrapper {
     max-height: min(80vh - 200px, 900px);
     overflow-y: auto;
   }
-  #choixColonnes-choix > .v-data-table__wrapper > table > thead > tr > th {
-    z-index: 3;
-  }
   .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>