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

Add support to communication list view for compliance entries

Browse source
This commit is contained in:
Eli Ribble 2026-04-27 20:06:44 +00:00
parent 9c392e5791
commit 1dba58472b
No known key found for this signature in database
2 changed files with 79 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

58
ts/components/CommunicationColumnList.vue
View file

@ -72,60 +72,7 @@
}"
@click="handleClick(comm.id)"
>
<!-- First row: icon, type badge, and time -->
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<i
v-if="comm.type === 'publicreport.nuisance'"
class="bi bi-mosquito icon-nuisance fs-4 me-2"
>
</i>
<i
v-if="comm.type === 'publicreport.water'"
class="bi bi-droplet-fill icon-standing-water fs-4 me-2"
></i>
<span
class="badge"
:class="
comm.type === 'publicreport.nuisance'
? 'bg-danger'
: 'bg-info'
"
>
{{
comm.type === "publicreport.nuisance"
? "Nuisance"
: "Standing Water"
}}
</span>
</div>
<small>
<TimeRelative :time="comm.created" />
</small>
</div>
<!-- Details section: full width -->
<div>
<div>
<i class="bi bi-geo-alt text-muted"></i>
<span class="fw-medium">{{
comm.public_report?.address.postal_code
}}</span>
</div>
<small>{{ formatAddress(comm.public_report?.address) }}</small>
<div
v-if="
comm.public_report?.images &&
comm.public_report?.images.length > 0
"
class="mt-1"
>
<small class="text-muted">
<i class="bi bi-camera"></i>
{{ comm.public_report.images.length }} photo(s)
</small>
</div>
</div>
<ListCardPublicReport :comm="comm" />
</div>
</div>
</div>
@ -142,8 +89,7 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import TimeRelative from "@/components/TimeRelative.vue";
import { formatAddress } from "@/format";
import ListCardPublicReport from "@/components/ListCardPublicReport.vue";
import { Communication, LogEntry, PublicReport } from "@/type/api";
interface Props {

77
ts/components/ListCardPublicReport.vue Normal file
View file

@ -0,0 +1,77 @@
<template>
<!-- First row: icon, type badge, and time -->
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<i class="bi fs-4 me-2" :class="iconForType()"></i>
<span class="badge" :class="colorForType()">
{{ titleForType() }}
</span>
</div>
<small>
<TimeRelative :time="comm.created" />
</small>
</div>
<!-- Details section: full width -->
<div>
<div>
<i class="bi bi-geo-alt text-muted"></i>
<span class="fw-medium">{{
comm.public_report?.address.postal_code
}}</span>
</div>
<small>{{ formatAddress(comm.public_report?.address) }}</small>
<div
v-if="comm.public_report?.images && comm.public_report?.images.length > 0"
class="mt-1"
>
<small class="text-muted">
<i class="bi bi-camera"></i>
{{ comm.public_report.images.length }} photo(s)
</small>
</div>
</div>
</template>
<script setup lang="ts">
import TimeRelative from "@/components/TimeRelative.vue";
import { formatAddress } from "@/format";
import { Communication } from "@/type/api";
interface Props {
comm: Communication;
}
const props = defineProps<Props>();
function colorForType(): string {
if (props.comm.type == "publicreport.compliance") {
return "bg-secondary";
} else if (props.comm.type == "publicreport.nuisance") {
return "bg-danger";
} else if (props.comm.type == "publicreport.water") {
return "bg-info";
} else {
return "";
}
}
function iconForType(): string {
if (props.comm.type == "publicreport.compliance") {
return "bi-postcard";
} else if (props.comm.type == "publicreport.nuisance") {
return "bi-mosquito";
} else if (props.comm.type == "publicreport.water") {
return "bi-droplet-fill";
} else {
return "";
}
}
function titleForType(): string {
if (props.comm.type == "publicreport.compliance") {
return "Compliance";
} else if (props.comm.type == "publicreport.nuisance") {
return "Nuisance";
} else if (props.comm.type == "publicreport.water") {
return "Standing Water";
} else {
return "Unknown";
}
}
</script>