Foundation for order entry
This commit is contained in:
157
htdocs/ViewOrderableRawLookup.vue
Normal file
157
htdocs/ViewOrderableRawLookup.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="input-group">
|
||||
<span v-if="label" class="input-group-text">{{label}}</span>
|
||||
<select v-if="selectable_dgnm" class="form-select" style="flex: 0.15 1 auto;" v-model="x_dgnm">
|
||||
<option v-for="item in ORDERABLE_DGNM" :value="item.dgnm">{{item.name}}</option>
|
||||
</select>
|
||||
<input class="form-control" placeholder="Filter..." v-model="x_query" />
|
||||
</div>
|
||||
<div class="scroller" 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.IEN}}</td>
|
||||
<td>{{item.description}}</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';
|
||||
|
||||
import { ORDERABLE_DGNM } from './constants.mjs';
|
||||
|
||||
const SZ_WINDOW = 100;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
client: Object,
|
||||
dgnm: String,
|
||||
label: String,
|
||||
query: String,
|
||||
modelValue: String
|
||||
},
|
||||
emits: {
|
||||
'update:dgnm': String,
|
||||
'update:query': String,
|
||||
'update:modelValue': String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ORDERABLE_DGNM,
|
||||
selectable_dgnm: !this.dgnm,
|
||||
x_dgnm: this.dgnm || 'O RX',
|
||||
IEN: null,
|
||||
count: null,
|
||||
x_query: this.query,
|
||||
resultset: [],
|
||||
end: null,
|
||||
has_more: false,
|
||||
is_loading: true,
|
||||
observer_bottom: null,
|
||||
x_modelValue: this.modelValue
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
query_view() {
|
||||
return this.x_query ? this.x_query.replace(/^\s+$/g, '').replace(/\s+/g, ' ').toUpperCase() : ''; // allow trailing space
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dgnm(value) { this.x_dgnm = value; },
|
||||
x_dgnm(value) {
|
||||
this.$emit('update:dgnm', value);
|
||||
this.$emit('update:query', this.x_query = '');
|
||||
},
|
||||
modelValue(value) { this.x_modelValue = value; },
|
||||
x_modelValue(value) { this.$emit('update:modelValue', value); },
|
||||
query(value) { this.x_query = value; },
|
||||
x_query(value) {
|
||||
this.$emit('update:query', value);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handle_bottom([entry]) {
|
||||
if((entry.isIntersecting) && (this.has_more) && (this.end < this.count) && (!this.is_loading)) {
|
||||
this.is_loading = true;
|
||||
this.has_more = false;
|
||||
try {
|
||||
var batch = await this.client.ORWUL_FVSUB(this.IEN, this.end + 1, this.end = Math.min(this.end + SZ_WINDOW, this.count));
|
||||
if(this.query_view.length >= 3) batch = batch.filter(x => x.description.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.$watch(
|
||||
() => (this.client, this.dgnm, {}),
|
||||
async () => {
|
||||
if((this.client) && (this.dgnm)) {
|
||||
var res = await this.client.ORWUL_FV4DG(this.dgnm);
|
||||
this.IEN = res.IEN;
|
||||
this.count = res.count;
|
||||
} else this.IEN = this.count = null;
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
this.$watch(
|
||||
() => (this.client, this.IEN, this.query_view, {}),
|
||||
debounce(async function() {
|
||||
if((this.client) && (this.IEN)) {
|
||||
this.is_loading = true;
|
||||
this.has_more = false;
|
||||
try {
|
||||
var query = this.query_view;
|
||||
if(query.length >= 3) {
|
||||
var row = await this.client.ORWUL_FVIDX(this.IEN, query.slice(0, -1) + String.fromCharCode(query.charCodeAt(query.length - 1) - 1) + '~');
|
||||
var pos = Math.floor((row.index - 1)/SZ_WINDOW)*SZ_WINDOW;
|
||||
var batch = await this.client.ORWUL_FVSUB(this.IEN, pos + 1, this.end = Math.min(pos + SZ_WINDOW, this.count));
|
||||
this.resultset = batch.filter(x => x.description.startsWith(query));
|
||||
} else this.resultset = await this.client.ORWUL_FVSUB(this.IEN, 1, this.end = Math.min(SZ_WINDOW, this.count));
|
||||
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);
|
||||
}
|
||||
}
|
||||
}, 500),
|
||||
{ immediate: true }
|
||||
);
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user