Get contact information to save in compliance flow

ts/rmo/content/compliance/Permission.vue

@@ -82,8 +82,8 @@
 						<input
 							type="radio"
 							id="access-allowed"
-							:value="PermissionAccess.GRANTED"
-							v-model="modelValue.access"
+							:value="PermissionType.GRANTED"
+							v-model="modelValue.permission_type"
 							class="mt-1"
 						/>
 						<label for="access-allowed">
@@ -98,7 +98,8 @@
 				<!-- Conditional fields for Option 1 -->
 				<div
 					v-if="
-						modelValue.access && modelValue.access == PermissionAccess.GRANTED
+						modelValue.permission_type &&
+						modelValue.permission_type == PermissionType.GRANTED
 					"
 					class="conditional-section"
 				>
@@ -163,8 +164,8 @@
 						<input
 							type="radio"
 							id="access-with-owner"
-							:value="PermissionAccess.WITH_OWNER"
-							v-model="modelValue.access"
+							:value="PermissionType.WITH_OWNER"
+							v-model="modelValue.permission_type"
 							class="mt-1"
 						/>
 						<label for="access-with-owner">
@@ -180,8 +181,8 @@
 				<div
 					class="conditional-section"
 					v-if="
-						modelValue.access &&
-						modelValue.access == PermissionAccess.WITH_OWNER
+						modelValue.permission_type &&
+						modelValue.permission_type == PermissionType.WITH_OWNER
 					"
 				>
 					<div class="form-check mb-3">
@@ -208,6 +209,7 @@
 							name="availability_notes"
 							rows="3"
 							placeholder="Example: Available weekday mornings, please call before visiting..."
+							v-model="modelValue.availability_notes"
 						></textarea>
 					</div>
 				</div>
@@ -218,8 +220,8 @@
 						<input
 							type="radio"
 							id="access-denied"
-							:value="PermissionAccess.DENIED"
-							v-model="modelValue.access"
+							:value="PermissionType.DENIED"
+							v-model="modelValue.permission_type"
 							class="mt-1"
 						/>
 						<label for="access-denied">
@@ -235,7 +237,8 @@
 				<div
 					class="conditional-section"
 					v-if="
-						modelValue.access && modelValue.access == PermissionAccess.DENIED
+						modelValue.permission_type &&
+						modelValue.permission_type == PermissionType.DENIED
 					"
 				>
 					<div class="encouragement-box">
@@ -276,13 +279,13 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { router } from "@/rmo/router";
 import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import {
 	type District,
-	PermissionAccess,
+	PermissionType,
 	PublicReportCompliance,
 } from "@/type/api";
 

ts/rmo/content/compliance/Submit.vue

@@ -155,21 +155,23 @@
 						<div class="summary-value">
 							<span
 								class="status-badge status-provided"
-								v-if="modelValue.access == PermissionAccess.GRANTED"
+								v-if="modelValue.permission_type == PermissionType.GRANTED"
 							>
 								<i class="bi bi-check-circle"></i> Entry permitted without owner
 								present
 							</span>
 							<span
 								class="status-badge status-provided"
-								v-else-if="modelValue.access == PermissionAccess.WITH_OWNER"
+								v-else-if="
+									modelValue.permission_type == PermissionType.WITH_OWNER
+								"
 							>
 								<i class="bi bi-check-circle"></i> Entry permitted with owner
 								present
 							</span>
 							<span
 								class="status-badge status-not-provided"
-								v-else-if="modelValue.access == PermissionAccess.DENIED"
+								v-else-if="modelValue.permission_type == PermissionType.DENIED"
 							>
 								<i class="bi bi-x-circle"></i> Entry denied
 							</span>
@@ -242,7 +244,7 @@ import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
 import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
 import {
 	type District,
-	PermissionAccess,
+	PermissionType,
 	PublicReportCompliance,
 } from "@/type/api";
 

ts/rmo/view/Compliance.vue

@@ -54,8 +54,9 @@ import {
 	type District,
 	PublicReport,
 	PublicReportCompliance,
+	PublicReportComplianceOptions,
 } from "@/type/api";
-import { Address, Location, PermissionAccess } from "@/type/api";
+import { Address, Location, PermissionType } from "@/type/api";
 import { type Contact } from "@/rmo/content/compliance/Contact.vue";
 
 interface Props {
@@ -137,9 +138,10 @@ function doPermission() {
 	console.log("report.value.has_dog", report.value.has_dog);
 	updateReport({
 		access_instructions: report.value.access_instructions,
+		availability_notes: report.value.availability_notes,
 		gate_code: report.value.gate_code,
 		has_dog: report.value.has_dog,
-		permission_type: report.value.access,
+		permission_type: report.value.permission_type,
 		wants_scheduled: report.value.wants_scheduled,
 	});
 }
@@ -157,8 +159,8 @@ async function fetchExistingReport(report_uri: string) {
 		);
 		return;
 	}
-	const body = await resp.json();
-	Object.assign(report.value, body);
+	const body = (await resp.json()) as PublicReportComplianceOptions;
+	Object.assign(report.value, new PublicReportCompliance(body));
 	console.log("fetched existing report", report.value);
 	isLoading.value = false;
 }

ts/type/api.ts

@@ -1,9 +1,22 @@
-export enum PermissionAccess {
+export enum PermissionType {
 	DENIED = "denied",
 	GRANTED = "granted",
 	UNSELECTED = "unselected",
 	WITH_OWNER = "with-owner",
 }
+
+function isPermissionType(value: string): value is PermissionType {
+	return Object.values(PermissionType).includes(value as PermissionType);
+}
+function toPermissionType(
+	value: string,
+	defaultValue: PermissionType = PermissionType.UNSELECTED,
+): PermissionType {
+	if (Object.values(PermissionType).includes(value as PermissionType)) {
+		return value as PermissionType;
+	}
+	return defaultValue;
+}
 export class Address {
 	constructor(
 		public country: string = "",
@@ -178,15 +191,6 @@ export interface PublicReportOptions {
 	type: string;
 	uri: string;
 }
-export interface PublicReportComplianceDTO {
-	access?: PermissionAccess;
-	access_instructions: string;
-	availability_notes: string;
-	comments: string;
-	gate_code: string;
-	has_dog: boolean;
-	wants_scheduled: boolean;
-}
 export class PublicReport {
 	address: Address;
 	created: Date;
@@ -229,30 +233,32 @@ export class PublicReport {
 	}
 }
 export interface PublicReportComplianceOptions extends PublicReportOptions {
-	access?: PermissionAccess;
 	access_instructions: string;
 	availability_notes: string;
 	comments: string;
 	gate_code: string;
 	has_dog: boolean;
+	permission_type: PermissionType;
 	wants_scheduled: boolean;
 }
 export class PublicReportCompliance extends PublicReport {
-	access?: PermissionAccess;
 	access_instructions: string;
 	availability_notes: string;
 	comments: string;
 	gate_code: string;
 	has_dog: boolean;
+	permission_type: PermissionType;
 	wants_scheduled: boolean;
 	constructor(options?: PublicReportComplianceOptions) {
 		super(options);
-		this.access = options?.access;
 		this.access_instructions = options?.access_instructions ?? "";
 		this.availability_notes = options?.availability_notes ?? "";
 		this.comments = options?.comments ?? "";
 		this.gate_code = options?.gate_code ?? "";
 		this.has_dog = options?.has_dog ?? false;
+		this.permission_type = toPermissionType(
+			options?.permission_type ?? PermissionType.UNSELECTED,
+		);
 		this.wants_scheduled = options?.wants_scheduled ?? false;
 	}
 }
@@ -374,7 +380,7 @@ export class PublicReportWater extends PublicReport {
 		longitude: 0,
 	},
 	permission: {
-		access: PermissionAccess.UNSELECTED,
+		access: PermissionType.UNSELECTED,
 		access_instructions: "",
 		availability_notes: "",
 		gate_code: "",