From d3662b824074b253fb3596b89f7598d19239d0ad Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 9 Apr 2026 22:22:27 +0000
Subject: [PATCH] Preserve the locator model

This makes it possible to move back-and-forth in the compliance process
and still retain data.
---
 ts/components/AddressSuggestion.vue        | 33 +++++++--
 ts/rmo/components/AddressAndMapLocator.vue | 78 ++++++++++------------
 ts/rmo/content/Nuisance.vue                | 18 ++++-
 ts/rmo/content/Water.vue                   | 39 ++++++-----
 ts/rmo/content/compliance/Address.vue      | 14 ++--
 ts/rmo/view/Compliance.vue                 | 26 ++++++--
 6 files changed, 127 insertions(+), 81 deletions(-)

diff --git a/ts/components/AddressSuggestion.vue b/ts/components/AddressSuggestion.vue
index 5cda764e..3097aed0 100644
--- a/ts/components/AddressSuggestion.vue
+++ b/ts/components/AddressSuggestion.vue
@@ -76,23 +76,22 @@
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import { GeocodeSuggestion } from "@/type/api";
+import { Address, GeocodeSuggestion } from "@/type/api";
 
 // Props
 interface Props {
-	modelValue?: string;
+	modelValue: Address;
 	organizationID?: string;
 	placeholder?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	modelValue: "",
 	placeholder: "Enter address",
 });
 
 // Emits
 const emit = defineEmits<{
-	"update:modelValue": [value: string];
+	"update:modelValue": [value: Address];
 	"suggestion-selected": [address: GeocodeSuggestion];
 }>();
 
@@ -105,7 +104,7 @@ const debounceTimer = ref<ReturnType<typeof setTimeout> | null>(null);
 watch(
 	() => props.modelValue,
 	(newValue) => {
-		searchText.value = newValue;
+		searchText.value = newValue.raw;
 	},
 	{ immediate: true },
 );
@@ -131,7 +130,17 @@ function handleInput() {
 	}, 300);
 
 	// Update the model
-	emit("update:modelValue", text);
+	emit("update:modelValue", {
+		country: "",
+		gid: props.modelValue.gid,
+		locality: "",
+		number: "",
+		postal_code: "",
+		raw: text,
+		region: "",
+		street: "",
+		unit: "",
+	});
 }
 
 async function fetchAddressSuggestions(text: string) {
@@ -160,7 +169,17 @@ async function selectSuggestion(suggestion: GeocodeSuggestion) {
 		suggestions.value = [];
 
 		// Emit the full address object
-		//emit("update:modelValue", search);
+		emit("update:modelValue", {
+			country: "",
+			gid: suggestion.gid,
+			locality: "",
+			number: "",
+			postal_code: "",
+			raw: suggestion.detail,
+			region: "",
+			street: "",
+			unit: "",
+		});
 		emit("suggestion-selected", suggestion);
 	} catch (error) {
 		console.error("Error fetching place details:", error);
diff --git a/ts/rmo/components/AddressAndMapLocator.vue b/ts/rmo/components/AddressAndMapLocator.vue
index 939b7e4a..c756248d 100644
--- a/ts/rmo/components/AddressAndMapLocator.vue
+++ b/ts/rmo/components/AddressAndMapLocator.vue
@@ -38,7 +38,7 @@
 <template>
 	<div class="mb-4">
 		<AddressSuggestion
-			v-model="address"
+			v-model="modelValue.address"
 			placeholder="Start typing an address (min 3 characters)"
 			@suggestion-selected="doAddressSuggestionSelected"
 		>
@@ -72,22 +72,25 @@ interface Emits {
 	(e: "update:modelValue", value: Locator): void;
 }
 interface Props {
-	modelValue: Locator | null;
+	modelValue: Locator;
 }
 const address = ref<string>("");
 const currentCamera = ref<Camera | null>(null);
 const emit = defineEmits<Emits>();
 const geocode = useGeocodeStore();
-const marker = ref<Marker | null>(null);
 const markers = computed((): Marker[] => {
-	if (marker.value) {
-		return [marker.value];
-	} else {
+	if (!props.modelValue.location) {
 		return [];
 	}
+	const marker = {
+		color: "#FF0000",
+		draggable: true,
+		id: "x",
+		location: props.modelValue.location,
+	};
+	return [marker];
 });
 const props = defineProps<Props>();
-const selectedSuggestion = ref<GeocodeSuggestion | null>(null);
 function doAddressSuggestionSelected(suggestion: GeocodeSuggestion) {
 	console.log("Address suggestion selected", suggestion);
 
@@ -95,7 +98,7 @@ function doAddressSuggestionSelected(suggestion: GeocodeSuggestion) {
 }
 async function doAddressSuggestionDetails(suggestion: GeocodeSuggestion) {
 	// Fetch full details for the selected suggestion
-	selectedSuggestion.value = suggestion;
+	updateModel(suggestion.gid, suggestion.detail, props.modelValue.location);
 	const url = `/api/geocode/by-gid/${suggestion.gid}`;
 	const response = await fetch(url);
 	if (!response.ok) {
@@ -108,32 +111,22 @@ async function doAddressSuggestionDetails(suggestion: GeocodeSuggestion) {
 		console.log("suggestion located, zooming", data);
 		currentCamera.value.zoom = 15;
 	}
-	marker.value = {
-		color: "#FF0000",
-		draggable: true,
-		id: "x",
-		location: data.location,
-	};
-	updateModel();
+	updateModel(data.address.gid, data.address.raw, data.location);
 }
 function doMapClick(location: Location) {
-	marker.value = {
-		color: "#FF0000",
-		draggable: true,
-		id: "x",
-		location: location,
-	};
+	updateModel(
+		props.modelValue.address.gid,
+		props.modelValue.address.raw,
+		location,
+	);
 	geocode
 		.reverse(location)
 		.then((code: Geocode) => {
-			address.value = code.address.raw;
-			selectedSuggestion.value = {
-				detail: code.address.number + " " + code.address.street,
-				gid: code.address.gid,
-				locality: code.address.locality,
-				type: "address",
-			};
-			updateModel();
+			updateModel(
+				code.address.gid,
+				code.address.raw,
+				props.modelValue.location,
+			);
 			console.log("reverse geocoded", code);
 		})
 		.catch((e) => {
@@ -141,31 +134,30 @@ function doMapClick(location: Location) {
 		});
 }
 function doMapMarkerDragEnd(location: Location) {
-	marker.value = {
-		color: "#FF0000",
-		draggable: true,
-		id: "x",
-		location: location,
-	};
-	updateModel();
+	updateModel(
+		props.modelValue.address.gid,
+		props.modelValue.address.raw,
+		location,
+	);
 }
-function updateModel() {
+function updateModel(
+	address_gid: string,
+	address_raw: string,
+	location: Location,
+) {
 	const newLocator: Locator = {
 		address: {
 			country: "",
-			gid: selectedSuggestion ? (selectedSuggestion.value?.gid ?? "") : "",
+			gid: address_gid,
 			locality: "",
 			number: "",
 			postal_code: "",
-			raw: address.value,
+			raw: address_raw,
 			region: "",
 			street: "",
 			unit: "",
 		},
-		location: marker.value?.location ?? {
-			latitude: 0,
-			longitude: 0,
-		},
+		location: location,
 	};
 	emit("update:modelValue", newLocator);
 }
diff --git a/ts/rmo/content/Nuisance.vue b/ts/rmo/content/Nuisance.vue
index fbd6c838..8315ccb8 100644
--- a/ts/rmo/content/Nuisance.vue
+++ b/ts/rmo/content/Nuisance.vue
@@ -488,7 +488,23 @@ const formElement = ref<HTMLFormElement | null>(null);
 const images = ref<Image[]>([]);
 const isSubmitting = ref(false);
 const locationStore = useLocationStore();
-const locator = ref<Locator | null>(null);
+const locator = ref<Locator>({
+	address: {
+		country: "",
+		gid: "",
+		locality: "",
+		number: "",
+		postal_code: "",
+		raw: "",
+		region: "",
+		street: "",
+		unit: "",
+	},
+	location: {
+		latitude: 0,
+		longitude: 0,
+	},
+});
 
 const showMore = ref<boolean>(false);
 const storePublicReport = useStorePublicReport();
diff --git a/ts/rmo/content/Water.vue b/ts/rmo/content/Water.vue
index 0b7e0965..2a85a04e 100644
--- a/ts/rmo/content/Water.vue
+++ b/ts/rmo/content/Water.vue
@@ -235,30 +235,12 @@ select.tall {
 							id="latlng-accuracy-value"
 							name="latlng-accuracy-value"
 						/>
-						<div class="col-md-6">
-							<div class="mb-3 position-relative">
-								<AddressSuggestion
-									v-model="address"
-									placeholder="Start typing an address (min 3 characters)"
-									@suggestion-selected="doAddressSuggestionSelected"
-								>
-								</AddressSuggestion>
-							</div>
-						</div>
 					</div>
 
 					<p class="small text-muted mb-2">
 						You can also click on the map to mark the location precisely
 					</p>
-					<div class="map-container">
-						<MapLocator
-							v-model="currentCamera"
-							:markers="markers"
-							@click="doMapClick"
-							@marker-drag-end="doMapMarkerDragEnd"
-						/>
-					</div>
-					<input type="hidden" id="map-zoom" name="map-zoom" />
+					<AddressAndMapLocator v-model="locator" />
 				</div>
 
 				<button
@@ -652,7 +634,7 @@ import type {
 	Location,
 	PublicReport,
 } from "@/type/api";
-import type { Camera } from "@/type/map";
+import type { Camera, Locator } from "@/type/map";
 
 const isCollapsed = ref<boolean>(true);
 const toggleCollapse = () => {
@@ -675,6 +657,23 @@ const markers = computed((): Marker[] => {
 	}
 });
 const locationStore = useLocationStore();
+const locator = ref<Locator>({
+	address: {
+		country: "",
+		gid: "",
+		locality: "",
+		number: "",
+		postal_code: "",
+		raw: "",
+		region: "",
+		street: "",
+		unit: "",
+	},
+	location: {
+		latitude: 0,
+		longitude: 0,
+	},
+});
 const router = useRouter();
 const selectedSuggestion = ref<GeocodeSuggestion | null>(null);
 const showMore = ref<boolean>(false);
diff --git a/ts/rmo/content/compliance/Address.vue b/ts/rmo/content/compliance/Address.vue
index bf24a15c..d39e7107 100644
--- a/ts/rmo/content/compliance/Address.vue
+++ b/ts/rmo/content/compliance/Address.vue
@@ -10,7 +10,7 @@
 				Please enter the address so we can match your response with our records.
 			</p>
 
-			<AddressAndMapLocator v-model="locator" />
+			<AddressAndMapLocator v-model="modelValue.locator" />
 
 			<div class="d-flex gap-2 mt-4">
 				<RouterLink class="btn btn-outline-secondary" to="../compliance">
@@ -31,21 +31,25 @@ import type { District } from "@/type/api";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import AddressAndMapLocator from "@/rmo/components/AddressAndMapLocator.vue";
+import { Compliance } from "@/rmo/view/Compliance.vue";
 import { Locator } from "@/type/map";
+
 interface Emits {
-	(e: "doLocator", locator: Locator | null): void;
+	(e: "doLocator"): void;
+	(e: "update:modelValue", value: Compliance): void;
 }
 interface Props {
 	district: District;
+	modelValue: Compliance;
 }
 const emit = defineEmits<Emits>();
 const error = ref<string>("");
 const props = defineProps<Props>();
-const locator = ref<Locator | null>(null);
 function doContinue() {
-	emit("doLocator", locator.value);
+	emit("update:modelValue", props.modelValue);
+	emit("doLocator");
 	// re-add when we have the concern data to show
 	// router.push("./concern");
-	router.push("./evidence");
+	router.push(`/district/${props.district.slug}/compliance/evidence`);
 }
 </script>
diff --git a/ts/rmo/view/Compliance.vue b/ts/rmo/view/Compliance.vue
index 0ca634f8..a983d4ad 100644
--- a/ts/rmo/view/Compliance.vue
+++ b/ts/rmo/view/Compliance.vue
@@ -20,13 +20,13 @@ body > .container-fluid {
 		<router-view v-slot="{ Component }">
 			<component
 				:is="Component"
-				:compliance="compliance"
 				:district="district"
 				@doComments="doComments"
 				@doContact="doContact"
 				@doImages="doImages"
 				@doLocator="doLocator"
 				@doPermission="doPermission"
+				v-model="compliance"
 			/>
 		</router-view>
 	</template>
@@ -50,7 +50,7 @@ import { type Permission } from "@/rmo/content/compliance/Permission.vue";
 export interface Compliance {
 	comments: string;
 	contact?: Contact;
-	locator?: Locator;
+	locator: Locator;
 	images: Image[];
 	permission?: Permission;
 }
@@ -63,6 +63,23 @@ const districtStore = useStoreDistrict();
 const compliance = ref<Compliance>({
 	comments: "",
 	images: [],
+	locator: {
+		address: {
+			country: "",
+			gid: "",
+			locality: "",
+			number: "",
+			postal_code: "",
+			raw: "",
+			region: "",
+			street: "",
+			unit: "",
+		},
+		location: {
+			latitude: 0,
+			longitude: 0,
+		},
+	},
 });
 const props = defineProps<Props>();
 const district = computedAsync(async (): Promise<District | undefined> => {
@@ -81,9 +98,8 @@ function doImages(images: Image[]) {
 	console.log("images", images);
 	compliance.value.images = images;
 }
-function doLocator(locator: Locator | undefined) {
-	console.log("locator", locator);
-	compliance.value.locator = locator;
+function doLocator() {
+	console.log("locator done", compliance.value.locator);
 }
 function doPermission(permission: Permission | undefined) {
 	console.log("permission", permission);