nuVistA/htdocs/RoutePlanner.vue

<template>
	<Subtitle value="Planner" />
	<div class="card mb-3 shadow">
		<div class="card-header d-flex justify-content-between align-items-center">
			<span>Planner</span>
			<select v-if="(resourcelist_selected) && (resourcelist_selected.length > 0)" class="form-select form-select-sm" style="width: auto;" v-model="resource"><option v-for="row in resourcelist_selected" :value="row.RESOURCEID">{{row.RESOURCE_NAME}} #{{row.RESOURCEID}}</option></select>
			<DateRangePicker range="1M" direction="1" v-model:date="date_begin" v-model:date_end="date_end" />
		</div>
		<div class="card-body"><ViewPlanner :client="client" :resource="resource" :date_begin="date_begin" :date_end="date_end" /></div>
	</div>
</template>

<script>
	import Subtitle from './Subtitle.vue';
	import DateRangePicker from './DateRangePicker.vue';
	import ViewPlanner from './ViewPlanner.vue';

	export default {
		components: {
			Subtitle, DateRangePicker, ViewPlanner
		},
		props: {
			client: Object
		},
		data() {
			var now = new Date();
			return {
				resource: null,
				date_begin: now,
				date_end: now,
				resourcelist_all: []
			};
		},
		computed: {
			resourcelist_selected() {
				if((this.client) && (this.client.remotestate.resources) && (this.resourcelist_all)) {
					var resourcemap = this.client.remotestate.resources.split(',').filter(x => x).reduce((acc, val) => (acc[val] = true, acc), {});
					var res = this.resourcelist_all.filter(x => resourcemap.hasOwnProperty(x.RESOURCEID));
					if((res.length > 0) && (!this.resource)) this.resource = res[0].RESOURCEID;
					return res;
				} else return [];
			}
		},
		async mounted() {
			this.resourcelist_all = await this.client.SDEC_RESOURCE();
		}
	};
</script>