codevdesign 0.0.53 → 0.0.54

package/composants/csqcTable/csqcTableModaleChoixColonnes.vue

@@ -1,567 +1,586 @@
-<template>
-  <csqc-modale
-    ref="modale"
-    :titre="$tc('csqc-table.choixColonnes.titre')"
-    v-on:fermer="fermer"
-    :afficherOk="false"
-    :afficherAnnuler="!sauvegardeEnCours"
-    width="90vw"
-    maxWidth="4000px"
-  >
-    <v-alert
-      v-model="afficherErreur"
-      type="error"
-      dismissible
-    >{{ erreur }}</v-alert>
-    <v-row>
-      <v-col
-        cols="12"
-        class="pa-0 relative"
-      >
-        <v-btn
-          v-show="choixRetourEnHaut"
-          class="BarreRechercheBackIcone retourHautChoix"
-          bottom
-          fab
-          absolute
-          right
-          color="primary"
-          @click="retourEnHaut('#choixColonnes-choix > .v-data-table__wrapper')"
-        >
-          <v-icon>mdi-arrow-up</v-icon>
-        </v-btn>
-        <v-data-table
-          class="limiteHauteurChoix"
-          id="choixColonnes-choix"
-          :headers="colonnesChoix"
-          item-key="nomVue"
-          :items="choix"
-          single-expand
-          :expanded.sync="choixEnCours"
-          @click:row="cliquer"
-          disable-pagination
-          hide-default-footer
-          fixed-header
-        >
-          <template #header.action>
-            <v-btn
-              color="primary"
-              class="float-right"
-              small
-              @click.stop="ajouter"
-              :disabled="desactiverAjout"
-            >
-              {{ $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"
-                    bottom
-                    fab
-                    absolute
-                    right
-                    color="primary"
-                    @click="retourEnHaut('#choixColonnes-vue > .v-data-table__wrapper')"
-                  >
-                    <v-icon>mdi-arrow-up</v-icon>
-                  </v-btn>
-                  <v-data-table
-                    class="limiteHauteurChoix colonnes mt-1 mb-4 ml-2 ordonable"
-                    id="choixColonnes-vue"
-                    :headers="colonnesChoixColonne"
-                    v-sortable-data-table
-                    @sorted="changeOrdre"
-                    :sort-by.sync="triColonnesChoix"
-                    :items="colonnesEnCours"
-                    item-key="value"
-                    hide-default-footer
-                    disable-pagination
-                    fixed-header
-                    :style="`margin-right: ${90 - $vuetify.breakpoint.scrollBarWidth}px;`"
-                  >
-                    <template
-                      #header.action
-                      v-if="choixEnCours[0]?.colonnes.length <= 0"
-                    >
-                      <v-tooltip
-                        left
-                        color="warning"
-                      >
-                        <template #activator="{ on }">
-                          <v-icon
-                            color="warning"
-                            v-on="on"
-                          >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
-              :label="$tc('csqc-table.choixColonnes.nomVue')"
-              v-model.trim="nomVueEnCours"
-              single-line
-              dense
-              autofocus
-              class="py-0 my-0"
-              :rules="regles.nomVue"
-              hide-details
-              v-if="item.nomVue === vueEnEdition"
-              @keydown.enter="accepterEdition"
-              @keydown.esc.stop="annulerEdition"
-            ></v-text-field>
-            <span
-              :class="{ 'error--text': !item.nomVue }"
-              v-else
-            >
-              {{ 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
-        @click.stop="sauvegarder"
-        color="primary"
-        class="elevation-0"
-        :disabled="!formValide"
-        :loading="sauvegardeEnCours"
-      >
-        {{ $tc('csqc-table.choixColonnes.ok') }}
-      </v-btn>
-    </template>
-  </csqc-modale>
-</template>
-
-<script>
-import Sortable from 'sortablejs';
-import axios from 'axios';
-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'),
-        ],
-      },
-    };
-  },
-  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));
-    },
-  },
-
-  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 = ''; }
-    },
-  },
-};
-</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 'axios'
+  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>