feat : ajout de l'api de l'état pour chercher les villes via le CP

frontend/components/address.vue

@@ -13,7 +13,15 @@
             <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 />
-            <UiTextInput id="address-city" v-model="form.city" label="Ville" 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">
@@ -31,7 +39,7 @@
 
 <script setup lang="ts">
 import type { AddressPayload } from "~/services/address"
-
+import { getCommunesByPostalCode, type CommuneData } from "~/services/geo"
 
 const route = useRoute()
 const router = useRouter()
@@ -43,6 +51,12 @@ const props = defineProps<{
 
 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: "",
@@ -85,6 +99,41 @@ watch(
     { 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})