This commit is contained in:
James Cole
2020-10-02 07:47:02 +02:00
parent 8eb6b5a364
commit 8c7e3b3731
8 changed files with 352 additions and 320 deletions

View File

@@ -19,129 +19,137 @@
-->
<template>
<div class="form-group" v-bind:class="{ 'has-error': hasError()}">
<div class="col-sm-8 col-sm-offset-4 text-sm">
{{ $t('firefly.amount') }}
</div>
<label class="col-sm-4 control-label" ref="cur"></label>
<div class="col-sm-8">
<div class="input-group">
<input type="number"
@input="handleInput"
ref="amount"
:value="value"
step="any"
class="form-control"
name="amount[]"
:title="$t('firefly.amount')"
autocomplete="off"
v-bind:placeholder="$t('firefly.amount')">
<span class="input-group-btn">
<button
v-on:click="clearAmount"
tabIndex="-1"
class="btn btn-default"
type="button"><i class="fa fa-trash-o"></i></button>
</span>
</div>
</div>
<ul class="list-unstyled" v-for="error in this.error">
<li class="text-danger">{{ error }}</li>
</ul>
<div class="form-group" v-bind:class="{ 'has-error': hasError()}">
<div class="col-sm-8 col-sm-offset-4 text-sm">
{{ $t('firefly.amount') }}
</div>
<label class="col-sm-4 control-label" ref="cur"></label>
<div class="col-sm-8">
<div class="input-group">
<input type="number"
@input="handleInput"
ref="amount"
:value="value"
step="any"
class="form-control"
name="amount[]"
:title="$t('firefly.amount')"
autocomplete="off"
v-bind:placeholder="$t('firefly.amount')">
<span class="input-group-btn">
<button
v-on:click="clearAmount"
tabIndex="-1"
class="btn btn-default"
type="button"><i class="fa fa-trash-o"></i></button>
</span>
</div>
</div>
<ul class="list-unstyled" v-for="error in this.error">
<li class="text-danger">{{ error }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Amount",
props: ['source', 'destination', 'transactionType', 'value', 'error'],
data() {
return {
sourceAccount: this.source,
destinationAccount: this.destination,
type: this.transactionType
}
},
methods: {
handleInput(e) {
this.$emit('input', this.$refs.amount.value);
},
clearAmount: function () {
this.$refs.amount.value = '';
this.$emit('input', this.$refs.amount.value);
// some event?
this.$emit('clear:amount')
},
hasError: function () {
return this.error.length > 0;
},
changeData: function () {
let transactionType = this.transactionType;
// reset of all are empty:
if (!transactionType && !this.source.name && !this.destination.name) {
$(this.$refs.cur).text('');
return;
}
if(null === transactionType) {
transactionType = '';
}
if ('' === transactionType && '' !== this.source.currency_name) {
$(this.$refs.cur).text(this.source.currency_name);
return;
}
if ('' === transactionType && '' !== this.destination.currency_name) {
$(this.$refs.cur).text(this.destination.currency_name);
return;
}
// for normal transactions, the source leads the currency
if (transactionType.toLowerCase() === 'withdrawal' ||
transactionType.toLowerCase() === 'reconciliation' ||
transactionType.toLowerCase() === 'transfer') {
$(this.$refs.cur).text(this.source.currency_name);
return;
}
// for deposits, the destination leads the currency
// but source must not be a liability
if (transactionType.toLowerCase() === 'deposit'
&&
!('debt' === this.source.type.toLowerCase() ||
'loan' === this.source.type.toLowerCase() ||
'mortgage' === this.source.type.toLowerCase()
)
) {
$(this.$refs.cur).text(this.destination.currency_name);
}
// for deposits, the destination leads the currency
// unless source is liability, then source leads:
if (transactionType.toLowerCase() === 'deposit'
&&
('debt' === this.source.type.toLowerCase() ||
'loan' === this.source.type.toLowerCase() ||
'mortgage' === this.source.type.toLowerCase()
)
) {
$(this.$refs.cur).text(this.source.currency_name);
}
}
},
watch: {
source: function () {
this.changeData();
},
destination: function () {
this.changeData();
},
transactionType: function () {
this.changeData();
}
},
mounted() {
this.changeData();
}
export default {
name: "Amount",
props: ['source', 'destination', 'transactionType', 'value', 'error'],
data() {
return {
sourceAccount: this.source,
destinationAccount: this.destination,
type: this.transactionType
}
},
methods: {
handleInput(e) {
this.$emit('input', this.$refs.amount.value);
},
clearAmount: function () {
this.$refs.amount.value = '';
this.$emit('input', this.$refs.amount.value);
// some event?
this.$emit('clear:amount')
},
hasError: function () {
return this.error.length > 0;
},
changeData: function () {
console.log('Triggered amount changeData()');
let transactionType = this.transactionType;
// reset of all are empty:
if (!transactionType && !this.source.name && !this.destination.name) {
$(this.$refs.cur).text('');
return;
}
if (null === transactionType) {
transactionType = '';
}
if ('' === transactionType && '' !== this.source.currency_name) {
$(this.$refs.cur).text(this.source.currency_name);
return;
}
if ('' === transactionType && '' !== this.destination.currency_name) {
$(this.$refs.cur).text(this.destination.currency_name);
return;
}
// for normal transactions, the source leads the currency
if (transactionType.toLowerCase() === 'withdrawal' ||
transactionType.toLowerCase() === 'reconciliation' ||
transactionType.toLowerCase() === 'transfer') {
$(this.$refs.cur).text(this.source.currency_name);
return;
}
// for deposits, the destination leads the currency
// but source must not be a liability
if (transactionType.toLowerCase() === 'deposit'
&&
!('debt' === this.source.type.toLowerCase() ||
'loan' === this.source.type.toLowerCase() ||
'mortgage' === this.source.type.toLowerCase()
)
) {
$(this.$refs.cur).text(this.destination.currency_name);
}
// for deposits, the destination leads the currency
// unless source is liability, then source leads:
if (transactionType.toLowerCase() === 'deposit'
&&
('debt' === this.source.type.toLowerCase() ||
'loan' === this.source.type.toLowerCase() ||
'mortgage' === this.source.type.toLowerCase()
)
) {
$(this.$refs.cur).text(this.source.currency_name);
}
}
},
watch: {
source: function () {
console.log('amount: watch source triggered');
this.changeData();
},
value: function() {
console.log('amount: value changed');
},
destination: function () {
console.log('amount: watch destination triggered');
this.changeData();
},
transactionType: function () {
console.log('amount: watch transaction type triggered');
this.changeData();
}
},
mounted() {
console.log('amount: mounted');
this.changeData();
}
}
</script>
<style scoped>

View File

@@ -1,4 +1,3 @@
<!--
- Bill.vue
- Copyright (c) 2019 james@firefly-iii.org
@@ -20,85 +19,92 @@
-->
<template>
<div class="form-group"
v-bind:class="{ 'has-error': hasError()}"
v-if="typeof this.transactionType === 'undefined' || this.transactionType === 'withdrawal' || this.transactionType === 'Withdrawal' || this.transactionType === '' || null === this.transactionType">
<div class="col-sm-12 text-sm">
{{ $t('firefly.bill') }}
</div>
<div class="col-sm-12">
<select
name="bill[]"
ref="bill"
v-model="selected"
@input="handleInput"
v-on:change="signalChange"
:title="$t('firefly.bill')"
class="form-control"
v-if="this.bills.length > 0">
<option v-for="cBill in this.bills"
:label="cBill.name"
:value="cBill.id">{{ cBill.name }}
</option>
</select>
<p class="help-block" v-if="this.bills.length === 1" v-html="$t('firefly.no_bill_pointer')"></p>
<ul class="list-unstyled" v-for="error in this.error">
<li class="text-danger">{{ error }}</li>
</ul>
</div>
<div class="form-group"
v-bind:class="{ 'has-error': hasError()}"
v-if="typeof this.transactionType === 'undefined' || this.transactionType === 'withdrawal' || this.transactionType === 'Withdrawal' || this.transactionType === '' || null === this.transactionType">
<div class="col-sm-12 text-sm">
{{ $t('firefly.bill') }}
</div>
<div class="col-sm-12">
<select
name="bill[]"
ref="bill"
v-model="selected"
@input="handleInput"
v-on:change="signalChange"
:title="$t('firefly.bill')"
class="form-control"
v-if="this.bills.length > 0">
<option v-for="cBill in this.bills"
:label="cBill.name"
:value="cBill.id">{{ cBill.name }}
</option>
</select>
<p class="help-block" v-if="this.bills.length === 1" v-html="$t('firefly.no_bill_pointer')"></p>
<ul class="list-unstyled" v-for="error in this.error">
<li class="text-danger">{{ error }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "Bill",
props: {
transactionType: String,
value: {
type: [String, Number],
default: 0
},
error: Array,
no_bill: String,
},
mounted() {
this.loadBills();
},
data() {
return {
selected: this.value ?? 0,
bills: [],
}
},
methods: {
// Fixes edit change bill not updating on every broswer
signalChange: function(e) {
this.$emit('input', this.$refs.bill.value);
},
handleInput(e) {
this.$emit('input', this.$refs.bill.value);
},
hasError: function () {
return this.error.length > 0;
},
loadBills: function () {
let URI = document.getElementsByTagName('base')[0].href + 'api/v1/autocomplete/bills?limit=1337';
axios.get(URI, {}).then((res) => {
this.bills = [
{
name: this.no_bill,
id: 0,
}
];
for (const key in res.data) {
if (res.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
this.bills.push(res.data[key]);
}
}
});
}
}
export default {
name: "Bill",
props: {
transactionType: String,
value: {
type: [String, Number],
default: 0
},
error: Array,
no_bill: String,
},
mounted() {
console.log('bill: mounted');
this.loadBills();
},
data() {
return {
selected: this.value ?? 0,
bills: [],
}
},
watch: {
value: function () {
console.log('bill: value changed to ' + this.value);
this.selected = this.value;
}
},
methods: {
// Fixes edit change bill not updating on every browser
signalChange: function (e) {
this.$emit('input', this.$refs.bill.value);
},
handleInput(e) {
this.$emit('input', this.$refs.bill.value);
},
hasError: function () {
return this.error.length > 0;
},
loadBills: function () {
let URI = document.getElementsByTagName('base')[0].href + 'api/v1/autocomplete/bills?limit=1337';
axios.get(URI, {}).then((res) => {
this.bills = [
{
name: this.no_bill,
id: 0,
}
];
for (const key in res.data) {
if (res.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
this.bills.push(res.data[key]);
}
}
});
}
}
}
</script>
<style scoped>

View File

@@ -1,4 +1,3 @@
<!--
- Budget.vue
- Copyright (c) 2019 james@firefly-iii.org
@@ -20,85 +19,91 @@
-->
<template>
<div class="form-group"
v-bind:class="{ 'has-error': hasError()}"
v-if="typeof this.transactionType === 'undefined' || this.transactionType === 'withdrawal' || this.transactionType === 'Withdrawal' || this.transactionType === '' || null === this.transactionType">
<div class="col-sm-12 text-sm">
{{ $t('firefly.budget') }}
</div>
<div class="col-sm-12">
<select
name="budget[]"
ref="budget"
v-model="selected"
@input="handleInput"
v-on:change="signalChange"
:title="$t('firefly.budget')"
class="form-control"
v-if="this.budgets.length > 0">
<option v-for="cBudget in this.budgets"
:label="cBudget.name"
:value="cBudget.id">{{cBudget.name}}
</option>
</select>
<p class="help-block" v-if="this.budgets.length === 1" v-html="$t('firefly.no_budget_pointer')"></p>
<ul class="list-unstyled" v-for="error in this.error">
<li class="text-danger">{{ error }}</li>
</ul>
</div>
<div class="form-group"
v-bind:class="{ 'has-error': hasError()}"
v-if="typeof this.transactionType === 'undefined' || this.transactionType === 'withdrawal' || this.transactionType === 'Withdrawal' || this.transactionType === '' || null === this.transactionType">
<div class="col-sm-12 text-sm">
{{ $t('firefly.budget') }}
</div>
<div class="col-sm-12">
<select
name="budget[]"
ref="budget"
v-model="selected"
@input="handleInput"
v-on:change="signalChange"
:title="$t('firefly.budget')"
class="form-control"
v-if="this.budgets.length > 0">
<option v-for="cBudget in this.budgets"
:label="cBudget.name"
:value="cBudget.id">{{ cBudget.name }}
</option>
</select>
<p class="help-block" v-if="this.budgets.length === 1" v-html="$t('firefly.no_budget_pointer')"></p>
<ul class="list-unstyled" v-for="error in this.error">
<li class="text-danger">{{ error }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "Budget",
props: {
transactionType: String,
value: {
type: [String, Number],
default: 0
},
error: Array,
no_budget: String,
},
mounted() {
this.loadBudgets();
},
data() {
return {
selected: this.value ?? 0,
budgets: [],
}
},
methods: {
// Fixes edit change budget not updating on every broswer
signalChange: function(e) {
this.$emit('input', this.$refs.budget.value);
},
handleInput(e) {
this.$emit('input', this.$refs.budget.value);
},
hasError: function () {
return this.error.length > 0;
},
loadBudgets: function () {
let URI = document.getElementsByTagName('base')[0].href + 'api/v1/autocomplete/budgets?limit=1337';
axios.get(URI, {}).then((res) => {
this.budgets = [
{
name: this.no_budget,
id: 0,
}
];
for (const key in res.data) {
if (res.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
this.budgets.push(res.data[key]);
}
}
});
}
}
export default {
name: "Budget",
props: {
transactionType: String,
value: {
type: [String, Number],
default: 0
},
error: Array,
no_budget: String,
},
mounted() {
this.loadBudgets();
},
data() {
return {
selected: this.value ?? 0,
budgets: [],
}
},
watch: {
value: function () {
console.log('budget: value changed to ' + this.value);
this.selected = this.value;
}
},
methods: {
// Fixes edit change budget not updating on every broswer
signalChange: function (e) {
this.$emit('input', this.$refs.budget.value);
},
handleInput(e) {
this.$emit('input', this.$refs.budget.value);
},
hasError: function () {
return this.error.length > 0;
},
loadBudgets: function () {
let URI = document.getElementsByTagName('base')[0].href + 'api/v1/autocomplete/budgets?limit=1337';
axios.get(URI, {}).then((res) => {
this.budgets = [
{
name: this.no_budget,
id: 0,
}
];
for (const key in res.data) {
if (res.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
this.budgets.push(res.data[key]);
}
}
});
}
}
}
</script>
<style scoped>

View File

@@ -52,7 +52,7 @@
}}</span>
<span v-if="transactions.length === 1">{{ $t('firefly.transaction_journal_information') }}</span>
</h3>
<div class="box-tools pull-right" v-if="transactions.length > 1" x>
<div class="box-tools pull-right" v-if="transactions.length > 1">
<button type="button" v-on:click="deleteTransaction(index, $event)" class="btn btn-xs btn-danger"><i
class="fa fa-trash"></i></button>
</div>
@@ -224,7 +224,7 @@
</div>
<div class="box-footer">
<div class="btn-group">
<button class="btn btn-success" @click="submit">{{ $t('firefly.update_transaction') }}</button>
<button class="btn btn-success" @click="submit" id="submitButton">{{ $t('firefly.update_transaction') }}</button>
</div>
</div>
</div>
@@ -664,6 +664,10 @@ export default {
return currentArray;
},
submit: function (e) {
let button = $('#submitButton');
button.prop("disabled", true);
const page = window.location.href.split('/');
const groupId = page[page.length - 1];
let uri = './api/v1/transactions/' + groupId + '?_token=' + document.head.querySelector('meta[name="csrf-token"]').content;
@@ -675,9 +679,6 @@ export default {
}
const data = this.convertData();
let button = $('#submitButton');
button.prop("disabled", true);
//axios.put(uri, data)
axios({
method: method,
@@ -840,6 +841,7 @@ export default {
addTransaction: function (e) {
this.transactions.push({
transaction_journal_id: 0,
description: "",
@@ -913,6 +915,17 @@ export default {
allowed_types: []
}
});
let count = this.transactions.length;
console.log('Transactions length = ' + count);
// also set accounts from previous entry, if present.
if(this.transactions.length > 1) {
console.log('Adding split.');
this.transactions[count-1].source_account = this.transactions[count-2].source_account;
this.transactions[count-1].destination_account = this.transactions[count-2].destination_account;
this.transactions[count-1].date = this.transactions[count-2].date;
}
console.log('Transactions length now = ' + this.transactions.length);
if (e) {
e.preventDefault();
}