codevdesign 0.0.1 → 0.0.2

package/composants/csqcTable/csqcTableModaleChoixColonnes.vue

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

package/composants/csqcTiroir.vue

@@ -0,0 +1,150 @@
+<template>
+  <v-navigation-drawer
+    v-model="visible"
+    location="right"
+    temporary
+    class="pa-0 elevation-2"
+    :width="grosseurTiroir"
+    :persistent="persistant"
+    @keydown.esc="!persistant ? fermeture : ''"
+    @click:outside="!persistant ? fermeture : ''"
+  >
+    <v-card class="pa-0 ma-0 pl-8 pt-8">
+      <!-- Bouton en haut à droite -->
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        class="position-absolute couleurHover"
+        style="top: 5px; right: 5px"
+        @click="fermeture"
+      ></v-btn>
+
+      <v-card-title
+        class="pa-0 ma-0 pb-6 text-wrap"
+        style="font-size: 24px"
+      >
+        <slot name="titre"></slot>
+        <div class="headline">{{ titre }}</div>
+      </v-card-title>
+
+      <v-card-text class="pa-0 ma-0 pb-6 pr-6">
+        <v-container>
+          <slot></slot>
+          <slot name="content"></slot>
+        </v-container>
+      </v-card-text>
+      <v-card-actions class="my-2 d-flex justify-end pr-6 pb-5">
+        <slot name="actions"></slot>
+        <v-btn
+          v-if="btnAnnuler"
+          color="primary"
+          variant="text"
+          :loading="operationEnCours"
+          @click="fermeture"
+        >
+          {{ props.btnAnnulerTexte ? props.btnAnnulerTexte : $t('csqc-composants-ui.boutton.annuler') }}
+        </v-btn>
+
+        <v-btn
+          v-if="btnOk"
+          class="Gouttiere"
+          color="primary"
+          variant="flat"
+          :loading="operationEnCours"
+          :disabled="btnOkDesactiver || operationEnCours"
+          @click="okBouton"
+          outlined
+        >
+          {{ props.btnOkTexte ? props.btnOkTexte : $t('csqc-composants-ui.boutton.ok') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-navigation-drawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue'
+  import { useDisplay } from 'vuetify'
+
+  const visible = ref(false)
+  const display = useDisplay()
+
+  // Déclaration des props
+  const props = defineProps({
+    titre: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    btnAnnuler: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    btnOk: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    btnAnnulerTexte: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    btnOkDesactiver: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    operationEnCours: { type: Boolean, default: false },
+    persistant: { type: Boolean, default: true },
+    btnOkTexte: {
+      type: String,
+      default: '',
+      required: false,
+    },
+  })
+
+  // Déclaration des événements
+  const emit = defineEmits(['fermer', 'ok'])
+
+  // Méthodes
+  const ouvrir = () => {
+    visible.value = true
+  }
+
+  const fermer = () => {
+    visible.value = false
+  }
+
+  const fermeture = () => {
+    emit('fermer')
+    fermer()
+  }
+
+  const okBouton = () => {
+    emit('ok')
+    fermer()
+  }
+
+  // Calcul des tailles du tiroir en fonction du breakpoint
+  const grosseurTiroir = computed(() => {
+    switch (display.name.value) {
+      case 'xs':
+        return ''
+      case 'sm':
+        return 0.95 * display.width.value
+      case 'md':
+        return 0.8 * display.width.value
+      case 'lg':
+        return 0.7 * display.width.value
+      case 'xl':
+        return 0.6 * display.width.value
+      case 'xxl':
+        return 0.5 * display.width.value
+      default:
+        return ''
+    }
+  })
+
+  defineExpose({ ouvrir, fermer })
+</script>