codevdesign 0.0.1 → 0.0.2

package/composants/csqcTable/csqcTable.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <v-row>
+      <slot name="ligne" />
+      <!-- Affichage de la boite de recherche-->
+      <v-col
+        cols="12"
+        sm="7"
+        md="6"
+        lg="5"
+        xl="4"
+      >
+        <slot name="recherche"></slot>
+        <Recherche
+          v-if="rechercheAfficher"
+          :rechercheTexte="rechercheTexte"
+          :chargement="chargementListe"
+          :recherche="recherche"
+          @update:recherche="chargerRecherche"
+          class="flex-grow-1"
+        ></Recherche>
+      </v-col>
+
+      <!-- Entre recherche et ajouté-->
+      <v-col
+        cols="12"
+        sm="auto"
+        class="pt-1 mt-0 pb-0 mb-0"
+      >
+        <slot name="milieu" />
+      </v-col>
+
+      <!-- Affichage des boutons et icônes-->
+      <v-col
+        cols="12"
+        sm="auto"
+        class="flex-grow-1 d-flex justify-end"
+      >
+        <slot name="droite" />
+
+        <v-btn
+          v-if="btnAjouter"
+          color="primary"
+          class="float-right"
+          @click.stop="ajouter"
+        >
+          {{ props.btnAjouterTexte ? props.btnAjouterTexte : $t('csqc-table.boutton.ajouter') }}
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <!-- ligne pour la recherche avancee -->
+    <v-row>
+      <slot name="rechercheAvancee"></slot>
+    </v-row>
+
+    <!-- datatable-->
+    <v-row>
+      <v-col
+        cols="12"
+        class="d-flex ControlesDatatable flex-wrap"
+      >
+        <v-data-table
+          color="green"
+          :headers="colonnes as any"
+          :item-key="itemKey"
+          :items="liste as any"
+          :search="recherche"
+          :loading="chargementListe"
+          @click:row="cliqueLigne"
+        >
+          <!-- utilisation des slots via le component parent-->
+          <!-- eslint-disable-next-line -->
+          <template
+            v-for="(_, slot) of $slots"
+            :key="slot"
+            #[slot]="scope"
+          >
+            <slot
+              :name="slot"
+              v-bind="scope"
+            />
+          </template>
+
+          <!-- boutons supprimer et modifier -->
+          <!-- eslint-disable-next-line -->
+          <template v-slot:item.action="{ item }">
+            <slot
+              name="actionsCustom"
+              v-bind:item="item"
+            ></slot>
+            <v-icon
+              v-if="props.btnSupprimer"
+              size="large"
+              @click.stop.prevent="ouvrirModaleSupprimer(item)"
+              class="iconeSupprimer float-right"
+            >
+              mdi-delete
+            </v-icon>
+
+            <v-icon
+              v-if="props.btnModifier"
+              size="large"
+              class="iconeEditer float-right"
+              @click.stop.prevent="modifier(item)"
+            >
+              mdi-pencil
+            </v-icon>
+          </template>
+        </v-data-table>
+
+        <!-- Fenêtre de suppression -->
+        <confirmation
+          v-if="props.btnSupprimer"
+          ref="modaleSupprimer"
+          @confirmer="supprimer"
+          :texte="supprimerTexte"
+          :titre="supprimerTitreTexte"
+          :largeur="modaleSupprimerLargeur"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, defineProps, type Slots } from 'vue'
+  import Recherche from '../csqcRecherche.vue'
+  import confirmation from '../csqcConfirmation.vue'
+  //import ExportExcel from './csqc-table-export-excel.vue';
+  //import ModaleChoix from './csqc-table-modale-choix-colonnes.vue';
+  //import axios from 'axios'
+  import { useI18n } from 'vue-i18n'
+
+  // Props
+  const props = defineProps({
+    btnAjouter: { type: Boolean, default: true },
+    btnAjouterTexte: { type: String, default: '' },
+    btnModifier: { type: Boolean, default: true },
+    btnSupprimer: { type: Boolean, default: true },
+    chargementListe: { type: Boolean, default: false },
+    operationEnCours: { type: Boolean, default: false },
+    //choixSwitchOptionDepart: { type: Boolean, default: false },
+    // classeRangee: { type: String, default: '' },
+    colonnes: { type: Array, default: () => [] },
+    // excelAfficher: { type: Boolean, default: false },
+    // excelNomFichier: { type: String, default: 'donnees' },
+    //filtresDepart: { type: Object, default: null },
+    //flechesTri: { type: Boolean, default: false },
+    // formulaireId: { type: Number, default: -1 },
+    //identifiant: { type: String, default: '' },
+    itemKey: { type: String, default: 'id' },
+    // itemsParPage: { type: Number, default: 10 },
+    liste: { type: Array, default: () => [] },
+    // modulerDense: { type: Boolean, default: false },
+    // multifiltre: { type: Boolean, default: false },
+    // multiTri: { type: Boolean, default: false },
+    //optionsItemsParPage: { type: Array, default: () => [10, 25, 30, -1] },
+    //pageCourante: { type: Number, default: 1 },
+    //paginationBottom: { type: Boolean, default: true },
+    // paginationTop: { type: Boolean, default: false },
+    //  permettreChoixColonnes: { type: Boolean, default: false },
+    // rechercheDepart: { type: String, default: '' },
+    rechercheTexte: { type: String, default: '' },
+    rechercheAfficher: { type: Boolean, default: true },
+    // selectionChoixColonnesDepart: { type: String, default: '' },
+    // showSelect: { type: Boolean, default: false },
+
+    modaleSupprimerChamp: { type: String, default: '' },
+    modaleSupprimerTexte: { type: String, default: '' },
+    modaleSupprimerTitre: { type: String, default: '' },
+    modaleSupprimerLargeur: { type: String, default: '525px' },
+    //triParDepart: { type: Array, default: () => undefined },
+    //urlbase: { type: String, default: '' },
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const slots = defineSlots<Slots>()
+  const { t } = useI18n({ useScope: 'global' })
+  const itemSelectionne = ref(null)
+  const modaleSupprimer = ref<InstanceType<typeof confirmation> | null>(null)
+  const supprimerTexte = computed(() => {
+    if (itemSelectionne.value == null) return ''
+
+    if (props.modaleSupprimerTexte != null && props.modaleSupprimerTexte != '') return props.modaleSupprimerTexte
+
+    return t('csqc-table.label.supprimerMessage', { nom: itemSelectionne?.value[props.modaleSupprimerChamp] ?? '' })
+  })
+
+  const supprimerTitreTexte = computed(() => props.modaleSupprimerTitre || t('csqc-table.label.supprimerTitre'))
+
+  // Fonction pour ouvrir le dialogue pour un item spécifique
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const ouvrirModaleSupprimer = (item: any) => {
+    itemSelectionne.value = item
+
+    //modaleSupprimer.value?.ouvrir()
+    emit('supprimer', itemSelectionne.value)
+  }
+
+  const supprimer = () => {
+    emit('supprimer', itemSelectionne.value)
+  }
+
+  const recherche = ref<string>('')
+  const chargerRecherche = (val: string) => {
+    recherche.value = val
+  }
+  const ajouter = () => {
+    emit('ajouter')
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const cliqueLigne = (e: Event, { item }: { item: any }) => {
+    emit('cliqueLigne', item)
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const modifier = (item: any) => {
+    emit('modifier', item)
+  }
+
+  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier'])
+</script>
+
+<style scoped lang="css">
+  .ControlesDatatable {
+    gap: 4px;
+  }
+
+  /* barre de recherche design QC*/
+  .BarreRecherche {
+    min-height: 40px;
+  }
+
+  .BarreRechercheBackIcone {
+    border-right: 1px solid #808a9d;
+    border-top: 1px solid #808a9d;
+    border-bottom: 1px solid #808a9d;
+    background-color: #095797 !important;
+    height: 40px !important;
+    width: 40px !important;
+    max-width: 40px !important;
+    min-width: 40px !important;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    border-radius: 0;
+    margin-left: -16px;
+  }
+
+  /* icone loupe */
+  .BarreRechercheIcone {
+    font-size: 34px !important;
+    margin-left: 1px !important;
+    margin-top: 2px !important;
+    color: white !important;
+  }
+
+  /* datatable contour */
+  .v-data-table {
+    border: 1px solid #d3d3d3;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  /* hover */
+  .v-data-table:hover {
+    cursor: pointer !important;
+  }
+
+  /* datatable row */
+  .v-data-table .v-table__wrapper > table > thead > tr > td,
+  .v-data-table .v-table__wrapper > table > thead > tr th,
+  .v-data-table .v-table__wrapper > table tbody > tr > td,
+  .v-data-table .v-table__wrapper > table tbody > tr th {
+    background-color: #d3d3d375 !important;
+  }
+
+  /* datatable header contour */
+  .v-data-table .v-table__wrapper > table > thead > tr > th,
+  .v-data-table .v-table__wrapper > table tbody > tr > th {
+    background-color: white !important;
+    border-bottom: 4px #223654 solid !important;
+  }
+
+  /* datatable header intérieur*/
+  .v-data-table-header__content {
+    background-color: white !important;
+    color: #223654 !important;
+    font-weight: 600;
+    font-size: 15px;
+    height: 46px;
+  }
+
+  /* datatable footer */
+  .v-data-table-footer {
+    background-color: white !important;
+    border-top: 4px #223654 solid !important;
+  }
+
+  /* datatable row hover */
+  .v-data-table .v-table__wrapper > table tbody > tr:hover > td,
+  .v-data-table .v-table__wrapper > table tbody > tr:hover {
+    background-color: #e0e0e0 !important;
+  }
+
+  .iconeSupprimer:hover {
+    color: red;
+  }
+  .v-icon.v-icon.v-icon--link.iconeSupprimer:hover {
+    color: red !important;
+  }
+  .iconeEditer:hover {
+    color: #095797;
+  }
+</style>

package/composants/csqcTable/csqcTableExportExcel.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-icon
+    right
+    color="green darken-2"
+    @click="exportSheet"
+  >
+    mdi-microsoft-excel
+  </v-icon>
+</template>
+<script>
+import { utils, writeFileXLSX } from 'xlsx';
+
+export default {
+  props: {
+    chargementListe: {
+      type: Boolean,
+      default: false,
+    },
+    nomFichier: {
+      required: true,
+      type: String,
+    },
+    colonnes: {
+      required: true,
+      type: Array,
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    exportSheet() {
+      this.$emit('demande', this.exportSheetEffective);
+    },
+
+    exportSheetEffective(itemsAExporter) {
+      // https://github.com/SheetJS/SheetJS/tree/master/demos/vue/
+
+      const header = this.colonnes.map((element) => element.value);
+      const headerText = this.colonnes.map((element) => element.text);
+
+      const dataRows = [];
+      const itemsExportes = itemsAExporter.map((row) => {
+        const dataRow = [];
+        const item = {};
+        header.map((column) => {
+          dataRow.push(row[column]);
+          if (row[column] != null) item[column] = row[column];
+          return true;
+        });
+        dataRows.push(dataRow);
+        return item;
+      });
+      const ws = utils.aoa_to_sheet([headerText, ...dataRows]);
+      const wb = utils.book_new();
+      utils.book_append_sheet(wb, ws, '1');
+      writeFileXLSX(wb, `${this.nomFichier}.xlsx`);
+
+      return itemsExportes;
+      // this.$emit('apres');
+    },
+  },
+  created() {
+  },
+};
+</script>