codevdesign 0.0.79 → 0.0.81

package/composants/csqcEntete.vue

@@ -1,158 +1,158 @@
-<template>
-  <v-app-bar
-    color="white"
-    class="px-0 mx-0"
-    :style="{ position: 'sticky' }"
-    height="82px"
-  >
-    <v-row
-      class="pt-2"
-      @resize="controlAffichage"
-    >
-      <v-col
-        :cols="titreCol"
-        class="pr-0 mr-0 pl-5"
-      >
-        <v-toolbar-title class="titre">
-          <!-- Barre de retour -->
-          <slot name="retour">
-            <v-icon
-              v-if="retour"
-              size="large"
-              start
-              color="grisMoyen"
-              icon="mdi-arrow-left-thin"
-              @click="retournerMenu"
-          /></slot>
-
-          <div class="titre-bloc">
-            <!-- Titre -->
-            <slot name="titre"
-              ><span class="pl-3"> {{ props.titre }}</span></slot
-            >
-
-            <!-- État -->
-            <slot name="etat">
-              <span
-                v-if="monEtat?.afficher"
-                class="pl-10"
-              >
-                <v-btn
-                  size="small"
-                  :color="monEtat.couleur"
-                  variant="tonal"
-                >
-                  {{ monEtat.texte }}
-                </v-btn>
-              </span></slot
-            >
-            <!-- État secondaire-->
-            <slot name="etatSecondaire">
-              <span
-                v-if="monEtatSecondaire?.afficher"
-                class="pl-3"
-              >
-                <v-btn
-                  size="small"
-                  :color="monEtatSecondaire.couleur"
-                  variant="tonal"
-                >
-                  {{ monEtatSecondaire.texte }}
-                </v-btn>
-              </span></slot
-            >
-            <!-- Sous-titre -->
-            <slot name="soustitre"
-              ><span class="pl-3 soustitre"> {{ props.soustitre }}</span></slot
-            >
-          </div>
-        </v-toolbar-title>
-      </v-col>
-    </v-row>
-    <!-- Barre en bas -->
-    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
-  </v-app-bar>
-</template>
-
-<script setup lang="ts">
-  import { useRouter } from 'vue-router'
-  import { ref, computed } from 'vue'
-
-  // Déclaration de l'interface
-  interface EnteteEtat {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  interface EnteteEtatSecondaire {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  const router = useRouter()
-
-  const props = defineProps<{
-    titre: string
-    soustitre?: string
-    retour?: string
-    etat?: EnteteEtat
-    etatSecondaire?: EnteteEtatSecondaire
-  }>()
-
-  const titreCol = ref(12)
-
-  // État calculé basé sur la prop, avec fallback
-  const monEtat = computed<EnteteEtat>(() => {
-    return (
-      props.etat ?? {
-        afficher: false,
-        couleur: 'primary',
-        texte: 'test',
-      }
-    )
-  })
-
-  const monEtatSecondaire = computed<EnteteEtatSecondaire>(() => {
-    return (
-      props.etatSecondaire ?? {
-        afficher: false,
-        couleur: 'primary',
-        texte: 'test',
-      }
-    )
-  })
-
-  function retournerMenu() {
-    if (props.retour) {
-      router.push({ name: props.retour })
-    }
-  }
-
-  function controlAffichage() {
-    // logique à l’événement de redimensionnement
-  }
-</script>
-<style lang="css" scoped>
-  .titre {
-    font-size: 1.85rem;
-    color: #223654;
-    font-weight: bold;
-    margin-bottom: 15px;
-  }
-  .soustitre {
-    display: block;
-    font-size: 1rem;
-    color: #223654;
-    font-weight: normal;
-  }
-  .titre-bloc {
-    display: inline-block;
-    vertical-align: middle;
-    padding-left: 12px;
-  }
-  .v-icon:hover {
-    color: #095797 !important;
-  }
-</style>
+<template>
+  <v-app-bar
+    color="white"
+    class="px-0 mx-0"
+    :style="{ position: 'sticky' }"
+    height="82px"
+  >
+    <v-row
+      class="pt-2"
+      @resize="controlAffichage"
+    >
+      <v-col
+        :cols="titreCol"
+        class="pr-0 mr-0 pl-5"
+      >
+        <v-toolbar-title class="titre">
+          <!-- Barre de retour -->
+          <slot name="retour">
+            <v-icon
+              v-if="retour"
+              size="large"
+              start
+              color="grisMoyen"
+              icon="mdi-arrow-left-thin"
+              @click="retournerMenu"
+          /></slot>
+
+          <div class="titre-bloc">
+            <!-- Titre -->
+            <slot name="titre"
+              ><span class="pl-3"> {{ props.titre }}</span></slot
+            >
+
+            <!-- État -->
+            <slot name="etat">
+              <span
+                v-if="monEtat?.afficher"
+                class="pl-10"
+              >
+                <v-btn
+                  size="small"
+                  :color="monEtat.couleur"
+                  variant="tonal"
+                >
+                  {{ monEtat.texte }}
+                </v-btn>
+              </span></slot
+            >
+            <!-- État secondaire-->
+            <slot name="etatSecondaire">
+              <span
+                v-if="monEtatSecondaire?.afficher"
+                class="pl-3"
+              >
+                <v-btn
+                  size="small"
+                  :color="monEtatSecondaire.couleur"
+                  variant="tonal"
+                >
+                  {{ monEtatSecondaire.texte }}
+                </v-btn>
+              </span></slot
+            >
+            <!-- Sous-titre -->
+            <slot name="soustitre"
+              ><span class="pl-3 soustitre"> {{ props.soustitre }}</span></slot
+            >
+          </div>
+        </v-toolbar-title>
+      </v-col>
+    </v-row>
+    <!-- Barre en bas -->
+    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import { ref, computed } from 'vue'
+
+  // Déclaration de l'interface
+  interface EnteteEtat {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  interface EnteteEtatSecondaire {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  const router = useRouter()
+
+  const props = defineProps<{
+    titre: string
+    soustitre?: string
+    retour?: string
+    etat?: EnteteEtat
+    etatSecondaire?: EnteteEtatSecondaire
+  }>()
+
+  const titreCol = ref(12)
+
+  // État calculé basé sur la prop, avec fallback
+  const monEtat = computed<EnteteEtat>(() => {
+    return (
+      props.etat ?? {
+        afficher: false,
+        couleur: 'primary',
+        texte: 'test',
+      }
+    )
+  })
+
+  const monEtatSecondaire = computed<EnteteEtatSecondaire>(() => {
+    return (
+      props.etatSecondaire ?? {
+        afficher: false,
+        couleur: 'primary',
+        texte: 'test',
+      }
+    )
+  })
+
+  function retournerMenu() {
+    if (props.retour) {
+      router.push({ name: props.retour })
+    }
+  }
+
+  function controlAffichage() {
+    // logique à l’événement de redimensionnement
+  }
+</script>
+<style lang="css" scoped>
+  .titre {
+    font-size: 1.85rem;
+    color: #223654;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .soustitre {
+    display: block;
+    font-size: 1rem;
+    color: #223654;
+    font-weight: normal;
+  }
+  .titre-bloc {
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 12px;
+  }
+  .v-icon:hover {
+    color: #095797 !important;
+  }
+</style>

package/composants/csqcImportCSV.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <v-btn
+      color="success"
+      variant="outlined"
+      :loading="chargement"
+      class="elevation-0"
+      @click="importCsv"
+    >
+      {{ boutonTexte }}
+      <template #append>
+        <v-icon icon="mdi-microsoft-excel"></v-icon>
+      </template>
+    </v-btn>
+
+    <input
+      ref="fileInput"
+      type="file"
+      accept=".csv"
+      style="display: none"
+      @change="handleFileUpload"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  // Props
+  const props = withDefaults(
+    defineProps<{
+      boutonTexte?: string
+      erreurTexte?: string
+      chargement?: boolean
+    }>(),
+    {
+      chargement: false, //  défaut
+    },
+  )
+  const emit = defineEmits(['import', 'import-erreur'])
+
+  const { t } = useI18n()
+
+  const boutonTexte = computed(() => props.boutonTexte ?? t('csqc.bouton.importer'))
+  const erreurTexte = computed(() => props.erreurTexte ?? t('csqc.csqcImportCSV.erreur.lectureFichier'))
+
+  // Références
+  const fileInput = ref<HTMLInputElement | null>(null)
+  const csvFile = ref<File | null>(null)
+
+  // Méthodes
+  function importCsv() {
+    fileInput.value?.click()
+  }
+
+  function handleFileUpload(event: Event) {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+
+    if (file?.name.toLowerCase().endsWith('.csv')) {
+      csvFile.value = file
+
+      const reader = new FileReader()
+
+      reader.onload = () => {
+        try {
+          let text = reader.result as string
+
+          // Supprime BOM UTF-8 si présent
+          if (text.charCodeAt(0) === 0xfeff) {
+            text = text.slice(1)
+          }
+
+          const lignes = text
+            .trim()
+            .split(/\r?\n/)
+            .filter(row => row.trim() !== '') // ignore lignes vides
+
+          if (lignes.length === 0) {
+            emit('import-erreur', 'Le fichier CSV est vide.')
+            return
+          }
+
+          //  Détection automatique du séparateur
+          const separateur = detecterSeparateur(lignes[0]!)
+
+          //  Découpage des lignes
+          const data: string[][] = lignes.map(row => row.split(separateur).map(cell => cell.trim()))
+
+          emit('import', data)
+        } catch (error) {
+          emit('import-erreur', erreurTexte || t('csqc.csqcImportCSV.erreur.lectureFichier'))
+        }
+      }
+
+      reader.onerror = () => {
+        emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
+      }
+
+      reader.readAsText(file)
+    } else {
+      const message = erreurTexte || t('csqc.csqcImportCSV.erreur.erreur')
+      emit('import-erreur', message)
+      csvFile.value = null
+    }
+  }
+
+  //  Fonction pour détecter le séparateur le plus probable
+  function detecterSeparateur(ligne: string): string {
+    const separateursTestés = [',', ';', '\t', '|']
+    let meilleurSeparateur = ','
+    let maxColonnes = 0
+
+    for (const sep of separateursTestés) {
+      const nb = ligne.split(sep).length
+      if (nb > maxColonnes) {
+        maxColonnes = nb
+        meilleurSeparateur = sep
+      }
+    }
+
+    return meilleurSeparateur
+  }
+</script>