codevdesign 1.0.33 → 1.0.34

package/composants/csqcTable/csqcTableModaleChoixColonnes.vue

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