firefly-iii/resources/assets/js/components/transactions/Amount.vue
2019-07-13 20:58:00 +02:00

104 lines
3.7 KiB
Vue

<!--
- Amount.vue
- Copyright (c) 2019 thegrumpydictator@gmail.com
-
- This file is part of Firefly III.
-
- Firefly III is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- Firefly III is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<div class="form-group" v-bind:class="{ 'has-error': hasError()}">
<label class="col-sm-4 control-label" ref="cur"></label>
<div class="col-sm-8">
<input type="number" ref="amount" :value="value" @input="handleInput" step="any"
class="form-control"
name="amount[]"
title="amount" autocomplete="off" placeholder="Amount">
<ul class="list-unstyled" v-for="error in this.error">
<li class="text-danger">{{ error }}</li>
</ul>
</div>
</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);
},
hasError: function () {
return this.error.length > 0;
},
changeData: function () {
let transactionType = this.transactionType;
// reset of all are empty:
//console.log('Type "' + transactionType + '"');
//console.log('Source "' + this.source.name + '"');
//console.log('Dest "' + this.destination.name + '"');
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;
}
if (transactionType === 'Withdrawal' || transactionType === 'Transfer') {
$(this.$refs.cur).text(this.source.currency_name);
return;
}
if (transactionType === 'Deposit') {
$(this.$refs.cur).text(this.destination.currency_name);
}
}
},
watch: {
source: function () {
this.changeData();
},
destination: function () {
this.changeData();
},
transactionType: function () {
this.changeData();
}
},
mounted() {
this.changeData();
}
}
</script>
<style scoped>
</style>