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/technique/components/ProviderAddressBlock.vue

@@ -37,6 +37,7 @@
                 v-if="!hideEmpty || isFilled(model.contactIris)"
                 :model-value="model.contactIris"
                 :options="contactOptions"
+                :max-tags="3"
                 :label="t('technique.providers.form.address.contacts')"
                 :display-tag="true"
                 :readonly="readonly"

frontend/modules/technique/composables/useProviderReferentials.ts

@@ -26,6 +26,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-3.07 / RG-3.08). */
@@ -50,6 +57,7 @@ interface CategoryMember extends HydraMember {
 interface SiteMember extends HydraMember {
     name: string
     postalCode: string
+    color?: string
 }
 
 interface CountryMember extends HydraMember {
@@ -94,7 +102,7 @@ export function useProviderReferentials() {
             // Sites (RG-3.03) : libelle = numero de departement (2 premiers chiffres
             // du code postal du site), ex: 86100 -> « 86 », 17400 -> « 17 ».
             fetchAll<SiteMember>('/sites')
-                .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' })) }),
             // Pays (ERP-116) : la valeur d'option est le NOM du pays (l'adresse stocke
             // `country` en chaine libre, « France »...). value === label. Aligne sur
             // les ecrans client/fournisseur. Sert le select Pays de l'onglet Adresse.

frontend/modules/technique/pages/providers/[id]/edit.vue

@@ -31,6 +31,7 @@
                 <MalioSelectCheckbox
                     :model-value="main.categoryIris"
                     :options="referentials.categories.value"
+                    :max-tags="3"
                     :label="t('technique.providers.form.main.categories')"
                     :display-tag="true"
                     :disabled="businessReadonly"

frontend/modules/technique/pages/providers/[id]/index.vue

@@ -57,6 +57,7 @@
                     v-if="isFilled(mainCategoryIris)"
                     :model-value="mainCategoryIris"
                     :options="mainCategoryOptions"
+                    :max-tags="3"
                     :label="t('technique.providers.form.main.categories')"
                     :display-tag="true"
                     disabled

frontend/modules/technique/pages/providers/new.vue

@@ -30,6 +30,7 @@
             <MalioSelectCheckbox
                 :model-value="main.categoryIris"
                 :options="referentials.categories.value"
+                :max-tags="3"
                 :label="t('technique.providers.form.main.categories')"
                 :display-tag="true"
                 :disabled="mainLocked"

frontend/modules/technique/utils/forms/__tests__/providerDetail.spec.ts

@@ -122,8 +122,8 @@ describe('providerDetail helpers', () => {
         it('categoryOptionsOf / siteOptionsOf / contactOptionsOf', () => {
             expect(categoryOptionsOf([{ '@id': '/api/categories/7', name: 'Maintenance', code: 'MAINT' }]))
                 .toEqual([{ value: '/api/categories/7', label: 'Maintenance' }])
-            expect(siteOptionsOf([{ '@id': '/api/sites/1', name: 'Châtellerault' }]))
-                .toEqual([{ value: '/api/sites/1', label: 'Châtellerault' }])
+            expect(siteOptionsOf([{ '@id': '/api/sites/1', name: 'Châtellerault', color: '#000' }]))
+                .toEqual([{ value: '/api/sites/1', label: 'Châtellerault', color: '#000', textColor: '#FFFFFF' }])
             expect(contactOptionsOf([{ '@id': '/api/provider_contacts/5', id: 5, firstName: 'Jean', lastName: 'Dupont' }]))
                 .toEqual([{ value: '/api/provider_contacts/5', label: 'Jean Dupont' }])
         })

frontend/modules/technique/utils/forms/providerDetail.ts

@@ -187,7 +187,7 @@ export function categoryOptionsOf(categories: CategoryRead[] | undefined): RefOp
 
 /** Options de sites (value=IRI, label=nom) construites depuis un embed. */
 export function siteOptionsOf(sites: SiteRead[] | undefined): RefOption[] {
-    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'] }))
+    return (sites ?? []).map(s => ({ value: s['@id'], label: s.name ?? s['@id'], color: s.color, textColor: '#FFFFFF' }))
 }
 
 /** Options de contacts (value=IRI, label=nom complet ou email) depuis l'embed prestataire. */