codevdesign 2.0.19 → 2.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/composants/csqcChaise/chaiseConteneur.vue +370 -370
- package/composants/csqcChaise/chaiseItem.vue +54 -54
- package/composants/csqcDialogue.vue +120 -120
- package/composants/csqcEntete.vue +236 -236
- package/composants/csqcImportCSV.vue +124 -124
- package/composants/csqcRecherche.vue +2 -2
- package/composants/csqcRechercheUtilisateur.vue +202 -202
- package/composants/csqcTable/csqcTable.vue +843 -846
- package/composants/csqcTable/csqcTableModaleChoixColonnes.vue +829 -829
- package/composants/csqcTiroir.vue +198 -198
- package/composants/gabarit/pivEntete.vue +206 -206
- package/composants/gabarit/pivPiedPage.vue +95 -95
- package/editeur.ts +1 -1
- package/importCSV.ts +1 -1
- package/index.ts +84 -84
- package/modeles/composants/csqcMenuModele.ts +18 -18
- package/package.json +1 -1
- package/plugins/vuetify.ts +158 -158
|
@@ -1,124 +1,124 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<bouton-secondaire
|
|
4
|
-
color="success"
|
|
5
|
-
:loading="chargement"
|
|
6
|
-
v-bind="$attrs"
|
|
7
|
-
@click="importCsv"
|
|
8
|
-
>
|
|
9
|
-
{{ boutonTexte }}
|
|
10
|
-
<template #append>
|
|
11
|
-
<v-icon icon="mdi-microsoft-excel"></v-icon>
|
|
12
|
-
</template>
|
|
13
|
-
</bouton-secondaire>
|
|
14
|
-
|
|
15
|
-
<input
|
|
16
|
-
ref="fileInput"
|
|
17
|
-
type="file"
|
|
18
|
-
accept=".csv"
|
|
19
|
-
style="display: none"
|
|
20
|
-
@change="handleFileUpload"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
</template>
|
|
24
|
-
|
|
25
|
-
<script setup lang="ts">
|
|
26
|
-
import { ref, computed } from 'vue'
|
|
27
|
-
import { useI18n } from 'vue-i18n'
|
|
28
|
-
|
|
29
|
-
// Props
|
|
30
|
-
const props = withDefaults(
|
|
31
|
-
defineProps<{
|
|
32
|
-
boutonTexte?: string
|
|
33
|
-
erreurTexte?: string
|
|
34
|
-
chargement?: boolean
|
|
35
|
-
}>(),
|
|
36
|
-
{
|
|
37
|
-
chargement: false, // défaut
|
|
38
|
-
},
|
|
39
|
-
)
|
|
40
|
-
const emit = defineEmits(['import', 'import-erreur'])
|
|
41
|
-
|
|
42
|
-
const { t } = useI18n()
|
|
43
|
-
|
|
44
|
-
const boutonTexte = computed(() => props.boutonTexte ?? t('csqc.bouton.importer'))
|
|
45
|
-
const erreurTexte = computed(() => props.erreurTexte ?? t('csqc.csqcImportCSV.erreur.lectureFichier'))
|
|
46
|
-
|
|
47
|
-
// Références
|
|
48
|
-
const fileInput = ref<HTMLInputElement | null>(null)
|
|
49
|
-
const csvFile = ref<File | null>(null)
|
|
50
|
-
|
|
51
|
-
// Méthodes
|
|
52
|
-
function importCsv() {
|
|
53
|
-
fileInput.value?.click()
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function handleFileUpload(event: Event) {
|
|
57
|
-
const target = event.target as HTMLInputElement
|
|
58
|
-
const file = target.files?.[0]
|
|
59
|
-
|
|
60
|
-
if (file?.name.toLowerCase().endsWith('.csv')) {
|
|
61
|
-
csvFile.value = file
|
|
62
|
-
|
|
63
|
-
const reader = new FileReader()
|
|
64
|
-
|
|
65
|
-
reader.onload = () => {
|
|
66
|
-
try {
|
|
67
|
-
let text = reader.result as string
|
|
68
|
-
|
|
69
|
-
// Supprime BOM UTF-8 si présent
|
|
70
|
-
if (text.charCodeAt(0) === 0xfeff) {
|
|
71
|
-
text = text.slice(1)
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
const lignes = text
|
|
75
|
-
.trim()
|
|
76
|
-
.split(/\r?\n/)
|
|
77
|
-
.filter(row => row.trim() !== '') // ignore lignes vides
|
|
78
|
-
|
|
79
|
-
if (lignes.length === 0) {
|
|
80
|
-
emit('import-erreur', 'Le fichier CSV est vide.')
|
|
81
|
-
return
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// Détection automatique du séparateur
|
|
85
|
-
const separateur = detecterSeparateur(lignes[0]!)
|
|
86
|
-
|
|
87
|
-
// Découpage des lignes
|
|
88
|
-
const data: string[][] = lignes.map(row => row.split(separateur).map(cell => cell.trim()))
|
|
89
|
-
|
|
90
|
-
emit('import', data)
|
|
91
|
-
} catch (error) {
|
|
92
|
-
emit('import-erreur', erreurTexte.value || t('csqc.csqcImportCSV.erreur.lectureFichier'))
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
reader.onerror = () => {
|
|
97
|
-
emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
reader.readAsText(file)
|
|
101
|
-
} else {
|
|
102
|
-
const message = erreurTexte.value || t('csqc.csqcImportCSV.erreur.erreur')
|
|
103
|
-
emit('import-erreur', message)
|
|
104
|
-
csvFile.value = null
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// Fonction pour détecter le séparateur le plus probable
|
|
109
|
-
function detecterSeparateur(ligne: string): string {
|
|
110
|
-
const separateursTestés = [',', ';', '\t', '|']
|
|
111
|
-
let meilleurSeparateur = ','
|
|
112
|
-
let maxColonnes = 0
|
|
113
|
-
|
|
114
|
-
for (const sep of separateursTestés) {
|
|
115
|
-
const nb = ligne.split(sep).length
|
|
116
|
-
if (nb > maxColonnes) {
|
|
117
|
-
maxColonnes = nb
|
|
118
|
-
meilleurSeparateur = sep
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
return meilleurSeparateur
|
|
123
|
-
}
|
|
124
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<bouton-secondaire
|
|
4
|
+
color="success"
|
|
5
|
+
:loading="chargement"
|
|
6
|
+
v-bind="$attrs"
|
|
7
|
+
@click="importCsv"
|
|
8
|
+
>
|
|
9
|
+
{{ boutonTexte }}
|
|
10
|
+
<template #append>
|
|
11
|
+
<v-icon icon="mdi-microsoft-excel"></v-icon>
|
|
12
|
+
</template>
|
|
13
|
+
</bouton-secondaire>
|
|
14
|
+
|
|
15
|
+
<input
|
|
16
|
+
ref="fileInput"
|
|
17
|
+
type="file"
|
|
18
|
+
accept=".csv"
|
|
19
|
+
style="display: none"
|
|
20
|
+
@change="handleFileUpload"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script setup lang="ts">
|
|
26
|
+
import { ref, computed } from 'vue'
|
|
27
|
+
import { useI18n } from 'vue-i18n'
|
|
28
|
+
|
|
29
|
+
// Props
|
|
30
|
+
const props = withDefaults(
|
|
31
|
+
defineProps<{
|
|
32
|
+
boutonTexte?: string
|
|
33
|
+
erreurTexte?: string
|
|
34
|
+
chargement?: boolean
|
|
35
|
+
}>(),
|
|
36
|
+
{
|
|
37
|
+
chargement: false, // défaut
|
|
38
|
+
},
|
|
39
|
+
)
|
|
40
|
+
const emit = defineEmits(['import', 'import-erreur'])
|
|
41
|
+
|
|
42
|
+
const { t } = useI18n()
|
|
43
|
+
|
|
44
|
+
const boutonTexte = computed(() => props.boutonTexte ?? t('csqc.bouton.importer'))
|
|
45
|
+
const erreurTexte = computed(() => props.erreurTexte ?? t('csqc.csqcImportCSV.erreur.lectureFichier'))
|
|
46
|
+
|
|
47
|
+
// Références
|
|
48
|
+
const fileInput = ref<HTMLInputElement | null>(null)
|
|
49
|
+
const csvFile = ref<File | null>(null)
|
|
50
|
+
|
|
51
|
+
// Méthodes
|
|
52
|
+
function importCsv() {
|
|
53
|
+
fileInput.value?.click()
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
function handleFileUpload(event: Event) {
|
|
57
|
+
const target = event.target as HTMLInputElement
|
|
58
|
+
const file = target.files?.[0]
|
|
59
|
+
|
|
60
|
+
if (file?.name.toLowerCase().endsWith('.csv')) {
|
|
61
|
+
csvFile.value = file
|
|
62
|
+
|
|
63
|
+
const reader = new FileReader()
|
|
64
|
+
|
|
65
|
+
reader.onload = () => {
|
|
66
|
+
try {
|
|
67
|
+
let text = reader.result as string
|
|
68
|
+
|
|
69
|
+
// Supprime BOM UTF-8 si présent
|
|
70
|
+
if (text.charCodeAt(0) === 0xfeff) {
|
|
71
|
+
text = text.slice(1)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
const lignes = text
|
|
75
|
+
.trim()
|
|
76
|
+
.split(/\r?\n/)
|
|
77
|
+
.filter(row => row.trim() !== '') // ignore lignes vides
|
|
78
|
+
|
|
79
|
+
if (lignes.length === 0) {
|
|
80
|
+
emit('import-erreur', 'Le fichier CSV est vide.')
|
|
81
|
+
return
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Détection automatique du séparateur
|
|
85
|
+
const separateur = detecterSeparateur(lignes[0]!)
|
|
86
|
+
|
|
87
|
+
// Découpage des lignes
|
|
88
|
+
const data: string[][] = lignes.map(row => row.split(separateur).map(cell => cell.trim()))
|
|
89
|
+
|
|
90
|
+
emit('import', data)
|
|
91
|
+
} catch (error) {
|
|
92
|
+
emit('import-erreur', erreurTexte.value || t('csqc.csqcImportCSV.erreur.lectureFichier'))
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
reader.onerror = () => {
|
|
97
|
+
emit('import-erreur', t('csqc.csqcImportCSV.erreur.lectureFichier'))
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
reader.readAsText(file)
|
|
101
|
+
} else {
|
|
102
|
+
const message = erreurTexte.value || t('csqc.csqcImportCSV.erreur.erreur')
|
|
103
|
+
emit('import-erreur', message)
|
|
104
|
+
csvFile.value = null
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Fonction pour détecter le séparateur le plus probable
|
|
109
|
+
function detecterSeparateur(ligne: string): string {
|
|
110
|
+
const separateursTestés = [',', ';', '\t', '|']
|
|
111
|
+
let meilleurSeparateur = ','
|
|
112
|
+
let maxColonnes = 0
|
|
113
|
+
|
|
114
|
+
for (const sep of separateursTestés) {
|
|
115
|
+
const nb = ligne.split(sep).length
|
|
116
|
+
if (nb > maxColonnes) {
|
|
117
|
+
maxColonnes = nb
|
|
118
|
+
meilleurSeparateur = sep
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
return meilleurSeparateur
|
|
123
|
+
}
|
|
124
|
+
</script>
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
v-if="rechercheAvancee"
|
|
62
62
|
cols="12"
|
|
63
63
|
:lg="rechercheAvanceeLargeur"
|
|
64
|
-
class="pt-0"
|
|
64
|
+
class="pt-0 bg-background"
|
|
65
65
|
>
|
|
66
66
|
<v-expansion-panels
|
|
67
67
|
static
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
flat
|
|
74
74
|
elevation="0"
|
|
75
75
|
>
|
|
76
|
-
<v-expansion-panel-title class="pl-0 ml-0 RechercheAvanceeTitre"
|
|
76
|
+
<v-expansion-panel-title class="pl-0 ml-0 RechercheAvanceeTitre bg-background"
|
|
77
77
|
><slot name="rechercheAvanceeTitre">
|
|
78
78
|
<span
|
|
79
79
|
style="text-decoration: underline"
|
|
@@ -1,202 +1,202 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<v-autocomplete
|
|
4
|
-
v-model="selection"
|
|
5
|
-
v-model:search="search"
|
|
6
|
-
:items="items"
|
|
7
|
-
:loading="chargementInterne"
|
|
8
|
-
:density="($attrs.density as any) ?? 'compact'"
|
|
9
|
-
:hide-no-data="!doitAfficherAucunResultat"
|
|
10
|
-
:no-data-text="$t('csqc.csqcRechercheUtilisateur.aucunResultat')"
|
|
11
|
-
:item-title="formatterUtilisateur"
|
|
12
|
-
item-value="id"
|
|
13
|
-
:placeholder="$t('csqc.csqcRechercheUtilisateur.placeholderRechercheUtilisateur')"
|
|
14
|
-
return-object
|
|
15
|
-
:autofocus="($attrs.autofocus as any) ?? true"
|
|
16
|
-
auto-select-first
|
|
17
|
-
:variant="($attrs.variant as any) ?? 'outlined'"
|
|
18
|
-
v-bind="$attrs"
|
|
19
|
-
/>
|
|
20
|
-
</div>
|
|
21
|
-
</template>
|
|
22
|
-
|
|
23
|
-
<script setup lang="ts">
|
|
24
|
-
import { ref, watch, computed } from 'vue'
|
|
25
|
-
import { useI18n } from 'vue-i18n'
|
|
26
|
-
import appAxios from '../outils/appAxios'
|
|
27
|
-
import type { EmployeMinsLsCodev } from '../modeles/employeMinsLsCodev'
|
|
28
|
-
|
|
29
|
-
const props = defineProps<{
|
|
30
|
-
matriculeDefaut?: string | null
|
|
31
|
-
chargement?: boolean
|
|
32
|
-
urlBase: string
|
|
33
|
-
}>()
|
|
34
|
-
|
|
35
|
-
const emit = defineEmits<{
|
|
36
|
-
(e: 'selection', value: string | null): void
|
|
37
|
-
(e: 'selectionPlus', utilisateur: EmployeMinsLsCodev | null): void
|
|
38
|
-
(e: 'erreur', message: string): void
|
|
39
|
-
}>()
|
|
40
|
-
|
|
41
|
-
const { t } = useI18n({ useScope: 'global' })
|
|
42
|
-
|
|
43
|
-
/** État interne */
|
|
44
|
-
const selection = ref<EmployeMinsLsCodev | null>(null)
|
|
45
|
-
const utilisateurs = ref<EmployeMinsLsCodev[]>([])
|
|
46
|
-
const search = ref<string>('')
|
|
47
|
-
const erreur = ref<string | null>(null)
|
|
48
|
-
|
|
49
|
-
/** Charge interne : on combine le chargement externe (prop) et l’interne */
|
|
50
|
-
const chargementInterne = ref(false)
|
|
51
|
-
const chargementEffectif = computed(() => props.chargement === true || chargementInterne.value)
|
|
52
|
-
|
|
53
|
-
/** Items sécurisés pour l’autocomplete */
|
|
54
|
-
const items = computed<EmployeMinsLsCodev[]>(() => (Array.isArray(utilisateurs.value) ? utilisateurs.value : []))
|
|
55
|
-
|
|
56
|
-
/** Cache clé→liste (toujours des arrays valides) */
|
|
57
|
-
const cache = ref<Record<string, EmployeMinsLsCodev[]>>({})
|
|
58
|
-
|
|
59
|
-
/** Détection d’un terme valide (limite les calls) */
|
|
60
|
-
const estTermeValide = (terme?: string): boolean => !!terme && terme.trim().length >= 4 && !terme.includes('(')
|
|
61
|
-
|
|
62
|
-
/** Affichage “aucun résultat” contrôlé */
|
|
63
|
-
const doitAfficherAucunResultat = computed(
|
|
64
|
-
() => estTermeValide(search.value) && !chargementEffectif.value && items.value.length === 0,
|
|
65
|
-
)
|
|
66
|
-
|
|
67
|
-
/** Formattage d’un employé en ligne lisible */
|
|
68
|
-
const formatterUtilisateur = (item: EmployeMinsLsCodev): string => {
|
|
69
|
-
const lieu = [item.numeroLieuPrincipal, item.nomLieuPrincipal].filter(Boolean).join('-')
|
|
70
|
-
const corps = [item.corpsEmploiPrincipal, item.corpsEmploiPrincipalDescription].filter(Boolean).join('-')
|
|
71
|
-
return `${item.prenom} ${item.nom} (${item.matricule}), ${item.courrielProfessionnel}${lieu ? `, ${lieu}` : ''}${corps ? `, ${corps}` : ''}`
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
/** Type guard: on s’assure qu’on a bien un tableau d’employés */
|
|
75
|
-
function isEmployeArray(x: unknown): x is EmployeMinsLsCodev[] {
|
|
76
|
-
return (
|
|
77
|
-
Array.isArray(x) && x.every(u => u && typeof u === 'object' && 'prenom' in u && 'nom' in u && 'matricule' in u)
|
|
78
|
-
)
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
/** Réinitialise proprement la liste + émet une erreur optionnelle */
|
|
82
|
-
function safeClearUsers(msg?: string) {
|
|
83
|
-
utilisateurs.value = []
|
|
84
|
-
if (msg) {
|
|
85
|
-
erreur.value = msg
|
|
86
|
-
emit('erreur', msg)
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/** Anti-race condition: on ne retient le résultat que si l’ID correspond */
|
|
91
|
-
let lastQueryId = 0
|
|
92
|
-
|
|
93
|
-
async function rechercherUtilisateurs(terme?: string) {
|
|
94
|
-
if (!estTermeValide(terme)) {
|
|
95
|
-
utilisateurs.value = []
|
|
96
|
-
return
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
const queryId = ++lastQueryId
|
|
100
|
-
const termeLower = terme!.toLowerCase()
|
|
101
|
-
|
|
102
|
-
// Cache prefix-match: on prend la plus longue clé qui matche le début
|
|
103
|
-
const cachedKey = Object.keys(cache.value)
|
|
104
|
-
.filter(k => termeLower.startsWith(k))
|
|
105
|
-
.sort((a, b) => b.length - a.length)[0]
|
|
106
|
-
|
|
107
|
-
if (cachedKey) {
|
|
108
|
-
const cached = cache.value[cachedKey]
|
|
109
|
-
if (isEmployeArray(cached)) {
|
|
110
|
-
// Un résultat vide caché ne doit pas être réutilisé indéfiniment : un employé
|
|
111
|
-
// peut devenir trouvable entre deux frappes (sync paie/Grics en retard).
|
|
112
|
-
if (cached.length > 0) {
|
|
113
|
-
// Filtre côté client pour les affiner
|
|
114
|
-
const tl = termeLower
|
|
115
|
-
utilisateurs.value = cached.filter(user => formatterUtilisateur(user).toLowerCase().includes(tl))
|
|
116
|
-
return
|
|
117
|
-
}
|
|
118
|
-
} else {
|
|
119
|
-
// Cache corrompu (théorique)
|
|
120
|
-
delete cache.value[cachedKey]
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
try {
|
|
125
|
-
chargementInterne.value = true
|
|
126
|
-
const url = `${props.urlBase}/api/ComposantUI/Utilisateurs/${encodeURIComponent(terme as string)}`
|
|
127
|
-
const reponse = await appAxios.getAxios().get<unknown>(url)
|
|
128
|
-
const data = (reponse as any)?.data ?? reponse
|
|
129
|
-
|
|
130
|
-
if (queryId !== lastQueryId) {
|
|
131
|
-
// Une requête plus récente est arrivée, on ignore
|
|
132
|
-
return
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
if (!isEmployeArray(data)) {
|
|
136
|
-
// Probable HTML/redirect login/erreur
|
|
137
|
-
safeClearUsers(t('csqc.csqcRechercheUtilisateur.erreur'))
|
|
138
|
-
return
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
utilisateurs.value = data
|
|
142
|
-
cache.value[termeLower] = data
|
|
143
|
-
} catch (e: unknown) {
|
|
144
|
-
let message = t('csqc.csqcRechercheUtilisateur.erreur')
|
|
145
|
-
if (e instanceof Error) message = e.message
|
|
146
|
-
else if (typeof e === 'string') message = e
|
|
147
|
-
safeClearUsers(message)
|
|
148
|
-
} finally {
|
|
149
|
-
chargementInterne.value = false
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
/** Debounce recherche */
|
|
154
|
-
let timer: number | undefined
|
|
155
|
-
watch(
|
|
156
|
-
search,
|
|
157
|
-
terme => {
|
|
158
|
-
if (chargementEffectif.value) return
|
|
159
|
-
window.clearTimeout(timer)
|
|
160
|
-
timer = window.setTimeout(() => rechercherUtilisateurs(terme), 250)
|
|
161
|
-
},
|
|
162
|
-
{ flush: 'post' },
|
|
163
|
-
)
|
|
164
|
-
|
|
165
|
-
/** Émettre la sélection (email & objet complet) */
|
|
166
|
-
watch(selection, utilisateur => {
|
|
167
|
-
emit('selection', utilisateur?.courrielProfessionnel ?? null)
|
|
168
|
-
emit('selectionPlus', utilisateur ?? null)
|
|
169
|
-
})
|
|
170
|
-
|
|
171
|
-
/** Préchargement par matricule par défaut */
|
|
172
|
-
watch(
|
|
173
|
-
() => props.matriculeDefaut,
|
|
174
|
-
async (nv, ov) => {
|
|
175
|
-
// Si vide / nul → on nettoie
|
|
176
|
-
if (!nv || nv.trim() === '') {
|
|
177
|
-
selection.value = null
|
|
178
|
-
search.value = ''
|
|
179
|
-
utilisateurs.value = []
|
|
180
|
-
return
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
// Si la même valeur est déjà sélectionnée → rien à faire
|
|
184
|
-
if (selection.value?.matricule === nv) return
|
|
185
|
-
|
|
186
|
-
// Recherche par matricule par défaut
|
|
187
|
-
await rechercherUtilisateurs(nv)
|
|
188
|
-
if (utilisateurs.value.length > 0) {
|
|
189
|
-
const utilisateur = utilisateurs.value.find(u => u.matricule === nv) ?? null
|
|
190
|
-
if (utilisateur) {
|
|
191
|
-
search.value = formatterUtilisateur(utilisateur)
|
|
192
|
-
selection.value = utilisateur
|
|
193
|
-
} else {
|
|
194
|
-
// Pas trouvé → reset “propre”
|
|
195
|
-
selection.value = null
|
|
196
|
-
search.value = nv // ou ''
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
},
|
|
200
|
-
{ immediate: true },
|
|
201
|
-
)
|
|
202
|
-
</script>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<v-autocomplete
|
|
4
|
+
v-model="selection"
|
|
5
|
+
v-model:search="search"
|
|
6
|
+
:items="items"
|
|
7
|
+
:loading="chargementInterne"
|
|
8
|
+
:density="($attrs.density as any) ?? 'compact'"
|
|
9
|
+
:hide-no-data="!doitAfficherAucunResultat"
|
|
10
|
+
:no-data-text="$t('csqc.csqcRechercheUtilisateur.aucunResultat')"
|
|
11
|
+
:item-title="formatterUtilisateur"
|
|
12
|
+
item-value="id"
|
|
13
|
+
:placeholder="$t('csqc.csqcRechercheUtilisateur.placeholderRechercheUtilisateur')"
|
|
14
|
+
return-object
|
|
15
|
+
:autofocus="($attrs.autofocus as any) ?? true"
|
|
16
|
+
auto-select-first
|
|
17
|
+
:variant="($attrs.variant as any) ?? 'outlined'"
|
|
18
|
+
v-bind="$attrs"
|
|
19
|
+
/>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script setup lang="ts">
|
|
24
|
+
import { ref, watch, computed } from 'vue'
|
|
25
|
+
import { useI18n } from 'vue-i18n'
|
|
26
|
+
import appAxios from '../outils/appAxios'
|
|
27
|
+
import type { EmployeMinsLsCodev } from '../modeles/employeMinsLsCodev'
|
|
28
|
+
|
|
29
|
+
const props = defineProps<{
|
|
30
|
+
matriculeDefaut?: string | null
|
|
31
|
+
chargement?: boolean
|
|
32
|
+
urlBase: string
|
|
33
|
+
}>()
|
|
34
|
+
|
|
35
|
+
const emit = defineEmits<{
|
|
36
|
+
(e: 'selection', value: string | null): void
|
|
37
|
+
(e: 'selectionPlus', utilisateur: EmployeMinsLsCodev | null): void
|
|
38
|
+
(e: 'erreur', message: string): void
|
|
39
|
+
}>()
|
|
40
|
+
|
|
41
|
+
const { t } = useI18n({ useScope: 'global' })
|
|
42
|
+
|
|
43
|
+
/** État interne */
|
|
44
|
+
const selection = ref<EmployeMinsLsCodev | null>(null)
|
|
45
|
+
const utilisateurs = ref<EmployeMinsLsCodev[]>([])
|
|
46
|
+
const search = ref<string>('')
|
|
47
|
+
const erreur = ref<string | null>(null)
|
|
48
|
+
|
|
49
|
+
/** Charge interne : on combine le chargement externe (prop) et l’interne */
|
|
50
|
+
const chargementInterne = ref(false)
|
|
51
|
+
const chargementEffectif = computed(() => props.chargement === true || chargementInterne.value)
|
|
52
|
+
|
|
53
|
+
/** Items sécurisés pour l’autocomplete */
|
|
54
|
+
const items = computed<EmployeMinsLsCodev[]>(() => (Array.isArray(utilisateurs.value) ? utilisateurs.value : []))
|
|
55
|
+
|
|
56
|
+
/** Cache clé→liste (toujours des arrays valides) */
|
|
57
|
+
const cache = ref<Record<string, EmployeMinsLsCodev[]>>({})
|
|
58
|
+
|
|
59
|
+
/** Détection d’un terme valide (limite les calls) */
|
|
60
|
+
const estTermeValide = (terme?: string): boolean => !!terme && terme.trim().length >= 4 && !terme.includes('(')
|
|
61
|
+
|
|
62
|
+
/** Affichage “aucun résultat” contrôlé */
|
|
63
|
+
const doitAfficherAucunResultat = computed(
|
|
64
|
+
() => estTermeValide(search.value) && !chargementEffectif.value && items.value.length === 0,
|
|
65
|
+
)
|
|
66
|
+
|
|
67
|
+
/** Formattage d’un employé en ligne lisible */
|
|
68
|
+
const formatterUtilisateur = (item: EmployeMinsLsCodev): string => {
|
|
69
|
+
const lieu = [item.numeroLieuPrincipal, item.nomLieuPrincipal].filter(Boolean).join('-')
|
|
70
|
+
const corps = [item.corpsEmploiPrincipal, item.corpsEmploiPrincipalDescription].filter(Boolean).join('-')
|
|
71
|
+
return `${item.prenom} ${item.nom} (${item.matricule}), ${item.courrielProfessionnel}${lieu ? `, ${lieu}` : ''}${corps ? `, ${corps}` : ''}`
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/** Type guard: on s’assure qu’on a bien un tableau d’employés */
|
|
75
|
+
function isEmployeArray(x: unknown): x is EmployeMinsLsCodev[] {
|
|
76
|
+
return (
|
|
77
|
+
Array.isArray(x) && x.every(u => u && typeof u === 'object' && 'prenom' in u && 'nom' in u && 'matricule' in u)
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/** Réinitialise proprement la liste + émet une erreur optionnelle */
|
|
82
|
+
function safeClearUsers(msg?: string) {
|
|
83
|
+
utilisateurs.value = []
|
|
84
|
+
if (msg) {
|
|
85
|
+
erreur.value = msg
|
|
86
|
+
emit('erreur', msg)
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/** Anti-race condition: on ne retient le résultat que si l’ID correspond */
|
|
91
|
+
let lastQueryId = 0
|
|
92
|
+
|
|
93
|
+
async function rechercherUtilisateurs(terme?: string) {
|
|
94
|
+
if (!estTermeValide(terme)) {
|
|
95
|
+
utilisateurs.value = []
|
|
96
|
+
return
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
const queryId = ++lastQueryId
|
|
100
|
+
const termeLower = terme!.toLowerCase()
|
|
101
|
+
|
|
102
|
+
// Cache prefix-match: on prend la plus longue clé qui matche le début
|
|
103
|
+
const cachedKey = Object.keys(cache.value)
|
|
104
|
+
.filter(k => termeLower.startsWith(k))
|
|
105
|
+
.sort((a, b) => b.length - a.length)[0]
|
|
106
|
+
|
|
107
|
+
if (cachedKey) {
|
|
108
|
+
const cached = cache.value[cachedKey]
|
|
109
|
+
if (isEmployeArray(cached)) {
|
|
110
|
+
// Un résultat vide caché ne doit pas être réutilisé indéfiniment : un employé
|
|
111
|
+
// peut devenir trouvable entre deux frappes (sync paie/Grics en retard).
|
|
112
|
+
if (cached.length > 0) {
|
|
113
|
+
// Filtre côté client pour les affiner
|
|
114
|
+
const tl = termeLower
|
|
115
|
+
utilisateurs.value = cached.filter(user => formatterUtilisateur(user).toLowerCase().includes(tl))
|
|
116
|
+
return
|
|
117
|
+
}
|
|
118
|
+
} else {
|
|
119
|
+
// Cache corrompu (théorique)
|
|
120
|
+
delete cache.value[cachedKey]
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
try {
|
|
125
|
+
chargementInterne.value = true
|
|
126
|
+
const url = `${props.urlBase}/api/ComposantUI/Utilisateurs/${encodeURIComponent(terme as string)}`
|
|
127
|
+
const reponse = await appAxios.getAxios().get<unknown>(url)
|
|
128
|
+
const data = (reponse as any)?.data ?? reponse
|
|
129
|
+
|
|
130
|
+
if (queryId !== lastQueryId) {
|
|
131
|
+
// Une requête plus récente est arrivée, on ignore
|
|
132
|
+
return
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
if (!isEmployeArray(data)) {
|
|
136
|
+
// Probable HTML/redirect login/erreur
|
|
137
|
+
safeClearUsers(t('csqc.csqcRechercheUtilisateur.erreur'))
|
|
138
|
+
return
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
utilisateurs.value = data
|
|
142
|
+
cache.value[termeLower] = data
|
|
143
|
+
} catch (e: unknown) {
|
|
144
|
+
let message = t('csqc.csqcRechercheUtilisateur.erreur')
|
|
145
|
+
if (e instanceof Error) message = e.message
|
|
146
|
+
else if (typeof e === 'string') message = e
|
|
147
|
+
safeClearUsers(message)
|
|
148
|
+
} finally {
|
|
149
|
+
chargementInterne.value = false
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/** Debounce recherche */
|
|
154
|
+
let timer: number | undefined
|
|
155
|
+
watch(
|
|
156
|
+
search,
|
|
157
|
+
terme => {
|
|
158
|
+
if (chargementEffectif.value) return
|
|
159
|
+
window.clearTimeout(timer)
|
|
160
|
+
timer = window.setTimeout(() => rechercherUtilisateurs(terme), 250)
|
|
161
|
+
},
|
|
162
|
+
{ flush: 'post' },
|
|
163
|
+
)
|
|
164
|
+
|
|
165
|
+
/** Émettre la sélection (email & objet complet) */
|
|
166
|
+
watch(selection, utilisateur => {
|
|
167
|
+
emit('selection', utilisateur?.courrielProfessionnel ?? null)
|
|
168
|
+
emit('selectionPlus', utilisateur ?? null)
|
|
169
|
+
})
|
|
170
|
+
|
|
171
|
+
/** Préchargement par matricule par défaut */
|
|
172
|
+
watch(
|
|
173
|
+
() => props.matriculeDefaut,
|
|
174
|
+
async (nv, ov) => {
|
|
175
|
+
// Si vide / nul → on nettoie
|
|
176
|
+
if (!nv || nv.trim() === '') {
|
|
177
|
+
selection.value = null
|
|
178
|
+
search.value = ''
|
|
179
|
+
utilisateurs.value = []
|
|
180
|
+
return
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
// Si la même valeur est déjà sélectionnée → rien à faire
|
|
184
|
+
if (selection.value?.matricule === nv) return
|
|
185
|
+
|
|
186
|
+
// Recherche par matricule par défaut
|
|
187
|
+
await rechercherUtilisateurs(nv)
|
|
188
|
+
if (utilisateurs.value.length > 0) {
|
|
189
|
+
const utilisateur = utilisateurs.value.find(u => u.matricule === nv) ?? null
|
|
190
|
+
if (utilisateur) {
|
|
191
|
+
search.value = formatterUtilisateur(utilisateur)
|
|
192
|
+
selection.value = utilisateur
|
|
193
|
+
} else {
|
|
194
|
+
// Pas trouvé → reset “propre”
|
|
195
|
+
selection.value = null
|
|
196
|
+
search.value = nv // ou ''
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
{ immediate: true },
|
|
201
|
+
)
|
|
202
|
+
</script>
|