nuVistA/htdocs/ViewLocationLookup.vue

<template>
	<ul class="nav nav-tabs">
		<li v-if="label" class="nav-link disabled">{{label}}</li>
		<li class="nav-item"><span class="nav-link" :class="{ active: view_new }" @click="view_new = true">Location</span></li>
		<li v-if="view_new" class="nav-item d-flex justify-content-between align-items-center">
			<div class="input-group">
				<span class="input-group-text">🔎</span>
				<input class="form-control" placeholder="Filter..." v-model="query" />
			</div>
		</li>
		<li class="nav-item"><span class="nav-link" :class="{ active: !view_new }" @click="view_new = false">Encounter</span></li>
		<li v-if="!view_new" class="nav-item d-flex justify-content-between align-items-center"><DateRangePicker v-else range="6M" direction="-1" v-model:date="visits_date_end" v-model:date_end="visits_date_begin" /></li>
	</ul>
	<div class="scroller">
		<ViewLocationLookupNew v-if="view_new" :client="client" v-model:query="query" :modelValue="x_modelValue ? x_modelValue.IEN : null" @update:modelValue="x_modelValue = { IEN: $event }" />
		<ViewLocationLookupExisting v-else :client="client" :dfn="dfn" :date_begin="visits_date_begin" :date_end="visits_date_end" v-model="x_modelValue" />
	</div>
</template>

<style scoped>
	span.nav-link {
		cursor: pointer;
	}
	div.scroller {
		max-height: 25vh;
		overflow-y: auto;
	}
</style>

<script>
	import DateRangePicker from './DateRangePicker.vue';
	import ViewLocationLookupNew from './ViewLocationLookupNew.vue';
	import ViewLocationLookupExisting from './ViewLocationLookupExisting.vue';

	const now = new Date();

	export default {
		components: {
			DateRangePicker, ViewLocationLookupNew, ViewLocationLookupExisting
		},
		props: {
			client: Object,
			dfn: String,
			label: String,
			modelValue: Object
		},
		emits: {
			'update:modelValue': Object
		},
		data() {
			return {
				view_new: false,
				query: '',
				visits_date_begin: now,
				visits_date_end: now,
				x_modelValue: this.modelValue
			};
		},
		watch: {
			modelValue(value) { this.x_modelValue = value; },
			x_modelValue(value) { this.$emit('update:modelValue', value); }
		}
	};
</script>