codevdesign 0.0.10 → 0.0.12

package/README.md

@@ -2,7 +2,7 @@
 
 ## À propos
 
-Composants Vuetify 3 pour les projets Codev 
+Composants Vuetify 3 pour les projets Codev
 
 ## Table des matières
 
@@ -20,11 +20,12 @@ Vue 3
 Vuetify 3
 Vue-i18n
 Typescript 5
-
+"@e965/xlsx"
 
 ## Installation
 
 Installez le package via npm en exécutant la commande suivante dans votre projet :
+
 ```
 npm install codevdesign
 ```
@@ -92,7 +93,7 @@ export default createI18n({
   globalInjection: true,
   fallbackLocale: window.langue,
   silentTranslationWarn: true,
-}) 
+})
 ```
 
 Vous pouvez importer les composants directement depuis le package Codev Design comme suit :
@@ -100,19 +101,17 @@ Vous pouvez importer les composants directement depuis le package Codev Design c
 ```
 import { pivFooter, pivEntete, csqcMenu, csqcAlerteErreur, csqcSnackbar } from 'codevdesign'
 ```
-Ces composants sont prêts à être utilisés dans vos pages ou vos composants Vue.js.
 
+Ces composants sont prêts à être utilisés dans vos pages ou vos composants Vue.js.
 
 ## Documentation
 
 Un bac à sable interactif avec la documentation détaillée des props des composants est disponible pour les membres de la CDPVD. Vous pouvez y accéder ici : https://espacedev.csqc.ca/codevdesign
 
-
 ## Gestion des versions
 
 Toutes les versions disponibles ainsi que les journaux des changements apportés sont disponibles sur la page npm du package : https://www.npmjs.com/package/codevdesign?activeTab=versions.
 
-
 ## Licence
 
 Ce package Codev Design est fourni sans licence spécifique. Vous pouvez l'utiliser dans vos projets à votre discrétion, mais il n'y a aucune garantie légale.

package/composants/csqcTable/csqcTable.vue

@@ -41,11 +41,19 @@
         <v-btn
           v-if="btnAjouter"
           color="primary"
-          class="float-right"
+          class="ml-1 float-right"
           @click.stop="ajouter"
         >
           {{ props.btnAjouterTexte ? props.btnAjouterTexte : $t('csqc.bouton.ajouter') }}
         </v-btn>
+
+        <exportExcelComponent
+          v-if="excel"
+          :liste="filteredItems"
+          :chargement-liste="chargementListe"
+          :nom-fichier="excelNomFichier"
+          class="mt-1 ml-1 float-right"
+        />
       </v-col>
     </v-row>
 
@@ -61,10 +69,11 @@
         class="d-flex ControlesDatatable flex-wrap"
       >
         <v-data-table
+          ref="datatable"
           color="green"
-          :headers="colonnes as any"
+          :headers="colonnes"
           :item-key="itemKey"
-          :items="liste as any"
+          :items="liste"
           :search="recherche"
           :loading="chargementListe"
           @click:row="cliqueLigne"
@@ -124,14 +133,23 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, defineProps, type Slots } from 'vue'
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+
+  import { ref, computed, defineProps, type Slots, type PropType } from 'vue'
   import Recherche from '../csqcRecherche.vue'
   import confirmation from '../csqcConfirmation.vue'
-  //import ExportExcel from './csqc-table-export-excel.vue';
+  import exportExcelComponent from './csqcTableExportExcel.vue'
   //import ModaleChoix from './csqc-table-modale-choix-colonnes.vue';
   //import axios from 'axios'
   import { useI18n } from 'vue-i18n'
 
+  interface Colonne {
+    title: string
+    key: string // Correspond à la clé des objets dans `liste`
+    align?: 'start' | 'center' | 'end'
+    sortable?: boolean
+  }
+
   // Props
   const props = defineProps({
     btnAjouter: { type: Boolean, default: true },
@@ -142,16 +160,22 @@
     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' },
+    colonnes: {
+      type: Array as PropType<Colonne[]>,
+      default: () => [],
+    },
+    excel: { type: Boolean, default: false },
+    excelNomFichier: { type: String, default: 'csqc' },
     //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: () => [] },
+    liste: {
+      type: Array as PropType<Record<string, any>[]>,
+      default: () => [],
+    },
     // modulerDense: { type: Boolean, default: false },
     // multifiltre: { type: Boolean, default: false },
     // multiTri: { type: Boolean, default: false },
@@ -190,7 +214,6 @@
   const supprimerTitreTexte = computed(() => props.modaleSupprimerTitre || t('csqc.message.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
 
@@ -206,19 +229,25 @@
   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 filteredItems = computed(() => {
+    if (!recherche.value) return props.liste // Si rien écrit, affiche tout
 
-  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier'])
+    return props.liste.filter(item =>
+      Object.values(item).some(val => String(val).toLowerCase().includes(recherche.value.toLowerCase())),
+    )
+  })
+  const emit = defineEmits(['ajouter', 'cliqueLigne', 'supprimer', 'modifier', 'donneesExportees'])
 </script>
 
 <style scoped lang="css">
@@ -311,4 +340,9 @@
   .iconeEditer:hover {
     color: #095797;
   }
+
+  /* hover icone à droite du ajouter*/
+  .text-grisMoyen:hover {
+    color: #095797 !important;
+  }
 </style>

package/composants/csqcTable/csqcTableExportExcel.vue

@@ -1,67 +1,58 @@
-<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>
+<template>
+  <v-icon
+    right
+    color="grisMoyen"
+    @click="exportToXLSX"
+    icon="mdi-microsoft-excel"
+  >
+  </v-icon>
+</template>
+
+<script setup lang="ts">
+  import { utils, writeFileXLSX } from '@e965/xlsx'
+  import { defineProps, computed } from 'vue'
+
+  const props = defineProps<{
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    liste: any[]
+    nomFichier: string
+    chargementListe: boolean
+  }>()
+
+  // Extraction des clés uniques de tous les objets
+  const cleDynamique = computed(() => {
+    const keys = new Set<string>()
+
+    // Parcours tous les objets de la liste et ajoute leurs clés
+    props.liste.forEach(item => {
+      if (typeof item === 'object' && item !== null) {
+        Object.keys(item).forEach(key => keys.add(key))
+      }
+    })
+    return Array.from(keys)
+  })
+
+  // Fonction pour exporter les données en Excel
+  const exportToXLSX = () => {
+    if (!props.liste.length) {
+      console.warn('La liste est vide, exportation annulée.')
+      return
+    }
+
+    // Récupération des en-têtes depuis la fonction cleDynamique
+    const headers = cleDynamique.value
+
+    //  Construction des lignes en respectant l'ordre des en-têtes
+    const rows = props.liste.map(item => {
+      return headers.map(key => (key in item ? item[key] : '')) // Valeur ou vide si absente
+    })
+
+    //  Création des données Excel (en-têtes + lignes)
+    const data = [headers, ...rows]
+    //  Génération du fichier Excel
+    const ws = utils.aoa_to_sheet(data)
+    const wb = utils.book_new()
+    utils.book_append_sheet(wb, ws, '1')
+    writeFileXLSX(wb, `${props.nomFichier}.xlsx`)
+  }
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",
@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "vuetify": "^3.7.0",
-    "vue-i18n": "^11.0.0"
+    "vue-i18n": "^11.0.0",
+    "@e965/xlsx": "^0.20.3"
   },
   "devDependencies": {
     "@types/node": "^22.13.5",