Show message history in contact review page.

ts/components/CardMessageHistory.vue

@@ -65,9 +65,7 @@
 
 <template>
 	<div class="card mb-3">
-		<div
-			class="card-header d-flex justify-content-between align-items-center"
-		>
+		<div class="card-header d-flex justify-content-between align-items-center">
 			<span>
 				<i class="bi bi-chat-dots"></i>
 				Message History
@@ -87,17 +85,13 @@
 					:key="idx"
 					class="message-item"
 					:class="
-						isOwn(msg)
-							? 'message-item-outgoing'
-							: 'message-item-incoming'
+						isOwn(msg) ? 'message-item-outgoing' : 'message-item-incoming'
 					"
 				>
 					<div
 						class="message-bubble"
 						:class="
-							isOwn(msg)
-								? 'message-bubble-outgoing'
-								: 'message-bubble-incoming'
+							isOwn(msg) ? 'message-bubble-outgoing' : 'message-bubble-incoming'
 						"
 					>
 						<div class="message-content">
@@ -106,20 +100,12 @@
 						<div class="message-meta">
 							<TimeRelative :time="msg.created" />
 							<span
-								v-if="
-									ownIdentifier &&
-									msg.source &&
-									msg.destination
-								"
+								v-if="ownIdentifier && msg.source && msg.destination"
 								class="message-phone"
 							>
 								&middot;
-								{{ isOwn(msg) ? 'to' : 'from' }}
-								{{
-									isOwn(msg)
-										? msg.destination
-										: msg.source
-								}}
+								{{ isOwn(msg) ? "to" : "from" }}
+								{{ isOwn(msg) ? msg.destination : msg.source }}
 							</span>
 						</div>
 					</div>
@@ -145,7 +131,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const sortedMessages = computed(() => {
 	return [...props.messages].sort(
-		(a, b) => a.created.getTime() - b.created.getTime(),
+		(a: Message, b: Message) => a.created.getTime() - b.created.getTime(),
 	);
 });
 

ts/components/ReviewContactColumnDetail.vue

@@ -25,6 +25,12 @@
 				<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>
@@ -34,6 +40,7 @@
 </template>
 <script setup lang="ts">
 import { Contact } from "@/type/api";
+import CardMessageHistory from "@/components/CardMessageHistory.vue";
 
 interface Props {
 	contact?: Contact;

ts/type/api.ts

@@ -78,28 +78,38 @@ export class Bounds {
 }
 export interface ContactOptions {
 	emails?: string[];
+	messages?: Message[];
 	name?: string;
 	phones?: Phone[];
 	uri?: string;
 }
 export class Contact {
 	emails: string[];
+	messages: Message[];
 	name: string;
 	phones: Phone[];
 	uri: string;
 	constructor(options?: ContactOptions) {
 		this.emails = options?.emails ?? [];
+		this.messages = options?.messages ?? [];
 		this.name = options?.name ?? "";
 		this.phones = options?.phones ?? [];
 		this.uri = options?.uri ?? "";
 	}
 	static fromJSON(json: ContactDTO): Contact {
-		return new Contact(json);
+		return new Contact({
+			emails: json.emails,
+			messages: json.messages.map((m: MessageDTO) => Message.fromJSON(m)),
+			name: json.name,
+			phones: json.phones,
+			uri: json.uri,
+		});
 	}
 }
 export interface ContactDTO {
-	name: string;
 	emails: string[];
+	messages: MessageDTO[];
+	name: string;
 	phones: Phone[];
 	uri: string;
 }
@@ -715,9 +725,9 @@ export interface Site {
 	leads: Lead[];
 	notes: string;
 	organization_id: number;
-	owner?: Contact;
+	owner?: ContactSimple;
 	parcel: Parcel;
-	resident?: Contact;
+	resident?: ContactSimple;
 	resident_owned: boolean;
 	tags: Map<string, string>;
 	version: number;
@@ -725,7 +735,7 @@ export interface Site {
 export interface ReviewTaskPool {
 	condition: string;
 	location: Location;
-	owner: Contact;
+	owner: ContactSimple;
 	site: Site;
 }
 export interface ReviewTask {