kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-12 15:35:15 +00:00
Code Issues Projects Releases Wiki Activity

Frontend remembers state.

Browse Source
This commit is contained in:
James Cole
2021-01-17 19:52:53 +01:00
parent c86791950d
commit 79c00548df
22 changed files with 239 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/store/modules/transactions/create.js vendored
View File

@@ -18,13 +18,12 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
let date = new Date;
const lodashClonedeep = require('lodash.clonedeep');
// initial state
const state = () => ({
transactionType: 'any',
date: new Date,
transactions: [],
allowedOpposingTypes: {},
accountToTransaction: {},
@@ -41,8 +40,6 @@ const state = () => ({
defaultTransaction: {
// basic
description: '',
date: date.toISOString().split('T')[0],
time: ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2) + ':' + ('0' + date.getSeconds()).slice(-2),
// accounts:
source_account: {
@@ -99,6 +96,9 @@ const getters = {
transactions: state => {
return state.transactions;
},
date: state => {
return state.date;
},
transactionType: state => {
return state.transactionType;
},
@@ -176,6 +176,9 @@ const mutations = {
let newTransaction = lodashClonedeep(state.defaultTransaction);
state.transactions.push(newTransaction);
},
setDate(state, payload) {
state.date = payload.date;
},
setCustomDateFields(state, payload) {
state.customDateFields = payload;
},

37
frontend/src/components/transactions/Create.vue
View File

@@ -35,7 +35,7 @@
</div>
<!-- /.card-header -->
<div class="card-body">
<h4>{{ $t('firefly.basic_journal_information') }}: {{ transaction.description }}</h4>
<h4>{{ $t('firefly.basic_journal_information') }}</h4>
<div class="row">
<div class="col">
<p class="d-block d-sm-none">XS</p>
@@ -50,19 +50,18 @@
<div class="col">
Description:
<TransactionDescription
v-bind:description.sync="transaction.description"
v-model="transaction.description"
:index="index"
></TransactionDescription>
</div>
</div>
<!-- source and destination -->
<div class="row">
<div class="col-xl-5 col-lg-5 col-md-10 col-sm-12 col-xs-12">
<!-- SOURCE -->
<TransactionAccount
:selectedAccount="transaction.source_account"
v-model="transaction.source_account"
direction="source"
:index="index"
/>
@@ -78,7 +77,7 @@
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
<!-- DESTINATION -->
<TransactionAccount
:selectedAccount="transaction.destination_account"
v-model="transaction.destination_account"
direction="destination"
:index="index"
/>
@@ -106,14 +105,12 @@
<div class="row">
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
<TransactionDate
:date="transaction.date"
:time="transaction.time"
:index="index"
/>
</div>
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12 offset-xl-2 offset-lg-2">
<TransactionCustomDates :index="index" :enabled-dates="customDateFields"/>
<TransactionCustomDates :index="index" :enabled-dates="customDateFields" />
</div>
</div>
@@ -123,29 +120,26 @@
<div class="row">
<div class="col">
<TransactionBudget
:budget_id="transactions[index].budget_id"
v-model="transaction.budget_id"
:index="index"
/>
<TransactionCategory
:category="transaction.category"
v-model="transaction.category"
:index="index"
/>
</div>
<div class="col">
<TransactionBill
:bill_id="transactions[index].bill_id"
v-model="transaction.bill_id"
:index="index"
/>
<TransactionTags
:index="index"
:tags="transactions[index].tags"
v-model="transaction.tags"
/>
<TransactionPiggyBank
:index="index"
:piggy_bank_id="transactions[index].piggy_bank_id"
v-model="transaction.piggy_bank_id"
/>
</div>
</div>
@@ -156,16 +150,16 @@
<div class="col">
<TransactionInternalReference
:index="index"
:internalReference="transaction.internal_reference"
v-model="transaction.internal_reference"
/>
<TransactionExternalUrl
:index="index"
:externalUrl="transaction.external_url"
v-model="transaction.external_url"
/>
<TransactionNotes
:index="index"
:notes="transaction.notes"
v-model="transaction.notes"
/>
</div>
<div class="col">
@@ -205,6 +199,8 @@
</div>
</div>
</div>
<!-- /.card-body -->
</div>
@@ -289,7 +285,8 @@ export default {
...mapGetters([
'transactionType', // -> this.someGetter
'transactions', // -> this.someOtherGetter
'customDateFields'
'customDateFields',
'date'
])
},
methods: {

136
frontend/src/components/transactions/TransactionAccount.vue
View File

@@ -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>

23
frontend/src/components/transactions/TransactionBill.vue
View File

@@ -27,7 +27,7 @@
<select
ref="bill"
:title="$t('firefly.bill')"
v-model="bill_id"
v-model="value"
autocomplete="off"
class="form-control"
name="bill_id[]"
@@ -47,7 +47,7 @@ import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
props: ['index'],
props: ['value', 'index'],
name: "TransactionBill",
data() {
return {
@@ -93,19 +93,18 @@ export default {
}
},
},
watch: {
value: function(value) {
this.updateField({field: 'bill_id', index: this.index, value: value});
}
},
computed: {
...mapGetters([
...mapGetters(
[
'transactionType',
'transactions',
]),
bill_id: {
get() {
return this.transactions[this.index].bill_id;
},
set(value) {
this.updateField({field: 'bill_id', index: this.index, value: value});
}
}
]
)
}
}
</script>

28
frontend/src/components/transactions/TransactionBudget.vue
View File

@@ -27,14 +27,13 @@
<select
ref="budget"
:title="$t('firefly.budget')"
v-model="budget_id"
v-model="value"
autocomplete="off"
class="form-control"
name="budget_id[]"
v-on:submit.prevent
>
<option v-for="budget in this.budgetList" :value="budget.id" :label="budget.name">{{ budget.name }}</option>
</select>
</div>
</div>
@@ -47,7 +46,7 @@ import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
props: ['index'],
props: ['index', 'value'],
name: "TransactionBudget",
data() {
return {
@@ -93,19 +92,18 @@ export default {
}
},
},
computed: {
...mapGetters([
'transactionType',
'transactions',
]),
budget_id: {
get() {
return this.transactions[this.index].budget_id;
},
set(value) {
this.updateField({field: 'budget_id', index: this.index, value: value});
}
watch: {
value: function (value) {
this.updateField({field: 'budget_id', index: this.index, value: value});
}
},
computed: {
...mapGetters(
[
'transactionType',
'transactions',
]
)
}
}
</script>

23
frontend/src/components/transactions/TransactionCategory.vue
View File

@@ -26,7 +26,7 @@
<vue-typeahead-bootstrap
inputName="category[]"
v-model="category"
v-model="value"
:data="categories"
:placeholder="$t('firefly.category')"
:showOnFocus=true
@@ -54,15 +54,13 @@ import {debounce} from "lodash";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
props: ['index'],
props: ['value', 'index'],
components: {VueTypeaheadBootstrap},
name: "TransactionCategory",
data() {
return {
categories: [],
initialSet: [],
category: '',
initialSet: []
}
},
@@ -83,7 +81,7 @@ export default {
],
),
clearCategory: function () {
this.category = '';
this.value = '';
},
getACURL: function (query) {
// update autocomplete URL:
@@ -91,29 +89,30 @@ export default {
},
lookupCategory: debounce(function () {
// update autocomplete URL:
axios.get(this.getACURL(this.category))
axios.get(this.getACURL(this.value))
.then(response => {
this.categories = response.data;
})
}, 300)
},
watch: {
category: function (value) {
console.log('Watch category: "' + value + '"');
value: function (value) {
this.updateField({field: 'category', index: this.index, value: value});
}
},
computed: {
...mapGetters([
...mapGetters(
[
'transactionType',
'transactions',
]),
]
),
selectedCategory: {
get() {
return this.categories[this.index].name;
},
set(value) {
this.updateField({field: 'category', index: this.index, value: value.name});
this.value = value.name;
}
}
}

23
frontend/src/components/transactions/TransactionCustomDates.vue
View File

@@ -49,32 +49,21 @@ const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers
export default {
name: "TransactionCustomDates",
props: ['enabledDates', 'index'],
data() {
return {
dates: {
interest_date: '',
book_date: '',
process_date: '',
due_date: '',
payment_date: '',
invoice_date: '',
}
}
},
created() {
},
methods: {
...mapGetters(
[
'transactions'
]
),
...mapMutations(
[
'updateField',
],
),
getFieldValue(field) {
return this.dates[field];
return this.transactions()[parseInt(this.index)][field] ?? '';
},
setFieldValue(event, field) {
this.dates[field] = event.target.value;
this.updateField({index: this.index, field: field, value: event.target.value});
}
}

39
frontend/src/components/transactions/TransactionDate.vue
View File

@@ -29,11 +29,11 @@
type="date"
ref="date"
:title="$t('firefly.date')"
v-model="date"
v-model="localDate"
:disabled="index > 0"
autocomplete="off"
name="date[]"
:placeholder="date"
:placeholder="localDate"
v-on:submit.prevent
>
<input
@@ -41,11 +41,11 @@
type="time"
ref="time"
:title="$t('firefly.time')"
v-model="time"
v-model="localTime"
:disabled="index > 0"
autocomplete="off"
name="time[]"
:placeholder="time"
:placeholder="localTime"
v-on:submit.prevent
>
</div>
@@ -60,35 +60,46 @@ const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers
export default {
name: "TransactionDate",
props: ['value', 'index'],
props: ['index'],
methods: {
...mapMutations(
[
'updateField',
'setDate'
],
),
},
computed: {
...mapGetters([
'transactionType',
'transactions',
'date'
]),
date: {
localDate: {
get() {
// always return first index.
return this.transactions[0].date;
return this.date.toISOString().split('T')[0];
},
set(value) {
this.updateField({field: 'date', index: this.index, value: value});
// bit of a hack but meh.
let newDate = new Date(value);
let current = new Date(this.date.getTime());
current.setFullYear(newDate.getFullYear());
current.setMonth(newDate.getMonth());
current.setDate(newDate.getDate());
this.setDate({date: current});
}
},
time: {
localTime: {
get() {
// always return first index.
return this.transactions[0].time;
return ('0' + this.date.getHours()).slice(-2) + ':' + ('0' + this.date.getMinutes()).slice(-2) + ':' + ('0' + this.date.getSeconds()).slice(-2);
},
set(value) {
this.updateField({field: 'time', index: this.index, value: value});
// bit of a hack but meh.
let current = new Date(this.date.getTime());
let parts = value.split(':');
current.setHours(parseInt(parts[0]));
current.setMinutes(parseInt(parts[1]));
current.setSeconds(parseInt(parts[2]));
this.setDate({date: current});
}
}
}

35
frontend/src/components/transactions/TransactionDescription.vue
View File

@@ -25,7 +25,7 @@
</div>
<vue-typeahead-bootstrap
inputName="description[]"
v-model="description"
v-model="value"
:data="descriptions"
:placeholder="$t('firefly.description')"
:showOnFocus=true
@@ -54,7 +54,7 @@ import {debounce} from "lodash";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
props: ['index', 'description'],
props: ['index', 'value'],
components: {VueTypeaheadBootstrap},
name: "TransactionDescription",
data() {
@@ -65,8 +65,6 @@ export default {
},
created() {
// initial list of accounts:
axios.get(this.getACURL(''))
.then(response => {
this.descriptions = response.data;
@@ -81,41 +79,32 @@ export default {
],
),
clearDescription: function () {
this.description = '';
this.value = '';
},
getACURL: function (query) {
// update autocomplete URL:
return document.getElementsByTagName('base')[0].href + 'api/v1/autocomplete/transactions?query=' + query;
},
lookupDescription: debounce(function () {
console.log('lookupDescription');
// update autocomplete URL:
axios.get(this.getACURL(this.description))
axios.get(this.getACURL(this.value))
.then(response => {
this.descriptions = response.data;
})
}, 300)
},
watch: {
description: function (value) {
console.log('Index ' + this.index + ': ' + value);
//this.updateField({field: 'description', index: this.index, value: value});
value: function (value) {
this.updateField({field: 'description', index: this.index, value: value});
}
},
computed: {
...mapGetters([
'transactionType',
'transactions',
]),
selectedDescription: {
get() {
//return this.description;
},
set(value) {
this.description = value.description;
//this.updateField({field: 'description', index: this.index, value: value.description});
}
}
...mapGetters(
[
'transactionType',
'transactions',
]
)
}
}
</script>

11
frontend/src/components/transactions/TransactionExternalUrl.vue
View File

@@ -28,7 +28,7 @@
type="url"
name="external_url[]"
:placeholder="$t('firefly.external_url')"
v-model="externalUrl"
v-model="value"
class="form-control"/>
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary"><i class="far fa-trash-alt"></i></button>
@@ -43,7 +43,7 @@ import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
props: ['index'],
props: ['index', 'value'],
name: "TransactionExternalUrl",
methods: {
...mapMutations(
@@ -52,13 +52,8 @@ export default {
],
),
},
data() {
return {
externalUrl: '',
}
},
watch: {
externalUrl: function (value) {
value: function (value) {
this.updateField({field: 'external_url', index: this.index, value: value});
}
}

11
frontend/src/components/transactions/TransactionInternalReference.vue
View File

@@ -27,7 +27,7 @@
<input
type="text"
name="internal_reference[]"
v-model="internalReference"
v-model="value"
:placeholder="$t('firefly.internal_reference')"
class="form-control"/>
<div class="input-group-append">
@@ -43,7 +43,7 @@ import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
props: ['index'],
props: ['index', 'value'],
name: "TransactionInternalReference",
methods: {
...mapMutations(
@@ -52,13 +52,8 @@ export default {
],
),
},
data() {
return {
internalReference: '',
}
},
watch: {
internalReference: function (value) {
value: function (value) {
this.updateField({field: 'internal_reference', index: this.index, value: value});
}
}

11
frontend/src/components/transactions/TransactionNotes.vue
View File

@@ -25,7 +25,7 @@
{{ $t('firefly.notes') }}
</div>
<div class="input-group">
<textarea v-model="notes" class="form-control" placeholder="Notes"></textarea>
<textarea v-model="value" class="form-control" :placeholder="$t('firefly.notes')"></textarea>
</div>
</div>
@@ -37,7 +37,7 @@ import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
props: ['index'],
props: ['index', 'value'],
name: "TransactionNotes",
methods: {
...mapMutations(
@@ -46,13 +46,8 @@ export default {
],
),
},
data() {
return {
notes: '',
}
},
watch: {
notes: function (value) {
value: function (value) {
this.updateField({field: 'notes', index: this.index, value: value});
}
}

20
frontend/src/components/transactions/TransactionPiggyBank.vue
View File

@@ -18,7 +18,6 @@
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="form-group">
<div class="text-xs d-none d-lg-block d-xl-block">
@@ -28,7 +27,7 @@
<select
ref="piggy_bank_id"
:title="$t('firefly.piggy_bank')"
v-model="piggy_bank_id"
v-model="value"
autocomplete="off"
class="form-control"
name="piggy_bank_id[]"
@@ -48,7 +47,7 @@ import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
props: ['index'],
props: ['index', 'value'],
name: "TransactionPiggyBank",
data() {
return {
@@ -94,19 +93,16 @@ export default {
}
},
},
watch: {
value: function (value) {
this.updateField({field: 'piggy_bank_id', index: this.index, value: value});
}
},
computed: {
...mapGetters([
'transactionType',
'transactions',
]),
piggy_bank_id: {
get() {
return this.transactions[this.index].piggy_bank_id;
},
set(value) {
this.updateField({field: 'piggy_bank_id', index: this.index, value: value});
}
}
])
}
}
</script>

65
frontend/src/components/transactions/TransactionTags.vue
View File

@@ -25,40 +25,63 @@
</div>
<div class="input-group">
<vue-tags-input
v-model="tag"
v-model="currentTag"
:add-only-from-autocomplete="false"
:autocomplete-items="autocompleteItems"
:tags="tags"
:title="$t('firefly.tags')"
v-bind:placeholder="$t('firefly.tags')"
@tags-changed="update"/>
@tags-changed="newTags => this.tags = newTags"
/>
</div>
</div>
</template>
<script>
import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
import VueTagsInput from "@johmun/vue-tags-input";
import axios from "axios";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
name: "TransactionTags",
components: {
VueTagsInput
},
props: ['value', 'error', 'index'],
props: ['value', 'index'],
data() {
return {
tag: '',
autocompleteItems: [],
debounce: null,
tags: this.value,
tags: [],
currentTag: '',
updateTags: true // the idea is that this is always true, except when the tags-function sets the value.
};
},
watch: {
'tag': 'initItems',
'currentTag': 'initItems',
value: function (value) {
console.log('watch: value');
console.log(value);
this.updateField({field: 'tags', index: this.index, value: value});
this.updateTags = false;
this.tags = value;
},
tags: function (value) {
if (this.updateTags) {
console.log('watch: tags');
let shortList = [];
for (let key in value) {
if (value.hasOwnProperty(key)) {
shortList.push({text: value[key].text});
}
}
this.value = shortList;
}
this.updateTags = true;
}
},
methods: {
...mapMutations(
@@ -66,36 +89,20 @@ export default {
'updateField',
],
),
update(newTags) {
this.autocompleteItems = [];
this.tags = newTags;
// create array for update field thing:
let shortList = [];
for(let key in newTags) {
if (newTags.hasOwnProperty(key)) {
shortList.push(newTags[key].text);
}
}
this.updateField({field: 'tags', index: this.index, value: shortList});
},
hasError: function () {
return this.error.length > 0;
},
initItems() {
// console.log('Now in initItems');
if (this.tag.length < 2) {
if (this.currentTag.length < 2) {
return;
}
const url = document.getElementsByTagName('base')[0].href + `api/v1/autocomplete/tags?query=${this.tag}`;
const url = document.getElementsByTagName('base')[0].href + `api/v1/autocomplete/tags?query=${this.currentTag}`;
clearTimeout(this.debounce);
this.debounce = setTimeout(() => {
axios.get(url).then(response => {
this.autocompleteItems = response.data.map(a => {
return {text: a.tag};
this.autocompleteItems = response.data.map(item => {
return {text: item.tag};
});
}).catch(() => console.warn('Oh. Something went wrong loading tags.'));
}, 600);
}, 300);
},
},

4
frontend/src/locales/de.json
View File

@@ -22,8 +22,8 @@
"bill": "Rechnung",
"no_bill": "(keine Belege)",
"tags": "Schlagw\u00f6rter",
"internal_reference": "Internal reference",
"external_url": "External URL",
"internal_reference": "Interner Verweis",
"external_url": "Externe URL",
"no_piggy_bank": "(kein Sparschwein)",
"paid": "Bezahlt",
"notes": "Notizen",

4
frontend/src/locales/fr.json
View File

@@ -22,8 +22,8 @@
"bill": "Facture",
"no_bill": "(aucune facture)",
"tags": "Tags",
"internal_reference": "Internal reference",
"external_url": "External URL",
"internal_reference": "R\u00e9f\u00e9rence interne",
"external_url": "URL externe",
"no_piggy_bank": "(aucune tirelire)",
"paid": "Pay\u00e9",
"notes": "Notes",

4
frontend/src/locales/pl.json
View File

@@ -22,8 +22,8 @@
"bill": "Rachunek",
"no_bill": "(brak rachunku)",
"tags": "Tagi",
"internal_reference": "Internal reference",
"external_url": "External URL",
"internal_reference": "Wewn\u0119trzny nr referencyjny",
"external_url": "Zewn\u0119trzny adres URL",
"no_piggy_bank": "(brak skarbonki)",
"paid": "Zap\u0142acone",
"notes": "Notatki",

4
frontend/src/locales/pt-br.json
View File

@@ -22,8 +22,8 @@
"bill": "Fatura",
"no_bill": "(sem fatura)",
"tags": "Tags",
"internal_reference": "Internal reference",
"external_url": "External URL",
"internal_reference": "Refer\u00eancia interna",
"external_url": "URL externa",
"no_piggy_bank": "(nenhum cofrinho)",
"paid": "Pago",
"notes": "Notas",