feat(front) : tags multiselect — couleur des sites + limite d'affichage

- Sites : les tags du multiselect prennent la couleur de fond du site
  (champ color, groupe site:read) avec texte blanc, en saisie comme en
  consultation (clients, fournisseurs, prestataires, produits).
- Autres multiselects : 3 tags affichés au maximum (surplus condensé en « +N »).
- Bump @malio/layer-ui 1.7.15 → 1.7.17 (support color/textColor et maxTags
  sur les options).

frontend/modules/commercial/composables/__tests__/useClientReferentials.spec.ts

@@ -45,7 +45,7 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
 
         // Resilience : les referentiels OK sont peuples malgre l'echec de /categories.
         // Le libelle d'un site est son numero de departement (2 premiers chiffres du code postal).
-        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86' }])
+        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86', textColor: '#FFFFFF' }])
         expect(refs.tvaModes.value).toEqual([{ value: '/api/x/1', label: 'Libelle X' }])
         expect(refs.banks.value).toEqual([{ value: '/api/x/1', label: 'Libelle X' }])
         // Pays : value = nom du pays (et non l'IRI).
@@ -63,7 +63,7 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
                 })
             }
             if (url === '/sites') {
-                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault', postalCode: '86100' }] })
+                return Promise.resolve({ member: [{ '@id': '/api/sites/1', name: 'Chatellerault', postalCode: '86100', color: '#FF0000' }] })
             }
             return Promise.resolve({ member: [] })
         })
@@ -74,8 +74,9 @@ describe('useClientReferentials.loadCommon (resilience ERP-102)', () => {
         expect(refs.categories.value).toEqual([
             { value: '/api/categories/1', label: 'Secteur', code: 'SECTEUR' },
         ])
-        // Le libelle d'un site est son numero de departement (2 premiers chiffres du code postal).
-        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86' }])
+        // Le libelle d'un site est son numero de departement (2 premiers chiffres du
+        // code postal) ; la couleur du site est reportee (fond) avec un texte blanc.
+        expect(refs.sites.value).toEqual([{ value: '/api/sites/1', label: '86', color: '#FF0000', textColor: '#FFFFFF' }])
     })
 
     it('separe les categories CLIENT (formulaire) des categories ADRESSE (blocs adresse)', async () => {

frontend/modules/commercial/composables/useClientReferentials.ts

@@ -19,6 +19,13 @@ import { ref } from 'vue'
 export interface RefOption {
     value: string
     label: string
+    // Couleur de fond optionnelle de l'option (hex #RRGGBB). Aujourd'hui
+    // alimentee par le referentiel sites (couleur d'identification du site,
+    // affichee sur les tags selectionnes du multiselect).
+    color?: string
+    // Couleur de texte optionnelle (hex). Sites : blanc, pour rester lisible
+    // sur le fond colore du tag.
+    textColor?: string
 }
 
 /** Option de type de reglement enrichie de son code stable (RG-1.12 / RG-1.13). */
@@ -46,6 +53,7 @@ interface CategoryMember extends HydraMember {
 interface SiteMember extends HydraMember {
     name: string
     postalCode: string
+    color?: string
 }
 
 interface ReferentialMember extends HydraMember {
@@ -119,7 +127,7 @@ export function useClientReferentials() {
                 // Libelle = numero de departement (2 premiers chiffres du code
                 // postal du site), ex: 86100 -> « 86 ». Le code postal est deja
                 // expose par /sites (groupe site:read) — aucune colonne a ajouter.
-                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2) })) }),
+                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2), color: s.color, textColor: '#FFFFFF' })) }),
             fetchAll<ReferentialMember>('/tva_modes')
                 .then((tva) => { tvaModes.value = tva.map(t => ({ value: t['@id'], label: t.label })) }),
             fetchAll<ReferentialMember>('/payment_delays')

frontend/modules/commercial/composables/useSupplierReferentials.ts

@@ -20,6 +20,13 @@ import { ref } from 'vue'
 export interface RefOption {
     value: string
     label: string
+    // Couleur de fond optionnelle de l'option (hex #RRGGBB). Alimentee par le
+    // referentiel sites (couleur d'identification du site, affichee sur les tags
+    // selectionnes du multiselect).
+    color?: string
+    // Couleur de texte optionnelle (hex). Sites : blanc, pour rester lisible
+    // sur le fond colore du tag.
+    textColor?: string
 }
 
 /** Option de type de reglement enrichie de son code stable (RG-2.07 / RG-2.08). */
@@ -44,6 +51,7 @@ interface CategoryMember extends HydraMember {
 interface SiteMember extends HydraMember {
     name: string
     postalCode: string
+    color?: string
 }
 
 interface ReferentialMember extends HydraMember {
@@ -106,7 +114,7 @@ export function useSupplierReferentials() {
             fetchAll<SiteMember>('/sites')
                 // Libelle = numero de departement (2 premiers chiffres du code
                 // postal du site), ex: 86100 -> « 86 ».
-                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2) })) }),
+                .then((sitesList) => { sites.value = sitesList.map(s => ({ value: s['@id'], label: (s.postalCode ?? '').slice(0, 2), color: s.color, textColor: '#FFFFFF' })) }),
             fetchAll<ReferentialMember>('/tva_modes')
                 .then((tva) => { tvaModes.value = tva.map(t => ({ value: t['@id'], label: t.label })) }),
             fetchAll<ReferentialMember>('/payment_delays')