Add compliance card detail information display
This commit is contained in:
parent
72626e8dd0
commit
060d0dd95f
2 changed files with 101 additions and 0 deletions
|
|
@ -16,6 +16,10 @@
|
|||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<div>
|
||||
<h5 class="mb-1">
|
||||
<span v-if="report.type === 'compliance'">
|
||||
<i class="bi bi-postcard icon-compliance"></i>
|
||||
Compliance Report
|
||||
</span>
|
||||
<span v-if="report.type === 'nuisance'">
|
||||
<i class="bi bi-mosquito icon-nuisance"></i>
|
||||
Nuisance Report
|
||||
|
|
@ -88,6 +92,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="report instanceof PublicReportCompliance">
|
||||
<PublicReportCardCompliance :report="report" />
|
||||
</div>
|
||||
|
||||
<div v-if="report instanceof PublicReportNuisance">
|
||||
<PublicReportCardNuisance :report="report" />
|
||||
</div>
|
||||
|
|
@ -136,11 +144,13 @@
|
|||
import { computed } from "vue";
|
||||
import MapMultipoint from "@/components/MapMultipoint.vue";
|
||||
import TimeRelative from "@/components/TimeRelative.vue";
|
||||
import PublicReportCardCompliance from "@/components/PublicReportCardCompliance.vue";
|
||||
import PublicReportCardNuisance from "@/components/PublicReportCardNuisance.vue";
|
||||
import PublicReportCardWater from "@/components/PublicReportCardWater.vue";
|
||||
import { formatAddress } from "@/format";
|
||||
import {
|
||||
PublicReport,
|
||||
PublicReportCompliance,
|
||||
PublicReportNuisance,
|
||||
PublicReportWater,
|
||||
} from "@/type/api";
|
||||
|
|
|
|||
91
ts/components/PublicReportCardCompliance.vue
Normal file
91
ts/components/PublicReportCardCompliance.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div class="card-header bg-danger bg-opacity-10">
|
||||
<i class="bi bi-exclamation-triangle"></i> Compliance Details
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-12">
|
||||
<label
|
||||
class="form-label small mb-0"
|
||||
v-if="report.permission_type == 'granted'"
|
||||
>
|
||||
<i class="bi bi-check"></i> Access granted for tech to enter even if
|
||||
not at home.
|
||||
</label>
|
||||
<label
|
||||
class="form-label small mb-0"
|
||||
v-else-if="report.permission_type == 'with-owner'"
|
||||
>
|
||||
<i class="bi bi-info-square"></i> Access granted for tech, but owner
|
||||
must be present
|
||||
</label>
|
||||
<label
|
||||
class="form-label small mb-0"
|
||||
v-else-if="report.permission_type == 'denied'"
|
||||
>
|
||||
<i class="bi bi-exclamation-triangle"></i> Access denied
|
||||
</label>
|
||||
<label
|
||||
class="form-label small mb-0"
|
||||
v-else-if="report.permission_type == 'unselected'"
|
||||
>
|
||||
<i class="bi bi-question"></i> No access information provided
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-md-6" v-if="report.wants_scheduled">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-clock"></i> Owner requests a scheduled visit
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-key"></i> Access Instructions
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.access_instructions || "none" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-clock"></i> Availability Notes
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.availability_notes || "none" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-pencil-square"></i> Comments
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.comments || "none" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0">
|
||||
<i class="bi bi-key"></i> Gate Code
|
||||
</label>
|
||||
<div class="p-2 bg-light rounded">
|
||||
{{ report.gate_code || "none" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0" v-if="report.has_dog">
|
||||
<i class="bi bi-dog"></i> Has Dog
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small mb-0" v-if="report.has_dog">
|
||||
<i class="bi bi-dog"></i> Has Dog
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PublicReportCompliance } from "@/type/api";
|
||||
interface Props {
|
||||
report: PublicReportCompliance;
|
||||
}
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue