49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<template>
|
|
<div v-if="contact">
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-header bg-white pane-header">
|
|
Contact '{{ contact.name }}'
|
|
</div>
|
|
<div class="card-body">
|
|
<div v-if="contact.emails.length > 0">
|
|
<h1>Email Addresses</h1>
|
|
<ul>
|
|
<li v-for="(email, index) in contact.emails">{{ email }}</li>
|
|
</ul>
|
|
</div>
|
|
<div v-else>
|
|
<p>No email addresses</p>
|
|
</div>
|
|
<div v-if="contact.phones.length > 0">
|
|
<h1>Phone Numbers</h1>
|
|
<ul>
|
|
<li v-for="(phone, index) in contact.phones">
|
|
{{ phone.e164 }} {{ phone.can_sms }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-else>
|
|
<p>No phone numbers</p>
|
|
</div>
|
|
<div v-if="contact.messages.length > 0">
|
|
<CardMessageHistory
|
|
:messages="contact.messages"
|
|
ownIdentifier="+16235525879"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<p>select a contact</p>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Contact } from "@/type/api";
|
|
import CardMessageHistory from "@/components/CardMessageHistory.vue";
|
|
|
|
interface Props {
|
|
contact?: Contact;
|
|
}
|
|
const props = defineProps<Props>();
|
|
</script>
|