Link up data to final page.
This commit is contained in:
parent
5b5a63114c
commit
dbc5db9727
5 changed files with 256 additions and 141 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue