From 31d8d2d0d5c49977b7f8e4f99bfaa4d05762f2d8 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 15 Apr 2026 16:42:16 +0000
Subject: [PATCH] Populate pool review form in the parent view

This will allow us to change it.
---
 ts/components/ReviewPoolColumnDetail.vue | 36 +++++++++++-----------
 ts/view/review/Pool.vue                  | 39 ++++++++++++++++++------
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/ts/components/ReviewPoolColumnDetail.vue b/ts/components/ReviewPoolColumnDetail.vue
index 7f101990..26e4574c 100644
--- a/ts/components/ReviewPoolColumnDetail.vue
+++ b/ts/components/ReviewPoolColumnDetail.vue
@@ -35,7 +35,7 @@
 						<input
 							type="text"
 							class="form-control"
-							:value="formatAddress(selectedTask.address)"
+							:value="modelValue.address"
 							readonly
 						/>
 					</div>
@@ -47,10 +47,10 @@
 						<input
 							type="text"
 							class="form-control"
-							v-model="poolLocation.longitude"
+							v-model="modelValue.location.longitude"
 							:class="{
 								'border-warning':
-									poolLocation.longitude !==
+									modelValue.location.longitude !==
 									selectedTask.pool?.location?.longitude,
 							}"
 						/>
@@ -63,10 +63,10 @@
 						<input
 							type="text"
 							class="form-control"
-							v-model="poolLocation.latitude"
+							v-model="modelValue.location.latitude"
 							:class="{
 								'border-warning':
-									poolLocation.latitude !==
+									modelValue.location.latitude !==
 									selectedTask.pool?.location?.latitude,
 							}"
 						/>
@@ -78,10 +78,10 @@
 					<div class="col-sm-9">
 						<select
 							class="form-select"
-							v-model="poolCondition"
+							v-model="modelValue.condition"
 							:class="{
 								'border-warning':
-									poolCondition !== selectedTask.pool?.condition,
+									modelValue.condition !== selectedTask.pool?.condition,
 							}"
 						>
 							<option value="">-- Select --</option>
@@ -104,7 +104,8 @@
 							v-model="siteOwner.name"
 							:class="{
 								'border-warning':
-									siteOwner.name !== selectedTask.pool?.site.owner?.name,
+									siteOwner.name !==
+									(selectedTask.pool?.site.owner?.name ?? ''),
 							}"
 						/>
 					</div>
@@ -121,7 +122,8 @@
 							v-model="siteResident.name"
 							:class="{
 								'border-warning':
-									siteResident.name !== selectedTask.pool?.site.resident?.name,
+									siteResident.name !==
+									(selectedTask.pool?.site.resident?.name ?? ''),
 							}"
 						/>
 					</div>
@@ -156,30 +158,30 @@
 import { computed, ref, watch } from "vue";
 import MapLocator from "@/components/MapLocator.vue";
 import MapProxiedArcgisTile from "@/components/MapProxiedArcgisTile.vue";
-import { formatAddress } from "@/format";
 import { useSessionStore } from "@/store/session";
 import type { MapClickEvent, Marker } from "@/types";
 import { Bounds, Contact, Pool, ReviewTask, User } from "@/type/api";
 import type { Location } from "@/type/api";
 import { Camera } from "@/type/map";
 
+export interface ReviewTaskPoolForm {
+	address: string;
+	condition: string;
+	location: Location;
+	owner: string;
+	resident: string;
+}
 interface Props {
 	loading: boolean;
 	mapBounds?: Bounds;
 	mapFlyoverCamera: Camera;
 	mapMarkers: Marker[];
-	newPoolCondition: string;
-	newPoolLocation: Location;
+	modelValue: ReviewTaskPoolForm;
 	selectedTask?: ReviewTask;
 }
 const mapCamera = ref<Camera>(new Camera());
 const _mapFlyoverCamera = ref<Camera>(new Camera());
 const props = defineProps<Props>();
-const poolCondition = ref<string>("unknown");
-const poolLocation = ref<Location>({
-	latitude: 0,
-	longitude: 0,
-});
 const siteOwner = ref<Contact>(new Contact());
 const siteResident = ref<Contact>(new Contact());
 const session = useSessionStore();
diff --git a/ts/view/review/Pool.vue b/ts/view/review/Pool.vue
index 250f294a..0299ba6c 100644
--- a/ts/view/review/Pool.vue
+++ b/ts/view/review/Pool.vue
@@ -79,9 +79,8 @@ body {
 				:mapBounds="mapBounds || undefined"
 				:mapFlyoverCamera="mapFlyoverCamera"
 				:mapMarkers="mapMarkers"
-				:newPoolCondition="newPoolCondition"
-				:newPoolLocation="newPoolLocation"
 				:selectedTask="selectedTask"
+				v-model="reviewForm"
 			/>
 		</template>
 		<template #right>
@@ -103,8 +102,11 @@ import { useSessionStore } from "@/store/session";
 import maplibregl from "maplibre-gl";
 import ThreeColumn from "@/components/layout/ThreeColumn.vue";
 import ReviewPoolColumnAction from "@/components/ReviewPoolColumnAction.vue";
-import ReviewPoolColumnDetail from "@/components/ReviewPoolColumnDetail.vue";
+import ReviewPoolColumnDetail, {
+	ReviewTaskPoolForm,
+} from "@/components/ReviewPoolColumnDetail.vue";
 import ReviewPoolColumnList from "@/components/ReviewPoolColumnList.vue";
+import { formatAddress } from "@/format";
 import type { Changes } from "@/types";
 import { Bounds, Contact, Location, ReviewTask } from "@/type/api";
 import { Camera } from "@/type/map";
@@ -148,21 +150,31 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 // State
+const error = ref<string | null>(null);
+const loading = ref<boolean>(true);
+const mapBounds = ref<Bounds | null>(null);
 const mapFlyoverCamera = ref<Camera>(new Camera());
 const newPoolCondition = ref<string>("");
 const newPoolLocation = ref<Location>({ latitude: 0, longitude: 0 });
 const newOwnerName = ref<string>("");
 const newResidentName = ref<string>("");
-const error = ref<string | null>(null);
-const loading = ref<boolean>(true);
-const mapBounds = ref<Bounds | null>(null);
+const poolLocation = ref<Location>({
+	latitude: 0,
+	longitude: 0,
+});
+const reviewForm = ref<ReviewTaskPoolForm>({
+	address: "",
+	condition: "",
+	location: new Location(),
+	owner: "",
+	resident: "",
+});
 const selectedTaskID = ref<number | null>(null);
+const session = useSessionStore();
+const storeReviewTask = useStoreReviewTask();
 const submitting = ref<boolean>(false);
 const totalPending = ref<number>(0);
 
-const storeReviewTask = useStoreReviewTask();
-const session = useSessionStore();
-
 // Refs for map components
 const mapMultipoint = ref<any>(null);
 const mapTile = ref<any>(null);
@@ -253,11 +265,18 @@ function selectTask(id: number): void {
 		return;
 	}
 	console.log("selecting task", id, task);
-	mapFlyoverCamera.value = new Camera(pool.location, 15);
+	mapFlyoverCamera.value = new Camera(pool.location, 20);
 	newPoolCondition.value = pool.condition;
 	newPoolLocation.value = pool.location;
 	newOwnerName.value = pool.site.owner?.name ?? "";
 	newResidentName.value = pool.site.resident?.name ?? "";
+	reviewForm.value = {
+		address: formatAddress(task.address),
+		condition: pool.condition,
+		location: pool.location,
+		owner: pool.site.owner?.name ?? "",
+		resident: pool.site.resident?.name ?? "",
+	};
 
 	// Update map
 	updateMap(task);