codevdesign 1.0.39 → 1.0.40

package/composants/csqcTable/csqcTableModaleChoixColonnes.vue

@@ -1,586 +1,586 @@
-<template>
-  <csqc-modale
-    ref="modale"
-    :titre="$tc('csqc-table.choixColonnes.titre')"
-    :afficher-ok="false"
-    :afficher-annuler="!sauvegardeEnCours"
-    width="90vw"
-    max-width="4000px"
-    @fermer="fermer"
-  >
-    <v-alert
-      v-model="afficherErreur"
-      type="error"
-      closable
-      >{{ erreur }}</v-alert
-    >
-    <v-row>
-      <v-col
-        cols="12"
-        class="pa-0 relative"
-      >
-        <v-btn
-          v-show="choixRetourEnHaut"
-          class="BarreRechercheBackIcone retourHautChoix"
-          location="bottom right"
-          absolute
-          color="primary"
-          @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"
-        >
-          <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
-              >
-                <v-col
-                  cols="12"
-                  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-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-tooltip
-                        location="left"
-                        color="warning"
-                      >
-                        <template #activator="{ props }">
-                          <v-icon
-                            color="warning"
-                            v-bind="props"
-                            >mdi-alert</v-icon
-                          >
-                        </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
-              >
-            </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)"
-              >
-                <v-icon
-                  class="couleurHover"
-                  :color="couleurDefaut(item)"
-                  >mdi-star</v-icon
-                >
-              </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
-              >
-            </template>
-          </template>
-        </v-data-table>
-      </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>
-  import Sortable from 'sortablejs'
-  import axios from '@/outils/appAxios'
-  import CsqcModale from '../CsqcDialogue/csqc-boite-dialogue.vue'
-
-  export default {
-    directives: {
-      sortableDataTable: {
-        bind(el, binding, vnode) {
-          const options = {
-            animation: 150,
-            onUpdate(event) {
-              vnode.child.$emit('sorted', event)
-            },
-          }
-          Sortable.create(el.getElementsByTagName('tbody')[0], options)
-        },
-      },
-    },
-    components: {
-      'csqc-modale': CsqcModale,
-    },
-    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,
-      },
-    },
-    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'),
-          ],
-        },
-      }
-    },
-
-    computed: {
-      colonnesCliquees() {
-        if (this.choixEnCours.length <= 0) return []
-
-        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)
-      },
-    },
-
-    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()
-      },
-
-      fermer() {
-        this.sauvegardeEnCours = false
-        this.desactiverAjout = false
-        this.vueEnEdition = ''
-        this.choixEnCours = []
-        this.colonnesEnCours = []
-        this.erreur = ''
-        this.$refs.modale.fermer()
-      },
-
-      ajouter() {
-        const ch = {
-          nomVue: '',
-          colonnes: [],
-          defaut: this.choix.length === 0,
-        }
-        this.choix.push(ch)
-
-        this.cliquer(ch)
-        this.editer(ch)
-      },
-      editer(ch) {
-        this.desactiverAjout = true
-        if (ch.nomVue !== '') this.supprimer({ nomVue: '' })
-
-        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
-      },
-
-      selectionner(ch) {
-        this.$emit('selection', ch)
-        this.fermer()
-      },
-
-      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)
-        })
-
-        // 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()
-      },
-
-      choixEstClique(ch) {
-        return ch.nomVue === this.choixEnCours[0]?.nomVue
-      },
-
-      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'
-        }
-
-        return 'gray'
-      },
-
-      colonneEstClique(colonne) {
-        if (this.choixEnCours.length <= 0) {
-          return 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
-        }
-
-        this.choixEnCours[0].colonnes.push(colonne.value)
-      },
-
-      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
-        }
-      },
-
-      supprimer(ch) {
-        if (this.choixEstClique(ch)) this.choixEnCours = []
-
-        const index = this.choix.findIndex(({ nomVue }) => nomVue === ch.nomVue)
-        if (index === -1) {
-          return
-        }
-
-        if (this.choix[index].defaut) {
-          const nonDefaut = this.choix.find(({ nomVue }) => nomVue !== ch.nomVue)
-          if (nonDefaut) {
-            nonDefaut.defaut = true
-          }
-        }
-
-        this.choix.splice(index, 1)
-      },
-
-      // 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
-          })
-      },
-
-      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))
-      },
-    },
-  }
-</script>
-<style scoped>
-  .relative {
-    position: relative;
-  }
-  .retourHautChoix {
-    bottom: 4px !important;
-    right: 4px;
-  }
-  .retourHautChoix.colonnes {
-    bottom: 8px !important;
-    right: 48px;
-  }
-</style>
-<style>
-  .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);
-  }
-  .v-data-table.ordonable > .v-data-table__wrapper > table > tbody > tr {
-    cursor: move;
-  }
-</style>
+<template>
+  <csqc-modale
+    ref="modale"
+    :titre="$tc('csqc-table.choixColonnes.titre')"
+    :afficher-ok="false"
+    :afficher-annuler="!sauvegardeEnCours"
+    width="90vw"
+    max-width="4000px"
+    @fermer="fermer"
+  >
+    <v-alert
+      v-model="afficherErreur"
+      type="error"
+      closable
+      >{{ erreur }}</v-alert
+    >
+    <v-row>
+      <v-col
+        cols="12"
+        class="pa-0 relative"
+      >
+        <v-btn
+          v-show="choixRetourEnHaut"
+          class="BarreRechercheBackIcone retourHautChoix"
+          location="bottom right"
+          absolute
+          color="primary"
+          @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"
+        >
+          <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
+              >
+                <v-col
+                  cols="12"
+                  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-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-tooltip
+                        location="left"
+                        color="warning"
+                      >
+                        <template #activator="{ props }">
+                          <v-icon
+                            color="warning"
+                            v-bind="props"
+                            >mdi-alert</v-icon
+                          >
+                        </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
+              >
+            </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)"
+              >
+                <v-icon
+                  class="couleurHover"
+                  :color="couleurDefaut(item)"
+                  >mdi-star</v-icon
+                >
+              </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
+              >
+            </template>
+          </template>
+        </v-data-table>
+      </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>
+  import Sortable from 'sortablejs'
+  import axios from '@/outils/appAxios'
+  import CsqcModale from '../CsqcDialogue/csqc-boite-dialogue.vue'
+
+  export default {
+    directives: {
+      sortableDataTable: {
+        bind(el, binding, vnode) {
+          const options = {
+            animation: 150,
+            onUpdate(event) {
+              vnode.child.$emit('sorted', event)
+            },
+          }
+          Sortable.create(el.getElementsByTagName('tbody')[0], options)
+        },
+      },
+    },
+    components: {
+      'csqc-modale': CsqcModale,
+    },
+    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,
+      },
+    },
+    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'),
+          ],
+        },
+      }
+    },
+
+    computed: {
+      colonnesCliquees() {
+        if (this.choixEnCours.length <= 0) return []
+
+        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)
+      },
+    },
+
+    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()
+      },
+
+      fermer() {
+        this.sauvegardeEnCours = false
+        this.desactiverAjout = false
+        this.vueEnEdition = ''
+        this.choixEnCours = []
+        this.colonnesEnCours = []
+        this.erreur = ''
+        this.$refs.modale.fermer()
+      },
+
+      ajouter() {
+        const ch = {
+          nomVue: '',
+          colonnes: [],
+          defaut: this.choix.length === 0,
+        }
+        this.choix.push(ch)
+
+        this.cliquer(ch)
+        this.editer(ch)
+      },
+      editer(ch) {
+        this.desactiverAjout = true
+        if (ch.nomVue !== '') this.supprimer({ nomVue: '' })
+
+        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
+      },
+
+      selectionner(ch) {
+        this.$emit('selection', ch)
+        this.fermer()
+      },
+
+      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)
+        })
+
+        // 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()
+      },
+
+      choixEstClique(ch) {
+        return ch.nomVue === this.choixEnCours[0]?.nomVue
+      },
+
+      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'
+        }
+
+        return 'gray'
+      },
+
+      colonneEstClique(colonne) {
+        if (this.choixEnCours.length <= 0) {
+          return 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
+        }
+
+        this.choixEnCours[0].colonnes.push(colonne.value)
+      },
+
+      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
+        }
+      },
+
+      supprimer(ch) {
+        if (this.choixEstClique(ch)) this.choixEnCours = []
+
+        const index = this.choix.findIndex(({ nomVue }) => nomVue === ch.nomVue)
+        if (index === -1) {
+          return
+        }
+
+        if (this.choix[index].defaut) {
+          const nonDefaut = this.choix.find(({ nomVue }) => nomVue !== ch.nomVue)
+          if (nonDefaut) {
+            nonDefaut.defaut = true
+          }
+        }
+
+        this.choix.splice(index, 1)
+      },
+
+      // 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
+          })
+      },
+
+      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))
+      },
+    },
+  }
+</script>
+<style scoped>
+  .relative {
+    position: relative;
+  }
+  .retourHautChoix {
+    bottom: 4px !important;
+    right: 4px;
+  }
+  .retourHautChoix.colonnes {
+    bottom: 8px !important;
+    right: 48px;
+  }
+</style>
+<style>
+  .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);
+  }
+  .v-data-table.ordonable > .v-data-table__wrapper > table > tbody > tr {
+    cursor: move;
+  }
+</style>