mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-12-12 09:52:20 +00:00
Rebuild frontend
This commit is contained in:
James Cole
@@ -20,40 +20,45 @@
|
||||
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<div class="pl-1 pb-2 pt-3">
|
||||
Selected account: <span v-if="selectedAccount">{{ selectedAccount.name }}</span>
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.' + this.direction + '_account') }}
|
||||
</div>
|
||||
<vue-typeahead-bootstrap
|
||||
v-model="account"
|
||||
:data="accounts"
|
||||
inputName="source[]"
|
||||
:serializer="item => item.name"
|
||||
:showOnFocus=true
|
||||
:inputName="direction + '[]'"
|
||||
:serializer="item => item.name_with_balance"
|
||||
@hit="selectedAccount = $event"
|
||||
:minMatchingChars="3"
|
||||
:placeholder="$t('firefly.source_account')"
|
||||
:placeholder="$t('firefly.' + this.direction + '_account')"
|
||||
@input="lookupAccount"
|
||||
>
|
||||
<template slot="append">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="suggestion" slot-scope="{ data, htmlText }">
|
||||
<div class="d-flex align-items-center">
|
||||
<!-- Note: the v-html binding is used, as htmlText contains
|
||||
the suggestion text highlighted with <strong> tags -->
|
||||
<span class="ml-4" v-html="htmlText"></span>
|
||||
<button class="btn btn-outline-secondary" v-on:click="clearAccount" type="button"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
</vue-typeahead-bootstrap>
|
||||
</div>
|
||||
</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 -->
|
||||
|
||||
*/
|
||||
|
||||
@@ -72,77 +77,132 @@ export default {
|
||||
query: '',
|
||||
accounts: [],
|
||||
account: '',
|
||||
accountTypes: []
|
||||
accountTypes: [],
|
||||
initialSet: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.createInitialSet();
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'updateField',
|
||||
'setDestinationAllowedTypes',
|
||||
'setSourceAllowedTypes'
|
||||
],
|
||||
),
|
||||
...mapActions(
|
||||
[
|
||||
'calcTransactionType'
|
||||
]
|
||||
),
|
||||
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;
|
||||
},
|
||||
lookupAccount: debounce(function () {
|
||||
console.log('lookup "' + this.account + '"');
|
||||
|
||||
if(0===this.accountTypes.length) {
|
||||
// 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.accountTypes = 'source' === this.direction ? this.sourceAllowedTypes : this.destinationAllowedTypes;
|
||||
}
|
||||
|
||||
// the allowed types array comes from the found (selected) account.
|
||||
// so whatever the user clicks and is stored into selected account.
|
||||
// must also be expanded with the allowed account types for this
|
||||
// search. which in turn depends more on the opposing account than the results of
|
||||
// this particular search and can be changed externally rather than "right here".
|
||||
|
||||
// which means that the allowed types should be separate from the selected account
|
||||
// in the default transaction.
|
||||
|
||||
let accountAutoCompleteURL =
|
||||
document.getElementsByTagName('base')[0].href +
|
||||
'api/v1/autocomplete/accounts' +
|
||||
'?types=' +
|
||||
this.accountTypes.join(',') +
|
||||
'&query=' + this.account;
|
||||
console.log('Auto complete URI is now ' + accountAutoCompleteURL);
|
||||
|
||||
// in practice this action should be debounced
|
||||
axios.get(accountAutoCompleteURL)
|
||||
// update autocomplete URL:
|
||||
axios.get(this.getACURL(this.accountTypes, this.account))
|
||||
.then(response => {
|
||||
console.log('Found ' + response.data.length + ' results.');
|
||||
this.accounts = response.data;
|
||||
})
|
||||
}, 500)
|
||||
}, 300),
|
||||
createInitialSet: function () {
|
||||
// console.log('createInitialSet ' + this.direction);
|
||||
// initial list of accounts:
|
||||
let types = this.sourceAllowedTypes;
|
||||
if ('destination' === this.direction) {
|
||||
types = this.destinationAllowedTypes;
|
||||
}
|
||||
|
||||
axios.get(this.getACURL(types, ''))
|
||||
.then(response => {
|
||||
// console.log('initial set of accounts. ' + this.direction);
|
||||
this.accounts = response.data;
|
||||
this.initialSet = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
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();
|
||||
|
||||
// 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);
|
||||
}
|
||||
},
|
||||
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([
|
||||
'transactionType',
|
||||
'transactions',
|
||||
'defaultTransaction',
|
||||
'sourceAllowedTypes'
|
||||
'sourceAllowedTypes',
|
||||
'destinationAllowedTypes',
|
||||
'allowedOpposingTypes'
|
||||
]),
|
||||
accountKey: {
|
||||
get() {
|
||||
return 'source' === this.direction ? 'source_account' : 'destination_account';
|
||||
}
|
||||
},
|
||||
selectedAccount: {
|
||||
get() {
|
||||
let key = 'source' === this.direction ? 'source_account' : 'destination_account';
|
||||
console.log('Will now get ' + key);
|
||||
console.log(this.transactions[this.index][key]);
|
||||
return this.transactions[this.index][key];
|
||||
return this.transactions[this.index][this.accountKey];
|
||||
},
|
||||
set(value) {
|
||||
let key = 'source' === this.direction ? 'source_account' : 'destination_account';
|
||||
console.log('Will now set ' + key + ' to:');
|
||||
console.log(value);
|
||||
if('object' !== typeof value) {
|
||||
// make object manually.
|
||||
let account = this.defaultTransaction.source_account;
|
||||
account.name = value;
|
||||
value = account;
|
||||
}
|
||||
if('object' === typeof value) {
|
||||
console.log('user selected account object:');
|
||||
console.log(value);
|
||||
}
|
||||
this.updateField({field: key, index: this.index, value: value});
|
||||
// console.log('set selectedAccount for ' + this.direction);
|
||||
// console.log(value);
|
||||
this.updateField({field: this.accountKey, index: this.index, value: value});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user