codevdesign 0.0.57 → 0.0.59

package/composants/codeBudgetaireGenerique.vue

@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <v-form
+      ref="form"
+      v-model="formValide"
+      @submit.prevent
+    >
+      <v-combobox
+        v-model="codeBudgetaire"
+        :items="codeBudgetairesProp"
+        :label="label"
+        persistent-hint
+        variant="outlined"
+        hide-details="auto"
+        :error="!estValide"
+        :rules="[v => (estValide ? true : regleMessageErreur)]"
+        :disabled="disable"
+        :density="density"
+        :placeholder="placeholder"
+        :max-width="maxWidth || '100%'"
+        :min-width="minWidth || '100%'"
+        @blur="sauvegarder"
+        @keydown.enter="sauvegarder"
+        @keydown="caractereAutorises"
+        @update:modelValue="gererChangement"
+        @paste="gererPaste"
+      />
+    </v-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, nextTick } from 'vue'
+  import { VForm } from 'vuetify/components'
+
+  const emit = defineEmits(['update:modelValue', 'update:codeBudgetairesProp'])
+
+  const props = withDefaults(
+    defineProps<{
+      codeBudgetairesProp: string[]
+      modelValue: string | null
+      label: string
+      disable: boolean
+      regleMessageErreur: string
+      density?: 'default' | 'comfortable' | 'compact'
+      maxWidth?: string | number
+      minWidth?: string | number
+      format?: string
+      activerExtension?: boolean
+    }>(),
+    {
+      format: '999-9-99999-999',
+      activerExtension: false,
+    },
+  )
+
+  const formValide = ref(false)
+  const form = ref<VForm | null>(null)
+  const codeBudgetaire = ref(props.modelValue ?? '')
+  const derniereValeurSauvegardee = ref<string | null>(null)
+  const format = props.format
+  const activerExtension = props.activerExtension
+
+  const positionsTirets = [3, 5, 11]
+
+  const estValide = computed(() => {
+    const val = codeBudgetaire.value?.toUpperCase().trim() || ''
+    const base = val.slice(0, 15)
+    const extension = val.slice(15)
+
+    if (!/^\d{3}-\d{1}-\d{5}-\d{3}$/.test(base)) return false
+
+    if (!activerExtension) return val.length === 15
+
+    if (val.length === 15) return true
+    if (val.length !== 22) return false
+    if (extension.length !== 7) return false
+
+    if (extension[3] !== '/') return false
+    if (!/^[A-Z0-9/]$/i.test(extension[0])) return false
+
+    const alphanumAt = [1, 2, 4, 5, 6]
+    return alphanumAt.every(i => /^[A-Z0-9]$/i.test(extension[i]))
+  })
+
+  const caractereAutorises = (e: KeyboardEvent) => {
+    if (e.ctrlKey || e.metaKey) return
+
+    const touchesSpecifiques = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End']
+    if (touchesSpecifiques.includes(e.key)) return
+
+    const input = e.target as HTMLInputElement
+    let position = input.selectionStart ?? 0
+
+    // Gestion de la partie de base (15 premiers caractères)
+    if (position < 15) {
+      if (!/^\d$/.test(e.key)) {
+        e.preventDefault()
+        return
+      }
+
+      // Insérer chiffre et auto-ajout des tirets
+      e.preventDefault()
+
+      const value = codeBudgetaire.value.replace(/-/g, '')
+      const clean = value.slice(0, 12) + e.key
+
+      let formatted = ''
+      if (clean.length > 0) formatted += clean.slice(0, 3)
+      if (clean.length > 3) formatted += '-' + clean.slice(3, 4)
+      if (clean.length > 4) formatted += '-' + clean.slice(4, 9)
+      if (clean.length > 9) formatted += '-' + clean.slice(9, 12)
+
+      codeBudgetaire.value = formatted.slice(0, 15)
+
+      nextTick(() => {
+        const newPos = codeBudgetaire.value.length
+        input.selectionStart = input.selectionEnd = newPos
+      })
+
+      return
+    }
+
+    // --- Gestion de l'extension ---
+    if (!activerExtension || position >= 22 || codeBudgetaire.value.length >= 22) {
+      e.preventDefault()
+      return
+    }
+
+    const extensionPos = position - 15
+
+    // Règle 1 : extension[0] = alphanum ou /
+    if (extensionPos === 0) {
+      if (!/^[A-Z0-9/]$/i.test(e.key)) {
+        e.preventDefault()
+        return
+      }
+      return
+    }
+
+    // Règle 2 : extension[1,2,4,5,6] = alphanum
+    if ([1, 2, 4, 5, 6].includes(extensionPos)) {
+      if (!/^[A-Z0-9]$/i.test(e.key)) {
+        e.preventDefault()
+        return
+      }
+      return
+    }
+
+    // Règle 3 : slash automatique à position 3 (index 18)
+    if (extensionPos === 3) {
+      e.preventDefault()
+      const before = codeBudgetaire.value.slice(0, position)
+      const after = codeBudgetaire.value.slice(position)
+      codeBudgetaire.value = before + '/' + after
+      nextTick(() => {
+        input.selectionStart = input.selectionEnd = position + 1
+      })
+      return
+    }
+
+    // Tout autre cas = bloqué
+    e.preventDefault()
+  }
+
+  const formaterCodeBudgetaire = (valeur: string): string => {
+    if (!valeur) return ''
+
+    const upper = valeur.toUpperCase().replace(/[^A-Z0-9/]/g, '')
+    const chiffres = upper.replace(/[^0-9]/g, '').slice(0, 12)
+
+    let base = ''
+    if (chiffres.length > 0) base += chiffres.slice(0, 3)
+    if (chiffres.length > 3) base += '-' + chiffres.slice(3, 4)
+    if (chiffres.length > 4) base += '-' + chiffres.slice(4, 9)
+    if (chiffres.length > 9) base += '-' + chiffres.slice(9, 12)
+
+    if (!activerExtension || base.length < 15) return base
+
+    const reste = upper.slice(chiffres.length).replace(/[^A-Z0-9/]/gi, '')
+
+    // Extraire les 7 premiers caractères restants pour l’extension
+    let ext = reste.slice(0, 7).split('')
+
+    // Ne garder que le premier slash s’il est à l’index 0 ou 3
+    const slashIndices = ext.map((c, i) => (c === '/' ? i : -1)).filter(i => i !== -1)
+    ext = ext.filter((c, i) => {
+      if (c !== '/') return true
+      return i === 0 || i === 3
+    })
+
+    // Enlever les slash non autorisés
+    ext = ext.map((c, i) => {
+      if (c === '/' && i !== 0 && i !== 3) return ''
+      if (c !== '/' && !/^[A-Z0-9]$/i.test(c)) return ''
+      return c
+    })
+
+    // Forcer le slash à la 4e position
+    if (ext.length > 3) {
+      ext[3] = '/'
+    }
+
+    // Réduire à 7 caractères
+    ext = ext.slice(0, 7)
+
+    return (base + ext.join('')).slice(0, 22)
+  }
+
+  const gererPaste = (e: ClipboardEvent) => {
+    e.preventDefault()
+    const clipboardData = e.clipboardData
+    if (!clipboardData) return
+    let pasted = clipboardData.getData('text') || ''
+    codeBudgetaire.value = formaterCodeBudgetaire(pasted)
+
+    setTimeout(() => {
+      const input = e.target as HTMLInputElement
+      input.selectionStart = input.selectionEnd = codeBudgetaire.value.length
+    }, 0)
+  }
+
+  const sauvegarder = () => {
+    codeBudgetaire.value = formaterCodeBudgetaire(codeBudgetaire.value)
+    if (!estValide.value) return
+    if (codeBudgetaire.value === derniereValeurSauvegardee.value) return
+
+    const existe = props.codeBudgetairesProp.some(
+      item => item.trim().toUpperCase() === codeBudgetaire.value.trim().toUpperCase(),
+    )
+
+    if (!existe) {
+      const nouvelleListe = [...props.codeBudgetairesProp, codeBudgetaire.value]
+      emit('update:codeBudgetairesProp', nouvelleListe)
+    }
+
+    derniereValeurSauvegardee.value = codeBudgetaire.value
+    emit('update:modelValue', codeBudgetaire.value)
+  }
+
+  const gererChangement = (val: string) => {
+    codeBudgetaire.value = formaterCodeBudgetaire(val)
+
+    const valeurFormatee = codeBudgetaire.value
+    const estDansListe = props.codeBudgetairesProp.includes(valeurFormatee)
+
+    if (estDansListe && valeurFormatee !== derniereValeurSauvegardee.value && estValide.value) {
+      sauvegarder()
+    }
+  }
+
+  onMounted(() => {
+    derniereValeurSauvegardee.value = codeBudgetaire.value
+  })
+
+  const placeholder = computed(() => {
+    const base = format.replace(/9/g, '0')
+    const extension = activerExtension ? '-XXXXXXX' : ''
+    return base + extension
+  })
+</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 csqcCodeBudgetaire from './composants/codeBudgetaireGenerique.vue'
 //import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
 import csqcAide from './composants/csqcAide.vue'
 import csqcEntete from './composants/csqcEntete.vue'
@@ -45,6 +46,7 @@ export {
   csqcTable,
   csqcTiroir,
   csqcMenu,
+  csqcCodeBudgetaire,
   //csqcChaise,
   pivFooter,
   pivEntete,

package/locales/en.json

@@ -25,6 +25,19 @@
       "supprimer": "Delete",
       "televerser": "Upload"
     },
+    "csqcMenu": {
+      "deconnexion": "Logout"
+    },
+    "csqcRechercheUtilisateur": {
+      "ajouterUtilisateurInfo": "Vous pouvez entrer ici l'identifiant Office 365 ou le matricule de l'employé. Puis cliquez sur la loupe. Si cette information se trouve dans le système de paie, l'utilisateur sera ajouté. Notez que l'utilisateur doit avoir une adresse électronique du portail valide dans le système de paie.",
+      "aucunEmploi": "Aucun emploi trouvé",
+      "corpsEmploi": "Corps d'emploi",
+      "identifiantOuMatricule": "Identifiant Office 365 ou matricule",
+      "placeholderRechercheUtilisateur": "Rechercher un utilisateur",
+      "revenirRecherche": "Revenir à la recherche",
+      "utilisateurIntrouvable": "L'employé recherché est introuvable",
+      "utilisateurs": "Employé"
+    },
     "label": {
       "actif": "Active",
       "fermer": "Close",
@@ -34,10 +47,10 @@
       "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."
+      "chaiseSelectionToutes": "Please make a selection for all units.",
+      "supprimerMessage": "Are you sure you want to delete {nom}?",
+      "supprimerTitre": "Delete confirmation!"
     },
     "pivEntete": {
       "langue": "Français"
@@ -50,4 +63,4 @@
       "selectionner": "Select"
     }
   }
-}
+}

package/locales/fr.json

@@ -25,15 +25,18 @@
       "supprimer": "Supprimer",
       "televerser": "Téléverser"
     },
+    "csqcMenu": {
+      "deconnexion": "Déconnexion"
+    },
     "csqcRechercheUtilisateur": {
-      "ajouterUtilisateurInfo": "Vous pouvez entrer ici l'identifiant Office 365 ou le matricule de l'employé. Puis cliquez sur la loupe. Si cette information se trouve dans le système de paie, l'utilisateur sera ajouté. Notez que l'utilisateur doit avoir une adresse électronique du portail valide dans le système de paie.",
-      "aucunEmploi": "Aucun emploi trouvé",
-      "corpsEmploi": "Corps d'emploi",
-      "identifiantOuMatricule": "Identifiant Office 365 ou matricule",
-      "placeholderRechercheUtilisateur": "Rechercher un utilisateur",
-      "revenirRecherche": "Revenir à la recherche",
-      "utilisateurIntrouvable": "L'employé recherché est introuvable",
-      "utilisateurs": "Employé"
+      "ajouterUtilisateurInfo": "You can enter the Office 365 ID or the employee number here, then click the magnifying glass. If this information exists in the payroll system, the user will be added. Note that the user must have a valid portal email address in the payroll system.",
+      "aucunEmploi": "No job found",
+      "corpsEmploi": "Job title",
+      "identifiantOuMatricule": "Office 365 ID or employee number",
+      "placeholderRechercheUtilisateur": "Search for a user",
+      "revenirRecherche": "Back to search",
+      "utilisateurIntrouvable": "The employee could not be found",
+      "utilisateurs": "Employee"
     },
     "label": {
       "actif": "Actif",
@@ -52,9 +55,6 @@
     "pivEntete": {
       "langue": "English"
     },
-    "csqcMenu": {
-      "deconnexion": "Déconnexion"
-    },
     "pivFooter": {
       "logoAlt": ""
     },
@@ -63,4 +63,4 @@
       "selectionner": "Sélectionner"
     }
   }
-}
+}

package/package.json

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