nuVistA/htdocs/ViewSchedule.vue

<template>
	<template v-if="age !== undefined">
		<div v-if="age == Infinity" class="alert alert-danger">❌ update error</div>
		<div v-else-if="age >= 90000" class="alert alert-warning">⚠ last updated <template v-if="age < 3600000">{{ts.toLocaleString()}}</template><template v-else>{{ts.toLocaleString()}}</template></div>
	</template>
	<div v-if="filter_array.length > 0"><span class="tag badge bg-primary" @click="filter = {}">CLEAR {{filter_array.length}} TAG{{filter_array.length > 1 ? 'S' : ''}}</span><span v-for="key in filter_array" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="delete filter[key]">❌ {{key.toUpperCase()}}</span></div>
	<table class="table" style="font-family: monospace;" v-if="appointments && appointments.length > 0">
		<thead>
			<tr><th style="width: 7rem;">Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th style="width: 16rem;">Assignee</th></tr>
		</thead>
		<tbody class="striped">
			<tr v-for="row in appointments" v-show="(filter_array.length < 1) || (filter_conj(gettags(row)))" :class="{ voided: (row.CANCELLED != '0') || (row.NOSHOW != '0') }" :style="{ backgroundColor: strHashHSL(row.RESOURCENAME, '90%') }">
				<td v-if="row.CANCELLED != '0'" title="Cancelled"><div><span class="emoji">❌</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
				<td v-else-if="row.NOSHOW != '0'" title="No show"><div><span class="emoji">❓</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
				<td v-else-if="row.CHECKOUT" :title="'Checked out ' + row.CHECKOUT"><div><span class="emoji">✅</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
				<td v-else-if="row.CHECKIN" :title="'Checked in ' + row.CHECKIN"><div><span class="emoji">✔</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
				<td v-else title="Scheduled"><div><span class="emoji">⌛</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
				<td>{{row.RESOURCENAME}}</td>
				<td><router-link :to="'/patient/' + row.PATIENTID">{{row.PATIENTNAME}} <span :title="row.HRN">{{row.HRN.slice(-4)}}</span></router-link></td>
				<td>{{row.NOTE}}<span v-for="(value, key) in gettags(row)" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="filter[key] = true">{{value}}</span></td>
				<td><Autocomplete :modelValue="practitioner[row.PATIENTNAME]" @update:modelValue="x => practitioner[row.PATIENTNAME] = x" :items="practitioner_list" /></td>
			</tr>
		</tbody>
	</table>
</template>

<style scoped>
	.striped {
		background-image: repeating-linear-gradient(
			-45deg,
			rgba(255, 255, 255, 0.1),
			rgba(255, 255, 255, 0.1) 10px,
			rgba(0, 0, 0, 0.1) 10px,
			rgba(0, 0, 0, 0.1) 20px
		);
	}
	.voided {
		opacity: 0.8;
	}
	.date {
		font-size: 80%;
	}
	.emoji {
		font-family:
			"Twemoji Mozilla",
			"Apple Color Emoji",
			"Segoe UI Emoji",
			"Segoe UI Symbol",
			"Noto Color Emoji",
			"EmojiOne Color",
			"Android Emoji",
			sans-serif;
	}
	.badge.tag {
		cursor: pointer;
		margin-right: 0.35em;
	}
</style>

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

	import Autocomplete from './Autocomplete.vue';

	export default {
		components: {
			Autocomplete
		},
		props: {
			client: Object,
			selection: {
				type: Array,
				default: []
			},
			date_begin: Date,
			date_end: Date
		},
		data() {
			return {
				appointments: [],
				ts: null,
				age: undefined,
				filter: {}
			};
		},
		computed: {
			filter_array() {
				return Object.keys(this.filter).sort();
			},
			practitioner() {
				return this.client.remotestate.practitioner || (this.client.remotestate.practitioner = {});
			},
			practitioner_list() {
				return this.practitioner ? uniq(Object.values(this.practitioner).filter(x => x)).sort() : [];
			}
		},
		methods: {
			strHashHSL,
			gettags(row) {
				var res = {}, matches;
				if((row.RESOURCENAME) && (matches = row.RESOURCENAME.replace(/\W+/g, '-').replace(/^-+|-+$/g, ''))) res[matches.toLowerCase()] = matches;
				if(row.WALKIN != '0') res['walkin'] = 'WALKIN';
				if(row.CANCELLED != '0') res['cancelled'] = 'CANCELLED';
				else if(row.NOSHOW != '0') res['noshow'] = 'NOSHOW';
				else if(row.CHECKOUT) res['checkedout'] = 'CHECKEDOUT';
				else if(row.CHECKIN) res['checkedin'] = 'CHECKEDIN';
				if((row.NOTE) && (matches = row.NOTE.match(/#[0-9a-z][\w-]*/gi))) matches.reduce((acc, val) => (acc[val.substring(1).toLowerCase()] = val.substring(1), acc), res);
				return res;
			},
			filter_conj(tags) {
				var filter_array = this.filter_array;
				for(var i = this.filter_array.length - 1; i >= 0; --i) if(!tags[this.filter_array[i]]) return false;
				return true;
			},
			async update() {
				try {
					this.appointments = (await this.client.SDEC_CRSCHED(this.selection.join('|') + '|', strfdate_vista(this.date_begin), strfdate_vista(this.date_end) + '@2359')).sort((a, b) => (new Date(a.START_TIME)) - (new Date(b.START_TIME)));
					var now = new Date();
					this.ts = this.appointments._ts ? new Date(1000*this.appointments._ts) : now;
					this.age = now - this.ts;
					this.timer = window.setTimeout(this.update, Math.max(60000 - this.age, 10000));
				} catch(ex) {
					this.age = this.ts ? (new Date()) - this.ts : Infinity;
					console.warn(ex);
					this.timer = window.setTimeout(this.update, 30000);
				}
			}
		},
		mounted() {
			this.$watch(
				() => (this.client, this.selection, this.date_begin, this.date_end, {}),
				debounce(async () => {
					window.clearTimeout(this.timer);
					this.update();
				}, 500)
			);
		},
		unmounted() {
			window.clearTimeout(this.timer);
		}
	};
</script>