First

htdocs/ViewPatientLookup.vue

@@ -0,0 +1,57 @@
+<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 ? (await this.client.ORWPT16_LOOKUP(value)) : [];
+			}, 500);
+		},
+		async mounted() {
+		}
+	};
+</script>