Gleipnir/nidus-sync
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

RMO frontend checkpoint

Browse source 
* Create a nwe AddressAndMapLocator which abstracts out the behavior of
   selecting a location
 * Fix the overlay causing render errors on the MapLocator by getting
   rid of the overlay and just using a lock indicator
 * Fix MapLocator zooming in to the wrong place by not framing the
   markers
 * Remove Latlng from platform and just use Location with optional
   accuracy
 * Use nested types with form-encoded POST
 * Fix styles on water report page
This commit is contained in:
Eli Ribble 2026-04-09 17:21:35 +00:00
parent cb9e5146bf
commit 9dccd21cee
No known key found for this signature in database
25 changed files with 828 additions and 598 deletions
Download patch file Download diff file Expand all files Collapse all files

76
ts/rmo/content/compliance/Address.vue
View file

@ -1,21 +1,3 @@
<style scoped>
.map-placeholder {
width: 100%;
height: 250px;
background-color: #e9ecef;
border: 2px dashed #6c757d;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #6c757d;
font-size: 14px;
}
#address-input {
font-size: 16px;
}
</style>
<template>
<div class="container-fluid px-3 py-3">
<HeaderCompliance :district="district" />
@ -28,53 +10,37 @@
Please enter the address so we can match your response with our records.
</p>
<form id="address-form" method="POST" action="/compliance/address">
<div class="mb-4">
<label for="address-input" class="form-label fw-semibold">
Property Address
</label>
<input
type="text"
class="form-control form-control-lg"
id="address-input"
name="address"
placeholder="Start typing your address..."
autocomplete="off"
data-autocomplete="true"
required
/>
<div class="form-text">
Begin typing and select your address from the suggestions
</div>
</div>
<AddressAndMapLocator v-model="locator" />
<!-- Map Placeholder -->
<div class="mb-4">
<label class="form-label fw-semibold">Location Preview</label>
<div class="map-placeholder" id="map-container">
<span>Map will appear here after address is selected</span>
</div>
</div>
<!-- Navigation Buttons -->
<div class="d-flex gap-2 mt-4">
<RouterLink class="btn btn-outline-secondary" to="../compliance">
Back
</RouterLink>
<RouterLink class="btn btn-primary flex-grow-1" to="./concern">
Continue
</RouterLink>
</div>
</form>
<div class="d-flex gap-2 mt-4">
<RouterLink class="btn btn-outline-secondary" to="../compliance">
Back
</RouterLink>
<button class="btn btn-primary flex-grow-1" @click="doContinue">
Continue
</button>
</div>
</main>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
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 { Locator } from "@/type/map";
interface Emits {
(e: "doLocator", locator: Locator | null): void;
}
interface Props {
district: District;
}
const emit = defineEmits<Emits>();
const error = ref<string>("");
const props = defineProps<Props>();
const locator = ref<Locator | null>(null);
function doContinue() {
emit("doLocator", locator.value);
}
</script>