nuVistA/htdocs/RouteRecall.vue

<template>
	<Subtitle value="Recall" />
	<div class="card mb-3 shadow">
		<div class="card-header d-flex justify-content-between align-items-center">
			<span>Recall list ({{patients_lost.length + patients_outstanding.length}})</span>
			<router-link to="/settings">Select clinics<template v-if="selection.length > 0"> ({{selection.length}})</template></router-link>
		</div>
		<div class="card-body">
			<table class="table" style="font-family: monospace;" v-if="patients_lost && patients_lost.length > 0">
				<thead>
					<tr><th>Lost ({{patients_lost.length}})</th><th>Last appt</th><th>Clinic</th><th>Days</th></tr>
				</thead>
				<tbody>
					<tr v-for="row in patients_lost" :style="{ backgroundColor: strHashHSL(row.Clinic, '90%') }">
						<td v-if="production"><router-link :to="'/patient/$' + row.key">{{row.Name}} <span :title="row.key">{{row.key.slice(-4)}}</span></router-link></td>
						<td v-else><router-link :title="strtr_unscramble(row.Name)" :to="'/patient/$' + row.Name.charAt(0) + row.key.slice(-4) + '?name=' + row.Name">{{row.Name}} <span :title="row.key">{{row.key.slice(-4)}}</span></router-link></td>
						<td>{{datefmt(row.TimeLast)}} {{dow[row.TimeLast.getDay()]}}</td>
						<td>{{row.Clinic}}</td>
						<td>{{Math.round(row.TimeLastDiff/86400000)}}</td>
					</tr>
				</tbody>
			</table>
			<table class="table" style="font-family: monospace;" v-if="patients_outstanding && patients_outstanding.length > 0">
				<thead>
					<tr><th>Outstanding ({{patients_outstanding.length}})</th><th>Next appt</th><th>Clinic</th><th>Days</th></tr>
				</thead>
				<tbody>
					<tr v-for="row in patients_outstanding" :style="{ backgroundColor: strHashHSL(row.Clinic, '90%') }">
						<td v-if="production"><router-link :to="'/patient/$' + row.key">{{row.Name}} <span :title="row.key">{{row.key.slice(-4)}}</span></router-link></td>
						<td v-else><router-link :title="strtr_unscramble(row.Name)" :to="'/patient/$' + row.Name.charAt(0) + row.key.slice(-4) + '?name=' + row.Name">{{row.Name}} <span :title="row.key">{{row.key.slice(-4)}}</span></router-link></td>
						<td>{{datefmt(row.TimeNext)}} {{dow[row.TimeNext.getDay()]}}</td>
						<td>{{row.Clinic}}</td>
						<td>{{Math.round(row.TimeNextDiff/86400000)}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

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

	import Subtitle from './Subtitle.vue';

	function dateonly(date) {
		return new Date(date.getFullYear(), date.getMonth(), date.getDate());
	}

	export default {
		components: {
			Subtitle
		},
		props: {
			client: Object
		},
		data() {
			var today = dateonly(new Date());
			return {
				patients: [],
				production: true,
				date_begin: new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()),
				date_end: new Date(today.getFullYear() + 1, today.getMonth(), today.getDate()),
				dow: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
			};
		},
		computed: {
			selection() { return (this.client) && (this.client.remotestate.resources) ? (this.client.remotestate.resources.split(',').filter(x => x) || []) : [] },
			patients_lost() {
				return this.patients.filter(x => x.TimeLastDiff >= 0).sort((a, b) => b.TimeLastDiff - a.TimeLastDiff);
			},
			patients_outstanding() {
				return this.patients.filter(x => x.TimeNextDiff >= 0).sort((a, b) => b.TimeNextDiff - a.TimeNextDiff);
			}
		},
		watch: {
			selection: {
				handler(value) { this.$nextTick(() => this.debounced_selection(value)); },
				immediate: true
			}
		},
		methods: {
			strHashHSL,
			strtr_unscramble,
			datefmt(date) {
				return date ? date.toLocaleDateString('sv-SE') : '';
			}
		},
		created() {
			this.debounced_selection = debounce(async function(value) {
				var patients = this.selection.length > 0 ? groupByArray(await this.client.SDEC_CLINLET(this.selection.join('|') + '|', strftime_vista(this.date_begin), strftime_vista(this.date_end)), x => x.HRN) : [], now = new Date(), group, values, appt;
				for(var i = patients.length - 1; i >= 0; --i) {
					group = patients[i];
					group.Name = group.values[0].Name;
					group.DOB = group.values[0].DOB;
					group.values = values = group.values.map(function(x) { return { Time: new Date(x.ApptDate), Clinic: x.Clinic }; }).sort((a, b) => a.Time - b.Time);
					group.TimeLast = (appt = group.values[group.values.length - 1]).Time;
					group.TimeLastDiff = now - group.TimeLast;
					group.Clinic = appt.Clinic;
					if(group.TimeLastDiff < 0) for(var j = 0; j < values.length; ++j) if(values[j].Time - now > 0) {
						group.TimeNext = values[j].Time;
						group.TimeNextDiff = group.TimeNext - now;
						break;
					}
				}
				this.patients = patients.sort((a, b) => a.Time - b.Time);
			}, 500);
		},
		async mounted() {
			this.production = (await this.client.serverinfo()).result.production == '1';
		}
	};
</script>