57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<style scoped lang="scss">
|
|
.report-card {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.report-card:hover {
|
|
background-color: $secondary;
|
|
}
|
|
|
|
.report-card.active {
|
|
background-color: $primary;
|
|
color: white;
|
|
}
|
|
.reports-list {
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<!-- First row: icon, type badge, and time -->
|
|
<div
|
|
class="align-items-center justify-content-between list-group-item p-3 report-card"
|
|
:class="{ active: isSelected }"
|
|
>
|
|
<div class="row">
|
|
<div class="d-flex align-items-center">
|
|
<div class="col">
|
|
<i
|
|
class="bi fs-4 me-2"
|
|
:class="{ 'bi-envelope': contact.emails.length != 0 }"
|
|
/>
|
|
<i
|
|
class="bi fs-4 me-2"
|
|
:class="{ 'bi-phone': contact.phones.length != 0 }"
|
|
/>
|
|
</div>
|
|
<div class="col-6 text-end">
|
|
<small>{{ contact.name }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import TimeRelative from "@/components/TimeRelative.vue";
|
|
import Tooltip from "@/components/Tooltip.vue";
|
|
import { formatAddress, formatDate } from "@/format";
|
|
import { Contact } from "@/type/api";
|
|
interface Props {
|
|
contact: Contact;
|
|
isSelected: boolean;
|
|
}
|
|
const props = defineProps<Props>();
|
|
</script>
|