codevdesign 0.0.9 → 0.0.11

package/composants/csqcChaise/chaiseConteneur.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="pa-2 mt-2 mb-1 mr-1">
+    <!--on affiche une div avec les infos de préférences si le user a déjà au moins une préférence, au moins une unité et si activerDiv est à true.-->
+    <div v-if="preferences && unites && unites.length > 0 && activerDivPreferences">
+      <v-card
+        width="375"
+        outlined
+      >
+        <v-card-text
+          flat
+          class="pt-0 mt-0"
+        >
+          <v-progress-linear
+            v-if="chargementEnCours"
+            indeterminate
+          />
+          <div
+            v-if="!chargementEnCours"
+            class="pt-2"
+          >
+            <div class="text-overline text-h6 mb-2">{{ texteTitre }}</div>
+            <!--  <div v-if="existePreference == false">
+              Cliquer sur modifier ou lors de la soumission, vous pourrez sélectionner vos préférences de suivi.
+            </div>-->
+            <div>
+              <v-list-item
+                v-for="uniteId in Object.keys(dictChaisesReleve).map(Number)"
+                :key="uniteId"
+                class="mb-1"
+              >
+                <chaiseItem
+                  :uniteId="uniteId"
+                  :preferences="preferences"
+                  :dictChaisesReleve="dictChaisesReleve"
+                  :unites="unites"
+                />
+              </v-list-item>
+            </div>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <div class="flex-grow-1"></div>
+          <v-btn
+            v-if="chargementEnCours == false"
+            rounded
+            outlined
+            small
+            @click.stop="modifier"
+            >{{ $t('csqc.bouton.modifier') }}</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </div>
+
+    <v-dialog
+      max-width="largeur"
+      :fullscreen="display.name.value == 'xs'"
+      v-model="visible"
+      @click:outside="annuler"
+      @keydown.esc="annuler"
+    >
+      <v-card :class="['pa-0', display.name.value != 'xs' ? 'v-card-color-solid' : 'v-card-color-solid-xs']">
+        <v-container :class="display.name.value == 'xs' ? 'pl-1 pr-3' : ''">
+          <h3 class="pb-3 pl-2">{{ texteTitre }}</h3>
+          <hr class="pl-2" />
+          <v-card-text flat>
+            <i>{{ info }}</i>
+            <v-progress-linear
+              v-if="chargementEnCours"
+              indeterminate
+            />
+            <div
+              v-if="!chargementEnCours"
+              class="pt-4"
+            >
+              <v-row v-if="toutesUnitesPreferencesSelectionnees === false">
+                <v-col cols="12">
+                  <v-alert
+                    dismissible
+                    v-model="afficherErreur"
+                    type="error"
+                    >{{ $t('csqc.message.chaiseSelectionToutes') }}</v-alert
+                  >
+                </v-col>
+              </v-row>
+              <v-row>
+                <v-col
+                  cols="12"
+                  sm="4"
+                  md="3"
+                  v-for="uniteId in Object.keys(dictChaisesReleve).map(Number)"
+                  :key="uniteId"
+                >
+                  <label>{{ getUnite(uniteId)?.nom || '' }}</label>
+                  <br />
+                  <v-radio-group v-model="selection[uniteId]">
+                    <v-radio
+                      v-for="chaise in dictChaisesReleve[uniteId]"
+                      :key="chaise.id"
+                      :label="chaise.nom"
+                      :value="chaise.id"
+                    ></v-radio>
+                  </v-radio-group>
+                </v-col>
+              </v-row>
+            </div>
+          </v-card-text>
+        </v-container>
+
+        <v-card-actions>
+          <div class="flex-grow-1"></div>
+          <v-btn
+            color="primary"
+            outlined
+            @click.stop="annuler"
+            >Annuler</v-btn
+          >
+          <v-btn
+            color="primary"
+            @click.stop="ok"
+            >Ok</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, defineProps, defineEmits, onMounted } from 'vue'
+  import axios from '@/outils/appAxios.ts'
+  import chaiseItem from './chaiseItem.vue'
+  import { useDisplay } from 'vuetify'
+  const display = useDisplay()
+
+  // Définition des props
+  const props = defineProps<{
+    activerDivPreferences: boolean
+    typeintervenant: string
+    demandeid: string
+    formulaireid: string
+    urlbase: string
+    titre?: string
+    texteinfo?: string
+    largeur?: number
+  }>()
+
+  // Définition des emits
+  const emit = defineEmits<{
+    (event: 'annuler'): void
+    (event: 'confirmer'): void
+  }>()
+
+  // Variables réactives
+  const visible = ref(false)
+  const chargementEnCours = ref(false)
+  const afficherErreur = ref(false)
+  const unites = ref<Array<{ id: number; nom: string }>>([])
+  const preferences = ref<Array<{ uniteId: number; chaiseId: number }>>([])
+  const dictChaisesReleve = ref<Record<number, Array<{ id: number; nom: string }>>>({})
+  const selection = ref<Record<number, number>>({})
+  const modeModifier = ref(false)
+
+  // Méthodes
+  const soumettre = async () => {
+    modeModifier.value = false
+    await ouvrir()
+  }
+
+  const ouvrir = async () => {
+    // Mode sans les divs
+    if (props.activerDivPreferences === false) {
+      await chargementPreferences()
+      visible.value = true
+      return
+    }
+
+    // Mode avec div, mais il manque une sélection
+    if (!toutesUnitesPreferencesSelectionnees.value) {
+      visible.value = true
+      return
+    }
+
+    // Tout est beau
+    await ok()
+  }
+
+  const definitionSelectionDepart = () => {
+    for (let uniteId in dictChaisesReleve.value) {
+      const chaises = dictChaisesReleve.value[uniteId]
+      const uniteIdNum = Number(uniteId) // Convert to number
+
+      const pref = preferences.value.find(
+        pref => pref.uniteId === uniteIdNum && chaises.some(chaise => chaise.id === pref.chaiseId),
+      )
+
+      const chaiseIdDefaut = pref?.chaiseId ?? (chaises.length === 1 ? chaises[0].id : -1)
+      selection.value[uniteIdNum] = chaiseIdDefaut // Ensure key consistency
+    }
+  }
+  const estPrefere = (uniteId: number, chaiseId: number) => {
+    return preferences.value.some(x => x.uniteId === uniteId && x.chaiseId === chaiseId)
+  }
+
+  const annuler = () => {
+    visible.value = false
+    modeModifier.value = false
+    emit('annuler')
+  }
+
+  const getUnite = (uniteId: number) => {
+    return unites.value.find(x => x.id === uniteId)
+  }
+
+  const modifier = () => {
+    modeModifier.value = true
+    visible.value = true
+  }
+
+  const ok = async () => {
+    await sauvegarder()
+    if (toutesUnitesPreferencesSelectionnees.value) {
+      if (!modeModifier.value) {
+        emit('confirmer')
+      }
+      visible.value = false
+      modeModifier.value = false
+    } else {
+      afficherErreur.value = true
+    }
+  }
+
+  const sauvegarder = async () => {
+    for (let uniteId in dictChaisesReleve.value) {
+      const chaiseId = selection.value[uniteId]
+      if (chaiseId <= 0) {
+        continue
+      }
+
+      // Cibler l'ancienne préférence reliée à une des chaises de cette unité
+      let prefIndexDeUnite = -1
+      for (let i = 0; i < dictChaisesReleve.value[uniteId].length; i++) {
+        prefIndexDeUnite = preferences.value.findIndex(p => p.chaiseId === dictChaisesReleve.value[uniteId][i].id)
+        if (prefIndexDeUnite >= 0) {
+          break
+        }
+      }
+
+      try {
+        const response = await axios
+          .getAxios()
+          .put(
+            `${props.urlbase}/api/ComposantUI/Preferences/${props.formulaireid}/Unite/${uniteId}/Chaise/${chaiseId}/TypeIntervenant/${props.typeintervenant}`,
+          )
+
+        const itemRecu = response.data // Extract the actual data
+
+        // Écraser l'ancienne sélection
+        if (prefIndexDeUnite >= 0) {
+          preferences.value[prefIndexDeUnite] = itemRecu
+        } else {
+          preferences.value = [itemRecu]
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+
+  const chargementPreferences = async () => {
+    chargementEnCours.value = true
+    // Ramasse les infos des chaises par unité
+    dictChaisesReleve.value = await axios
+      .getAxios()
+      .get(`${props.urlbase}/api/ComposantUI/ReleveDe/${props.typeintervenant}/Demande/${props.demandeid}`)
+
+    // Ramasse les préférences de l'usager
+    preferences.value = await axios
+      .getAxios()
+      .get(
+        `${props.urlbase}/api/ComposantUI/Preferences/${props.formulaireid}/TypeIntervenant/${props.typeintervenant}`,
+      )
+    definitionSelectionDepart()
+
+    await sauvegarder() // Immédiatement on sauvegarde pour les choix uniques.
+
+    chargementEnCours.value = false
+  }
+
+  const texteTitre = computed(() => {
+    return props.titre || ''
+  })
+
+  const info = computed(() => {
+    return props.texteinfo || ''
+  })
+
+  const existePreference = computed(() => {
+    for (let uniteId in dictChaisesReleve.value) {
+      for (let i = 0; i < dictChaisesReleve.value[uniteId].length; i++) {
+        if (preferences.value.some(p => p.chaiseId === dictChaisesReleve.value[uniteId][i].id)) {
+          return true
+        }
+      }
+    }
+    return false
+  })
+
+  const toutesUnitesPreferencesSelectionnees = computed(() => {
+    for (let uniteId in dictChaisesReleve.value) {
+      let uniteOk = false
+      for (let i = 0; i < dictChaisesReleve.value[uniteId].length; i++) {
+        if (preferences.value.some(p => p.chaiseId === dictChaisesReleve.value[uniteId][i].id)) {
+          uniteOk = true
+        }
+      }
+
+      if (!uniteOk) return false
+    }
+
+    return true // Toutes les unités ont été sélectionnées
+  })
+
+  onMounted(async () => {
+    chargementEnCours.value = true
+    // Ramasse les unités de l'usager
+    unites.value = await axios.getAxios().get(`${props.urlbase}/api/ComposantUI/Unites`)
+    chargementPreferences()
+  })
+</script>

package/composants/csqcChaise/chaiseItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <v-list-item-content>
+      <v-list-item-title>{{ nomUnite }}</v-list-item-title>
+      <v-list-item-subtitle v-if="getPreference != ''">
+        {{ getPreference }}
+      </v-list-item-subtitle>
+      <v-list-item-subtitle
+        v-if="getPreference == ''"
+        class="messageErreurChaiseItem"
+      >
+        {{ $t('csqc.message.chaiseSelection') }}
+      </v-list-item-subtitle>
+    </v-list-item-content>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed } from 'vue'
+
+  // Définition des props
+  const props = defineProps<{
+    uniteId: number
+    preferences: Array<{ chaiseId: number }>
+    dictChaisesReleve: Record<number, Array<{ id: number; nom: string }>>
+    unites: Array<{ id: number; nom: string }>
+  }>()
+
+  const nomUnite = computed(() => {
+    if (!props.uniteId || !props.unites?.length) {
+      return ''
+    }
+
+    const unite = props.unites.find(u => u.id == props.uniteId)
+    return unite?.nom || ''
+  })
+
+  const getPreference = computed(() => {
+    for (let i = 0; i < props.dictChaisesReleve[props.uniteId]?.length; i += 1) {
+      if (props.preferences.some(p => p.chaiseId == props.dictChaisesReleve[props.uniteId][i].id)) {
+        return props.dictChaisesReleve[props.uniteId][i].nom
+      }
+    }
+
+    return ''
+  })
+</script>
+
+<style scoped>
+  .messageErreurChaiseItem {
+    color: red !important;
+    font-style: italic;
+  }
+</style>

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 '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/index.ts

@@ -9,6 +9,7 @@ import pivFooter from './composants/gabarit/pivPiedPage.vue'
 import csqcMenu from './composants/gabarit/csqcMenu.vue'
 import csqcConfirmation from './composants/csqcConfirmation.vue'
 import csqcTable from './composants/csqcTable/csqcTable.vue'
+import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
 
 import modeleUtilisateur from './modeles/utilisateur'
 import modeleUnite from './modeles/unite'
@@ -29,6 +30,7 @@ export {
   csqcTable,
   csqcTiroir,
   csqcMenu,
+  csqcChaise,
   pivFooter,
   pivEntete,
   modeleUtilisateur,

package/locales/en.json

@@ -1,9 +1,53 @@
 {
+  "csqc": {
+    "bouton": {
+      "activer": "Activate",
+      "ajouter": "Add",
+      "annuler": "Cancel",
+      "anonymiser": "Anonymize",
+      "completer": "Complete",
+      "continuer": "Continue",
+      "desactiver": "Deactivate",
+      "envoyer": "Send",
+      "exporter": "Export",
+      "fermer": "Close",
+      "generer": "Generate",
+      "importer": "Import",
+      "modifier": "Edit",
+      "non": "No",
+      "ok": "Ok",
+      "oui": "Yes",
+      "ouvrir": "Open",
+      "recharger": "Reload",
+      "reinitialiser": "Reset",
+      "restaurer": "Restore",
+      "sauvegarder": "Save",
+      "supprimer": "Delete",
+      "televerser": "Upload"
+    },
+    "label": {
+      "actif": "Active",
+      "fermer": "Close",
+      "nom": "Name",
+      "recherche": "Search",
+      "rechercheAvanceeDefaut": "Advanced search",
+      "rechercher": "Search"
+    },
+    "message": {
+      "supprimerMessage": "Are you sure you want to delete {nom}?",
+      "supprimerTitre": "Delete confirmation!",
+      "chaiseSelection": "No selection for this unit",
+      "chaiseSelectionToutes": "Please make a selection for all units."
+    },
     "pivEntete": {
-        "langue": "Français",
-        "nom_application": "Codev Design"
+      "langue": "Français"
     },
     "pivFooter": {
-        "logoAlt": ""
+      "logoAlt": ""
+    },
+    "placeholder": {
+      "date": "Choose a date",
+      "selectionner": "Select"
     }
-}
+  }
+}

package/locales/fr.json

@@ -35,7 +35,9 @@
     },
     "message": {
       "supprimerMessage": "Voulez-vous vraiment supprimer {nom}?",
-      "supprimerTitre": "Confirmation de suppression!"
+      "supprimerTitre": "Confirmation de suppression!",
+      "chaiseSelection": "Aucune sélection pour cette unité",
+      "chaiseSelectionToutes": "Veuillez faire une sélection pour toutes les unités."
     },
     "pivEntete": {
       "langue": "English"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",