nuVistA/htdocs/ViewPatientLookup.vue

<template>
	<div>
		<div class="input-group">
			<span class="input-group-text">🔎</span>
			<input class="form-control" v-model="query_raw" />
		</div>
		<div style="max-height: 30em; overflow-y: auto;">
			<table class="table table-striped" style="font-family: monospace;" v-if="(resultset) && (resultset.length > 0)">
				<thead>
					<tr><th>DFN</th><th>Name</th><th>PID</th></tr>
				</thead>
				<tbody>
					<tr v-for="row in resultset">
						<td>{{row.dfn}}</td>
						<td><router-link :to="'/patient/' + row.dfn">{{row.name}}</router-link></td>
						<td>{{row.pid}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

<script>
	import { debounce } from './util.mjs';

	export default {
		props: {
			client: Object,
			selection: {}
		},
		data() {
			return {
				resultset: [],
				query_raw: '',
				query_view: ''
			};
		},
		computed: {
		},
		watch: {
			query_raw(value) {
				this.query_sync(value);
			}
		},
		methods: {
		},
		created() {
			this.query_sync = debounce(async function(value) {
				this.query_view = value = value.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ');
				this.resultset = (value) && (value.length >= 3) ? (await this.client.ORWPT16_LOOKUP(value)) : [];
			}, 500);
		},
		async mounted() {
		}
	};
</script>