Show parcel information on site page

platform/site.go

@@ -81,13 +81,19 @@ func SiteList(ctx context.Context, user User, limit int) ([]*types.Site, error)
 			"site.notes AS \"notes\"",
 			"site.owner_name AS \"owner.name\"",
 			"site.owner_phone_e164 AS \"owner.phone\"",
-			"site.parcel_id AS \"parcel_id\"",
+			"COALESCE(site.parcel_id, 0) AS \"parcel.id\"",
+			"COALESCE(parcel.apn, '') AS \"parcel.apn\"",
+			"COALESCE(parcel.description, '') AS \"parcel.description\"",
 		),
 		sm.From("site"),
 		sm.InnerJoin("address").OnEQ(
 			psql.Quote("site", "address_id"),
 			psql.Quote("address", "id"),
 		),
+		sm.LeftJoin("parcel").OnEQ(
+			psql.Quote("site", "parcel_id"),
+			psql.Quote("parcel", "id"),
+		),
 		sm.Where(psql.Quote("site", "organization_id").EQ(psql.Arg(user.Organization.ID))),
 		sm.Limit(limit),
 	), scan.StructMapper[types.Site]())

platform/types/parcel.go

@@ -0,0 +1,7 @@
+package types
+
+type Parcel struct {
+	APN         string `db:"apn" json:"apn"`
+	ID          int32  `db:"id" json:"id"`
+	Description string `db:"description" json:"description"`
+}

platform/types/site.go

@@ -15,7 +15,7 @@ type Site struct {
 	Notes          string            `db:"notes" json:"notes"`
 	OrganizationID int32             `db:"organization_id" json:"organization_id"`
 	Owner          Contact           `db:"owner" json:"owner"`
-	ParcelID       *int32            `db:"parcel_id" json:"parcel_id"`
+	Parcel         *Parcel           `db:"parcel" json:"parcel"`
 	Resident       *Contact          `db:"resident" json:"resident"`
 	ResidentOwned  *bool             `db:"resident_owned" json:"resident_owned"`
 	Tags           map[string]string `db:"tags" json:"tags"`

ts/components/ReviewSiteColumnDetail.vue

@@ -12,6 +12,28 @@
 }
 </style>
 <template>
+	<div class="card" v-show="!!selectedSite">
+		<table class="table">
+			<tbody>
+				<tr>
+					<td><b>Address</b></td>
+					<td>{{ formatAddress(selectedSite?.address) }}</td>
+				</tr>
+				<tr>
+					<td><b>Owner</b></td>
+					<td>{{ selectedSite?.owner?.name }}</td>
+				</tr>
+				<tr>
+					<td><b>Parcel APN</b></td>
+					<td>{{ selectedSite?.parcel?.apn }}</td>
+				</tr>
+				<tr>
+					<td><b>Parcel Description</b></td>
+					<td>{{ selectedSite?.parcel?.description }}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 	<div class="map-container" v-if="session.organization">
 		<MapLocator
 			:markers="mapMarkers"
@@ -33,6 +55,7 @@
 import { ref, watch } from "vue";
 import MapLocator from "@/components/MapLocator.vue";
 import MapProxiedArcgisTile from "@/components/MapProxiedArcgisTile.vue";
+import { formatAddress } from "@/format";
 import { useSessionStore } from "@/store/session";
 import { Site } from "@/type/api";
 import { Camera } from "@/type/map";

ts/type/api.ts

@@ -523,6 +523,11 @@ export class Signal {
 		);
 	}
 }
+export interface Parcel {
+	apn: string;
+	description: string;
+	id: number;
+}
 export interface Site {
 	address: Address;
 	created: string;
@@ -532,7 +537,7 @@ export interface Site {
 	notes: string;
 	organization_id: number;
 	owner?: Contact;
-	parcel_id?: number;
+	parcel: Parcel;
 	resident?: Contact;
 	resident_owned: boolean;
 	tags: Map<string, string>;