Function autocomplete button

This commit is contained in:
James Cole
2023-03-25 13:18:05 +01:00
parent 3be55adaeb
commit c3b99c322d
2 changed files with 42 additions and 20 deletions

View File

@@ -27,9 +27,9 @@ export default class Accounts {
* @param types * @param types
* @returns {Promise<AxiosResponse<any>>} * @returns {Promise<AxiosResponse<any>>}
*/ */
get(types) { get(types, query) {
let url = 'api/v2/autocomplete/accounts'; let url = 'api/v2/autocomplete/accounts';
return api.get(url, {params: {types: types}}) return api.get(url, {params: {types: types, query: query, limit: 25}})
} }
} }

View File

@@ -22,22 +22,22 @@
<q-select <q-select
v-model="model" v-model="model"
use-input use-input
input-debounce="0"
:options="options" :options="options"
@filter="filterFn" @filter="filterFn"
hint="filter bla bla"
dense dense
:loading="loading"
outlined outlined
:disable="disabledInput"
:error="hasSubmissionError" :error="hasSubmissionError"
:label="$t('firefly.source_account')" :label="$t('firefly.source_account')"
:error-message="submissionError" :error-message="submissionError"
bottom-slots bottom-slots
clearable clearable
> >
<!-- <!--
:disable="disabledInput"
input-debounce="0"
label="Lazy filter" label="Lazy filter"
--> -->
<template v-slot:option="scope"> <template v-slot:option="scope">
@@ -76,10 +76,8 @@ export default {
return { return {
model: null, model: null,
transactionTypeString: '', transactionTypeString: '',
stringOptions: [], options: [],
options: [ loading: true,
],
} }
}, },
props: { props: {
@@ -107,16 +105,19 @@ export default {
} }
}, },
mounted() { mounted() {
console.log('Mounted');
//this.options.value = this.stringOptions //this.options.value = this.stringOptions
this.getAccounts(); this.getAccounts('');
}, },
methods: { methods: {
getAccounts: function() { getAccounts: function (query) {
this.loading = true;
console.log('getAccounts("'+query+'")');
// default set of account types, will later be set by the transaction type. // default set of account types, will later be set by the transaction type.
let types = 'Asset account,Revenue account,Loan,Debt,Mortgage'; let types = 'Asset account,Revenue account,Loan,Debt,Mortgage';
(new Accounts).get(types).then(response => { (new Accounts).get(types, query).then(response => {
this.stringOptions = []; this.stringOptions = [];
for(let i in response.data) { for (let i in response.data) {
let entry = response.data[i]; let entry = response.data[i];
let current = { let current = {
label: entry.name, label: entry.name,
@@ -127,14 +128,35 @@ export default {
this.stringOptions.push(current); this.stringOptions.push(current);
} }
//this.stringOptions = response.data.data; //this.stringOptions = response.data.data;
this.options.value = this.stringOptions; this.options = this.stringOptions;
this.loading = false;
console.log('getAccounts done!');
}); });
}, },
filterFn (val, update, abort) { filterFn(val, update, abort) {
console.log('filterFn(' + val + ')');
if (val === '') {
update(() => { update(() => {
const needle = val.toLowerCase() this.getAccounts('');
this.options.value = this.stringOptions.filter(v => v.label.toLowerCase().indexOf(needle) > -1) //this.options = stringOptions
// here you have access to "ref" which
// is the Vue reference of the QSelect
}) })
return
}
update(() => {
this.getAccounts(val);
//const needle = val.toLowerCase()
//this.options = this.options.filter(v => v.label.toLowerCase().indexOf(needle) > -1)
})
// console.log('filterFn(' + val + ')');
// if (this.loading) {
// console.log('return');
// return
// }
// const needle = val.toLowerCase()
// this.options = this.stringOptions.filter(v => v.label.toLowerCase().indexOf(needle) > -1);
} }
} }
} }