fix(front) : masque les champs non remplis en consultation sur les 4 modules (ERP-193)

En consultation (lecture seule), les champs vides et les cases a cocher non cochees ne sont plus affiches (client, fournisseur, prestataire, transporteur). Util partage isFilled (vide = null/chaine vide/multiselect vide/false ; 0 reste affiche). Nouveau prop hideEmpty sur les blocs contact/adresse, passe uniquement en consultation (edition inchangee).
2026-06-22 11:19:38 +02:00
parent bd71caa289
commit 6b714b81c4
14 changed files with 221 additions and 46 deletions
@@ -40,7 +40,9 @@
            @update:model-value="(v: (string | number)[]) => update('siteIris', v.map(String))"
        />

+        <!-- Contacts rattaches (M2M, facultatif). Consultation : masque si aucun (ERP-193). -->
        <MalioSelectCheckbox
+            v-if="!hideEmpty || isFilled(model.contactIris)"
            :model-value="model.contactIris"
            :options="contactOptions"
            :label="t('commercial.clients.form.address.contacts')"
@@ -68,7 +70,10 @@
            @update:model-value="(v: string) => update('billingEmail', v)"
            @add="revealSecondaryBillingEmail"
        />
-        <div v-else aria-hidden="true" />
+        <!-- Filler : aligne la suite de la grille (Categorie au debut de ligne).
+             Inutile en consultation masquee (la grille se recompose sans les
+             champs vides, ERP-193). -->
+        <div v-else-if="!hideEmpty" aria-hidden="true" />

        <MalioInputEmail
            v-if="isBillingEmailRequired(model) && model.hasSecondaryBillingEmail"
@@ -181,7 +186,7 @@
            />
        </div>

-        <div class="col-span-1">
+        <div v-if="!hideEmpty || isFilled(model.streetComplement)" class="col-span-1">
            <MalioInputText
                :model-value="model.streetComplement"
                :label="t('commercial.clients.form.address.streetComplement')"
@@ -207,6 +212,7 @@ import { useAddressAutocomplete, type AddressSuggestion } from '~/shared/composa
 import type { CategoryOption, RefOption } from '~/modules/commercial/composables/useClientReferentials'
 import type { AddressFormDraft } from '~/modules/commercial/types/clientForm'
 import { ADDRESS_MASK } from '~/shared/utils/textSanitize'
+import { isFilled } from '~/shared/utils/consultationDisplay'

 // Masque code postal FR : 5 chiffres.
 const POSTAL_CODE_MASK = '#####'
@@ -227,6 +233,8 @@ const props = defineProps<{
    readonly?: boolean
    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
    disabled?: boolean
+    /** Consultation : masque les champs non remplis (ERP-193). */
+    hideEmpty?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
 }>()
@@ -13,6 +13,7 @@
        />

        <MalioInputText
+            v-if="!hideEmpty || isFilled(model.lastName)"
            :model-value="model.lastName"
            :label="t('commercial.clients.form.contact.lastName')"
            :mask="PERSON_NAME_MASK"
@@ -22,6 +23,7 @@
            @update:model-value="(v: string) => update('lastName', v)"
        />
        <MalioInputText
+            v-if="!hideEmpty || isFilled(model.firstName)"
            :model-value="model.firstName"
            :label="t('commercial.clients.form.contact.firstName')"
            :mask="PERSON_NAME_MASK"
@@ -33,7 +35,7 @@
        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
             (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
             cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
-        <div class="col-span-2">
+        <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
            <MalioInputText
                :model-value="model.jobTitle"
                :label="t('commercial.clients.form.contact.jobTitle')"
@@ -45,6 +47,7 @@
            />
        </div>
        <MalioInputEmail
+            v-if="!hideEmpty || isFilled(model.email)"
            :model-value="model.email"
            :label="t('commercial.clients.form.contact.email')"
            :readonly="readonly"
@@ -54,6 +57,7 @@
            @update:model-value="(v: string) => update('email', v)"
        />
        <MalioInputPhone
+            v-if="!hideEmpty || isFilled(model.phonePrimary)"
            :model-value="model.phonePrimary"
            :label="t('commercial.clients.form.contact.phonePrimary')"
            :mask="PHONE_MASK"
@@ -66,7 +70,7 @@
            @add="revealSecondaryPhone"
        />
        <MalioInputPhone
-            v-if="model.hasSecondaryPhone"
+            v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
            :model-value="model.phoneSecondary"
            :label="t('commercial.clients.form.contact.phoneSecondary')"
            :mask="PHONE_MASK"
@@ -81,6 +85,7 @@
 <script setup lang="ts">
 import type { ContactFormDraft } from '~/modules/commercial/types/clientForm'
 import { FREE_TEXT_MASK, PERSON_NAME_MASK } from '~/shared/utils/textSanitize'
+import { isFilled } from '~/shared/utils/consultationDisplay'

 // Masque telephone FR : 5 groupes de 2 chiffres (la normalisation finale reste
 // serveur, cf. formatPhoneFR re-applique a la valeur renvoyee).
@@ -97,6 +102,8 @@ const props = defineProps<{
    readonly?: boolean
    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
    disabled?: boolean
+    /** Consultation : masque les champs non remplis (ERP-193). */
+    hideEmpty?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
 }>()
@@ -40,6 +40,7 @@

        <!-- Contacts rattaches (M2M, facultatif). -->
        <MalioSelectCheckbox
+            v-if="!hideEmpty || isFilled(model.contactIris)"
            :model-value="model.contactIris"
            :options="contactOptions"
            :label="t('commercial.suppliers.form.address.contacts')"
@@ -50,8 +51,9 @@
        />

        <!-- Filler : aligne le debut de ligne suivant sur la grille (le bloc client
-             porte ici l'email de facturation, absent cote fournisseur). -->
-        <div aria-hidden="true" />
+             porte ici l'email de facturation, absent cote fournisseur). Inutile en
+             consultation masquee (la grille se recompose sans les champs vides). -->
+        <div v-if="!hideEmpty" aria-hidden="true" />

        <!-- Categories de type FOURNISSEUR (>= 1 obligatoire, RG-2.10). -->
        <MalioSelectCheckbox
@@ -145,7 +147,7 @@
            />
        </div>

-        <div class="col-span-1">
+        <div v-if="!hideEmpty || isFilled(model.streetComplement)" class="col-span-1">
            <MalioInputText
                :model-value="model.streetComplement"
                :label="t('commercial.suppliers.form.address.streetComplement')"
@@ -157,8 +159,10 @@
            />
        </div>

-        <!-- Bennes : stepper (specifique fournisseur, defaut 0). -->
+        <!-- Bennes : stepper (specifique fournisseur, defaut 0). En consultation, 0
+             reste affiche (valeur saisie) ; seul un champ vide serait masque. -->
        <MalioInputNumber
+            v-if="!hideEmpty || isFilled(model.bennes)"
            :model-value="model.bennes"
            :label="t('commercial.suppliers.form.address.bennes')"
            :min="0"
@@ -168,8 +172,10 @@
            @update:model-value="(v: string) => update('bennes', v)"
        />

-        <!-- Prestation de triage : booleen porte par l'adresse (specifique fournisseur). -->
+        <!-- Prestation de triage : booleen porte par l'adresse (specifique fournisseur).
+             Consultation : masquee si non cochee (ERP-193). -->
        <MalioCheckbox
+            v-if="!hideEmpty || isFilled(model.triageProvider)"
            id="address-triage-provider"
            :label="t('commercial.suppliers.form.address.triageProvider')"
            :model-value="model.triageProvider"
@@ -186,6 +192,7 @@ import { useAddressAutocomplete, type AddressSuggestion } from '~/shared/composa
 import type { CategoryOption, RefOption } from '~/modules/commercial/composables/useSupplierReferentials'
 import type { SupplierAddressFormDraft, SupplierAddressType } from '~/modules/commercial/types/supplierForm'
 import { ADDRESS_MASK } from '~/shared/utils/textSanitize'
+import { isFilled } from '~/shared/utils/consultationDisplay'

 // Masque code postal FR : 5 chiffres.
 const POSTAL_CODE_MASK = '#####'
@@ -206,6 +213,8 @@ const props = defineProps<{
    readonly?: boolean
    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
    disabled?: boolean
+    /** Consultation : masque les champs non remplis (ERP-193). */
+    hideEmpty?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
 }>()
@@ -12,6 +12,7 @@
        />

        <MalioInputText
+            v-if="!hideEmpty || isFilled(model.lastName)"
            :model-value="model.lastName"
            :label="t('commercial.suppliers.form.contact.lastName')"
            :mask="PERSON_NAME_MASK"
@@ -21,6 +22,7 @@
            @update:model-value="(v: string) => update('lastName', v)"
        />
        <MalioInputText
+            v-if="!hideEmpty || isFilled(model.firstName)"
            :model-value="model.firstName"
            :label="t('commercial.suppliers.form.contact.firstName')"
            :mask="PERSON_NAME_MASK"
@@ -32,7 +34,7 @@
        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText
             (inheritAttrs:false) renvoie `class` sur l'input interne, pas sur la
             cellule de grille. Le wrapper porte le col-span-2, le champ le remplit. -->
-        <div class="col-span-2">
+        <div v-if="!hideEmpty || isFilled(model.jobTitle)" class="col-span-2">
            <MalioInputText
                :model-value="model.jobTitle"
                :label="t('commercial.suppliers.form.contact.jobTitle')"
@@ -44,6 +46,7 @@
            />
        </div>
        <MalioInputEmail
+            v-if="!hideEmpty || isFilled(model.email)"
            :model-value="model.email"
            :label="t('commercial.suppliers.form.contact.email')"
            :readonly="readonly"
@@ -53,6 +56,7 @@
            @update:model-value="(v: string) => update('email', v)"
        />
        <MalioInputPhone
+            v-if="!hideEmpty || isFilled(model.phonePrimary)"
            :model-value="model.phonePrimary"
            :label="t('commercial.suppliers.form.contact.phonePrimary')"
            :mask="PHONE_MASK"
@@ -65,7 +69,7 @@
            @add="revealSecondaryPhone"
        />
        <MalioInputPhone
-            v-if="model.hasSecondaryPhone"
+            v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
            :model-value="model.phoneSecondary"
            :label="t('commercial.suppliers.form.contact.phoneSecondary')"
            :mask="PHONE_MASK"
@@ -80,6 +84,7 @@
 <script setup lang="ts">
 import type { SupplierContactFormDraft } from '~/modules/commercial/types/supplierForm'
 import { FREE_TEXT_MASK, PERSON_NAME_MASK } from '~/shared/utils/textSanitize'
+import { isFilled } from '~/shared/utils/consultationDisplay'

 // Masque telephone FR : 5 groupes de 2 chiffres (la normalisation finale reste serveur).
 const PHONE_MASK = '## ## ## ## ##'
@@ -95,6 +100,8 @@ const props = defineProps<{
    readonly?: boolean
    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
    disabled?: boolean
+    /** Consultation : masque les champs non remplis (ERP-193). */
+    hideEmpty?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
 }>()