From b57634f7307a09e03615b2186243636edff2eafa Mon Sep 17 00:00:00 2001
From: inportb <inportb@gmail.com>
Date: Sat, 6 May 2023 12:05:13 -0400
Subject: [PATCH] Reactive title

---
 htdocs/RoutePatientDetail.vue | 10 ++++-----
 htdocs/RoutePatientLookup.vue |  4 +++-
 htdocs/RoutePatientOrders.vue | 10 ++++-----
 htdocs/RoutePatientVisits.vue | 10 ++++-----
 htdocs/RoutePlanner.vue       |  4 +++-
 htdocs/RouteRecall.vue        |  4 +++-
 htdocs/RouteSchedule.vue      |  4 +++-
 htdocs/Subtitle.vue           | 41 +++++++++++++++++++++++++++++++++++
 8 files changed, 65 insertions(+), 22 deletions(-)
 create mode 100644 htdocs/Subtitle.vue

diff --git a/htdocs/RoutePatientDetail.vue b/htdocs/RoutePatientDetail.vue
index 36515dc..cc39e79 100644
--- a/htdocs/RoutePatientDetail.vue
+++ b/htdocs/RoutePatientDetail.vue
@@ -1,10 +1,12 @@
 <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;">
@@ -32,6 +34,7 @@
 <script>
 	import { strptime_vista } from './util.mjs';
 
+	import Subtitle from './Subtitle.vue';
 	import DateRangePicker from './DateRangePicker.vue';
 	import ViewVitalsLabs from './ViewVitalsLabs.vue';
 
@@ -39,7 +42,7 @@
 
 	export default {
 		components: {
-			DateRangePicker, ViewVitalsLabs
+			Subtitle, DateRangePicker, ViewVitalsLabs
 		},
 		props: {
 			client: Object
@@ -56,11 +59,6 @@
 				orders_date_begin: now
 			};
 		},
-		watch: {
-			info(value) {
-				if((value) && (value.name)) document.title = value.name;
-			}
-		},
 		methods: {
 			strptime_vista,
 			async loadinfo(dfn, viewsensitive) {
diff --git a/htdocs/RoutePatientLookup.vue b/htdocs/RoutePatientLookup.vue
index 01602c5..e3ba39f 100644
--- a/htdocs/RoutePatientLookup.vue
+++ b/htdocs/RoutePatientLookup.vue
@@ -1,4 +1,5 @@
 <template>
+	<Subtitle value="Lookup" />
 	<div>
 		<div class="card mb-3 shadow">
 			<div class="card-header">Patients</div>
@@ -10,11 +11,12 @@
 </template>
 
 <script>
+	import Subtitle from './Subtitle.vue';
 	import ViewPatientLookup from './ViewPatientLookup.vue';
 
 	export default {
 		components: {
-			ViewPatientLookup
+			Subtitle, ViewPatientLookup
 		},
 		props: {
 			client: Object
diff --git a/htdocs/RoutePatientOrders.vue b/htdocs/RoutePatientOrders.vue
index 0a0c122..59c5720 100644
--- a/htdocs/RoutePatientOrders.vue
+++ b/htdocs/RoutePatientOrders.vue
@@ -1,10 +1,12 @@
 <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;">
@@ -35,6 +37,7 @@
 <script>
 	import { strptime_vista } from './util.mjs';
 
+	import Subtitle from './Subtitle.vue';
 	import DateRangePicker from './DateRangePicker.vue';
 	import OrderFilterPicker from './OrderFilterPicker.vue';
 	import ViewOrderMenu from './ViewOrderMenu.vue';
@@ -44,7 +47,7 @@
 
 	export default {
 		components: {
-			DateRangePicker, OrderFilterPicker, ViewOrderMenu, ViewOrders
+			Subtitle, DateRangePicker, OrderFilterPicker, ViewOrderMenu, ViewOrders
 		},
 		props: {
 			client: Object
@@ -59,11 +62,6 @@
 				orders_date_begin: now
 			};
 		},
-		watch: {
-			info(value) {
-				if((value) && (value.name)) document.title = value.name;
-			}
-		},
 		methods: {
 			strptime_vista,
 			async loadinfo(dfn, viewsensitive) {
diff --git a/htdocs/RoutePatientVisits.vue b/htdocs/RoutePatientVisits.vue
index 7e5a074..88d8964 100644
--- a/htdocs/RoutePatientVisits.vue
+++ b/htdocs/RoutePatientVisits.vue
@@ -1,10 +1,12 @@
 <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;">
@@ -30,6 +32,7 @@
 <script>
 	import { strptime_vista } from './util.mjs';
 
+	import Subtitle from './Subtitle.vue';
 	import DateRangePicker from './DateRangePicker.vue';
 	import OrderFilterPicker from './OrderFilterPicker.vue';
 	import ViewVisits from './ViewVisits.vue';
@@ -38,7 +41,7 @@
 
 	export default {
 		components: {
-			DateRangePicker, OrderFilterPicker, ViewVisits
+			Subtitle, DateRangePicker, OrderFilterPicker, ViewVisits
 		},
 		props: {
 			client: Object
@@ -53,11 +56,6 @@
 				visits_date_begin: now
 			};
 		},
-		watch: {
-			info(value) {
-				if((value) && (value.name)) document.title = value.name;
-			}
-		},
 		methods: {
 			strptime_vista,
 			async loadinfo(dfn, viewsensitive) {
diff --git a/htdocs/RoutePlanner.vue b/htdocs/RoutePlanner.vue
index dd17773..134aeed 100644
--- a/htdocs/RoutePlanner.vue
+++ b/htdocs/RoutePlanner.vue
@@ -1,4 +1,5 @@
 <template>
+	<Subtitle value="Planner" />
 	<div class="card mb-3 shadow">
 		<div class="card-header d-flex justify-content-between align-items-center">
 			<span>Planner</span>
@@ -10,12 +11,13 @@
 </template>
 
 <script>
+	import Subtitle from './Subtitle.vue';
 	import DateRangePicker from './DateRangePicker.vue';
 	import ViewPlanner from './ViewPlanner.vue';
 
 	export default {
 		components: {
-			DateRangePicker, ViewPlanner
+			Subtitle, DateRangePicker, ViewPlanner
 		},
 		props: {
 			client: Object
diff --git a/htdocs/RouteRecall.vue b/htdocs/RouteRecall.vue
index 3d6936c..95d2175 100644
--- a/htdocs/RouteRecall.vue
+++ b/htdocs/RouteRecall.vue
@@ -1,4 +1,5 @@
 <template>
+	<Subtitle value="Recall" />
 	<div>
 		<div class="card mb-3 shadow">
 			<div class="card-header">Clinics</div>
@@ -47,6 +48,7 @@
 <script>
 	import { groupByArray, strtr_unscramble, strHashHSL, strftime_vista, debounce } from './util.mjs';
 
+	import Subtitle from './Subtitle.vue';
 	import ViewResourceLookup from './ViewResourceLookup.vue';
 
 	function dateonly(date) {
@@ -55,7 +57,7 @@
 
 	export default {
 		components: {
-			ViewResourceLookup
+			Subtitle, ViewResourceLookup
 		},
 		props: {
 			client: Object
diff --git a/htdocs/RouteSchedule.vue b/htdocs/RouteSchedule.vue
index a512d77..591f9a0 100644
--- a/htdocs/RouteSchedule.vue
+++ b/htdocs/RouteSchedule.vue
@@ -1,4 +1,5 @@
 <template>
+	<Subtitle value="Schedule" />
 	<div>
 		<div class="card mb-3 shadow">
 			<div class="card-header">Clinics</div>
@@ -19,6 +20,7 @@
 </template>
 
 <script>
+	import Subtitle from './Subtitle.vue';
 	import ViewResourceLookup from './ViewResourceLookup.vue';
 	import DateRangePicker from './DateRangePicker.vue';
 	import ViewSchedule from './ViewSchedule.vue';
@@ -29,7 +31,7 @@
 
 	export default {
 		components: {
-			ViewResourceLookup, DateRangePicker, ViewSchedule
+			Subtitle, ViewResourceLookup, DateRangePicker, ViewSchedule
 		},
 		props: {
 			client: Object
diff --git a/htdocs/Subtitle.vue b/htdocs/Subtitle.vue
new file mode 100644
index 0000000..abee98f
--- /dev/null
+++ b/htdocs/Subtitle.vue
@@ -0,0 +1,41 @@
+<script>
+	import { debounce } from './util.mjs';
+
+	const base = 'nuVistA';
+	const state = [{ value: base }];
+	const settitle = debounce(s => document.title = s || base, 0);
+
+	export default {
+		props: ['value'],
+		data() {
+			return { ptr: null };
+		},
+		watch: {
+			value: {
+				handler(value) {
+					this.update(value);
+				}, immediate: true
+			}
+		},
+		methods: {
+			update(value) {
+				if(value) {
+					if(this.ptr) this.ptr.value = value;
+					else {
+						this.ptr = { value };
+						state.unshift(this.ptr);
+					}
+				} else if(this.ptr) {
+					var idx = state.indexOf(this.ptr);
+					if(idx >= 0) state.splice(idx, 1);
+					this.ptr = null;
+				}
+				settitle(state.map(x => x.value).join(' - '));
+			}
+		},
+		unmounted() {
+			this.update();
+		},
+		render() {}
+	};
+</script>