feat : grise les champs en consultation et onglets validés (readonly → disabled) (ERP-193)

2026-06-19 09:48:49 +02:00
parent 07f5a95a6b
commit cdcc7d1e75
21 changed files with 321 additions and 228 deletions
@@ -2,7 +2,7 @@
    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
        <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
        <MalioButtonIcon
-            v-if="removable && !readonly"
+            v-if="removable && !readonly && !disabled"
            icon="mdi:delete-outline"
            variant="ghost"
            button-class="absolute top-3 right-3"
@@ -21,6 +21,7 @@
            :options="addressTypeOptions"
            :label="t('commercial.clients.form.address.addressType')"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.isProspect"
            @update:model-value="onAddressTypeChange"
@@ -33,6 +34,7 @@
            :label="t('commercial.clients.form.address.sites')"
            :display-tag="true"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.sites"
            @update:model-value="(v: (string | number)[]) => update('siteIris', v.map(String))"
@@ -44,6 +46,7 @@
            :label="t('commercial.clients.form.address.contacts')"
            :display-tag="true"
            :readonly="readonly"
+            :disabled="disabled"
            @update:model-value="(v: (string | number)[]) => update('contactIris', v.map(String))"
        />

@@ -57,6 +60,7 @@
            :label="t('commercial.clients.form.address.billingEmail')"
            :required="true"
            :readonly="readonly"
+            :disabled="disabled"
            :lowercase="true"
            :error="errors?.billingEmail"
            :addable="!model.hasSecondaryBillingEmail && !readonly"
@@ -71,6 +75,7 @@
            :model-value="model.billingEmailSecondary"
            :label="t('commercial.clients.form.address.billingEmailSecondary')"
            :readonly="readonly"
+            :disabled="disabled"
            :lowercase="true"
            :error="errors?.billingEmailSecondary"
            @update:model-value="(v: string) => update('billingEmailSecondary', v)"
@@ -82,6 +87,7 @@
            :label="t('commercial.clients.form.address.categories')"
            :display-tag="true"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.categories"
            @update:model-value="(v: (string | number)[]) => update('categoryIris', v.map(String))"
@@ -92,6 +98,7 @@
            :options="countryOptions"
            :label="t('commercial.clients.form.address.country')"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            @update:model-value="(v: string | number | null) => update('country', String(v ?? 'France'))"
        />
@@ -101,6 +108,7 @@
            :label="t('commercial.clients.form.address.postalCode')"
            :mask="POSTAL_CODE_MASK"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.postalCode"
            @update:model-value="onPostalCodeChange"
@@ -115,6 +123,7 @@
            :options="cityOptions"
            :label="t('commercial.clients.form.address.city')"
            :readonly="readonly"
+            :disabled="disabled"
            empty-option-label=""
            :required="true"
            :error="errors?.city"
@@ -125,6 +134,7 @@
            :model-value="model.city"
            :label="t('commercial.clients.form.address.city')"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.city"
            @update:model-value="(v: string) => update('city', v)"
@@ -142,13 +152,14 @@
                 blur/Entree (saisie manuelle) — sinon il serait efface. La ville reste
                 pilotee par le code postal ; choisir une suggestion remplit rue+ville+CP. -->
            <MalioInputAutocomplete
-                v-if="!readonly"
+                v-if="!readonly && !disabled"
                :model-value="model.street"
                :options="addressOptions"
                :loading="addressLoading"
                :min-search-length="3"
                :label="t('commercial.clients.form.address.street')"
                :readonly="readonly"
+                :disabled="disabled"
                :required="true"
                :error="errors?.street"
                :allow-create="true"
@@ -162,6 +173,7 @@
                :model-value="model.street"
                :label="t('commercial.clients.form.address.street')"
                :readonly="readonly"
+                :disabled="disabled"
                :required="true"
                :error="errors?.street"
                @update:model-value="(v: string) => update('street', v)"
@@ -173,6 +185,7 @@
                :model-value="model.streetComplement"
                :label="t('commercial.clients.form.address.streetComplement')"
                :readonly="readonly"
+                :disabled="disabled"
                :error="errors?.streetComplement"
                @update:model-value="(v: string) => update('streetComplement', v)"
            />
@@ -210,6 +223,8 @@ const props = defineProps<{
    countryOptions: RefOption[]
    removable?: boolean
    readonly?: boolean
+    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
+    disabled?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
 }>()
@@ -4,7 +4,7 @@
             non supprimable (1er bloc obligatoire RG-1.14) ou en lecture seule.
             ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
        <MalioButtonIcon
-            v-if="removable && !readonly"
+            v-if="removable && !readonly && !disabled"
            icon="mdi:delete-outline"
            variant="ghost"
            button-class="absolute top-3 right-3"
@@ -16,6 +16,7 @@
            :model-value="model.lastName"
            :label="t('commercial.clients.form.contact.lastName')"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.lastName"
            @update:model-value="(v: string) => update('lastName', v)"
        />
@@ -23,6 +24,7 @@
            :model-value="model.firstName"
            :label="t('commercial.clients.form.contact.firstName')"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.firstName"
            @update:model-value="(v: string) => update('firstName', v)"
        />
@@ -34,6 +36,7 @@
                :model-value="model.jobTitle"
                :label="t('commercial.clients.form.contact.jobTitle')"
                :readonly="readonly"
+                :disabled="disabled"
                :error="errors?.jobTitle"
                @update:model-value="(v: string) => update('jobTitle', v)"
            />
@@ -42,6 +45,7 @@
            :model-value="model.email"
            :label="t('commercial.clients.form.contact.email')"
            :readonly="readonly"
+            :disabled="disabled"
            :lowercase="true"
            :error="errors?.email"
            @update:model-value="(v: string) => update('email', v)"
@@ -51,6 +55,7 @@
            :label="t('commercial.clients.form.contact.phonePrimary')"
            :mask="PHONE_MASK"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.phonePrimary"
            :addable="!model.hasSecondaryPhone && !readonly"
            :add-button-label="t('commercial.clients.form.contact.addPhone')"
@@ -63,6 +68,7 @@
            :label="t('commercial.clients.form.contact.phoneSecondary')"
            :mask="PHONE_MASK"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.phoneSecondary"
            @update:model-value="(v: string) => update('phoneSecondary', v)"
        />
@@ -86,6 +92,8 @@ const props = defineProps<{
    removable?: boolean
    /** Bloc en lecture seule (onglet valide). */
    readonly?: boolean
+    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
+    disabled?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
 }>()
@@ -2,7 +2,7 @@
    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
        <!-- Suppression : modal de confirmation cote parent. -->
        <MalioButtonIcon
-            v-if="removable && !readonly"
+            v-if="removable && !readonly && !disabled"
            icon="mdi:delete-outline"
            variant="ghost"
            button-class="absolute top-3 right-3"
@@ -18,6 +18,7 @@
            :options="addressTypeOptions"
            :label="t('commercial.suppliers.form.address.addressType')"
            :readonly="readonly"
+            :disabled="disabled"
            empty-option-label=""
            :required="true"
            :error="errors?.addressType"
@@ -31,6 +32,7 @@
            :label="t('commercial.suppliers.form.address.sites')"
            :display-tag="true"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.sites"
            @update:model-value="(v: (string | number)[]) => update('siteIris', v.map(String))"
@@ -43,6 +45,7 @@
            :label="t('commercial.suppliers.form.address.contacts')"
            :display-tag="true"
            :readonly="readonly"
+            :disabled="disabled"
            @update:model-value="(v: (string | number)[]) => update('contactIris', v.map(String))"
        />

@@ -57,6 +60,7 @@
            :label="t('commercial.suppliers.form.address.categories')"
            :display-tag="true"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.categories"
            @update:model-value="(v: (string | number)[]) => update('categoryIris', v.map(String))"
@@ -67,6 +71,7 @@
            :options="countryOptions"
            :label="t('commercial.suppliers.form.address.country')"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            @update:model-value="(v: string | number | null) => update('country', String(v ?? 'France'))"
        />
@@ -76,6 +81,7 @@
            :label="t('commercial.suppliers.form.address.postalCode')"
            :mask="POSTAL_CODE_MASK"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.postalCode"
            @update:model-value="onPostalCodeChange"
@@ -88,6 +94,7 @@
            :options="cityOptions"
            :label="t('commercial.suppliers.form.address.city')"
            :readonly="readonly"
+            :disabled="disabled"
            empty-option-label=""
            :required="true"
            :error="errors?.city"
@@ -98,6 +105,7 @@
            :model-value="model.city"
            :label="t('commercial.suppliers.form.address.city')"
            :readonly="readonly"
+            :disabled="disabled"
            :required="true"
            :error="errors?.city"
            @update:model-value="(v: string) => update('city', v)"
@@ -107,13 +115,14 @@
             texte saisi est conserve si la BAN ne propose rien (saisie manuelle). -->
        <div class="col-span-2">
            <MalioInputAutocomplete
-                v-if="!readonly"
+                v-if="!readonly && !disabled"
                :model-value="model.street"
                :options="addressOptions"
                :loading="addressLoading"
                :min-search-length="3"
                :label="t('commercial.suppliers.form.address.street')"
                :readonly="readonly"
+                :disabled="disabled"
                :required="true"
                :error="errors?.street"
                :allow-create="true"
@@ -127,6 +136,7 @@
                :model-value="model.street"
                :label="t('commercial.suppliers.form.address.street')"
                :readonly="readonly"
+                :disabled="disabled"
                :required="true"
                :error="errors?.street"
                @update:model-value="(v: string) => update('street', v)"
@@ -138,6 +148,7 @@
                :model-value="model.streetComplement"
                :label="t('commercial.suppliers.form.address.streetComplement')"
                :readonly="readonly"
+                :disabled="disabled"
                :error="errors?.streetComplement"
                @update:model-value="(v: string) => update('streetComplement', v)"
            />
@@ -149,6 +160,7 @@
            :label="t('commercial.suppliers.form.address.bennes')"
            :min="0"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.bennes"
            @update:model-value="(v: string) => update('bennes', v)"
        />
@@ -160,6 +172,7 @@
            :model-value="model.triageProvider"
            group-class="self-center"
            :readonly="readonly"
+            :disabled="disabled"
            @update:model-value="(v: boolean) => update('triageProvider', v)"
        />
    </div>
@@ -188,6 +201,8 @@ const props = defineProps<{
    countryOptions: RefOption[]
    removable?: boolean
    readonly?: boolean
+    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
+    disabled?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
 }>()
@@ -3,7 +3,7 @@
        <!-- Suppression : ouvre une modal de confirmation cote parent. Masquee si
             non supprimable (1er bloc, RG-2.13) ou en lecture seule. -->
        <MalioButtonIcon
-            v-if="removable && !readonly"
+            v-if="removable && !readonly && !disabled"
            icon="mdi:delete-outline"
            variant="ghost"
            button-class="absolute top-3 right-3"
@@ -15,6 +15,7 @@
            :model-value="model.lastName"
            :label="t('commercial.suppliers.form.contact.lastName')"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.lastName"
            @update:model-value="(v: string) => update('lastName', v)"
        />
@@ -22,6 +23,7 @@
            :model-value="model.firstName"
            :label="t('commercial.suppliers.form.contact.firstName')"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.firstName"
            @update:model-value="(v: string) => update('firstName', v)"
        />
@@ -33,6 +35,7 @@
                :model-value="model.jobTitle"
                :label="t('commercial.suppliers.form.contact.jobTitle')"
                :readonly="readonly"
+                :disabled="disabled"
                :error="errors?.jobTitle"
                @update:model-value="(v: string) => update('jobTitle', v)"
            />
@@ -41,6 +44,7 @@
            :model-value="model.email"
            :label="t('commercial.suppliers.form.contact.email')"
            :readonly="readonly"
+            :disabled="disabled"
            :lowercase="true"
            :error="errors?.email"
            @update:model-value="(v: string) => update('email', v)"
@@ -50,6 +54,7 @@
            :label="t('commercial.suppliers.form.contact.phonePrimary')"
            :mask="PHONE_MASK"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.phonePrimary"
            :addable="!model.hasSecondaryPhone && !readonly"
            :add-button-label="t('commercial.suppliers.form.contact.addPhone')"
@@ -62,6 +67,7 @@
            :label="t('commercial.suppliers.form.contact.phoneSecondary')"
            :mask="PHONE_MASK"
            :readonly="readonly"
+            :disabled="disabled"
            :error="errors?.phoneSecondary"
            @update:model-value="(v: string) => update('phoneSecondary', v)"
        />
@@ -84,6 +90,8 @@ const props = defineProps<{
    removable?: boolean
    /** Bloc en lecture seule (onglet valide). */
    readonly?: boolean
+    /** Bloc desactive (champs grises, consultation — distinct de readonly). */
+    disabled?: boolean
    /** Erreurs serveur 422 de cette ligne, indexees par champ (ERP-101). */
    errors?: Record<string, string>
 }>()