Add view for showing contact details.

ts/components/ReviewContactColumnDetail.vue

@@ -1,3 +1,40 @@
 <template>
-	<p>detail</p>
+	<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">
+					<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">
+					<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>

ts/components/ReviewContactColumnList.vue

@@ -75,7 +75,11 @@ interface Props {
 	contacts: Contact[] | undefined;
 	loading: boolean;
 }
+interface Emits {
+	"selection-change": [contact: Contact | undefined];
+}
 
+const emit = defineEmits<Emits>();
 const loading = ref(false);
 const props = defineProps<Props>();
 const searchTerm = ref("");
@@ -101,10 +105,6 @@ const handleClearFilters = (clearFilters: () => void) => {
 const handleContactClick = (contact: any) => {
 	console.log("Clicked contact:", contact);
 };
-const handleSelectionChange = (selectedContacts: Contact[]) => {
-	console.log("Selected contacts:", selectedContacts);
-	// Do something with the selected contacts
-};
 
 const items = computed((): Contact[] => {
 	if (props.contacts) {
@@ -112,4 +112,11 @@ const items = computed((): Contact[] => {
 	}
 	return [];
 });
+const handleSelectionChange = (selectedContacts: Contact[]) => {
+	if (selectedContacts.length > 0) {
+		emit("selection-change", selectedContacts[0]);
+	} else {
+		emit("selection-change", undefined);
+	}
+};
 </script>

ts/view/review/Contact.vue

@@ -4,10 +4,11 @@
 			<ReviewContactColumnList
 				:contacts="contacts"
 				:loading="storeResource.contact.loadingAll()"
+				@selection-change="handleSelectionChange"
 			/>
 		</template>
 		<template #center>
-			<ReviewContactColumnDetail />
+			<ReviewContactColumnDetail :contact="selectedContact" />
 		</template>
 		<template #right>
 			<ReviewContactColumnAction />
@@ -15,6 +16,7 @@
 	</ThreeColumn>
 </template>
 <script setup lang="ts">
+import { ref } from "vue";
 import { computedAsync } from "@vueuse/core";
 
 import ThreeColumn from "@/components/layout/ThreeColumn.vue";
@@ -22,9 +24,14 @@ import ReviewContactColumnAction from "@/components/ReviewContactColumnAction.vu
 import ReviewContactColumnDetail from "@/components/ReviewContactColumnDetail.vue";
 import ReviewContactColumnList from "@/components/ReviewContactColumnList.vue";
 import { useStoreResource } from "@/store/resource";
+import { Contact } from "@/type/api";
 
 const storeResource = useStoreResource();
 const contacts = computedAsync(() => {
 	return storeResource.contact.byAll();
 });
+const selectedContact = ref<Contact | undefined>(undefined);
+const handleSelectionChange = (selection: Contact | undefined) => {
+	selectedContact.value = selection;
+};
 </script>