mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-12-12 09:52:20 +00:00
Frontend remembers state.
This commit is contained in:
James Cole
@@ -24,15 +24,15 @@
|
||||
{{ $t('firefly.' + this.direction + '_account') }}
|
||||
</div>
|
||||
<vue-typeahead-bootstrap
|
||||
v-model="account"
|
||||
v-model="value.name"
|
||||
:data="accounts"
|
||||
:showOnFocus=true
|
||||
:inputName="direction + '[]'"
|
||||
:serializer="item => item.name_with_balance"
|
||||
@hit="selectedAccount = $event"
|
||||
:minMatchingChars="3"
|
||||
:placeholder="$t('firefly.' + this.direction + '_account')"
|
||||
@input="lookupAccount"
|
||||
@hit="selectedAccount = $event"
|
||||
>
|
||||
<template slot="append">
|
||||
<div class="input-group-append">
|
||||
@@ -46,21 +46,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
|
||||
<template slot="suggestion" slot-scope="{ data, htmlText }">
|
||||
<div class="d-flex align-items-center">
|
||||
<span v-html="htmlText"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
- you get an object from the parent.
|
||||
- this is the selected account.
|
||||
<!-- Note: the v-html binding is used, as htmlText contains
|
||||
the suggestion text highlighted with <strong> tags -->
|
||||
|
||||
*/
|
||||
|
||||
import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';
|
||||
import {debounce} from 'lodash';
|
||||
@@ -71,19 +56,18 @@ const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers
|
||||
export default {
|
||||
name: "TransactionAccount",
|
||||
components: {VueTypeaheadBootstrap},
|
||||
props: ['index', 'direction'],
|
||||
props: ['index', 'direction', 'value'],
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
accounts: [],
|
||||
account: '',
|
||||
accountTypes: [],
|
||||
initialSet: []
|
||||
initialSet: [],
|
||||
selectedAccount: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.createInitialSet();
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(
|
||||
@@ -99,35 +83,25 @@ export default {
|
||||
]
|
||||
),
|
||||
getACURL: function (types, query) {
|
||||
// update autocomplete URL:
|
||||
// console.log('getACURL query = ' + query);
|
||||
// console.log(types);
|
||||
return document.getElementsByTagName('base')[0].href + 'api/v1/autocomplete/accounts?types=' + types.join(',') + '&query=' + query;
|
||||
},
|
||||
clearAccount: function () {
|
||||
// console.log('clearAccount in ' + this.direction);
|
||||
this.account = '';
|
||||
this.selectedAccount = this.defaultTransaction.source_account; // can be either source or dest, does not matter.
|
||||
// console.log('clearAccount. Selected account (' + this.direction + ') is now:');
|
||||
// console.log(this.defaultTransaction.source_account);
|
||||
this.accounts = this.initialSet;
|
||||
this.value = {name: ''};
|
||||
},
|
||||
lookupAccount: debounce(function () {
|
||||
// console.log('lookup account in ' + this.direction)
|
||||
if (0 === this.accountTypes.length) {
|
||||
// set the types from the default types for this direction:
|
||||
this.accountTypes = 'source' === this.direction ? this.sourceAllowedTypes : this.destinationAllowedTypes;
|
||||
}
|
||||
|
||||
// update autocomplete URL:
|
||||
axios.get(this.getACURL(this.accountTypes, this.account))
|
||||
axios.get(this.getACURL(this.accountTypes, this.value.name))
|
||||
.then(response => {
|
||||
this.accounts = response.data;
|
||||
})
|
||||
}, 300),
|
||||
createInitialSet: function () {
|
||||
// console.log('createInitialSet ' + this.direction);
|
||||
// initial list of accounts:
|
||||
let types = this.sourceAllowedTypes;
|
||||
if ('destination' === this.direction) {
|
||||
types = this.destinationAllowedTypes;
|
||||
@@ -143,14 +117,12 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
selectedAccount: function (value) {
|
||||
// console.log('watch selectedAccount ' + this.direction);
|
||||
// console.log(value);
|
||||
this.account = value ? value.name_with_balance : null;
|
||||
// console.log('this.account (' + this.direction + ') = "' + this.account + '"');
|
||||
this.calcTransactionType();
|
||||
|
||||
this.value = value;
|
||||
this.value.name = this.value.name_with_balance;
|
||||
},
|
||||
value: function (value) {
|
||||
this.updateField({field: this.accountKey, index: this.index, value: value});
|
||||
// set the opposing account allowed set.
|
||||
// console.log('opposing:');
|
||||
let opposingAccounts = [];
|
||||
let type = value.type ? value.type : 'no_type';
|
||||
if ('undefined' !== typeof this.allowedOpposingTypes[this.direction]) {
|
||||
@@ -165,21 +137,57 @@ export default {
|
||||
if ('destination' === this.direction) {
|
||||
this.setSourceAllowedTypes(opposingAccounts);
|
||||
}
|
||||
|
||||
this.calcTransactionType();
|
||||
},
|
||||
sourceAllowedTypes: function (value) {
|
||||
if ('source' === this.direction) {
|
||||
// console.log('do update initial set in direction ' + this.direction + ' because allowed types changed');
|
||||
// update initial set:
|
||||
this.createInitialSet();
|
||||
}
|
||||
},
|
||||
destinationAllowedTypes: function (value) {
|
||||
if ('destination' === this.direction) {
|
||||
// console.log('do update initial set in direction ' + this.direction + ' because allowed types changed');
|
||||
// update initial set:
|
||||
this.createInitialSet();
|
||||
}
|
||||
}
|
||||
// account: function (value) {
|
||||
// //this.value.name = value;
|
||||
// //console.log('watch account in direction ' + this.direction + ' change to "' + value + '"');
|
||||
// // this.account = value ? value.name_with_balance : null;
|
||||
// // // console.log('this.account (' + this.direction + ') = "' + this.account + '"');
|
||||
// //
|
||||
// //
|
||||
// // // set the opposing account allowed set.
|
||||
// // // console.log('opposing:');
|
||||
// // let opposingAccounts = [];
|
||||
// // let type = value.type ? value.type : 'no_type';
|
||||
// // if ('undefined' !== typeof this.allowedOpposingTypes[this.direction]) {
|
||||
// // if ('undefined' !== typeof this.allowedOpposingTypes[this.direction][type]) {
|
||||
// // opposingAccounts = this.allowedOpposingTypes[this.direction][type];
|
||||
// // }
|
||||
// // }
|
||||
// //
|
||||
// // if ('source' === this.direction) {
|
||||
// // this.setDestinationAllowedTypes(opposingAccounts);
|
||||
// // }
|
||||
// // if ('destination' === this.direction) {
|
||||
// // this.setSourceAllowedTypes(opposingAccounts);
|
||||
// // }
|
||||
//
|
||||
//
|
||||
// //
|
||||
// // this.calcTransactionType();
|
||||
//
|
||||
//
|
||||
// }
|
||||
|
||||
// selectedAccount: function (value) {
|
||||
|
||||
// },
|
||||
// sourceAllowedTypes: function (value) {
|
||||
// if ('source' === this.direction) {
|
||||
// // console.log('do update initial set in direction ' + this.direction + ' because allowed types changed');
|
||||
// // update initial set:
|
||||
// this.createInitialSet();
|
||||
// }
|
||||
// },
|
||||
// destinationAllowedTypes: function (value) {
|
||||
// if ('destination' === this.direction) {
|
||||
// // console.log('do update initial set in direction ' + this.direction + ' because allowed types changed');
|
||||
// // update initial set:
|
||||
// this.createInitialSet();
|
||||
// }
|
||||
// }
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
@@ -195,16 +203,16 @@ export default {
|
||||
return 'source' === this.direction ? 'source_account' : 'destination_account';
|
||||
}
|
||||
},
|
||||
selectedAccount: {
|
||||
get() {
|
||||
return this.transactions[this.index][this.accountKey];
|
||||
},
|
||||
set(value) {
|
||||
// console.log('set selectedAccount for ' + this.direction);
|
||||
// console.log(value);
|
||||
this.updateField({field: this.accountKey, index: this.index, value: value});
|
||||
}
|
||||
}
|
||||
// selectedAccount: {
|
||||
// get() {
|
||||
// return this.transactions[this.index][this.accountKey];
|
||||
// },
|
||||
// set(value) {
|
||||
// // console.log('set selectedAccount for ' + this.direction);
|
||||
// // console.log(value);
|
||||
// this.updateField({field: this.accountKey, index: this.index, value: value});
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user