From 262aa009c278ddda8136849413b018a7b667d2f8 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 16 Apr 2026 05:36:28 +0000
Subject: [PATCH] Avoid losing map context when selecting tasks

---
 ts/components/ReviewPoolColumnDetail.vue | 277 +++++++++++------------
 1 file changed, 134 insertions(+), 143 deletions(-)

diff --git a/ts/components/ReviewPoolColumnDetail.vue b/ts/components/ReviewPoolColumnDetail.vue
index a25d7099..5bb14849 100644
--- a/ts/components/ReviewPoolColumnDetail.vue
+++ b/ts/components/ReviewPoolColumnDetail.vue
@@ -12,152 +12,143 @@
 }
 </style>
 <template>
-	<!-- No Selection State -->
-	<div
-		v-if="!selectedTask"
-		class="h-100 d-flex align-items-center justify-content-center text-muted"
-	>
-		<div class="text-center">
-			<i class="bi bi-cursor-fill" style="font-size: 48px"></i>
-			<p class="mt-2">Select an entry from the list to review</p>
+	<div class="mb-4">
+		<!-- No Selection State -->
+		<div
+			v-show="!selectedTask"
+			class="h-100 align-items-center justify-content-center text-muted"
+		>
+			<div class="text-center">
+				<i class="bi bi-cursor-fill" style="font-size: 48px"></i>
+				<p class="mt-2">Select an entry from the list to review</p>
+			</div>
+		</div>
+		<div v-show="selectedTask !== undefined">
+			<h4 class="mb-3">Entry #{{ selectedTask?.id ?? "" }} Details</h4>
+
+			<div class="row mb-3">
+				<label class="col-sm-3 col-form-label fw-bold">Address:</label>
+				<div class="col-sm-9">
+					<input
+						type="text"
+						class="form-control"
+						:value="modelValue.address"
+						readonly
+					/>
+				</div>
+			</div>
+
+			<div class="row mb-3">
+				<label class="col-sm-3 col-form-label fw-bold">Longitude:</label>
+				<div class="col-sm-9">
+					<input
+						type="text"
+						class="form-control"
+						v-model="modelValue.location.longitude"
+						:class="{
+							'border-warning':
+								modelValue.location.longitude !==
+								selectedTask?.pool?.location?.longitude,
+						}"
+					/>
+				</div>
+			</div>
+
+			<div class="row mb-3">
+				<label class="col-sm-3 col-form-label fw-bold">Latitude:</label>
+				<div class="col-sm-9">
+					<input
+						type="text"
+						class="form-control"
+						v-model="modelValue.location.latitude"
+						:class="{
+							'border-warning':
+								modelValue.location.latitude !==
+								selectedTask?.pool?.location?.latitude,
+						}"
+					/>
+				</div>
+			</div>
+
+			<div class="row mb-3">
+				<label class="col-sm-3 col-form-label fw-bold">Pool Condition:</label>
+				<div class="col-sm-9">
+					<select
+						class="form-select"
+						v-model="modelValue.condition"
+						:class="{
+							'border-warning':
+								modelValue.condition !== selectedTask?.pool?.condition,
+						}"
+					>
+						<option value="">-- Select --</option>
+						<option value="blue">Blue</option>
+						<option value="dry">Dry</option>
+						<option value="false pool">False Pool</option>
+						<option value="unknown">Unknown</option>
+						<option value="green">Green</option>
+						<option value="murky">Murky</option>
+					</select>
+				</div>
+			</div>
+
+			<div class="row mb-3">
+				<label class="col-sm-3 col-form-label fw-bold">Owner Contact:</label>
+				<div class="col-sm-9">
+					<input
+						type="text"
+						class="form-control"
+						v-model="siteOwner.name"
+						:class="{
+							'border-warning':
+								siteOwner.name !== (selectedTask?.pool?.site.owner?.name ?? ''),
+						}"
+					/>
+				</div>
+			</div>
+
+			<div class="row mb-4">
+				<label class="col-sm-3 col-form-label fw-bold">
+					Resident Contact:
+				</label>
+				<div class="col-sm-9">
+					<input
+						type="text"
+						class="form-control"
+						v-model="siteResident.name"
+						:class="{
+							'border-warning':
+								siteResident.name !==
+								(selectedTask?.pool?.site.resident?.name ?? ''),
+						}"
+					/>
+				</div>
+			</div>
 		</div>
 	</div>
 
-	<!-- Selected Task Details -->
-	<div v-show="selectedTask">
-		<div class="mb-4">
-			<h4 class="mb-3">Entry #{{ selectedTask?.id ?? "" }} Details</h4>
+	<!-- Map Components -->
+	<div class="map-container" v-if="session.organization">
+		<MapLocator
+			@click="doPoolLocation"
+			:markers="mapMarkers"
+			:useSatellite="true"
+			v-model="mapCamera"
+		></MapLocator>
+	</div>
+	<div v-else>
+		<p>loading...</p>
+	</div>
 
-			<form @submit.prevent>
-				<div class="row mb-3">
-					<label class="col-sm-3 col-form-label fw-bold">Address:</label>
-					<div class="col-sm-9">
-						<input
-							type="text"
-							class="form-control"
-							:value="modelValue.address"
-							readonly
-						/>
-					</div>
-				</div>
-
-				<div class="row mb-3">
-					<label class="col-sm-3 col-form-label fw-bold">Longitude:</label>
-					<div class="col-sm-9">
-						<input
-							type="text"
-							class="form-control"
-							v-model="modelValue.location.longitude"
-							:class="{
-								'border-warning':
-									modelValue.location.longitude !==
-									selectedTask?.pool?.location?.longitude,
-							}"
-						/>
-					</div>
-				</div>
-
-				<div class="row mb-3">
-					<label class="col-sm-3 col-form-label fw-bold">Latitude:</label>
-					<div class="col-sm-9">
-						<input
-							type="text"
-							class="form-control"
-							v-model="modelValue.location.latitude"
-							:class="{
-								'border-warning':
-									modelValue.location.latitude !==
-									selectedTask?.pool?.location?.latitude,
-							}"
-						/>
-					</div>
-				</div>
-
-				<div class="row mb-3">
-					<label class="col-sm-3 col-form-label fw-bold">Pool Condition:</label>
-					<div class="col-sm-9">
-						<select
-							class="form-select"
-							v-model="modelValue.condition"
-							:class="{
-								'border-warning':
-									modelValue.condition !== selectedTask?.pool?.condition,
-							}"
-						>
-							<option value="">-- Select --</option>
-							<option value="blue">Blue</option>
-							<option value="dry">Dry</option>
-							<option value="false pool">False Pool</option>
-							<option value="unknown">Unknown</option>
-							<option value="green">Green</option>
-							<option value="murky">Murky</option>
-						</select>
-					</div>
-				</div>
-
-				<div class="row mb-3">
-					<label class="col-sm-3 col-form-label fw-bold">Owner Contact:</label>
-					<div class="col-sm-9">
-						<input
-							type="text"
-							class="form-control"
-							v-model="siteOwner.name"
-							:class="{
-								'border-warning':
-									siteOwner.name !==
-									(selectedTask?.pool?.site.owner?.name ?? ''),
-							}"
-						/>
-					</div>
-				</div>
-
-				<div class="row mb-4">
-					<label class="col-sm-3 col-form-label fw-bold">
-						Resident Contact:
-					</label>
-					<div class="col-sm-9">
-						<input
-							type="text"
-							class="form-control"
-							v-model="siteResident.name"
-							:class="{
-								'border-warning':
-									siteResident.name !==
-									(selectedTask?.pool?.site.resident?.name ?? ''),
-							}"
-						/>
-					</div>
-				</div>
-			</form>
-		</div>
-
-		<!-- Map Components -->
-		<div class="map-container" v-if="session.organization">
-			<MapLocator
-				@click="doPoolLocation"
-				:markers="mapMarkers"
-				:useSatellite="true"
-				v-model="mapCamera"
-			></MapLocator>
-		</div>
-		<div v-else>
-			<p>loading...</p>
-		</div>
-
-		<div
-			class="map-container"
-			v-if="session.organization && session.urls"
-			v-show="selectedTask?.pool"
-		>
-			<MapProxiedArcgisTile
-				@click="doPoolLocation"
-				:markers="mapMarkers"
-				:organizationId="session.organization.id"
-				:tegola="session.urls!.tegola"
-				:urlTiles="session.urls!.tile"
-				v-model="_mapFlyoverCamera"
-			></MapProxiedArcgisTile>
-		</div>
+	<div class="map-container" v-if="session.organization && session.urls">
+		<MapProxiedArcgisTile
+			@click="doPoolLocation"
+			:markers="mapMarkers"
+			:organizationId="session.organization.id"
+			:tegola="session.urls!.tegola"
+			:urlTiles="session.urls!.tile"
+			v-model="_mapFlyoverCamera"
+		></MapProxiedArcgisTile>
 	</div>
 </template>
 <script setup lang="ts">
@@ -186,7 +177,7 @@ interface Props {
 	mapFlyoverCamera: Camera;
 	mapMarkers: Marker[];
 	modelValue: ReviewTaskPoolForm;
-	selectedTask?: ReviewTask;
+	selectedTask: ReviewTask | undefined;
 }
 const emit = defineEmits<Emits>();
 const mapCamera = ref<Camera>(new Camera());