Improved autocomplete widget

This commit is contained in:
Jiang Yio 2023-04-24 21:30:14 -04:00
parent 1d68749525
commit 6c263b00dc
2 changed files with 41 additions and 36 deletions

View File

@ -1,44 +1,36 @@
<template>
<div class="autocomplete">
<input type="text" @input="option_open" v-model="xvalue" @keydown.down="option_down" @keydown.up="option_up" @keydown.enter="option_enter" />
<ul id="autocomplete-results" v-show="open" class="autocomplete-results">
<div class="dropdown" :class="{ 'form-floating': label }">
<input type="text" class="form-control" placeholder=" " @focus="option_open" @input="option_filter" v-model="x_modelValue" @keydown.down="option_down" @keydown.up="option_up" @keydown.enter="option_enter" />
<ul class="dropdown-menu shadow" :class="{ show: (open) && (results.length > 0) }">
<li class="loading" v-if="!items">Loading results...</li>
<li v-else v-for="(result, i) in results" :key="i" @click="option_click(result)" class="autocomplete-result" :class="{ 'is-active': i === index }">{{ result }}</li>
<li v-else v-for="(result, i) in results" :key="i" @click="option_click(result)" class="dropdown-item" :class="{ 'is-active': i === index }">{{ result }}</li>
</ul>
<label v-if="label">{{label}}</label>
</div>
</template>
<style scoped>
.autocomplete {
position: relative;
}
.autocomplete-results {
padding: 0;
margin: 0;
border: 1px solid #eeeeee;
height: 120px;
.dropdown-menu {
width: 100%;
max-height: 10rem;
overflow: auto;
}
.autocomplete-result {
list-style: none;
text-align: left;
padding: 4px 2px;
cursor: pointer;
.dropdown-item {
cursor: default;
}
.autocomplete-result.is-active,
.autocomplete-result:hover {
background-color: #4AAE9B;
color: white;
.dropdown-item.is-active,
.dropdown-item:hover {
background-color: var(--bs-primary);
color: var(--bs-body-bg);
}
</style>
<script>
export default {
props: {
value: {
modelValue: {
type: String,
default: ''
},
@ -46,26 +38,30 @@
type: Array,
required: false,
default: () => [],
}
},
label: String
},
emits: [
'update:modelValue'
],
data() {
return {
xvalue: '',
x_modelValue: this.modelValue,
results: [],
open: false,
index: -1,
};
},
watch: {
value(val) {
this.xvalue = val;
modelValue(val) {
this.x_modelValue = val;
},
xvalue(val) {
this.$emit('update:value', val);
x_modelValue(val) {
this.$emit('update:modelValue', val);
}
},
mounted() {
this.xvalue = this.value;
this.x_modelValue = this.modelValue;
document.addEventListener('click', this.option_close)
},
destroyed() {
@ -74,7 +70,16 @@
methods: {
option_open() {
if(this.items) {
this.results = this.items.filter((item) => item.toLowerCase().indexOf(this.xvalue.toLowerCase()) > -1);
this.results = this.items;
this.open = true;
}
},
option_filter() {
if(this.items) {
if(this.x_modelValue) {
var selection = this.x_modelValue.toLowerCase();
this.results = this.items.filter((item) => item.toLowerCase().indexOf(selection) >= 0);
} else this.results = this.items;
this.open = true;
}
},
@ -85,12 +90,12 @@
if(this.index > 0) this.index--;
},
option_enter() {
this.xvalue = this.results[this.index];
this.x_modelValue = this.results[this.index];
this.open = false;
this.index = -1;
},
option_click(result) {
this.xvalue = result;
this.x_modelValue = result;
this.open = false;
},
option_close(evt) {

View File

@ -1,7 +1,7 @@
<template>
<table class="table" style="font-family: monospace;" v-if="appointments && appointments.length > 0">
<thead>
<tr><th>Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th>Assignee</th></tr>
<tr><th>Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th style="width: 16rem;">Assignee</th></tr>
</thead>
<tbody>
<tr v-for="row in appointments" :style="{ backgroundColor: strHashHSL(row.Clinic, '90%') }">
@ -10,7 +10,7 @@
<td v-if="production"><router-link :to="'/patient/$' + row.HRN">{{row.Name}} <span :title="row.HRN">{{row.HRN.slice(-4)}}</span></router-link></td>
<td v-else><router-link :title="strtr_unscramble(row.Name)" :to="'/patient/$' + row.Name.charAt(0) + row.HRN.slice(-4) + '?name=' + row.Name">{{row.Name}} ${{row.HRN}}</router-link></td>
<td>{{row.NOTE}} [{{row.APPT_MADE_BY}} on {{row.DATE_APPT_MADE}}]</td>
<td><Autocomplete :value="practitioner[row.Name]" @update:value="x => practitioner[row.Name] = x" :items="practitioner_list" /></td>
<td><Autocomplete :modelValue="practitioner[row.Name]" @update:modelValue="x => practitioner[row.Name] = x" :items="practitioner_list" /></td>
</tr>
</tbody>
</table>
@ -48,7 +48,7 @@
return this.client.remotestate.practitioner || (this.client.remotestate.practitioner = {});
},
practitioner_list() {
return this.practitioner ? uniq(Object.values(this.practitioner)).sort() : [];
return this.practitioner ? uniq(Object.values(this.practitioner).filter(x => x)).sort() : [];
}
},
watch: {