codevdesign 1.0.31 → 1.0.32

package/composants/csqcTable/csqcTableModaleChoixColonnes.vue

@@ -0,0 +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>