From 6d49c8799a1b97a6ad68ad5b9ea675b14b6d1c8c Mon Sep 17 00:00:00 2001
From: Chloe B <hellochloe1989@protonmail.com>
Date: Thu, 11 Dec 2025 15:07:34 +0100
Subject: [PATCH 1/5] =?UTF-8?q?refonte=20partielle=20de=20la=20saisie=20d'?=
 =?UTF-8?q?adresse=20-=20composant=20CoordinatePickerMap=20pour=20choisir?=
 =?UTF-8?q?=20une=20localisation=20en=20cliquant=20sur=20une=20carte=20-?=
 =?UTF-8?q?=20isolation=20de=20la=20logique=20de=20la=20dialogue=20de=20sa?=
 =?UTF-8?q?isie=20d'adresse=20dans=20un=20composant=20d=C3=A9di=C3=A9=20Ad?=
 =?UTF-8?q?dressDialog=20-=20renommage=20de=20NominatimPicker=20en=20Addre?=
 =?UTF-8?q?ssPicker=20-=20possibilit=C3=A9=20de=20personnaliser=20le=20nom?=
 =?UTF-8?q?=20de=20l'adresse=20et=20de=20d=C3=A9placer=20le=20point=20sur?=
 =?UTF-8?q?=20la=20carte=20dans=20AddressPicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/AddressDialog.vue       |  50 +++++++++
 frontend/components/AddressPicker.vue       | 114 ++++++++++++++++++++
 frontend/components/CoordinatePickerMap.vue |  99 +++++++++++++++++
 frontend/components/NominatimPicker.vue     |  77 -------------
 frontend/components/form/Adresses.vue       |  88 ++++++---------
 5 files changed, 298 insertions(+), 130 deletions(-)
 create mode 100644 frontend/components/AddressDialog.vue
 create mode 100644 frontend/components/AddressPicker.vue
 create mode 100644 frontend/components/CoordinatePickerMap.vue
 delete mode 100644 frontend/components/NominatimPicker.vue

diff --git a/frontend/components/AddressDialog.vue b/frontend/components/AddressDialog.vue
new file mode 100644
index 00000000..c6c59da8
--- /dev/null
+++ b/frontend/components/AddressDialog.vue
@@ -0,0 +1,50 @@
+<template>
+  <Dialog
+    :visible="props.visible"
+    header="Sélectionner une adresse"
+    :modal="true"
+    :closable="true"
+    dismissable-mask
+    :style="{ width: '40rem' }"
+    @update:visible="value => emits('update:visible', value)"
+  >
+    <AddressPicker v-model="editedAddress" />
+    <template #footer>
+      <div class="pt-1">
+        <Button
+          label="Annuler"
+          severity="secondary"
+          @click="emits('update:visible', false)"
+        />
+        <Button
+          label="Sélectionner"
+          :disabled="!editedAddress"
+          @click="editedAddress && emits('select', editedAddress)"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import type { UnprocessedLocation } from '~/lib'
+
+const props = defineProps<{
+  address: UnprocessedLocation | undefined
+  visible: boolean
+}>()
+
+const emits = defineEmits<{
+  'update:visible': [boolean]
+  'select': [UnprocessedLocation]
+}>()
+
+const editedAddress = ref<UnprocessedLocation | undefined>(props.address)
+
+watch([
+  () => props.visible,
+  () => props.address,
+], () => {
+  editedAddress.value = props.address
+})
+</script>
diff --git a/frontend/components/AddressPicker.vue b/frontend/components/AddressPicker.vue
new file mode 100644
index 00000000..6b7c6b16
--- /dev/null
+++ b/frontend/components/AddressPicker.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <form @submit.prevent="searchNominatim">
+      <InputGroup class="mb-6 mt-2">
+        <InputText
+          v-model="search"
+          placeholder="Rechercher une adresse"
+        />
+        <Button
+          v-tooltip.bottom="'Lancer la recherche'"
+          aria-label="Lancer la recherche"
+          severity="primary"
+          type="submit"
+        >
+          <template #icon>
+            <AppIcon icon-name="search" />
+          </template>
+        </Button>
+      </InputGroup>
+    </form>
+
+    <div v-if="searched && !nominatimResult">
+      <Message severity="error">
+        Aucun résultat trouvé
+      </Message>
+    </div>
+    <div v-else-if="nominatimResult">
+      <small class="text-secondary block mb-1">{{ nominatimResult.display_name }}</small>
+    </div>
+
+    <div v-if="coordinate">
+      <CoordinatePickerMap
+        class="!h-80"
+        :center="transformedCenter"
+        :zoom="10"
+        :model-value="transformedCoordinate"
+        @update:model-value="value => onMapClick(value)"
+      />
+      <small class="text-secondary text-center block mt-1">Cliquer sur la carte pour déplacer le point au bon endroit si nécessaire.</small>
+    </div>
+
+    <div v-if="coordinate">
+      <AdminInputTextField
+        id="address_name"
+        v-model="name"
+        class="mt-6"
+        label="Intitulé complet de l'adresse"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Coordinate } from 'ol/coordinate'
+import { transform } from 'ol/proj'
+import type { UnprocessedLocation } from '~/lib'
+import { freeFormSearch } from '~/lib/nominatim'
+import type { Result } from '~/lib/nominatim'
+
+const props = defineProps<{
+  modelValue: UnprocessedLocation | undefined
+}>()
+
+const emits = defineEmits<{
+  'update:modelValue': [UnprocessedLocation | undefined]
+}>()
+
+const search = ref('')
+const nominatimResult = ref<Result | undefined>()
+const searched = ref(false)
+const coordinate = ref<Coordinate | undefined>(props.modelValue ? [props.modelValue.long, props.modelValue.lat] : undefined)
+const name = ref<string>(props.modelValue ? props.modelValue.plain_text : '')
+
+const transformedCoordinate = computed(() => {
+  if (!coordinate.value) return undefined
+
+  return transform([
+    coordinate.value[0], coordinate.value[1],
+  ], 'EPSG:4326', 'EPSG:3857')
+})
+
+const transformedCenter = computed(() => transformedCoordinate.value || [0, 0])
+
+async function searchNominatim() {
+  const query = search.value
+  const results = await freeFormSearch(query)
+  searched.value = true
+
+  if (results[0]) {
+    nominatimResult.value = results[0]
+    coordinate.value = [results[0].lon, results[0].lat]
+    name.value = query
+  }
+  else {
+    nominatimResult.value = undefined
+    coordinate.value = undefined
+    name.value = ''
+  }
+}
+
+function onMapClick(c: Coordinate) {
+  coordinate.value = transform(c, 'EPSG:3857', 'EPSG:4326')
+}
+
+watch([
+  () => coordinate.value,
+  () => name.value,
+], () => {
+  if (coordinate.value && name.value.trim() != '')
+    emits('update:modelValue', { lat: coordinate.value[1]!, long: coordinate.value[0]!, plain_text: name.value })
+  else
+    emits('update:modelValue', undefined)
+})
+</script>
diff --git a/frontend/components/CoordinatePickerMap.vue b/frontend/components/CoordinatePickerMap.vue
new file mode 100644
index 00000000..861d29db
--- /dev/null
+++ b/frontend/components/CoordinatePickerMap.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="map_container">
+    <ol-map
+      ref="mapRef"
+      class="map"
+      :load-tiles-while-animating="true"
+      :load-tiles-while-interacting="true"
+      @singleclick="(event: MapBrowserEvent) => emits('update:modelValue', event.coordinate)"
+    >
+      <ol-view
+        projection="EPSG:3857"
+      />
+
+      <ol-tile-layer>
+        <ol-source-osm />
+      </ol-tile-layer>
+
+      <ol-overlay
+        v-if="props.modelValue"
+        :position="props.modelValue"
+        :stop-event="true"
+      >
+        <ViewerMapMarker
+          :callback-item="null"
+          :width="24"
+          :height="38"
+          :highlighted="false"
+          :border-color="props.borderColor"
+          :fill-color="props.fillColor"
+          :icon-hash="props.iconHash"
+        />
+      </ol-overlay>
+    </ol-map>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MapBrowserEvent } from 'ol'
+import type Map from 'ol/Map'
+import type { Coordinate } from 'ol/coordinate'
+
+const props = defineProps<{
+  modelValue: Coordinate | undefined
+  center: Coordinate
+  zoom: number
+  borderColor?: string | undefined
+  fillColor?: string | undefined
+  iconHash?: string | null | undefined
+}>()
+
+const emits = defineEmits<{
+  'update:modelValue': [Coordinate]
+}>()
+
+const mapRef = ref<{ map: Map }>()
+
+onMounted(resetZoom)
+watch([
+  () => props.zoom,
+], () => resetZoom(true))
+
+function resetZoom(animated: boolean = false) {
+  const map = mapRef.value?.map
+  if (!map) return
+  const view = map.getView()
+
+  view.setMinZoom(Math.min(2, props.zoom))
+  view.setMaxZoom(Math.max(20, props.zoom))
+  if (animated)
+    view.animate({ zoom: props.zoom })
+  else
+    view.setZoom(props.zoom)
+}
+
+onMounted(resetCenter)
+watch([
+  () => props.center,
+  () => props.modelValue,
+], () => resetCenter(true))
+
+function resetCenter(animated: boolean = false) {
+  const map = mapRef.value?.map
+  if (!map) return
+  const view = map.getView()
+
+  if (animated)
+    view.animate({ center: props.modelValue || props.center })
+  else
+    view.setCenter(props.modelValue || props.center)
+}
+</script>
+
+<style scoped>
+.map_container,
+.map {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/frontend/components/NominatimPicker.vue b/frontend/components/NominatimPicker.vue
deleted file mode 100644
index e083912b..00000000
--- a/frontend/components/NominatimPicker.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div>
-    <form @submit.prevent="searchNominatim">
-      <InputGroup class="mb-6 mt-2">
-        <InputText
-          v-model="locationInput"
-          placeholder="Rechercher une adresse"
-        />
-        <Button
-          v-tooltip.bottom="'Lancer la recherche'"
-          aria-label="Lancer la recherche"
-          severity="primary"
-          type="submit"
-        >
-          <template #icon>
-            <AppIcon icon-name="search" />
-          </template>
-        </Button>
-      </InputGroup>
-    </form>
-
-    <div v-if="!results.length && resultsSearched">
-      <Message severity="error">
-        Aucun résultat trouvé
-      </Message>
-    </div>
-    <div
-      v-else-if="locationSelected && resultsSearched"
-    >
-      <SingleEntityMap
-        class="!h-80"
-        :coordinates="transformedCoordinates"
-        :locked="false"
-        category-id="default"
-        :zoom="10"
-      />
-      <small class="text-secondary flex ">Addresse : {{ results[0].display_name }}</small>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { transform } from 'ol/proj'
-import type { UnprocessedLocation } from '~/lib'
-import { freeFormSearch } from '~/lib/nominatim'
-import type { Result } from '~/lib/nominatim'
-
-const props = defineProps<{ modelValue: UnprocessedLocation | null }>()
-const emits = defineEmits(['select'])
-
-const locationInput = ref(props.modelValue?.plain_text || '')
-const locationSelected = ref(props.modelValue)
-const results = ref<Result[]>([])
-const resultsSearched = ref(false)
-
-const transformedCoordinates = computed(() => {
-  if (!props.modelValue) return [[0, 0]]
-
-  return [
-    transform([
-      props.modelValue!.long, props.modelValue!.lat,
-    ], 'EPSG:4326', 'EPSG:3857')]
-})
-
-async function searchNominatim() {
-  results.value = await freeFormSearch(locationInput.value)
-  resultsSearched.value = true
-  if (results.value.length !== 0) {
-    locationSelected.value = {
-      lat: results.value[0].lat,
-      long: results.value[0].lon,
-      plain_text: locationInput.value,
-    }
-    emits('select', locationSelected.value)
-  }
-}
-</script>
diff --git a/frontend/components/form/Adresses.vue b/frontend/components/form/Adresses.vue
index 88207ca9..7c7a5035 100644
--- a/frontend/components/form/Adresses.vue
+++ b/frontend/components/form/Adresses.vue
@@ -47,31 +47,11 @@
     </Column>
   </DataTable>
 
-  <Dialog
-    v-model:visible="displayNominatimPicker"
-    header="Sélectionner une adresse"
-    :modal="true"
-    :closable="true"
-    dismissable-mask
-    :style="{ width: '40rem' }"
-  >
-    <NominatimPicker
-      v-model="currentlyEditedLocation!.loc"
-      @select="handleAddressSelect"
-    />
-    <template #footer>
-      <Button
-        label="Annuler"
-        severity="secondary"
-        @click="displayNominatimPicker = false"
-      />
-      <Button
-        label="Sélectionner"
-        :disabled="!addressSelected"
-        @click="applyAddressChanges"
-      />
-    </template>
-  </Dialog>
+  <AddressDialog
+    v-model:visible="displayAddressDialog"
+    :address="editedLocation"
+    @select="value => onAddressSelected(value)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -85,43 +65,45 @@ const emit = defineEmits(['update:locations'])
 
 const toast = useToast()
 
-const currentlyEditedLocation = ref<{ index: number, loc: UnprocessedLocation } | null>(null)
-const displayNominatimPicker = ref(false)
-const addressSelected = ref(false)
+const displayAddressDialog = ref(false)
+
+const editedIndex = ref<number | undefined>()
+const editedLocation = ref<UnprocessedLocation | undefined>()
 
 function addNewAddress() {
-  currentlyEditedLocation.value = { index: props.locations.length, loc: { plain_text: '', lat: 0, long: 0 } }
-  displayNominatimPicker.value = true
-  addressSelected.value = false
+  editedIndex.value = undefined
+  editedLocation.value = undefined
+  displayAddressDialog.value = true
 }
 
-function removeAddress(index: number) {
-  const updatedLocations = [...props.locations]
-  updatedLocations.splice(index, 1)
-  emit('update:locations', updatedLocations)
+function editAddress(index: number) {
+  editedIndex.value = index
+  editedLocation.value = props.locations[index]
+  displayAddressDialog.value = true
 }
 
-function editAddress(index: number) {
-  currentlyEditedLocation.value = { index: index, loc: { ...props.locations[index] } }
-  displayNominatimPicker.value = true
-  addressSelected.value = false
+function removeAddress(index: number) {
+  const locations = [...props.locations]
+  locations.splice(index, 1)
+  emit('update:locations', locations)
 }
 
-function applyAddressChanges() {
-  if (addressSelected.value) {
-    if (props.locations.some(loc => loc.plain_text == currentlyEditedLocation.value!.loc.plain_text))
-      toast.add({ severity: 'error', summary: 'Erreur', detail: `Addresse déjà présente`, life: 3000 })
-    else {
-      const updatedLocations = [...props.locations]
-      updatedLocations[currentlyEditedLocation.value!.index] = { ...currentlyEditedLocation.value!.loc }
-      emit('update:locations', updatedLocations)
-    }
-    displayNominatimPicker.value = false
+function onAddressSelected(address: UnprocessedLocation) {
+  const isDuplicate = props.locations.some((loc, index) => {
+    return index != editedIndex.value && loc.plain_text == address.plain_text
+  })
+  if (isDuplicate) {
+    toast.add({ severity: 'error', summary: 'Erreur', detail: `Addresse déjà présente`, life: 3000 })
+    return
   }
-}
 
-function handleAddressSelect(location: UnprocessedLocation) {
-  currentlyEditedLocation.value!.loc = location
-  addressSelected.value = true
+  const locations = [...props.locations]
+  if (editedIndex.value == undefined)
+    locations.push({ ...address })
+  else
+    locations[editedIndex.value] = { ...address }
+  emit('update:locations', locations)
+
+  displayAddressDialog.value = false
 }
 </script>

From 974a2fe504453472115bce9c78e0bcaed4e06273 Mon Sep 17 00:00:00 2001
From: Chloe B <hellochloe1989@protonmail.com>
Date: Thu, 11 Dec 2025 18:59:03 +0100
Subject: [PATCH 2/5] trim() du nom lors de la saisie d'adresse

---
 frontend/components/AddressPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/AddressPicker.vue b/frontend/components/AddressPicker.vue
index 6b7c6b16..379081db 100644
--- a/frontend/components/AddressPicker.vue
+++ b/frontend/components/AddressPicker.vue
@@ -107,7 +107,7 @@ watch([
   () => name.value,
 ], () => {
   if (coordinate.value && name.value.trim() != '')
-    emits('update:modelValue', { lat: coordinate.value[1]!, long: coordinate.value[0]!, plain_text: name.value })
+    emits('update:modelValue', { lat: coordinate.value[1]!, long: coordinate.value[0]!, plain_text: name.value.trim() })
   else
     emits('update:modelValue', undefined)
 })

From dc43b114fd2bb7b5ecc1dc5387ce91eea4502acc Mon Sep 17 00:00:00 2001
From: Chloe B <hellochloe1989@protonmail.com>
Date: Thu, 11 Dec 2025 19:09:17 +0100
Subject: [PATCH 3/5] =?UTF-8?q?zoom=2014=20par=20d=C3=A9faut=20dans=20la?=
 =?UTF-8?q?=20saisie=20d'adresse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/AddressPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/AddressPicker.vue b/frontend/components/AddressPicker.vue
index 379081db..3e056fbe 100644
--- a/frontend/components/AddressPicker.vue
+++ b/frontend/components/AddressPicker.vue
@@ -32,7 +32,7 @@
       <CoordinatePickerMap
         class="!h-80"
         :center="transformedCenter"
-        :zoom="10"
+        :zoom="14"
         :model-value="transformedCoordinate"
         @update:model-value="value => onMapClick(value)"
       />

From 1e8e0287cd5dc9e7931b8dcfecfa28828eea6637 Mon Sep 17 00:00:00 2001
From: Chloe B <hellochloe1989@protonmail.com>
Date: Fri, 12 Dec 2025 09:50:30 +0100
Subject: [PATCH 4/5] =?UTF-8?q?r=C3=A9duction=20de=20la=20hauteur=20de=20l?=
 =?UTF-8?q?a=20carte=20dans=20la=20saisie=20d'adresse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/AddressPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/AddressPicker.vue b/frontend/components/AddressPicker.vue
index 3e056fbe..4cbd0c96 100644
--- a/frontend/components/AddressPicker.vue
+++ b/frontend/components/AddressPicker.vue
@@ -30,7 +30,7 @@
 
     <div v-if="coordinate">
       <CoordinatePickerMap
-        class="!h-80"
+        class="!h-[18rem]"
         :center="transformedCenter"
         :zoom="14"
         :model-value="transformedCoordinate"

From 936af93417dc34c26e63e72533edf0e7dbe32498 Mon Sep 17 00:00:00 2001
From: Chloe B <hellochloe1989@protonmail.com>
Date: Fri, 12 Dec 2025 10:01:54 +0100
Subject: [PATCH 5/5] wording plus court pour l'info clic carte dans la saisie
 d'adresse

---
 frontend/components/AddressPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/AddressPicker.vue b/frontend/components/AddressPicker.vue
index 4cbd0c96..3f5368d7 100644
--- a/frontend/components/AddressPicker.vue
+++ b/frontend/components/AddressPicker.vue
@@ -36,7 +36,7 @@
         :model-value="transformedCoordinate"
         @update:model-value="value => onMapClick(value)"
       />
-      <small class="text-secondary text-center block mt-1">Cliquer sur la carte pour déplacer le point au bon endroit si nécessaire.</small>
+      <small class="text-secondary text-center block mt-1">Cliquer sur la carte pour déplacer le point si besoin.</small>
     </div>
 
     <div v-if="coordinate">