nuVistA/htdocs/RouteSchedule.vue

<template>
	<div>
		<div class="card mb-3 shadow">
			<div class="card-header">Clinics</div>
			<div class="card-body">
				<ViewResourceLookup :client="client" v-model:selection="selection" />
			</div>
		</div>
		<div class="card mb-3 shadow">
			<div class="card-header d-flex justify-content-between align-items-center">
				<span>Schedule</span>
				<DateRangePicker range="1D" direction="+1" v-model:date="date" v-model:date_end="date_end" />
			</div>
			<div class="card-body">
				<ViewSchedule :client="client" :selection="selection" :date_begin="date" :date_end="new Date(date_end.getTime() - 1)" />
			</div>
		</div>
	</div>
</template>

<script>
	import { state } from './vistax.mjs';

	import ViewResourceLookup from './ViewResourceLookup.vue';
	import DateRangePicker from './DateRangePicker.vue';
	import ViewSchedule from './ViewSchedule.vue';

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

	export default {
		components: {
			ViewResourceLookup, DateRangePicker, ViewSchedule
		},
		props: {
			client: Object
		},
		data() {
			var resources = state.resources;
			return {
				selection: resources ? (resources.split(',').filter(x => x) || []) : [],
				date: dateonly(new Date()),
				date_end: dateonly(new Date())
			};
		},
		watch: {
			selection(value, oldvalue) {
				state.resources = value.join(',');
			}
		}
	};
</script>