Starseed/frontend/modules/commercial/components/SupplierAddressBlock.vue

<template>
    <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 && !disabled"
            icon="mdi:delete-outline"
            variant="ghost"
            button-class="absolute top-3 right-3"
            v-bind="{ ariaLabel: t('commercial.suppliers.form.address.remove') }"
            @click="$emit('remove')"
        />

        <!-- Type d'adresse : Prospect / Depart / Rendu (RG-2.09). Select en attendant
             l'arbitrage metier (radio vs select) ; l'erreur 422 (propertyPath
             `addressType`) s'affiche via la prop native :error de MalioSelect. -->
        <MalioSelect
            :model-value="model.addressType"
            :options="addressTypeOptions"
            :label="t('commercial.suppliers.form.address.addressType')"
            :readonly="readonly"
            :disabled="disabled"
            empty-option-label=""
            :required="!readonly && !disabled"
            :error="errors?.addressType"
            @update:model-value="(v: string | number | null) => update('addressType', v === null ? null : (v as SupplierAddressType))"
        />

        <!-- Sites Starseed : multiselect a tags (>= 1 obligatoire, RG-2.06). -->
        <MalioSelectCheckbox
            :model-value="model.siteIris"
            :options="siteOptions"
            :label="t('commercial.suppliers.form.address.sites')"
            :display-tag="true"
            :readonly="readonly"
            :disabled="disabled"
            :required="!readonly && !disabled"
            :error="errors?.sites"
            @update:model-value="(v: (string | number)[]) => update('siteIris', v.map(String))"
        />

        <!-- Contacts rattaches (M2M, facultatif). -->
        <MalioSelectCheckbox
            v-if="!hideEmpty || isFilled(model.contactIris)"
            :model-value="model.contactIris"
            :options="contactOptions"
            :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))"
        />

        <!-- Filler : aligne le debut de ligne suivant sur la grille (le bloc client
             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
            :model-value="model.categoryIris"
            :options="categoryOptions"
            :label="t('commercial.suppliers.form.address.categories')"
            :display-tag="true"
            :readonly="readonly"
            :disabled="disabled"
            :required="!readonly && !disabled"
            :error="errors?.categories"
            @update:model-value="(v: (string | number)[]) => update('categoryIris', v.map(String))"
        />

        <MalioSelect
            :model-value="model.country"
            :options="countryOptions"
            :label="t('commercial.suppliers.form.address.country')"
            :readonly="readonly"
            :disabled="disabled"
            :required="!readonly && !disabled"
            @update:model-value="(v: string | number | null) => update('country', String(v ?? 'France'))"
        />

        <MalioInputText
            :model-value="model.postalCode"
            :label="t('commercial.suppliers.form.address.postalCode')"
            :mask="POSTAL_CODE_MASK"
            :readonly="readonly"
            :disabled="disabled"
            :required="!readonly && !disabled"
            :error="errors?.postalCode"
            @update:model-value="onPostalCodeChange"
        />

        <!-- Ville : MalioSelect alimente par le code postal (BAN). Saisie libre si BAN indispo. -->
        <MalioSelect
            v-if="!degraded"
            :model-value="model.city"
            :options="cityOptions"
            :label="t('commercial.suppliers.form.address.city')"
            :readonly="readonly"
            :disabled="disabled"
            empty-option-label=""
            :required="!readonly && !disabled"
            :error="errors?.city"
            @update:model-value="onCityChange"
        />
        <MalioInputText
            v-else
            :model-value="model.city"
            :label="t('commercial.suppliers.form.address.city')"
            :mask="ADDRESS_MASK"
            :readonly="readonly"
            :disabled="disabled"
            :required="!readonly && !disabled"
            :error="errors?.city"
            @update:model-value="(v: string) => update('city', v)"
        />

        <!-- 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">
            <MalioInputAutocomplete
                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="!readonly && !disabled"
                :error="errors?.street"
                :allow-create="true"
                :no-results-text="t('commercial.suppliers.form.address.streetNotFound')"
                @update:model-value="(v: string | number | null) => update('street', v === null ? null : String(v))"
                @search="onAddressSearch"
                @select="onAddressSelect"
            />
            <MalioInputText
                v-else
                :model-value="model.street"
                :label="t('commercial.suppliers.form.address.street')"
                :mask="ADDRESS_MASK"
                :readonly="readonly"
                :disabled="disabled"
                :required="!readonly && !disabled"
                :error="errors?.street"
                @update:model-value="(v: string) => update('street', v)"
            />
        </div>

        <div v-if="!hideEmpty || isFilled(model.streetComplement)" class="col-span-1">
            <MalioInputText
                :model-value="model.streetComplement"
                :label="t('commercial.suppliers.form.address.streetComplement')"
                :mask="ADDRESS_MASK"
                :readonly="readonly"
                :disabled="disabled"
                :error="errors?.streetComplement"
                @update:model-value="(v: string) => update('streetComplement', v)"
            />
        </div>

        <!-- 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"
            :readonly="readonly"
            :disabled="disabled"
            :error="errors?.bennes"
            @update:model-value="(v: string) => update('bennes', v)"
        />

        <!-- 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"
            group-class="self-center"
            :readonly="readonly"
            :disabled="disabled"
            @update:model-value="(v: boolean) => update('triageProvider', v)"
        />
    </div>
</template>

<script setup lang="ts">
import { useAddressAutocomplete, type AddressSuggestion } from '~/shared/composables/useAddressAutocomplete'
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 = '#####'

const props = defineProps<{
    /** Brouillon de l'adresse (v-model). */
    modelValue: SupplierAddressFormDraft
    title: string
    /** Categories autorisees sur une adresse (type FOURNISSEUR). */
    categoryOptions: CategoryOption[]
    /** Sites Starseed disponibles. */
    siteOptions: RefOption[]
    /** Contacts deja saisis, rattachables a l'adresse. */
    contactOptions: RefOption[]
    /** Pays disponibles (France par defaut). */
    countryOptions: RefOption[]
    removable?: boolean
    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>
}>()

const emit = defineEmits<{
    'update:modelValue': [value: SupplierAddressFormDraft]
    'remove': []
    /** Emis une fois quand le service d'autocompletion bascule en indisponible. */
    'degraded': []
}>()

const { t } = useI18n()
const autocomplete = useAddressAutocomplete()

const model = computed(() => props.modelValue)

const addressTypeOptions = computed<{ value: SupplierAddressType, label: string }[]>(() => [
    { value: 'PROSPECT', label: t('commercial.suppliers.form.address.addressTypeProspect') },
    { value: 'DEPART', label: t('commercial.suppliers.form.address.addressTypeDepart') },
    { value: 'RENDU', label: t('commercial.suppliers.form.address.addressTypeRendu') },
])

// Repli saisie libre de la VILLE quand la BAN est indisponible (recuperable).
const degraded = ref(false)
let unavailableNotified = false
const banCityOptions = ref<RefOption[]>([])
const banAddressOptions = ref<RefOption[]>([])

// Options ville effectives : on garantit que la ville courante figure toujours
// dans la liste, sinon MalioSelect afficherait un champ vide en lecture seule.
const cityOptions = computed<RefOption[]>(() => {
    const current = props.modelValue.city
    if (current && !banCityOptions.value.some(o => o.value === current)) {
        return [{ value: current, label: current }, ...banCityOptions.value]
    }
    return banCityOptions.value
})

// Meme garantie pour le champ Adresse : la rue courante doit toujours figurer
// dans les options, sinon MalioInputAutocomplete laisse le champ vide.
const addressOptions = computed<RefOption[]>(() => {
    const current = props.modelValue.street
    if (current && !banAddressOptions.value.some(o => o.value === current)) {
        return [{ value: current, label: current }, ...banAddressOptions.value]
    }
    return banAddressOptions.value
})
const addressLoading = ref(false)
// Conserve les suggestions d'adresse pour retrouver ville/CP au moment du select.
let lastAddressSuggestions: AddressSuggestion[] = []

// Filtrage des caracteres parasites : porte par le mask ADDRESS_MASK (maska) sur
// les champs texte editables (complement, ville en mode degrade, voie en repli). La
// voie en autocomplete (BAN) et la ville en select ne sont pas masquees (le back
// valide via Assert\Regex).

/** Emet un nouveau brouillon avec le champ modifie (immutabilite). */
function update<K extends keyof SupplierAddressFormDraft>(field: K, value: SupplierAddressFormDraft[K]): void {
    emit('update:modelValue', { ...props.modelValue, [field]: value })
}

/**
 * Selection d'une ville (select assiste BAN) → vide adresse + complement, devenus
 * incoherents avec la nouvelle ville. Ne reagit qu'a un vrai changement de valeur.
 * En mode degrade (saisie libre), la ville reste un simple `update` (pas de reset
 * a chaque frappe).
 */
function onCityChange(value: string | number | null): void {
    const next = value === null ? null : String(value)
    if (next === (props.modelValue.city ?? null)) {
        return
    }
    banAddressOptions.value = []
    lastAddressSuggestions = []
    emit('update:modelValue', {
        ...props.modelValue,
        city: next,
        street: null,
        streetComplement: null,
    })
}

/** Previent le parent (toast unique) que l'autocompletion est indisponible. */
function notifyUnavailable(): void {
    if (!unavailableNotified) {
        unavailableNotified = true
        emit('degraded')
    }
}

/** Saisie du code postal → met a jour le champ + interroge la BAN pour la ville. */
async function onPostalCodeChange(value: string): Promise<void> {
    const digits = (value ?? '').replace(/\D/g, '')
    const previousDigits = (props.modelValue.postalCode ?? '').replace(/\D/g, '')

    // CP complet (5 chiffres) et reellement modifie → ville, adresse et complement
    // deviennent incoherents avec le nouveau code postal : on les vide pour forcer
    // une re-saisie coherente (on n'efface pas pendant une correction partielle).
    if (digits.length === 5 && digits !== previousDigits) {
        banAddressOptions.value = []
        lastAddressSuggestions = []
        emit('update:modelValue', {
            ...props.modelValue,
            postalCode: value,
            city: null,
            street: null,
            streetComplement: null,
        })
    }
    else {
        update('postalCode', value)
    }

    if (digits.length < 5) {
        return
    }
    try {
        const suggestions = await autocomplete.searchCity(digits)
        banCityOptions.value = suggestions.map(s => ({ value: s.city, label: s.city }))
        degraded.value = false
    }
    catch {
        degraded.value = true
        notifyUnavailable()
    }
}

/** Recherche d'adresse assistee (event de MalioInputAutocomplete). */
async function onAddressSearch(query: string): Promise<void> {
    // La BAN exige au moins 3 caracteres : on n'envoie rien en deca (evite un 400).
    if (query.trim().length < 3) {
        banAddressOptions.value = []
        return
    }
    addressLoading.value = true
    try {
        const postalCode = (model.value.postalCode ?? '').replace(/\D/g, '') || undefined
        const suggestions = await autocomplete.searchAddress(query, postalCode)
        lastAddressSuggestions = suggestions
        banAddressOptions.value = suggestions.map(s => ({ value: s.street, label: s.label }))
    }
    catch {
        // Erreur transitoire : on vide les suggestions, la prochaine frappe reessaie.
        banAddressOptions.value = []
        notifyUnavailable()
    }
    finally {
        addressLoading.value = false
    }
}

/** Selection d'une suggestion d'adresse → remplit rue + ville + CP. */
function onAddressSelect(option: { label: string, value: string | number } | null): void {
    if (option === null) {
        return
    }
    const suggestion = lastAddressSuggestions.find(s => s.street === option.value)
    if (!suggestion) {
        update('street', String(option.value))
        return
    }
    emit('update:modelValue', {
        ...props.modelValue,
        street: suggestion.street,
        city: suggestion.city,
        postalCode: suggestion.postalCode,
    })
}
</script>