Add mailer API and initial mailer view

ts/format.ts

@@ -24,6 +24,16 @@ export function formatBigNumber(n: number): string {
 
 	return result;
 }
+export function formatDate(date: Date): string {
+	return new Intl.DateTimeFormat("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+	}).format(date);
+}
+
 export function formatDistance(meters: number | undefined) {
 	if (meters === undefined || meters === null) {
 		return "unknown";

ts/router.ts

@@ -25,6 +25,7 @@ import NotFound from "@/view/NotFound.vue";
 import OAuthRefreshArcgis from "@/view/OAuthRefreshArcgis.vue";
 import Operations from "@/view/Operations.vue";
 import Planning from "@/view/Planning.vue";
+import ReviewMailer from "@/view/review/Mailer.vue";
 import ReviewPool from "@/view/review/Pool.vue";
 import ReviewRoot from "@/view/review/Root.vue";
 import ReviewSite from "@/view/review/Site.vue";
@@ -153,6 +154,11 @@ const routes: RouteRecordRaw[] = [
 				name: "Review",
 				component: ReviewRoot,
 			},
+			{
+				path: "/_/review/mailer",
+				name: "Mailer Review",
+				component: ReviewMailer,
+			},
 			{
 				path: "/_/review/pool",
 				name: "Pool Review",

ts/store/mailer.ts

@@ -0,0 +1,85 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useSessionStore } from "@/store/session";
+
+import { apiClient } from "@/client";
+import { Mailer, type MailerDTO } from "@/type/api";
+
+export const useStoreMailer = defineStore("publicreport", () => {
+	// State
+	const _all = ref<Mailer[] | null>(null);
+	const _byID = ref<Map<string, Mailer>>(new Map());
+	const loading = ref(false);
+	const ongoingFetch = ref<Promise<Mailer[]> | null>(null);
+
+	// Actions
+	async function byID(id: string): Promise<Mailer> {
+		const r = _byID.value.get(id);
+		if (r) {
+			return r;
+		}
+		return fetchByID(id);
+	}
+	async function byURI(uri: string): Promise<Mailer> {
+		const id = uri.split("/").pop() || "";
+		if (!id) {
+			throw new Error(`${uri} is not a recognized public report URI`);
+		}
+		return byID(id);
+	}
+	async function fetchAll(): Promise<Mailer[]> {
+		const sessionStore = useSessionStore();
+		const session = await sessionStore.get();
+		loading.value = true;
+		const params = new URLSearchParams();
+		params.append("sort", "-created");
+		const url = `${session.urls.api.mailer}?${params}`;
+		const mailers = (await apiClient.JSONGet(url)) as Mailer[];
+		_all.value = mailers;
+		for (const m of mailers) {
+			_byID.value.set(m.id, m);
+		}
+		return mailers;
+	}
+	async function fetchByID(id: string): Promise<Mailer> {
+		const uri = `/api/publicreport/${id}`;
+		return fetchByURI(uri);
+	}
+	async function fetchByURI(uri: string): Promise<Mailer> {
+		loading.value = true;
+		try {
+			const response = await fetch(uri);
+
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+			const body: MailerDTO = await response.json();
+			const report = Mailer.fromJSON(body);
+			_byID.value.set(report.id, report);
+			return report;
+		} catch (err) {
+			console.error("Error loading users:", err);
+			throw err;
+		}
+	}
+	async function list(): Promise<Mailer[]> {
+		if (_all.value) {
+			return _all.value;
+		}
+		if (ongoingFetch.value !== null) {
+			return ongoingFetch.value;
+		}
+		ongoingFetch.value = fetchAll().finally(() => {
+			ongoingFetch.value = null;
+		});
+		return ongoingFetch.value;
+	}
+	return {
+		// Actions
+		byID,
+		byURI,
+		fetchByID,
+		fetchByURI,
+		list,
+	};
+});

ts/type/api.ts

@@ -659,6 +659,54 @@ export interface User {
 	uri: string;
 	username: string;
 }
+type MailerStatus = "created" | "printed" | "mailed" | "completed";
+export interface MailerDTO {
+	address: Address;
+	compliance_report_request_id?: string;
+	created: string;
+	id: string;
+	recipient: string;
+	status: MailerStatus;
+	site_id: string;
+	uri: string;
+}
+export interface MailerOptions {
+	address: Address;
+	compliance_report_request_id?: string;
+	created: Date;
+	id: string;
+	recipient: string;
+	site_id: string;
+	status: MailerStatus;
+	uri: string;
+}
+export class Mailer {
+	address: Address;
+	compliance_report_request_id?: string;
+	created: Date;
+	id: string;
+	recipient: string;
+	site_id: string;
+	status: MailerStatus;
+	uri: string;
+	constructor(options: MailerOptions) {
+		this.address = options.address;
+		this.compliance_report_request_id = options.compliance_report_request_id;
+		this.created = options.created;
+		this.id = options.id;
+		this.recipient = options.recipient;
+		this.site_id = options.site_id;
+		this.status = options.status;
+		this.uri = options.uri;
+	}
+	static fromJSON(json: MailerDTO): Mailer {
+		return new Mailer({
+			...json,
+			created: new Date(json.created),
+		});
+	}
+}
+
 export interface Organization {
 	id: number;
 	name: string;
@@ -791,6 +839,7 @@ interface URLsAPI {
 	avatar: string;
 	communication: string;
 	impersonation: string;
+	mailer: string;
 	publicreport_message: string;
 	review_task: string;
 	service_request: string;

ts/view/review/Mailer.vue

@@ -0,0 +1,165 @@
+<style scoped>
+.table th {
+	font-weight: 600;
+	border-bottom: 2px solid #dee2e6;
+}
+
+.badge {
+	font-weight: 500;
+	padding: 0.375rem 0.75rem;
+}
+</style>
+<template>
+	<div class="container-fluid py-4">
+		<div class="row mb-4">
+			<div class="col">
+				<h1 class="h2">Mailers</h1>
+				<p class="text-muted">Track the status of your postal mailers</p>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col">
+				<div class="card">
+					<div class="card-body">
+						<div class="table-responsive">
+							<table class="table table-hover">
+								<thead>
+									<tr>
+										<th>Created</th>
+										<th>Status</th>
+										<th>Site Address</th>
+										<th>PDF</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr v-for="mailer in mailers" :key="mailer.id">
+										<td>{{ formatDate(mailer.createdAt) }}</td>
+										<td>
+											<span
+												class="badge"
+												:class="getStatusBadgeClass(mailer.status)"
+											>
+												{{ formatStatus(mailer.status) }}
+											</span>
+										</td>
+										<td>
+											<a :href="`/sites/${mailer.siteId}`">
+												{{ mailer.siteAddress }}
+											</a>
+										</td>
+										<td>
+											<a
+												:href="mailer.pdfUrl"
+												target="_blank"
+												class="btn btn-sm btn-outline-primary"
+											>
+												<i class="bi bi-file-pdf"></i> View PDF
+											</a>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+
+						<div
+							v-if="mailers.length === 0"
+							class="text-center py-5 text-muted"
+						>
+							<p>No mailers found</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+import { useStoreMailer } from "@/store/mailer";
+
+type MailerStatus = "created" | "printed" | "mailed" | "completed";
+
+interface Mailer {
+	id: string;
+	createdAt: Date;
+	status: MailerStatus;
+	pdfUrl: string;
+	siteId: string;
+	siteAddress: string;
+}
+
+// Mock data
+const mailers = ref<Mailer[]>([
+	{
+		id: "1",
+		createdAt: new Date("2024-01-15T10:30:00"),
+		status: "completed",
+		pdfUrl: "/pdfs/mailer-1.pdf",
+		siteId: "101",
+		siteAddress: "123 Main St, Springfield, IL 62701",
+	},
+	{
+		id: "2",
+		createdAt: new Date("2024-01-16T14:20:00"),
+		status: "mailed",
+		pdfUrl: "/pdfs/mailer-2.pdf",
+		siteId: "102",
+		siteAddress: "456 Oak Ave, Chicago, IL 60601",
+	},
+	{
+		id: "3",
+		createdAt: new Date("2024-01-17T09:15:00"),
+		status: "printed",
+		pdfUrl: "/pdfs/mailer-3.pdf",
+		siteId: "103",
+		siteAddress: "789 Pine Rd, Naperville, IL 60540",
+	},
+	{
+		id: "4",
+		createdAt: new Date("2024-01-18T11:45:00"),
+		status: "created",
+		pdfUrl: "/pdfs/mailer-4.pdf",
+		siteId: "104",
+		siteAddress: "321 Elm St, Peoria, IL 61602",
+	},
+	{
+		id: "5",
+		createdAt: new Date("2024-01-18T16:00:00"),
+		status: "mailed",
+		pdfUrl: "/pdfs/mailer-5.pdf",
+		siteId: "105",
+		siteAddress: "654 Maple Dr, Rockford, IL 61101",
+	},
+]);
+
+const formatDate = (date: Date): string => {
+	return new Intl.DateTimeFormat("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+	}).format(date);
+};
+
+const formatStatus = (status: MailerStatus): string => {
+	return status.charAt(0).toUpperCase() + status.slice(1);
+};
+
+const getStatusBadgeClass = (status: MailerStatus): string => {
+	const classes: Record<MailerStatus, string> = {
+		created: "bg-secondary",
+		printed: "bg-info",
+		mailed: "bg-primary",
+		completed: "bg-success",
+	};
+	return classes[status];
+};
+const storeMailer = useStoreMailer();
+onMounted(() => {
+	storeMailer.list();
+});
+</script>