mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-04 03:20:44 +00:00
Function autocomplete button
This commit is contained in:
4
frontend/src/api/v2/autocomplete/accounts.js
vendored
4
frontend/src/api/v2/autocomplete/accounts.js
vendored
@@ -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}})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user