Reactive title

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) {