nuVistA/htdocs/RoutePatientReports.vue

<template>
	<Subtitle value="Reports" />
	<Subtitle :value="patient_info.name" />
	<div class="filter card mb-3 shadow" :class="{ 'list-wide': !selection }">
		<ul class="list-group list-group-flush">
			<li class="list-group-item">
				<div class="input-group">
					<span class="input-group-text">🔎</span>
					<input type="text" class="form-control" placeholder="Filter" v-model="x_query" />
					<button v-if="x_query" class="btn btn-outline-secondary" @click="x_query = ''">❌</button>
				</div>
			</li>
			<li class="list-group-item d-flex justify-content-between align-items-center">
				<div class="btn-group">
					<button v-for="report in reports" class="btn" :class="{ 'btn-primary': report.enabled, 'btn-outline-primary': !report.enabled }" @click="toggle(report)">{{report.name}}</button>
				</div>
				<button class="btn" :class="{ 'btn-success': unify, 'btn-outline-success': !unify }" @click="unify = !unify">Unify</button>
				<DateRangePicker range="1M" direction="-1" v-model:date="date_end" v-model:date_end="date_begin" />
			</li>
		</ul>
	</div>
	<div v-if="resultset.length > 0" class="row">
		<div class="selector col-12" :class="{ 'col-xl-4': selection }">
			<div class="card mb-3 shadow">
				<div class="card-header"><template v-if="resultset.length > 0"><template v-if="resultset.length > rs_filtered.length">{{rs_filtered.length}} of </template>{{resultset.length}}</template><template v-else-if="is_loading">Loading</template><template v-else>No</template> record{{resultset.length == 1 ? '' : 's'}}</div>
				<ul class="scroller list-group list-group-flush" :class="{ 'list-skinny': selection }" ref="scroller">
					<li v-for="item in rs_filtered" :key="item" class="record list-group-item" :class="{ 'active': (selection) && (selection.id == item.id) }" @click="selection = item"><span class="badge emblem" :class="[item.emblem]" /> <span class="datetime date">{{datestring(item.time)}}</span> <span class="datetime time">{{timestring(item.time)}}</span> • <span class="title"><span v-for="title in item.title">{{title}}</span></span><template v-if="item.snippets"><div v-for="snippet in item.snippets" class="snippet" v-html="snippet" /></template></li>
					<li class="bottom list-group-item" ref="bottom" />
				</ul>
			</div>
		</div>
		<div v-if="selection" class="col-12 col-xl-8">
			<div class="card mb-3 shadow">
				<div class="card-header d-flex justify-content-between align-items-center">
					<span>{{selection.title.join(' - ')}}</span>
					<span class="close" @click="selection = null">❌</span>
				</div>
				<div class="detail card-body" v-html="selection.highlight || selection.detail" />
			</div>
		</div>
	</div>
</template>

<style>
	ul.scroller span.highlight, div.detail span.highlight {
		background-color: #ff0;
	}
	li.record.active span.highlight {
		color: #000;
	}
</style>

<style scoped>
	div.filter.list-wide {
		position: sticky;
		top: 3.65rem;
		z-index: 2;
	}
	div.selector {
		position: sticky;
		top: 1.15rem;
		z-index: 1;
	}
	ul.scroller.list-skinny {
		max-height: 25vh;
		overflow-y: auto;
	}
	li.record {
		cursor: default;
		border-top: 1px solid #dee2e6;
		padding: 0.25rem 0.75rem;
	}
	li.record:nth-child(even) {
		background-color: rgba(0, 0, 0, 0.05);
	}
	li.record.active {
		color: #fff;
		background-color: #0d6efd;
	}
	li.bottom {
		padding: 0;
	}
	span.badge.emblem:empty {
		display: inline-block;
		font-family: monospace;
	}
	span.badge.emblem-notes {
		background-color: var(--bs-purple);
	}
	span.badge.emblem-notes::after {
		content: 'N';
	}
	span.badge.emblem-labs {
		background-color: var(--bs-pink);
	}
	span.badge.emblem-labs::after {
		content: 'L';
	}
	span.badge.emblem-microbiology {
		background-color: var(--bs-orange);
	}
	span.badge.emblem-microbiology::after {
		content: 'M';
	}
	span.badge.emblem-bloodbank {
		background-color: var(--bs-red);
	}
	span.badge.emblem-bloodbank::after {
		content: 'B';
	}
	span.badge.emblem-pathology {
		background-color: var(--bs-yellow);
	}
	span.badge.emblem-pathology::after {
		content: 'P';
	}
	span.badge.emblem-radiology {
		background-color: var(--bs-green);
	}
	span.badge.emblem-radiology::after {
		content: 'R';
	}
	span.datetime, span.title span:first-child {
		font-weight: bold;
	}
	span.title span:not(:first-child)::before {
		content: ' - ';
	}
	ul.scroller.list-skinny span.datetime.time {
		display: none;
	}
	div.snippet {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	span.close {
		cursor: default;
	}
	div.detail {
		font-family: monospace;
		white-space: pre-wrap;
	}
	@media (min-width: 1200px) {
		div.selector {
			position: static;
		}
		ul.scroller.list-skinny {
			max-height: 75vh;
		}
		div.detail {
			max-height: 75vh;
			overflow-y: auto;
		}
	}
</style>

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

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

	const SZ_WINDOW = 100;
	const SZ_RANGE = 40000;

	const reports = [
		{
			name: 'Notes',
			rpt_id: 'OR_PN:PROGRESS NOTES~TIUPRG;ORDV04;15;',
			map(x) {
				var time = new Date(x[3]);
				return {
					time,
					id: 'OR_PN:' + time.getTime() + ':' + x[2],
					emblem: 'emblem-notes',
					title: [x[4], x[5], '#' + x[2]],
					detail: escape_html(x[6])
				};
			},
			enabled: true
		},
		{
			name: 'Labs',
			rpt_id: 'OR_OV_R:LAB OVERVIEW (COLLECTED SPECIMENS)~OV;ORDV02C;32;',
			map(x) {
				var time = new Date(x[2]);
				return {
					time,
					id: 'OR_OV_R:' + time.getTime() + ':' + x[12],
					emblem: 'emblem-labs',
					title: [x[3], x[6], x[8], x[10], '#' + x[12]],
					detail: escape_html(x[15])
				};
			}
		},
		{
			name: 'Microbiology',
			rpt_id: 'OR_MIC:MICROBIOLOGY~MI;ORDV05;38;',
			map(x) {
				var time = new Date(x[2]);
				return {
					time,
					id: 'OR_MIC:' + time.getTime() + ':' + x[6],
					emblem: 'emblem-microbiology',
					title: [x[3], x[4], x[5], '#' + x[6]],
					detail: escape_html(x[7])
				};
			}
		},
		{
			name: 'Blood Bank',
			rpt_id: '2:BLOOD BANK REPORT~;;0',
			singleton: true,
			map(x) {
				var time = new Date();
				return {
					time,
					id: 'BB',
					emblem: 'emblem-bloodbank',
					title: ['BLOOD BANK'],
					detail: escape_html(x)
				};
			}
		},
		{
			name: 'Pathology',
			rpt_id: 'OR_APR:ANATOMIC PATHOLOGY~SP;ORDV02A;0;',
			map(x) {
				var time = new Date(x[2]);
				return {
					time,
					id: 'OR_APR:' + time.getTime() + ':' + x[4],
					emblem: 'emblem-pathology',
					title: [x[3], '#' + x[4]],
					detail: escape_html(x[5])
				};
			}
		},
		{
			name: 'Radiology',
			rpt_id: 'OR_R18:IMAGING~RIM;ORDV08;0;',
			map(x) {
				var time = new Date(x[2]);
				return {
					time,
					id: 'OR_R18:' + time.getTime() + ':' + x[9],
					emblem: 'emblem-radiology',
					title: [x[3], x[4], x[5], '#' + x[9]],
					detail: escape_html(x[6])
				};
			}
		},
	];

	const escape_div = document.createElement('div');
	function escape_html(s) {
		escape_div.textContent = s;
		return escape_div.innerHTML;
	}

	function snippets(text, regex, replacement) {
		var res = [], context = new RegExp('(?:\\S+\\s+){0,3}\\S*(' + regex.source + ')\\S*(?:\\s+\\S+){0,3}', regex.flags), match;
		if(context.global) while((match = context.exec(text)) !== null) res.push(match[0].replace(regex, replacement).replace(/\s+/g, ' ').replace(/([\W_])\1{2,}/g, '$1$1'));
		else if((match = context.exec(text)) !== null) res.push(match[0].replace(regex, replacement).replace(/\s+/g, ' ').replace(/([\W_])\1{2,}/g, '$1$1'));
		return uniq(res);
	}

	export default {
		components: {
			Subtitle, DateRangePicker
		},
		props: {
			client: Object,
			sensitive: Boolean,
			patient_dfn: String,
			patient_info: Object
		},
		data() {
			var now = new Date();
			return {
				dfn: null,
				is_loading: false,
				date_end: now,
				date_begin: now,
				query: '',
				x_query: '',
				unify: false,
				reports,
				resultsets: {},
				selection: null
			};
		},
		computed: {
			resultset() {
				return this.reports.map((x, i) => x.enabled ? this.resultsets[i] : null).filter(x => x).reduce((acc, val) => (Array.prototype.push.apply(acc, val), acc), []).sort((a, b) => b.time - a.time);
			},
			rs_filtered() {
				var query = this.query.replace(/^\s+|\s+$/g, '');
				if(query.length > 0) {
					if(query.startsWith('"')) {
						query = query.substring(1, query.length - ((query.length > 1) && (query.endsWith('"')) ? 1 : 0));
						if(query.length > 0) {
							query = new RegExp(query.replace(/\s+/g, ' ').split(' ').map(x => x.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('\\s*'), 'gims');
							return this.resultset.filter(x => (x.detail) && (query.test(x.detail))).map(x => Object.assign({ snippets: snippets(x.detail, query, '<span class="highlight">$&</span>'), highlight: x.detail.replace(query, '<span class="highlight">$&</span>') }, x));
						}
					} else if(query.startsWith('/')) {
						if(query.length > 1) {
							var m = /^\/(.*)\/([a-z]*)$/.exec(query);
							query = m ? new RegExp(m[1], m[2]) : new RegExp(query.substring(1), 'gims');
							return this.resultset.filter(x => (x.detail) && (query.test(x.detail))).map(x => Object.assign({ snippets: snippets(x.detail, query, '<span class="highlight">$&</span>'), highlight: x.detail.replace(query, '<span class="highlight">$&</span>') }, x));
						}
					} else {
						query = new RegExp(query.replace(/\s+/g, ' ').split(' ').map(x => '\\b' + x.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('\\S*(?:\\s+\\S+){0,5}\\s+'), 'gims');
						return this.resultset.filter(x => (x.detail) && (query.test(x.detail))).map(x => Object.assign({ snippets: snippets(x.detail, query, '<span class="highlight">$&</span>'), highlight: x.detail.replace(query, '<span class="highlight">$&</span>') }, x));
					}
				}
				return this.resultset;
			}
		},
		watch: {
			rs_filtered(value) {
				if((value) && (this.selection)) {
					var id = this.selection.id;
					for(var i = 0; i < value.length; ++i) if(value[i].id == id) return this.selection = value[i];
					this.selection = null;
				}
			}
		},
		methods: {
			strftime_vista,
			datestring(date) {
				return date.toLocaleDateString('sv-SE');
			},
			timestring(date) {
				return date.toLocaleTimeString('en-GB').substring(0, 5);
			},
			toggle(report) {
				if(report.enabled) report.enabled = false;
				else if(this.unify) report.enabled = true;
				else {
					var reports = this.reports;
					for(var i = reports.length - 1; i >= 0; --i) reports[i].enabled = false;
					report.enabled = true;
				}
			},
			async load_more() {
				try {
					this.is_loading = true;
					if((this.client) && (this.patient_dfn)) {
						if(this.dfn != this.patient_dfn) {
							this.dfn = this.patient_dfn;
							this.resultsets = {};
						}
						var dfn = this.patient_dfn, resultsets = this.resultsets, resultset, reports = this.reports, report, alpha = strftime_vista(this.date_begin).toFixed(4), omega = strftime_vista(this.date_end).toFixed(4);
						for(var i = 0; i < reports.length; ++i) if(((report = reports[i]).enabled) && (!((resultset = resultsets[i]) && (alpha == resultset.alpha) && (omega == resultset.omega)))) {
							var data = [], batch, idmap = {}, omega0 = omega;
							do {
								batch = await this.client.ORWRP_REPORT_TEXT(dfn, report.rpt_id + (report.rpt_id.endsWith(';') ? SZ_WINDOW : ''), '', SZ_RANGE, '', alpha, omega0);
								if(report.singleton) data = [report.map(batch[0].join('\n'))];
								else if((batch = batch.map(item => {
									var res = [], line, brk, sub;
									for(var i = 0; i < item.length; ++i) {
										brk = (line = item[i]).indexOf('^');
										if(brk >= 0) {
											if(res[sub = line.substring(0, brk)]) res[sub].push(line.substring(brk + 1));
											else res[sub] = [line.substring(brk + 1)];
										}
									}
									for(var k in res) if(res[k]) res[k] = res[k].join('\n');
									res = report.map(res);
									return idmap[res.id] ? console.warn('Duplicate record', res) : res;
								}).filter(x => x)).length > 0) {
									Array.prototype.push.apply(data, batch.sort((a, b) => b.time - a.time));
									batch.map(x => x.id).reduce((acc, val) => (acc[val] = true, acc), idmap);
									omega0 = strftime_vista(data[data.length - 1].time);
								};
							} while(batch.length >= SZ_WINDOW);
							data.alpha = alpha;
							data.omega = omega;
							resultsets[i] = data;
						}
					} else {
						this.dfn = null;
						this.resultsets = {};
					}
				} catch(ex) {
					console.warn(ex);
				} finally {
					this.is_loading = false;
				}
			}
		},
		created() {
			this.$watch(
				() => (this.client, this.patient_dfn, this.reports.map(x => x.enabled), this.date_begin, this.date_end, {}),
				debounce(() => this.load_more(), 500),
				{ immediate: true }
			);
			this.$watch(
				() => this.x_query,
				debounce(value => this.query = value, 500),
				{ immediate: true }
			);
		}
	};
</script>