Get review detail UI to show without crashing

It doesn't fully work yet though.
This commit is contained in:
Eli Ribble 2026-03-28 12:35:12 -07:00
parent 9921618c12
commit 9a9371301c
No known key found for this signature in database
5 changed files with 100 additions and 107 deletions

View file

@ -97,8 +97,7 @@ const initializeMap = () => {
type: "raster",
});
emit("load", { map: getCurrentInstance() });
/*
map.value.on("click", (e) => {
emit("map-click", {
lng: e.lngLat.lng,
@ -107,6 +106,7 @@ const initializeMap = () => {
point: e.point,
});
});
*/
});
} catch (e) {
console.error("hey dummy", e);
@ -150,21 +150,6 @@ const setMarkers = (newMarkers) => {
}
};
const getCurrentInstance = () => {
// Return an object with the public methods
return {
addLayer,
addSource,
jumpTo,
on,
once,
queryRenderedFeatures,
fitBounds,
setLayoutProperty,
setMarkers,
};
};
// Expose methods to parent components
defineExpose({
addLayer,
@ -188,10 +173,3 @@ onBeforeUnmount(() => {
}
});
</script>
<style scoped>
.map-container {
height: 100%;
width: 100%;
}
</style>

View file

@ -34,9 +34,11 @@
<input
type="text"
class="form-control"
v-model="form.longitude"
v-model="selectedTaskChanges.location.longitude"
:class="{
'border-warning': form.longitude !== originalValues.longitude,
'border-warning':
selectedTaskChanges.location.longitude !==
selectedTask.location.longitude,
}"
/>
</div>
@ -48,9 +50,11 @@
<input
type="text"
class="form-control"
v-model="form.latitude"
v-model="selectedTaskChanges.location.latitude"
:class="{
'border-warning': form.latitude !== originalValues.latitude,
'border-warning':
selectedTaskChanges.location?.latitude !==
selectedTask.location?.latitude,
}"
/>
</div>
@ -61,9 +65,11 @@
<div class="col-sm-9">
<select
class="form-select"
v-model="form.condition"
v-model="selectedTaskChanges.pool.condition"
:class="{
'border-warning': form.condition !== originalValues.condition,
'border-warning':
selectedTaskChanges.pool.condition !==
selectedTask.pool.condition,
}"
>
<option value="">-- Select --</option>
@ -77,22 +83,23 @@
</div>
</div>
<div v-if="form.ownerContact" class="row mb-3">
<div v-if="selectedTaskChanges.pool.ownerContact" 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="form.ownerContact"
v-model="selectedTaskChanges.pool.owner_contact"
:class="{
'border-warning':
form.ownerContact !== originalValues.ownerContact,
selectedTaskChanges.pool.owner_contact !==
selectedTask.pool.owner_contact,
}"
/>
</div>
</div>
<div v-if="form.residentContact" class="row mb-4">
<div v-if="selectedTaskChanges.pool.resident_contact" class="row mb-4">
<label class="col-sm-3 col-form-label fw-bold">
Resident Contact:
</label>
@ -100,10 +107,11 @@
<input
type="text"
class="form-control"
v-model="form.residentContact"
v-model="selectedTaskChanges.pool.resident_contact"
:class="{
'border-warning':
form.residentContact !== originalValues.residentContact,
selectedTaskChanges.pool.resident_contact !==
selectedTask.pool.resident_contact,
}"
/>
</div>
@ -116,12 +124,14 @@
<MapMultipoint
ref="mapMultipoint"
id="map"
:organization-id="organizationId"
:tegola="tegolaUrl"
:xmin="serviceArea.xmin"
:ymin="serviceArea.ymin"
:xmax="serviceArea.xmax"
:ymax="serviceArea.ymax"
:bounds="mapBounds"
:markers="mapMarkers"
:organizationId="user.organization.id"
:tegola="user.urls.tegola"
:xmin="user.organization.service_area?.min.x ?? 0"
:ymin="user.organization.service_area?.min.y ?? 0"
:xmax="user.organization.service_area?.max.x ?? 0"
:ymax="user.organization.service_area?.max.y ?? 0"
></MapMultipoint>
</div>
@ -129,12 +139,11 @@
<MapProxiedArcgisTile
ref="mapTile"
class="map"
:organization-id="organizationId"
:tegola="tegolaUrl"
:tiles-url="tilesUrl"
:latitude="selectedTask.location.latitude"
:longitude="selectedTask.location.longitude"
@map-click="updatePoolLocation"
:location="selectedTask.location"
:organization-id="user.organization.id"
:tegola="user.urls.tegola"
:urlTiles="user.urls.tile"
@map-click="doPoolLocation"
></MapProxiedArcgisTile>
</div>
</div>
@ -142,10 +151,19 @@
<script setup lang="ts">
import MapMultipoint from "@/components/MapMultipoint.vue";
import MapProxiedArcgisTile from "@/components/MapProxiedArcgisTile.vue";
import { formatAddress } from "@/format";
import ReviewTask from "@/types";
interface Props {
loading: boolean;
mapBounds?: Bounds;
mapMarkers: Marker[];
selectedTaskChanges: ReviewTask;
selectedTask?: ReviewTask;
user: User | null;
}
const props = defineProps<Props>();
function doPoolLocation(lat, lng) {
console.log("pool location", lat, lng);
}
</script>

View file

@ -1,3 +1,20 @@
<style scoped lang="scss">
.entry-item {
padding: 15px;
border-bottom: 1px solid #e9ecef;
cursor: pointer;
transition: background-color 0.2s;
}
.entry-item:hover {
background-color: #f8f9fa;
}
.entry-item.active {
background-color: #e7f3ff;
border-left: 4px solid #0d6efd;
}
</style>
<template>
<!-- Error Alert -->
<div v-if="error" class="mt-3 alert alert-danger alert-dismissible">
@ -28,7 +45,7 @@
:key="task.id"
class="entry-item"
:class="{ active: selectedTaskID === task.id }"
@click="selectTask(task)"
@click="emit('doSelectTask', task.id)"
>
<div class="d-flex justify-content-between align-items-start">
<div>
@ -45,11 +62,15 @@
<script setup lang="ts">
import { formatAddress } from "@/format";
interface Emits {
(e: "doSelectTask", id: int): void;
}
interface Props {
error: string | null;
selectedTaskID: int | null;
tasks: ReviewTask[];
total: int;
}
const emit = defineEmits<Emits>();
const props = defineProps<Props>();
</script>