Foundation for order entry

2023-04-24 23:10:19 -04:00
parent 16cd1ef4e0
commit 4edf50aa82
21 changed files with 2076 additions and 10 deletions
--- a/htdocs/ViewLocationLookupNew.vue
+++ b/htdocs/ViewLocationLookupNew.vue
@@ -0,0 +1,124 @@
+<template>
+	<div v-if="input" class="input-group">
+		<span class="input-group-text">🔎</span>
+		<input class="form-control" placeholder="Filter..." v-model="query_raw" />
+	</div>
+	<div class:scroller="input" ref="scroller">
+		<table class="table table-striped">
+			<tbody>
+				<tr v-for="item in resultset" :class="{ 'table-active': item.IEN == x_modelValue }" @click="x_modelValue = item.IEN">
+					<td>{{item.name}}</td>
+					<td style="text-align: right;">#{{item.IEN}}</td>
+				</tr>
+				<tr ref="bottom" />
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<style scoped>
+	div.scroller {
+		max-height: 25vh;
+		overflow-y: auto;
+	}
+	td {
+		cursor: default;
+	}
+	.table-active, .table-active:nth-of-type(odd) > * {
+		color: #fff;
+		background-color: #0d6efd;
+	}
+</style>
+
+<script>
+	import { debounce } from './util.mjs';
+
+	export default {
+		props: {
+			client: Object,
+			query: String,
+			input: {
+				type: Boolean,
+				default: false
+			},
+			modelValue: String
+		},
+		emits: {
+			'update:modelValue': String
+		},
+		data() {
+			return {
+				resultset: [],
+				query_raw: this.query,
+				query_view: '',
+				has_more: false,
+				is_loading: true,
+				observer_bottom: null,
+				x_modelValue: this.modelValue
+			};
+		},
+		computed: {
+			params() {
+				return { query: this.query_view.length >= 3 ? this.query_view : '' };
+			}
+		},
+		watch: {
+			modelValue(value) { this.x_modelValue = value; },
+			x_modelValue(value) { this.$emit('update:modelValue', value); },
+			query(value) { this.query_raw = value; },
+			query_raw(value) {
+				this.$emit('update:query', value);
+				this.query_sync(value);
+			},
+			query_view: {
+				async handler(value) {
+					this.is_loading = true;
+					this.has_more = false;
+					try {
+						if(value.length >= 3) {
+							var batch = await this.client.ORWU1_NEWLOC(value.slice(0, -1) + String.fromCharCode(value.charCodeAt(value.length - 1) - 1), 1);
+							this.resultset = batch.filter(x => x.name.startsWith(value));
+						} else this.resultset = await this.client.ORWU1_NEWLOC('', 1);
+						this.has_more = this.resultset.length > 0;
+					} catch(ex) {
+						this.resultset = [];
+						this.has_more = false;
+					} finally {
+						this.is_loading = false;
+						this.$refs.scroller.scrollTo(0, 0);
+					}
+				}, immediate: true
+			}
+		},
+		methods: {
+			async handle_bottom([entry]) {
+				if((entry.isIntersecting) && (this.has_more) && (!this.is_loading)) {
+					this.is_loading = true;
+					this.has_more = false;
+					try {
+						var batch = await this.client.ORWU1_NEWLOC(this.resultset[this.resultset.length - 1].name, 1);
+						if(this.query_view.length >= 3) batch = batch.filter(x => x.name.startsWith(this.query_view));
+						if(batch.length > 0) {
+							Array.prototype.push.apply(this.resultset, batch);
+							this.has_more = true;
+						} else this.has_more = false;
+					} catch(ex) {
+						this.has_more = false;
+					} finally {
+						this.is_loading = false;
+					}
+				}
+			}
+		},
+		created() {
+			this.query_sync = debounce(function(value) { this.query_view = value.replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ').toUpperCase(); }, 500);
+		},
+		mounted() {
+			this.observer_bottom = new IntersectionObserver(this.handle_bottom, { root: this.$refs.scroller, rootMargin: '25%' });
+			this.observer_bottom.observe(this.$refs.bottom);
+		},
+		destroyed() {
+			if(this.observer_bottom) this.observer_bottom.disconnect();
+		}
+	};
+</script>