nuVistA/htdocs/RoutePatientDetail.vue

<template>
	<div v-if="info">
		<div class="card mb-3 shadow">
			<div class="card-header">{{info.name}} #{{$route.params.id}} ${{info.pid}}</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="vitals_date" v-model:date_end="vitals_date_begin" />
			</div>
			<div class="card-body">
				<ViewVitalsLabs :client="client" :dfn="$route.params.id" :date_begin="vitals_date_begin" :date_end="vitals_date" />
			</div>
		</div>
	</div>
</template>

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

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

	var now = new Date();

	export default {
		components: {
			DateRangePicker, ViewVitalsLabs
		},
		props: {
			client: Object
		},
		data() {
			return {
				info: null,
				vitals_date: now,
				vitals_date_begin: now,
				labs_date: now,
				labs_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[0].dfn);
						break;
					}
				}
			} else this.info = await this.client.ORWPT16_ID_INFO(this.$route.params.id);
		},
		async beforeRouteUpdate(to, from, next) {
			this.info = await this.client.ORWPT16_ID_INFO(to.params.id);
			next();
		}
	};
</script>