Multi-level navigation

Fix sensitive record indicator inconsistency (always check)
Fix navbar style
2023-05-08 20:19:10 -04:00 · 2023-05-08 20:03:40 -04:00 · 2023-05-08 19:45:47 -04:00 · 2023-05-08 18:48:29 -04:00 · 2023-05-08 17:58:34 -04:00
9 changed files with 196 additions and 185 deletions
--- a/htdocs/App.vue
+++ b/htdocs/App.vue
@ -1,4 +1,5 @@
 <template>
+	<Submenu :value="menu" />
 	<div class="container-fluid" style="padding-top: 5rem;">
 		<Navbar v-model:server="server" :user="user" />
 		<Throbber :client="client" />
@ -10,11 +11,13 @@
 </template>

 <script>
+	import Submenu from './Submenu.vue';
 	import Navbar from './Navbar.vue';
 	import Throbber from './Throbber.vue';
 	import Login from './Login.vue';
 	import RouteSchedule from './RouteSchedule.vue';
-	import RoutePatientLookup from './RoutePatientLookup.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';
@ -23,7 +26,7 @@

 	export default {
 		components: {
-			Navbar, Throbber, Login
+			Submenu, Navbar, Throbber, Login
 		},
 		props: {
 			secret: String
@ -35,7 +38,16 @@
 				user: null,
 				heartbeat: null,
 				banner: '',
-				authenticated: false
+				authenticated: false,
+				menu: {
+					name: 'Main',
+					items: [
+						{ name: 'Schedule', href: '/' },
+						{ name: 'Lookup', href: '/lookup' },
+						{ name: 'Planner', href: '/planner' },
+						{ name: 'Recall', href: '/recall' }
+					]
+				}
 			};
 		},
 		watch: {
@ -44,10 +56,12 @@
 				else {
 					[
 						{ path: '/', component: RouteSchedule },
-						{ path: '/patient', component: RoutePatientLookup },
-						{ path: '/patient/:id', component: RoutePatientDetail },
-						{ path: '/patient/:id/visits', component: RoutePatientVisits },
-						{ path: '/patient/:id/orders', component: RoutePatientOrders },
+						{ path: '/lookup', component: RouteLookup },
+						{ 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));
--- a/htdocs/Navbar.vue
+++ b/htdocs/Navbar.vue
@ -1,5 +1,5 @@
 <template>
-	<nav class="navbar navbar-expand-lg fixed-top bg-dark">
+	<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
 		<div class="container-fluid">
 			<router-link class="navbar-brand" to="/"><img src="/icon.svg" style="height: 1.875rem;" /></router-link>
 			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@ -7,25 +7,16 @@
 			</button>
 			<div class="collapse navbar-collapse" id="navbarSupportedContent">
 				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
-					<li class="nav-item">
-						<router-link class="nav-link" to="/">Schedule</router-link>
+					<li v-if="menustate.length > 0" v-for="item in menustate[0].items" class="nav-item">
+						<router-link class="nav-link" :to="item.href">{{item.name}}</router-link>
 					</li>
-					<li class="nav-item">
-						<router-link class="nav-link" to="/patient">Patient</router-link>
+					<li v-if="menustate.length > 1" v-for="menu in menustate.slice(1)" class="nav-item dropdown">
+						<button class="nav-link btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">{{menu.name}}</button>
+						<ul class="dropdown-menu dropdown-menu-dark">
+							<li v-for="item in menu.items" class="nav-item">
+								<router-link class="nav-link" :to="item.href">{{item.name}}</router-link>
 							</li>
-					<template v-if="($route.matched.length > 0) && ($route.matched[0].path == '/patient/:id')">
-						<li class="nav-item">
-							<router-link class="nav-link" :to="'/patient/' + $route.params.id + '/visits'">Visits</router-link>
-						</li>
-						<li class="nav-item">
-							<router-link class="nav-link" :to="'/patient/' + $route.params.id + '/orders'">Orders</router-link>
-						</li>
-					</template>
-					<li class="nav-item">
-						<router-link class="nav-link" to="/planner">Planner</router-link>
-					</li>
-					<li class="nav-item">
-						<router-link class="nav-link" to="/recall">Recall</router-link>
+						</ul>
 					</li>
 					<li class="nav-item" v-if="server">
 						<a class="nav-link disabled"><template v-if="user">{{user[2]}} @ </template>{{server.domain}}</a>
@ -41,13 +32,14 @@
 </template>

 <style scoped>
-	a.router-link-exact-active {
-		color: #bbb;
+	.navbar-nav .nav-link.router-link-exact-active {
+		color: #fff;
 	}
 </style>

 <script>
 	import vistax from './vistax.mjs';
+	import { menustate } from './common.mjs';

 	export default {
 		props: {
@ -61,7 +53,9 @@
 			}
 		},
 		data() {
-			return {};
+			return {
+				menustate
+			};
 		}
 	};
 </script>
--- a/htdocs/RoutePatientLookup.vue
+++ b/htdocs/RoutePatientLookup.vue
--- a/htdocs/RoutePatient.vue
+++ b/htdocs/RoutePatient.vue
@ -0,0 +1,88 @@
+<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">
+		<Submenu :value="menu" />
+		<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';
+	import Submenu from './Submenu.vue';
+
+	export default {
+		components: {
+			Subtitle, Submenu
+		},
+		props: {
+			client: Object
+		},
+		data() {
+			return {
+				sensitive: false,
+				patient_dfn: null,
+				patient_info: null
+			};
+		},
+		computed: {
+			menu() {
+				return this.patient_info ? {
+					name: this.patient_info.name,
+					items: [
+						{ name: 'Patient', href: '/patient/' + this.patient_dfn + (this.sensitive && '?viewsensitive' || '') },
+						{ name: 'Visits', href: '/patient/' + this.patient_dfn + '/visits' + (this.sensitive && '?viewsensitive' || '') },
+						{ name: 'Orders', href: '/patient/' + this.patient_dfn + '/orders' + (this.sensitive && '?viewsensitive' || '') }
+					]
+				} : null;
+			}
+		},
+		methods: {
+			strptime_vista,
+			async loadinfo(dfn, viewsensitive) {
+				this.patient_dfn = dfn;
+				this.sensitive = await this.client.ORWPT_SELCHK(dfn);
+				this.patient_info = (this.sensitive) && (!viewsensitive) ? 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>
--- 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>
-		</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-body">
-				<ViewVitalsLabs :client="client" :dfn="dfn" :date_begin="report_date_begin" :date_end="report_date" />
-			</div>
+			<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>
--- a/htdocs/RoutePatientOrders.vue
+++ b/htdocs/RoutePatientOrders.vue
@ -1,27 +1,9 @@
 <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>
-	</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>
+	<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="dfn" /></div>
+		<div class="card-body"><ViewOrderMenu :client="client" :dfn="patient_dfn" /></div>
 	</div>
 	<div class="card mb-3 shadow">
 		<div class="card-header d-flex justify-content-between align-items-center">
@ -29,14 +11,11 @@
 			<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>
+		<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>
--- 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>
+	<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="dfn" :date_begin="visits_date_begin" :date_end="visits_date" /></div>
-		</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>
--- a/htdocs/Submenu.vue
+++ b/htdocs/Submenu.vue
@ -0,0 +1,33 @@
+<script>
+	import { menustate } from './common.mjs';
+
+	export default {
+		props: ['value'],
+		data() {
+			return { ptr: null };
+		},
+		watch: {
+			value: {
+				handler(value) {
+					this.update(value);
+				}, immediate: true
+			}
+		},
+		methods: {
+			update(value) {
+				var idx = this.ptr ? menustate.indexOf(this.ptr) : -1;
+				if(idx >= 0) menustate.splice(idx, 1);
+				if(value) {
+					this.ptr = value;
+					if(idx >= 0) menustate.splice(idx, 0, this.ptr);
+					else menustate.unshift(this.ptr);
+				} else this.ptr = null;
+				console.log(menustate)
+			}
+		},
+		unmounted() {
+			this.update();
+		},
+		render() {}
+	};
+</script>
--- a/htdocs/common.mjs
+++ b/htdocs/common.mjs
@ -0,0 +1,3 @@
+import { reactive } from 'vue';
+
+export const menustate = reactive([]);
Author	SHA1	Message	Date
inportb	789e11e572	Multi-level navigation	2023-05-08 20:19:10 -04:00
inportb	45dda6f51d	Fix sensitive record indicator inconsistency (always check)	2023-05-08 20:03:40 -04:00
inportb	4a25b2f823	Fix navbar style	2023-05-08 19:45:47 -04:00
inportb	cdfa3b2f04	RoutePatient nested routes	2023-05-08 18:48:29 -04:00
inportb	c15f7ed885	RouteLookup (refactored from RoutePatientLookup)	2023-05-08 17:58:34 -04:00