Ferme/frontend/components/address.vue

<template>
    <form :class="{ submitted }" @submit.prevent="validateForm">
        <div class="flex items-center mb-11 justify-between relative">
            <div class="flex flex-row absolute -left-[60px] ">
                <Icon @click="goBack" name="gg:arrow-left-o" size="40" class="cursor-pointer text-primary-500"/>
            </div>
            <h1 class="text-3xl text-primary-500 font-bold uppercase">
                {{ props.address ? "Modification d'une adresse" : "Ajout d'une adresse" }}
            </h1>
        </div>

        <div class="grid grid-cols-2 gap-y-16 gap-x-[200px] mb-16">
            <UiTextInput id="address-street" v-model="form.street" label="Rue" required />
            <UiTextInput id="address-street2" v-model="form.street2" label="Complément" />
            <UiTextInput id="address-postalCode" v-model="form.postalCode" label="Code postal" required />
            <UiSelect
                id="address-city"
                v-model="form.city"
                label="Ville"
                :options="communeOptions"
                :loading="isLoadingCities"
                :disabled="communes.length === 0"
                required
            />
            <UiTextInput id="address-country" v-model="form.countryCode" label="Pays (code)" />
        </div>
        <div class="flex justify-center items-center">
        <UiButton
            class="inline-flex items-center justify-center text-xl text-white uppercase bg-primary-500 h-[50px] rounded hover:opacity-80 justify-self-end"
            type="submit"
            :disabled="isLoading"
            @click="submitted = true"
        >
            Valider
        </UiButton>
        </div>
    </form>
</template>

<script setup lang="ts">
import type { AddressPayload } from "~/services/address"
import { getCommunesByPostalCode, type CommuneData } from "~/services/geo"

const route = useRoute()
const router = useRouter()

const props = defineProps<{
    type?: "supplier" | "customer",
    address?: AddressPayload | null
}>()

const isLoading = ref(false)
const submitted = ref(false)
const communes = ref<CommuneData[]>([])
const isLoadingCities = ref(false)

const communeOptions = computed(() =>
    communes.value.map(c => ({ value: c.nom, label: c.nom }))
)

const emptyForm = (): AddressPayload => ({
    street: "",
    street2: null,
    postalCode: "",
    city: "",
    countryCode: "FR",
})

const form = reactive<AddressPayload>(emptyForm())

const backPath = computed(() => {
    if (props.type === "customer") {
        const customerId = Number(route.query.customerId)
        return Number.isFinite(customerId) && customerId > 0
            ? `/admin/customer/${customerId}`
            : "/admin/customer/customer-list"
    }

    const supplierId = Number(route.query.supplierId)
    return Number.isFinite(supplierId) && supplierId > 0
        ? `/admin/supplier/${supplierId}`
        : "/admin/supplier/supplier-list"
})

const hydrateForm = (address?: AddressPayload | null) => {
    const data = address ?? emptyForm()
    form.street = data.street ?? ""
    form.street2 = data.street2 ?? null
    form.postalCode = data.postalCode ?? ""
    form.city = data.city ?? ""
    form.countryCode = data.countryCode || "FR"
}

watch(
    () => props.address,
    (addr) => {
        hydrateForm(addr)
    },
    { immediate: true }
)

let debounceTimer: ReturnType<typeof setTimeout> | null = null

watch(
    () => form.postalCode,
    (cp) => {
        if (debounceTimer) clearTimeout(debounceTimer)

        if (!cp || cp.length < 5) {
            communes.value = []
            form.city = ''
            return
        }

        if (cp.length === 5) {
            debounceTimer = setTimeout(async () => {
                isLoadingCities.value = true
                const previousCity = form.city
                try {
                    communes.value = await getCommunesByPostalCode(cp)

                    if (communes.value.length === 1) {
                        form.city = communes.value[0].nom
                    } else if (communes.value.some(c => c.nom === previousCity)) {
                        form.city = previousCity
                    } else {
                        form.city = ''
                    }
                } finally {
                    isLoadingCities.value = false
                }
            }, 300)
        }
    }
)

const validateForm = () => {
    if (isLoading.value) return
    emit("validate", {...form})
}

const goBack = () => {
    router.push(backPath.value)
}

const emit = defineEmits<{
    (event: 'validate', form: AddressPayload): void
}>()
</script>