Link up data to final page.

This commit is contained in:
Eli Ribble 2026-04-09 20:55:30 +00:00
parent 5b5a63114c
commit dbc5db9727
No known key found for this signature in database
5 changed files with 256 additions and 141 deletions

View file

@ -103,102 +103,161 @@
</p>
</div>
<form id="submit-form" method="POST" action="/compliance/submit">
<!-- Response Summary -->
<div class="mb-4">
<h3 class="h6 mb-3 text-muted">Your Response Summary</h3>
<!-- Response Summary -->
<div class="mb-4">
<h3 class="h6 mb-3 text-muted">Your Response Summary</h3>
<!-- Address -->
<div class="summary-section">
<h3><i class="bi bi-geo-alt"></i> Property Address</h3>
<div class="summary-item">
<div class="summary-value">
123 Main St
<span class="status-badge status-provided ms-2">
<i class="bi bi-check-circle"></i> Provided
</span>
</div>
<!-- Address -->
<div class="summary-section">
<h3><i class="bi bi-geo-alt"></i> Property Address</h3>
<div class="summary-item">
<div class="summary-value" v-if="compliance.locator?.address.raw">
{{ compliance.locator.address.raw }}
<span class="status-badge status-provided ms-2">
<i class="bi bi-check-circle"></i> Provided
</span>
</div>
</div>
<!-- Photos -->
<div class="summary-section">
<h3><i class="bi bi-camera"></i> Photos</h3>
<div class="summary-item">
<div class="summary-value">
<span class="photo-count">
<i class="bi bi-images"></i>
3 photos uploaded
</span>
</div>
<div class="summary-value mt-2">
<div class="summary-label">Comments:</div>
<small class="text-muted">These are my comments</small>
</div>
</div>
</div>
<!-- Access Permission -->
<div class="summary-section">
<h3><i class="bi bi-door-open"></i> Property Access</h3>
<div class="summary-item">
<div class="summary-value">
<span class="status-badge status-provided">
<i class="bi bi-check-circle"></i> Entry permitted without
owner present
</span>
</div>
</div>
</div>
<!-- Contact Information -->
<div class="summary-section">
<h3><i class="bi bi-person"></i> Contact Information</h3>
<div class="summary-item">
<div class="summary-label">Name</div>
<div class="summary-value">Kai Fu Lee</div>
</div>
<div class="summary-item">
<div class="summary-label">Phone</div>
<div class="summary-value">
123-555-6789
<small class="text-muted">(texting OK)</small>
</div>
</div>
<div class="summary-item">
<div class="summary-label">Email</div>
<div class="summary-value">me@aol.com</div>
<div class="summary-value" v-else>
<span class="status-badge status-not-provided ms-2">
<i class="bi bi-x-circle"></i> Not Provided
</span>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="d-grid gap-2 mt-4">
<RouterLink class="btn btn-primary btn-lg submit-btn" to="complete">
<i class="bi bi-check-circle"></i>
Submit Response
</RouterLink>
<RouterLink class="btn btn-outline-secondary" to="process">
Back
</RouterLink>
<!-- Photos -->
<div class="summary-section">
<h3><i class="bi bi-camera"></i> Photos</h3>
<div class="summary-item">
<div class="summary-value">
<span class="photo-count" v-if="compliance.images.length > 0">
<i class="bi bi-images"></i>
{{ compliance.images.length }} photo{{
compliance.images.length > 1 ? "s" : ""
}}
uploaded
</span>
<span class="photo-count status-badge status-not-provided" v-else>
<i class="bi bi-x-circle"></i> Not Provided
</span>
</div>
<div class="summary-value mt-2" v-if="compliance.comments">
<div class="summary-label">Comments:</div>
<small class="text-muted">{{ compliance.comments }}</small>
</div>
</div>
</div>
<div class="text-center mt-3">
<small class="text-muted">
By submitting, you confirm the information provided is accurate to
the best of your knowledge.
</small>
<!-- Access Permission -->
<div class="summary-section">
<h3><i class="bi bi-door-open"></i> Property Access</h3>
<div class="summary-item">
<div class="summary-value">
<span
class="status-badge status-provided"
v-if="compliance.permission?.access == PermissionAccess.GRANTED"
>
<i class="bi bi-check-circle"></i> Entry permitted without owner
present
</span>
<span
class="status-badge status-provided"
v-else-if="
compliance.permission?.access == PermissionAccess.WITH_OWNER
"
>
<i class="bi bi-check-circle"></i> Entry permitted with owner
present
</span>
<span
class="status-badge status-not-provided"
v-else-if="
compliance.permission?.access == PermissionAccess.DENIED
"
>
<i class="bi bi-x-circle"></i> Entry denied
</span>
<span class="status-badge status-not-provided" v-else>
<i class="bi bi-x-circle"></i> Not provided
</span>
</div>
</div>
</div>
</form>
<!-- Contact Information -->
<div class="summary-section">
<h3><i class="bi bi-person"></i> Contact Information</h3>
<div class="summary-item">
<div class="summary-label">Name</div>
<div class="summary-value" v-if="compliance.contact?.name">
{{ compliance.contact.name }}
</div>
<div class="summary-value status-badge status-not-provided" v-else>
<i class="bi bi-x-circle"></i> Not provided
</div>
</div>
<div class="summary-item">
<div class="summary-label">Phone</div>
<div class="summary-value" v-if="compliance.contact?.phone">
{{ compliance.contact.phone }}
<small class="text-muted" v-if="compliance.contact?.can_text"
>(texting OK)</small
>
</div>
<div class="summary-value status-badge status-not-provided" v-else>
<i class="bi bi-x-circle"></i> Not provided
</div>
</div>
<div class="summary-item">
<div class="summary-label">Email</div>
<div class="summary-value" v-if="compliance.contact?.email">
{{ compliance.contact?.email }}
</div>
<div class="summary-value status-badge status-not-provided" v-else>
<i class="bi bi-x-circle"></i> Not provided
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="d-flex gap-2 mt-4">
<RouterLink class="btn btn-outline-secondary" to="process">
Back
</RouterLink>
<button class="btn btn-primary flex-grow-1" @click="doContinue()">
<i class="bi bi-check-circle"></i>
Submit Response
</button>
</div>
<div class="text-center mt-3">
<small class="text-muted">
By submitting, you confirm the information provided is accurate to the
best of your knowledge.
</small>
</div>
</main>
</div>
</template>
<script setup lang="ts">
import type { District } from "@/type/api";
import { router } from "@/rmo/router";
import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
import { type District, PermissionAccess } from "@/type/api";
import type { Compliance } from "@/rmo/view/Compliance.vue";
interface Emits {
(e: "doSubmit"): void;
}
interface Props {
compliance: Compliance;
district: District;
}
const emit = defineEmits<Emits>();
const props = defineProps<Props>();
function doContinue() {
emit("doSubmit");
router.push("./complete");
}
</script>