nidus-sync/ts/components/ReviewContactColumnDetail.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>