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
@@ -12,6 +12,7 @@

        <!-- Sites Starseed : multiselect a tags (>= 1 obligatoire, RG-3.05). -->
        <MalioSelectCheckbox
+            v-if="!hideEmpty || isFilled(model.siteIris)"
            :model-value="model.siteIris"
            :options="siteOptions"
            :label="t('technique.providers.form.address.sites')"
@@ -25,6 +26,7 @@

        <!-- Contacts rattaches (M2M, facultatif) : alimente par l'onglet Contact. -->
        <MalioSelectCheckbox
+            v-if="!hideEmpty || isFilled(model.contactIris)"
            :model-value="model.contactIris"
            :options="contactOptions"
            :label="t('technique.providers.form.address.contacts')"
@@ -35,6 +37,7 @@
        />

        <MalioSelect
+            v-if="!hideEmpty || isFilled(model.country)"
            :model-value="model.country"
            :options="countryOptions"
            :label="t('technique.providers.form.address.country')"
@@ -45,6 +48,7 @@
        />

        <MalioInputText
+            v-if="!hideEmpty || isFilled(model.postalCode)"
            :model-value="model.postalCode"
            :label="t('technique.providers.form.address.postalCode')"
            :mask="POSTAL_CODE_MASK"
@@ -57,7 +61,7 @@

        <!-- Ville : MalioSelect alimente par le code postal (BAN). Saisie libre si BAN indispo. -->
        <MalioSelect
-            v-if="!degraded"
+            v-if="!degraded && (!hideEmpty || isFilled(model.city))"
            :model-value="model.city"
            :options="cityOptions"
            :label="t('technique.providers.form.address.city')"
@@ -69,7 +73,7 @@
            @update:model-value="onCityChange"
        />
        <MalioInputText
-            v-else
+            v-else-if="degraded && (!hideEmpty || isFilled(model.city))"
            :model-value="model.city"
            :label="t('technique.providers.form.address.city')"
            :mask="ADDRESS_MASK"
@@ -82,7 +86,7 @@

        <!-- Adresse (BAN) sur 2 colonnes + Adresse complementaire. allow-create : le
             texte saisi est conserve si la BAN ne propose rien (saisie manuelle). -->
-        <div class="col-span-2">
+        <div v-if="!hideEmpty || isFilled(model.street)" class="col-span-2">
            <MalioInputAutocomplete
                v-if="!readonly && !disabled"
                :model-value="model.street"
@@ -112,7 +116,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('technique.providers.form.address.streetComplement')"
@@ -131,6 +135,7 @@ import { useAddressAutocomplete, type AddressSuggestion } from '~/shared/composa
 import type { RefOption } from '~/modules/technique/composables/useProviderReferentials'
 import type { ProviderAddressFormDraft } from '~/modules/technique/types/providerForm'
 import { ADDRESS_MASK } from '~/shared/utils/textSanitize'
+import { isFilled } from '~/shared/utils/consultationDisplay'

 // Masque code postal FR : 5 chiffres.
 const POSTAL_CODE_MASK = '#####'
@@ -148,6 +153,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('technique.providers.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('technique.providers.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('technique.providers.form.contact.jobTitle')"
@@ -44,6 +46,7 @@
            />
        </div>
        <MalioInputEmail
+            v-if="!hideEmpty || isFilled(model.email)"
            :model-value="model.email"
            :label="t('technique.providers.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('technique.providers.form.contact.phonePrimary')"
            :mask="PHONE_MASK"
@@ -66,7 +70,7 @@
        />
        <!-- 2e numero : revele a la demande (max 2 telephones par contact). -->
        <MalioInputPhone
-            v-if="model.hasSecondaryPhone"
+            v-if="model.hasSecondaryPhone && (!hideEmpty || isFilled(model.phoneSecondary))"
            :model-value="model.phoneSecondary"
            :label="t('technique.providers.form.contact.phoneSecondary')"
            :mask="PHONE_MASK"
@@ -81,6 +85,7 @@
 <script setup lang="ts">
 import type { ProviderContactFormDraft } from '~/modules/technique/types/providerForm'
 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 = '## ## ## ## ##'
@@ -94,6 +99,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>
 }>()
@@ -48,11 +48,13 @@
            <!-- ── Bloc principal (lecture seule) ─────────────────────────────── -->
            <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
                <MalioInputText
+                    v-if="isFilled(provider.companyName)"
                    :model-value="provider.companyName"
                    :label="t('technique.providers.form.main.companyName')"
                    disabled
                />
                <MalioSelectCheckbox
+                    v-if="isFilled(mainCategoryIris)"
                    :model-value="mainCategoryIris"
                    :options="mainCategoryOptions"
                    :label="t('technique.providers.form.main.categories')"
@@ -60,6 +62,7 @@
                    disabled
                />
                <MalioSelectCheckbox
+                    v-if="isFilled(mainSiteIris)"
                    :model-value="mainSiteIris"
                    :options="mainSiteOptions"
                    :label="t('technique.providers.form.main.sites')"
@@ -79,6 +82,7 @@
                            :key="index"
                            :model-value="contact"
                            disabled
+                            hide-empty
                        />
                    </div>
                </template>
@@ -94,6 +98,7 @@
                            :contact-options="contactOptions"
                            :country-options="countryOptionsFor(view.draft.country)"
                            disabled
+                            hide-empty
                        />
                    </div>
                </template>
@@ -105,13 +110,13 @@
                    <div class="mt-12 flex flex-col gap-6">
                        <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
-                                <MalioInputText :model-value="accounting.siren" :label="t('technique.providers.form.accounting.siren')" disabled />
-                                <MalioInputText :model-value="accounting.accountNumber" :label="t('technique.providers.form.accounting.accountNumber')" disabled />
-                                <MalioSelect :model-value="accounting.tvaModeIri" :options="tvaModeOptions" :label="t('technique.providers.form.accounting.tvaMode')" disabled empty-option-label="" />
-                                <MalioInputText :model-value="accounting.nTva" :label="t('technique.providers.form.accounting.nTva')" disabled />
-                                <MalioSelect :model-value="accounting.paymentDelayIri" :options="paymentDelayOptions" :label="t('technique.providers.form.accounting.paymentDelay')" disabled empty-option-label="" />
-                                <MalioSelect :model-value="accounting.paymentTypeIri" :options="paymentTypeOptions" :label="t('technique.providers.form.accounting.paymentType')" disabled empty-option-label="" />
-                                <MalioSelect v-if="isBankRequired" :model-value="accounting.bankIri" :options="bankOptions" :label="t('technique.providers.form.accounting.bank')" disabled empty-option-label="" />
+                                <MalioInputText v-if="isFilled(accounting.siren)" :model-value="accounting.siren" :label="t('technique.providers.form.accounting.siren')" disabled />
+                                <MalioInputText v-if="isFilled(accounting.accountNumber)" :model-value="accounting.accountNumber" :label="t('technique.providers.form.accounting.accountNumber')" disabled />
+                                <MalioSelect v-if="isFilled(accounting.tvaModeIri)" :model-value="accounting.tvaModeIri" :options="tvaModeOptions" :label="t('technique.providers.form.accounting.tvaMode')" disabled empty-option-label="" />
+                                <MalioInputText v-if="isFilled(accounting.nTva)" :model-value="accounting.nTva" :label="t('technique.providers.form.accounting.nTva')" disabled />
+                                <MalioSelect v-if="isFilled(accounting.paymentDelayIri)" :model-value="accounting.paymentDelayIri" :options="paymentDelayOptions" :label="t('technique.providers.form.accounting.paymentDelay')" disabled empty-option-label="" />
+                                <MalioSelect v-if="isFilled(accounting.paymentTypeIri)" :model-value="accounting.paymentTypeIri" :options="paymentTypeOptions" :label="t('technique.providers.form.accounting.paymentType')" disabled empty-option-label="" />
+                                <MalioSelect v-if="isBankRequired && isFilled(accounting.bankIri)" :model-value="accounting.bankIri" :options="bankOptions" :label="t('technique.providers.form.accounting.bank')" disabled empty-option-label="" />
                            </div>
                        </div>

@@ -122,9 +127,9 @@
                            class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
                        >
                            <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
-                                <MalioInputText :model-value="rib.label" :label="t('technique.providers.form.accounting.ribLabel')" disabled />
-                                <MalioInputText :model-value="rib.bic" :label="t('technique.providers.form.accounting.ribBic')" disabled />
-                                <MalioInputText :model-value="rib.iban" :label="t('technique.providers.form.accounting.ribIban')" disabled />
+                                <MalioInputText v-if="isFilled(rib.label)" :model-value="rib.label" :label="t('technique.providers.form.accounting.ribLabel')" disabled />
+                                <MalioInputText v-if="isFilled(rib.bic)" :model-value="rib.bic" :label="t('technique.providers.form.accounting.ribBic')" disabled />
+                                <MalioInputText v-if="isFilled(rib.iban)" :model-value="rib.iban" :label="t('technique.providers.form.accounting.ribIban')" disabled />
                            </div>
                        </div>
                    </div>
@@ -177,6 +182,7 @@ import {
 } from '~/modules/technique/utils/forms/providerDetail'
 import { isBankRequiredForPaymentType, isRibRequiredForPaymentType } from '~/modules/technique/utils/forms/providerAccounting'
 import { emptyProviderAddress, emptyProviderContact } from '~/modules/technique/types/providerForm'
+import { isFilled } from '~/shared/utils/consultationDisplay'

 const { t } = useI18n()
 const route = useRoute()