Eli Ribble
f957dc6982
The key item here is that comms.phone and comms.email are meant to represent a real global namespace, but comms.contact is meant to represent an organization-specific namespace. This means the mapping, comms.contact_phone and comms.contact_email can't key off the global namespace. Otherwise the contact namespace would implicitly be global.
42 lines
926 B
Vue
42 lines
926 B
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>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<p>select a contact</p>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Contact } from "@/type/api";
|
|
|
|
interface Props {
|
|
contact?: Contact;
|
|
}
|
|
const props = defineProps<Props>();
|
|
</script>
|