nuVistA/htdocs/RoutePatientDetail.vue

<template>
	<div v-if="info">
		<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('en-CA')}}</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>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>
		<div class="card mb-3 shadow">
			<div class="card-header d-flex justify-content-between align-items-center">
				<span>Orders</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>
	</div>
</template>

<script>
	import { strptime_vista } from './util.mjs';

	import DateRangePicker from './DateRangePicker.vue';
	import ViewVitalsLabs from './ViewVitalsLabs.vue';
	import OrderFilterPicker from './OrderFilterPicker.vue';
	import ViewOrders from './ViewOrders.vue';

	var now = new Date();

	export default {
		components: {
			DateRangePicker, ViewVitalsLabs, OrderFilterPicker, ViewOrders
		},
		props: {
			client: Object
		},
		data() {
			return {
				dfn: null,
				info: null,
				report_date: now,
				report_date_begin: now,
				orders_filter: 2,
				orders_date: now,
				orders_date_begin: now
			};
		},
		watch: {
			info(value) {
				if((value) && (value.name)) document.title = value.name;
			}
		},
		methods: {
			strptime_vista
		},
		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.dfn = this.$route.params.id;
				this.info = await this.client.ORWPT16_ID_INFO(this.$route.params.id);
			}
		},
		async beforeRouteUpdate(to, from, next) {
			this.dfn = to.params.id;
			this.info = await this.client.ORWPT16_ID_INFO(to.params.id);
			next();
		}
	};
</script>