Eli Ribble
a2b8527d91
This is useful because everywhere that we use the AddressAndMapLocator component we also want to use the user's location and we want to zoom the map based on their location. Instead of tracking this externally in 3 places we just pull it into the component.
78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<template>
|
|
<div class="container-fluid px-3 py-3">
|
|
<HeaderCompliance :district="district" />
|
|
<!-- Progress Bar -->
|
|
<ProgressBarCompliance :step="2" />
|
|
<main>
|
|
<h2 class="h4 mb-3">Confirm the property address</h2>
|
|
|
|
<p class="text-muted mb-4">
|
|
Please enter the address so we can match your response with our records.
|
|
</p>
|
|
|
|
<AddressAndMapLocator :initialCamera="initialCamera" v-model="locator" />
|
|
|
|
<div class="d-flex gap-2 mt-4">
|
|
<RouterLink
|
|
class="btn btn-outline-secondary"
|
|
:to="routes.ComplianceIntro(props.publicID)"
|
|
>
|
|
Back
|
|
</RouterLink>
|
|
<button class="btn btn-primary flex-grow-1" @click="doContinue">
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from "vue";
|
|
|
|
import { router } from "@/rmo/route/config";
|
|
import type { District, PublicReportCompliance } 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 { Camera, Locator } from "@/type/map";
|
|
import { useRoutes } from "@/rmo/route/use";
|
|
|
|
interface Emits {
|
|
(e: "doAddress"): void;
|
|
(e: "update:modelValue", value: PublicReportCompliance): void;
|
|
}
|
|
interface Props {
|
|
district: District;
|
|
modelValue: PublicReportCompliance;
|
|
publicID: string;
|
|
}
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const error = ref<string>("");
|
|
const locator = ref<Locator>(new Locator());
|
|
const props = defineProps<Props>();
|
|
const initialCamera = computed((): Camera | undefined => {
|
|
if (props.modelValue.location) {
|
|
return {
|
|
location: props.modelValue.location,
|
|
zoom: 15,
|
|
};
|
|
}
|
|
return undefined;
|
|
});
|
|
const routes = useRoutes();
|
|
function doContinue() {
|
|
props.modelValue.address = locator.value.address;
|
|
props.modelValue.location = locator.value.location;
|
|
emit("update:modelValue", props.modelValue);
|
|
emit("doAddress");
|
|
if (props.modelValue.concerns.length > 0) {
|
|
router.push(routes.ComplianceConcern(props.publicID));
|
|
} else {
|
|
router.push(routes.ComplianceEvidence(props.publicID));
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
locator.value.address = props.modelValue.address;
|
|
});
|
|
</script>
|