Foundation for order entry

htdocs/ViewLocationLookup.vue

@@ -0,0 +1,64 @@
+<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: String
+		},
+		emits: {
+			'update:modelValue': Object
+		},
+		data() {
+			return {
+				view_new: true,
+				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>