From cdfa3b2f04e97bfdd893d8a9be71f127c8758627 Mon Sep 17 00:00:00 2001
From: inportb <inportb@gmail.com>
Date: Mon, 8 May 2023 18:48:29 -0400
Subject: [PATCH] RoutePatient nested routes

---
 htdocs/App.vue                |  9 +++--
 htdocs/RoutePatient.vue       | 74 +++++++++++++++++++++++++++++++++++
 htdocs/RoutePatientDetail.vue | 71 ++++++---------------------------
 htdocs/RoutePatientOrders.vue | 64 +++++++-----------------------
 htdocs/RoutePatientVisits.vue | 56 +++++---------------------
 5 files changed, 115 insertions(+), 159 deletions(-)
 create mode 100644 htdocs/RoutePatient.vue

diff --git a/htdocs/App.vue b/htdocs/App.vue
index e4424a9..ef0c933 100644
--- a/htdocs/App.vue
+++ b/htdocs/App.vue
@@ -15,6 +15,7 @@
 	import Login from './Login.vue';
 	import RouteSchedule from './RouteSchedule.vue';
 	import RouteLookup from './RouteLookup.vue';
+	import RoutePatient from './RoutePatient.vue';
 	import RoutePatientDetail from './RoutePatientDetail.vue';
 	import RoutePatientVisits from './RoutePatientVisits.vue';
 	import RoutePatientOrders from './RoutePatientOrders.vue';
@@ -45,9 +46,11 @@
 					[
 						{ path: '/', component: RouteSchedule },
 						{ path: '/lookup', component: RouteLookup },
-						{ path: '/patient/:id', component: RoutePatientDetail },
-						{ path: '/patient/:id/visits', component: RoutePatientVisits },
-						{ path: '/patient/:id/orders', component: RoutePatientOrders },
+						{ path: '/patient/:id', component: RoutePatient, children: [
+							{ path: '', component: RoutePatientDetail },
+							{ path: 'visits', component: RoutePatientVisits },
+							{ path: 'orders', component: RoutePatientOrders },
+						] },
 						{ path: '/planner', component: RoutePlanner },
 						{ path: '/recall', component: RouteRecall },
 					].forEach(route => this.$root.$router.addRoute(route));
diff --git a/htdocs/RoutePatient.vue b/htdocs/RoutePatient.vue
new file mode 100644
index 0000000..77c197c
--- /dev/null
+++ b/htdocs/RoutePatient.vue
@@ -0,0 +1,74 @@
+<template>
+	<Subtitle value="Patient" />
+	<div v-if="(sensitive) && (!patient_info)" class="alert alert-danger text-center mb-3 shadow" role="alert">
+		<Subtitle value="Restricted Record" />
+		<h1>Warning: Restricted Record</h1>
+		<p>This record is protected by the Privacy Act of 1974 and the Health Insurance Portability and Accountability Act of 1996. If you elect to proceed, you will be required to prove you have a need to know. Accessing this patient is tracked, and your station Security Officer will contact you for your justification.</p>
+		<router-link class="btn btn-danger" :to="'/patient/' + patient_dfn + '?viewsensitive'">Proceed</router-link>
+	</div>
+	<template v-if="patient_info">
+		<div class="card mb-3 shadow">
+			<div class="card-header">{{patient_info.name}} <span :title="patient_info.pid">{{patient_info.pid.slice(-4)}}</span> #{{patient_dfn}}</div>
+			<div class="card-body row" style="font-family: monospace;">
+				<div class="col" v-if="patient_info.dob"><strong>DOB:</strong> {{strptime_vista(patient_info.dob).toLocaleDateString('sv-SE')}}</div>
+				<div class="col" v-if="patient_info.age"><strong>Age:</strong> {{patient_info.age}}</div>
+				<div class="col" v-if="patient_info.sex"><strong>Sex:</strong> {{patient_info.sex}}</div>
+				<div class="col" v-if="patient_info.sc_percentage"><strong>SC%:</strong> {{patient_info.sc_percentage}}</div>
+				<div class="col" v-if="patient_info.type"><strong>Type:</strong> {{patient_info.type}}</div>
+				<div class="col" v-if="patient_info.ward"><strong>Ward:</strong> {{patient_info.ward}}</div>
+				<div class="col" v-if="patient_info.room_bed"><strong>Room/bed:</strong> {{patient_info.room_bed}}</div>
+			</div>
+		</div>
+		<router-view :client="client" :sensitive="sensitive" :patient_dfn="patient_dfn" :patient_info="patient_info"></router-view>
+	</template>
+</template>
+
+<script>
+	import { strptime_vista } from './util.mjs';
+
+	import Subtitle from './Subtitle.vue';
+
+	export default {
+		components: {
+			Subtitle
+		},
+		props: {
+			client: Object
+		},
+		data() {
+			return {
+				sensitive: false,
+				patient_dfn: null,
+				patient_info: null
+			};
+		},
+		methods: {
+			strptime_vista,
+			async loadinfo(dfn, viewsensitive) {
+				this.patient_dfn = dfn;
+				this.sensitive = viewsensitive ? false : await this.client.ORWPT_SELCHK(dfn);
+				this.patient_info = this.sensitive ? null : await this.client.ORWPT16_ID_INFO(dfn);
+			}
+		},
+		async mounted() {
+			if(this.$route.params.id.startsWith('$')) {
+				var id = this.$route.params.id.substring(1);
+				if(id.length == 9) {
+					var patient = await this.client.ORWPT_FULLSSN(id);
+					this.$router.replace('/patient/' + patient[0].dfn);
+				} else if(id.length == 5) {
+					var name = this.$route.query.name.toUpperCase();
+					var patient = await this.client.ORWPT_LAST5(id);
+					for(var i = 0; i < patient.length; ++i) if(name == patient[i].name) {
+						this.$router.replace('/patient/' + patient[i].dfn);
+						break;
+					}
+				}
+			} else this.loadinfo(this.$route.params.id, this.$route.query.hasOwnProperty('viewsensitive'));
+		},
+		async beforeRouteUpdate(to, from, next) {
+			this.loadinfo(to.params.id, to.query.hasOwnProperty('viewsensitive'));
+			next();
+		}
+	};
+</script>
diff --git a/htdocs/RoutePatientDetail.vue b/htdocs/RoutePatientDetail.vue
index cc39e79..07d6f24 100644
--- a/htdocs/RoutePatientDetail.vue
+++ b/htdocs/RoutePatientDetail.vue
@@ -1,39 +1,18 @@
 <template>
 	<Subtitle value="Detail" />
-	<div v-if="(sensitive) && (!info)" class="alert alert-danger text-center mb-3 shadow" role="alert">
-		<h1>Warning: Restricted Record</h1>
-		<p>This record is protected by the Privacy Act of 1974 and the Health Insurance Portability and Accountability Act of 1996. If you elect to proceed, you will be required to prove you have a need to know. Accessing this patient is tracked, and your station Security Officer will contact you for your justification.</p>
-		<router-link class="btn btn-danger" :to="'/patient/' + dfn + '?viewsensitive'">Proceed</router-link>
-	</div>
-	<div v-if="info">
-		<Subtitle :value="info.name" />
-		<div class="card mb-3 shadow">
-			<div class="card-header">{{info.name}} <span :title="info.pid">{{info.pid.slice(-4)}}</span> #{{dfn}}</div>
-			<div class="card-body row" style="font-family: monospace;">
-				<div class="col" v-if="info.dob"><strong>DOB:</strong> {{strptime_vista(info.dob).toLocaleDateString('sv-SE')}}</div>
-				<div class="col" v-if="info.age"><strong>Age:</strong> {{info.age}}</div>
-				<div class="col" v-if="info.sex"><strong>Sex:</strong> {{info.sex}}</div>
-				<div class="col" v-if="info.sc_percentage"><strong>SC%:</strong> {{info.sc_percentage}}</div>
-				<div class="col" v-if="info.type"><strong>Type:</strong> {{info.type}}</div>
-				<div class="col" v-if="info.ward"><strong>Ward:</strong> {{info.ward}}</div>
-				<div class="col" v-if="info.room_bed"><strong>Room/bed:</strong> {{info.room_bed}}</div>
-			</div>
+	<Subtitle :value="patient_info.name" />
+	<div class="card mb-3 shadow">
+		<div class="card-header d-flex justify-content-between align-items-center">
+			<span>Data</span>
+			<DateRangePicker range="1M" direction="-1" v-model:date="report_date" v-model:date_end="report_date_begin" />
 		</div>
-		<div class="card mb-3 shadow">
-			<div class="card-header d-flex justify-content-between align-items-center">
-				<span>Data</span>
-				<DateRangePicker range="1M" direction="-1" v-model:date="report_date" v-model:date_end="report_date_begin" />
-			</div>
-			<div class="card-body">
-				<ViewVitalsLabs :client="client" :dfn="dfn" :date_begin="report_date_begin" :date_end="report_date" />
-			</div>
+		<div class="card-body">
+			<ViewVitalsLabs :client="client" :dfn="patient_dfn" :date_begin="report_date_begin" :date_end="report_date" />
 		</div>
 	</div>
 </template>
 
 <script>
-	import { strptime_vista } from './util.mjs';
-
 	import Subtitle from './Subtitle.vue';
 	import DateRangePicker from './DateRangePicker.vue';
 	import ViewVitalsLabs from './ViewVitalsLabs.vue';
@@ -45,47 +24,19 @@
 			Subtitle, DateRangePicker, ViewVitalsLabs
 		},
 		props: {
-			client: Object
+			client: Object,
+			sensitive: Boolean,
+			patient_dfn: String,
+			patient_info: Object
 		},
 		data() {
 			return {
-				dfn: null,
-				sensitive: false,
-				info: null,
 				report_date: now,
 				report_date_begin: now,
 				orders_filter: 2,
 				orders_date: now,
 				orders_date_begin: now
 			};
-		},
-		methods: {
-			strptime_vista,
-			async loadinfo(dfn, viewsensitive) {
-				this.dfn = dfn;
-				this.sensitive = viewsensitive ? false : await this.client.ORWPT_SELCHK(dfn);
-				this.info = this.sensitive ? null : await this.client.ORWPT16_ID_INFO(dfn);
-			}
-		},
-		async mounted() {
-			if(this.$route.params.id.startsWith('$')) {
-				var id = this.$route.params.id.substring(1);
-				if(id.length == 9) {
-					var patient = await this.client.ORWPT_FULLSSN(id);
-					this.$router.replace('/patient/' + patient[0].dfn);
-				} else if(id.length == 5) {
-					var name = this.$route.query.name.toUpperCase();
-					var patient = await this.client.ORWPT_LAST5(id);
-					for(var i = 0; i < patient.length; ++i) if(name == patient[i].name) {
-						this.$router.replace('/patient/' + patient[i].dfn);
-						break;
-					}
-				}
-			} else this.loadinfo(this.$route.params.id, this.$route.query.hasOwnProperty('viewsensitive'));
-		},
-		async beforeRouteUpdate(to, from, next) {
-			this.loadinfo(to.params.id, to.query.hasOwnProperty('viewsensitive'));
-			next();
 		}
 	};
 </script>
diff --git a/htdocs/RoutePatientOrders.vue b/htdocs/RoutePatientOrders.vue
index 59c5720..d281074 100644
--- a/htdocs/RoutePatientOrders.vue
+++ b/htdocs/RoutePatientOrders.vue
@@ -1,42 +1,21 @@
 <template>
 	<Subtitle value="Orders" />
-	<div v-if="(sensitive) && (!info)" class="alert alert-danger text-center mb-3 shadow" role="alert">
-		<h1>Warning: Restricted Record</h1>
-		<p>This record is protected by the Privacy Act of 1974 and the Health Insurance Portability and Accountability Act of 1996. If you elect to proceed, you will be required to prove you have a need to know. Accessing this patient is tracked, and your station Security Officer will contact you for your justification.</p>
-		<router-link class="btn btn-danger" :to="'/patient/' + dfn + '/orders?viewsensitive'">Proceed</router-link>
+	<Subtitle :value="patient_info.name" />
+	<div class="card mb-3 shadow">
+		<div class="card-header">Order entry</div>
+		<div class="card-body"><ViewOrderMenu :client="client" :dfn="patient_dfn" /></div>
 	</div>
-	<div v-if="info">
-		<Subtitle :value="info.name" />
-		<div class="card mb-3 shadow">
-			<div class="card-header">{{info.name}} <span :title="info.pid">{{info.pid.slice(-4)}}</span> #{{dfn}}</div>
-			<div class="card-body row" style="font-family: monospace;">
-				<div class="col" v-if="info.dob"><strong>DOB:</strong> {{strptime_vista(info.dob).toLocaleDateString('sv-SE')}}</div>
-				<div class="col" v-if="info.age"><strong>Age:</strong> {{info.age}}</div>
-				<div class="col" v-if="info.sex"><strong>Sex:</strong> {{info.sex}}</div>
-				<div class="col" v-if="info.sc_percentage"><strong>SC%:</strong> {{info.sc_percentage}}</div>
-				<div class="col" v-if="info.type"><strong>Type:</strong> {{info.type}}</div>
-				<div class="col" v-if="info.ward"><strong>Ward:</strong> {{info.ward}}</div>
-				<div class="col" v-if="info.room_bed"><strong>Room/bed:</strong> {{info.room_bed}}</div>
-			</div>
-		</div>
-		<div class="card mb-3 shadow">
-			<div class="card-header">Order entry</div>
-			<div class="card-body"><ViewOrderMenu :client="client" :dfn="dfn" /></div>
-		</div>
-		<div class="card mb-3 shadow">
-			<div class="card-header d-flex justify-content-between align-items-center">
-				<span>Order view</span>
-				<OrderFilterPicker :client="client" v-model="orders_filter" />
-				<DateRangePicker range="6M" direction="-1" v-model:date="orders_date" v-model:date_end="orders_date_begin" />
-			</div>
-			<div class="card-body"><ViewOrders :client="client" :dfn="dfn" :filter="orders_filter" :date_begin="orders_date_begin" :date_end="orders_date" /></div>
+	<div class="card mb-3 shadow">
+		<div class="card-header d-flex justify-content-between align-items-center">
+			<span>Order view</span>
+			<OrderFilterPicker :client="client" v-model="orders_filter" />
+			<DateRangePicker range="6M" direction="-1" v-model:date="orders_date" v-model:date_end="orders_date_begin" />
 		</div>
+		<div class="card-body"><ViewOrders :client="client" :dfn="patient_dfn" :filter="orders_filter" :date_begin="orders_date_begin" :date_end="orders_date" /></div>
 	</div>
 </template>
 
 <script>
-	import { strptime_vista } from './util.mjs';
-
 	import Subtitle from './Subtitle.vue';
 	import DateRangePicker from './DateRangePicker.vue';
 	import OrderFilterPicker from './OrderFilterPicker.vue';
@@ -50,32 +29,17 @@
 			Subtitle, DateRangePicker, OrderFilterPicker, ViewOrderMenu, ViewOrders
 		},
 		props: {
-			client: Object
+			client: Object,
+			sensitive: Boolean,
+			patient_dfn: String,
+			patient_info: Object
 		},
 		data() {
 			return {
-				dfn: null,
-				sensitive: false,
-				info: null,
 				orders_filter: 2,
 				orders_date: now,
 				orders_date_begin: now
 			};
-		},
-		methods: {
-			strptime_vista,
-			async loadinfo(dfn, viewsensitive) {
-				this.dfn = dfn;
-				this.sensitive = viewsensitive ? false : await this.client.ORWPT_SELCHK(dfn);
-				this.info = this.sensitive ? null : await this.client.ORWPT16_ID_INFO(dfn);
-			}
-		},
-		async mounted() {
-			this.loadinfo(this.$route.params.id, this.$route.query.hasOwnProperty('viewsensitive'));
-		},
-		async beforeRouteUpdate(to, from, next) {
-			this.loadinfo(to.params.id, to.query.hasOwnProperty('viewsensitive'));
-			next();
 		}
 	};
 </script>
diff --git a/htdocs/RoutePatientVisits.vue b/htdocs/RoutePatientVisits.vue
index 88d8964..ab117c9 100644
--- a/htdocs/RoutePatientVisits.vue
+++ b/htdocs/RoutePatientVisits.vue
@@ -1,37 +1,16 @@
 <template>
 	<Subtitle value="Visits" />
-	<div v-if="(sensitive) && (!info)" class="alert alert-danger text-center mb-3 shadow" role="alert">
-		<h1>Warning: Restricted Record</h1>
-		<p>This record is protected by the Privacy Act of 1974 and the Health Insurance Portability and Accountability Act of 1996. If you elect to proceed, you will be required to prove you have a need to know. Accessing this patient is tracked, and your station Security Officer will contact you for your justification.</p>
-		<router-link class="btn btn-danger" :to="'/patient/' + dfn + '/orders?viewsensitive'">Proceed</router-link>
-	</div>
-	<div v-if="info">
-		<Subtitle :value="info.name" />
-		<div class="card mb-3 shadow">
-			<div class="card-header">{{info.name}} <span :title="info.pid">{{info.pid.slice(-4)}}</span> #{{dfn}}</div>
-			<div class="card-body row" style="font-family: monospace;">
-				<div class="col" v-if="info.dob"><strong>DOB:</strong> {{strptime_vista(info.dob).toLocaleDateString('sv-SE')}}</div>
-				<div class="col" v-if="info.age"><strong>Age:</strong> {{info.age}}</div>
-				<div class="col" v-if="info.sex"><strong>Sex:</strong> {{info.sex}}</div>
-				<div class="col" v-if="info.sc_percentage"><strong>SC%:</strong> {{info.sc_percentage}}</div>
-				<div class="col" v-if="info.type"><strong>Type:</strong> {{info.type}}</div>
-				<div class="col" v-if="info.ward"><strong>Ward:</strong> {{info.ward}}</div>
-				<div class="col" v-if="info.room_bed"><strong>Room/bed:</strong> {{info.room_bed}}</div>
-			</div>
-		</div>
-		<div class="card mb-3 shadow">
-			<div class="card-header d-flex justify-content-between align-items-center">
-				<span>Visits</span>
-				<DateRangePicker range="6M" direction="-1" v-model:date="visits_date" v-model:date_end="visits_date_begin" />
-			</div>
-			<div class="card-body"><ViewVisits :client="client" :dfn="dfn" :date_begin="visits_date_begin" :date_end="visits_date" /></div>
+	<Subtitle :value="patient_info.name" />
+	<div class="card mb-3 shadow">
+		<div class="card-header d-flex justify-content-between align-items-center">
+			<span>Visits</span>
+			<DateRangePicker range="6M" direction="-1" v-model:date="visits_date" v-model:date_end="visits_date_begin" />
 		</div>
+		<div class="card-body"><ViewVisits :client="client" :dfn="patient_dfn" :date_begin="visits_date_begin" :date_end="visits_date" /></div>
 	</div>
 </template>
 
 <script>
-	import { strptime_vista } from './util.mjs';
-
 	import Subtitle from './Subtitle.vue';
 	import DateRangePicker from './DateRangePicker.vue';
 	import OrderFilterPicker from './OrderFilterPicker.vue';
@@ -44,32 +23,17 @@
 			Subtitle, DateRangePicker, OrderFilterPicker, ViewVisits
 		},
 		props: {
-			client: Object
+			client: Object,
+			sensitive: Boolean,
+			patient_dfn: String,
+			patient_info: Object
 		},
 		data() {
 			return {
-				dfn: null,
-				sensitive: false,
-				info: null,
 				orders_filter: 2,
 				visits_date: now,
 				visits_date_begin: now
 			};
-		},
-		methods: {
-			strptime_vista,
-			async loadinfo(dfn, viewsensitive) {
-				this.dfn = dfn;
-				this.sensitive = viewsensitive ? false : await this.client.ORWPT_SELCHK(dfn);
-				this.info = this.sensitive ? null : await this.client.ORWPT16_ID_INFO(dfn);
-			}
-		},
-		async mounted() {
-			this.loadinfo(this.$route.params.id, this.$route.query.hasOwnProperty('viewsensitive'));
-		},
-		async beforeRouteUpdate(to, from, next) {
-			this.loadinfo(to.params.id, to.query.hasOwnProperty('viewsensitive'));
-			next();
 		}
 	};
 </script>