nuVistA/htdocs/RoutePatientReports.vue

<template>
	<Subtitle :value="selection ? selection.name : 'Reports'" />
	<Subtitle :value="patient_info.name" />
	<div class="card mb-3 shadow">
		<ul class="card-header nav nav-pills nav-fill">
			<li v-for="report in reports" class="nav-item" @click="selection = report">
				<router-link class="nav-link" :to="'/patient/' + patient_dfn + '/reports/' + report.name.toLowerCase().replace(/\s+/g, '') + (sensitive ? '?viewsensitive' : '')">{{report.name}}</router-link>
			</li>
		</ul>
		<ul class="list-group list-group-flush">
			<li class="list-group-item d-flex justify-content-around align-items-center">
				<DateRangePicker range="2Y" direction="-1" v-model:date="date_end" v-model:date_end="date_begin" />
				<div class="limit input-group">
					<span class="input-group-text">Limit</span>
					<input type="number" step="1" class="form-control" v-model="limit" />
				</div>
			</li>
			<li v-if="(selection) && (resultset) && (resultset.length)" class="list-group-item"><ViewReport :resultset="resultset" :table="selection.table" :detail="selection.detail" /></li>
		</ul>
		<div v-if="(selection) && (resultset) && (resultset.length)" class="card-footer">{{resultset.length}} record{{resultset.length == 1 ? '' : 's'}} loaded<template v-if="resultset.length == limit"> (may be truncated)</template></div>
	</div>
</template>

<style scoped>
	.router-link-exact-active {
		color: #fff;
		background-color: #0d6efd;
	}
	div.limit {
		width: 20rem;
	}
	div.card-footer {
		text-align: center;
	}
</style>

<script>
	import { debounce, strftime_vista } from './util.mjs';

	import Subtitle from './Subtitle.vue';
	import DateRangePicker from './DateRangePicker.vue';
	import ViewReport from './ViewReport.vue';

	const reports = [
		{
			name: 'Blood Bank',
			rpt_id: '2:BLOOD BANK REPORT~;;0',
			detail: null,
			table: []
		},
		{
			name: 'Microbiology',
			rpt_id: 'OR_MIC:MICROBIOLOGY~MI;ORDV05;38;',
			detail: 7,
			table: [
				{ subscript: 2, title: 'Collection Date/Time' },
				{ subscript: 3, title: 'Test Name' },
				{ subscript: 4, title: 'Sample' },
				{ subscript: 5, title: 'Specimen' },
				{ subscript: 6, title: 'Accession #' },
				{ subscript: 8, title: '[+]' },
			]
		},
		{
			name: 'Pathology',
			rpt_id: 'OR_APR:ANATOMIC PATHOLOGY~SP;ORDV02A;0;',
			detail: 5,
			table: [
				{ subscript: 2, title: 'Collection Date/Time' },
				{ subscript: 3, title: 'Specimen' },
				{ subscript: 4, title: 'Accession #' },
				{ subscript: 6, title: '[+]' },
				//{ subscript: 7, title: '#7' },
				//{ subscript: 8, title: '#8' },
			]
		},
		{
			name: 'Radiology',
			rpt_id: 'OR_R18:IMAGING~RIM;ORDV08;0;',
			detail: 6,
			table: [
				{ subscript: 2, title: 'Procedure Date/Time' },
				{ subscript: 3, title: 'Procedure Name' },
				{ subscript: 4, title: 'Report Status' },
				{ subscript: 5, title: 'Case #' },
				{ subscript: 7, title: '[+]' },
				//{ subscript: 8, title: '#8' },
				//{ subscript: 9, title: '#9' },
			]
		},
		{
			name: 'Notes',
			rpt_id: 'OR_PN:PROGRESS NOTES~TIUPRG;ORDV04;15;',
			detail: 6,
			table: [
				{ subscript: 3, title: 'Record Date/Time' },
				{ subscript: 4, title: 'Type' },
				{ subscript: 5, title: 'Author' },
				{ subscript: 7, title: '[+]' },
				//{ subscript: 8, title: '#8' },
			]
		},
	];

	export default {
		components: {
			Subtitle, DateRangePicker, ViewReport
		},
		props: {
			client: Object,
			sensitive: Boolean,
			patient_dfn: String,
			patient_info: Object,
			report_name: String
		},
		data() {
			var now = new Date();
			return {
				date_begin: now,
				date_end: now,
				limit: 100,
				reports,
				selection: null,
				resultset: []
			};
		},
		watch: {
			$route: {
				async handler(value) {
					await this.$nextTick();
					this.selection = this.report_name ? reports.find(x => x.name == this.report_name) : null;
				}, immediate: true
			}
		},
		created() {
			this.$watch(
				() => (this.client, this.patient_dfn, this.selection, this.date_begin, this.date_end, this.limit, {}),
				debounce(async () => {
					var limit = Math.floor(Math.abs(this.limit));
					this.resultset = [];
					if((this.client) && (this.patient_dfn) && (this.selection)) this.resultset = await this.client.ORWRP_REPORT_TEXT(this.patient_dfn, this.selection.rpt_id + (this.selection.rpt_id.endsWith(';') ? Math.round(this.limit) : ''), '', Math.round(this.limit), '', strftime_vista(this.date_begin), strftime_vista(this.date_end));
				}, 500),
				{ immediate: true }
			);
		}
	};
</script>