shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Currency conversion component edited

Browse Source
This commit is contained in:
Burak Civan 2021-06-28 13:00:24 +03:00
parent 85fd9ffcae
commit 0786753d48
3 changed files with 168 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
resources/assets/js/components/AkauntingCurrencyConversion.vue
View File

@ -1,14 +1,27 @@
<template>
<div>
{{ conversion }}
<div class="d-flex align-items-center justify-content-end mt-3">
<span>{{ texts[0] }}</span>
<money v-bind="{
decimal: this.currencySymbol.decimal_mark,
thousands: this.currencySymbol.thousands_separator,
prefix: (this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
suffix: (!this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
precision: parseInt(this.currencySymbol.precision),
masked: true
}" :value="price" name="rate" disabled size="5" masked class="disabled-money text-right mr-2 js-conversion-input"></money>
<span class="mr-2">{{ currecyCode }}</span>
<input v-model="currencyRate" @input="onChange" class="disabled-money text-right js-conversion-input" size="4" />
</div>
</template>
<script>
import Vue from 'vue';
import {Money} from 'v-money';
export default {
name: 'akaunting-currency-conversion',
components: {
Money
},
props: {
currencyConversionText: {
@ -26,33 +39,67 @@ export default {
currencyRate: {
default: 1.000,
},
currencySymbol: {
default: {}
},
currency: {
type: Object,
default: function () {
return {
};
},
description: "Default currency"
},
},
data() {
return {
conversion: '',
rate: this.currencyRate,
texts: [],
money: {
decimal: this.currencySymbol.decimal_mark,
thousands: this.currencySymbol.thousands_separator,
prefix: (this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
suffix: (!this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
precision: parseInt(this.currencySymbol.precision),
masked: true
}
};
},
created() {
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace(':currency_rate', this.currencyRate);
let conver = this.currencyConversionText.split(':price');
this.texts.push(conver[0]);
this.texts.push(conver[1].replace(':currency_code', this.currecyCode).replace(':currency_rate', this.currencyRate));
},
methods: {
onChange() {
this.$emit('change', this.rate);
}
},
watch: {
currencyConversionText: function (text) {
this.conversion = text.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace('', this.currencyRate);
},
price: function (price) {
this.conversion = this.currencyConversionText.replace(':price', price).replace(':currency_code', this.currecyCode).replace(':currency_rate', this.currencyRate);
this.conversion = this.currencyConversionText.replace(':price', price).replace(':currency_code', this.currecyCode).replace(':currency_rate', '');
},
currecyCode: function (currecyCode) {
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', currecyCode).replace(':currency_rate', this.currencyRate);
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace(':currency_rate', '');
},
currencyRate: function (currencyRate) {
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace(':currency_rate', currencyRate);
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace(':currency_rate', '');
},
currencySymbol: function (currencySymbol) {
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace(':currency_rate', '');
},
},
};

26
resources/assets/js/views/common/documents.js vendored
View File

@ -55,6 +55,16 @@
page_loaded: false,
currencies: [],
min_due_date: false,
currency_symbol: {
"name":"US Dollar",
"code":"USD",
"rate":1,
"precision":2,
"symbol":"$",
"symbol_first":1,
"decimal_mark":".",
"thousands_separator":","
}
}
},
@ -535,13 +545,16 @@
this.onChangeCurrency(currency_code);
});
}
this.currencies.forEach(function (currency, index) {
if (currency_code == currency.code) {
this.currency = currency;
this.form.currency_code = currency.code;
this.form.currency_rate = currency.rate;
this.currency_symbol = currency;
this.currencyConversion();
}
}, this);
},
@ -549,6 +562,17 @@
setDueMinDate(date) {
this.min_due_date = date;
},
currencyConversion() {
setTimeout(() => {
if(document.querySelectorAll('.js-conversion-input')) {
let currency_input = document.querySelectorAll('.js-conversion-input');
for(let input of currency_input) {
input.setAttribute('size', input.value.length);
}
}
}, 250)
}
},
created() {

238
resources/views/components/documents/form/totals.blade.php
View File

@ -1,151 +1,89 @@
<div class="row document-item-body">
<div class="col-sm-12 mb-4 p-0">
<div class="table-responsive overflow-x-scroll overflow-y-hidden">
<table class="table" id="totals">
<colgroup>
<col class="document-total-50">
<col class="document-total-30">
<col class="document-total-25">
<col class="document-total-50-px">
</colgroup>
<tbody id="invoice-total-rows" class="table-padding-05">
@stack('sub_total_td_start')
<tr id="tr-subtotal">
<td class="border-bottom-0 pb-0"></td>
<td class="text-right border-right-0 border-bottom-0 align-middle pb-0 pr-0">
<strong>{{ trans('invoices.sub_total') }}</strong>
</td>
<td class="text-right border-bottom-0 long-texts pb-0 pr-3">
<div>
{{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
</td>
<td class="border-bottom-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('sub_total_td_end')
@if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
@stack('item_discount_td_start')
<tr id="tr-line-discount" v-if="totals.item_discount">
<td class="border-top-0 pt-0 pb-0"></td>
<td class="text-right border-top-0 border-right-0 border-bottom-0 align-middle pt-0 pb-0 pr-0">
<strong>{{ trans('invoices.item_discount') }}</strong>
</td>
<td class="text-right border-top-0 border-bottom-0 long-texts pt-0 pb-0 pr-3">
<div>
{{ Form::moneyGroup('item_discount', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.item_discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('item_discount_td_end')
@endif
@if (in_array(setting('localisation.discount_location', 'total'), ['total', 'both']))
@stack('add_discount_td_start')
<tr id="tr-discount">
<td class="border-top-0 pt-0 pb-0"></td>
<td class="text-right border-top-0 border-right-0 border-bottom-0 align-middle pt-0 pb-0 pr-0">
<el-popover
popper-class="p-0 h-0"
placement="bottom"
width="300"
v-model="discount">
<div class="card d-none" :class="[{'show' : discount}]">
<div class="discount card-body">
<div class="row align-items-center">
<div class="col-sm-6">
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text" id="input-discount">
<i class="fa fa-percent"></i>
</span>
</div>
{!! Form::number('pre_discount', null, ['id' => 'pre-discount', 'class' => 'form-control', 'v-model' => 'form.discount']) !!}
</div>
</div>
<div class="col-sm-6">
<div class="discount-description">
<strong>{{ trans('invoices.discount_desc') }}</strong>
</div>
</div>
</div>
</div>
<div class="discount card-footer">
<div class="row float-right">
<div class="col-xs-12 col-sm-12">
<a href="javascript:void(0)" @click="discount = false" class="btn btn-outline-secondary" @click="closePayment">
{{ trans('general.cancel') }}
</a>
{!! Form::button(trans('general.save'), ['type' => 'button', 'id' => 'save-discount', '@click' => 'onAddTotalDiscount', 'class' => 'btn btn-success']) !!}
</div>
</div>
</div>
</div>
<el-link class="cursor-pointer text-info" slot="reference" type="primary" v-if="!totals.discount_text">{{ trans('invoices.add_discount') }}</el-link>
<el-link slot="reference" type="primary" v-if="totals.discount_text" v-html="totals.discount_text"></el-link>
</el-popover>
</td>
<td class="text-right border-top-0 border-bottom-0 pt-0 pb-0 pr-3">
<div>
{{ Form::moneyGroup('discount_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.discount', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
{!! Form::hidden('discount', null, ['id' => 'discount', 'class' => 'form-control text-right', 'v-model' => 'form.discount']) !!}
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('add_discount_td_end')
@endif
@stack('tax_total_td_start')
<tr v-for="(tax, tax_index) in totals.taxes"
:index="tax_index">
<td class="border-top-0 pt-0 pb-0"></td>
<td class="text-right border-top-0 border-right-0 border-bottom-0 align-middle pt-0 pb-0 pr-0">
<strong v-html="tax.name"></strong>
</td>
<td class="text-right border-top-0 border-bottom-0 long-texts pb-0 pr-3">
<div>
{{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'tax.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('tax_total_td_end')
@stack('grand_total_td_start')
<tr id="tr-total">
<td class="border-top-0 pt-0 pb-0"></td>
<td class="text-right border-top-0 border-right-0 align-middle pt-0 pb-0 pr-0">
<strong class="document-total-span">{{ trans('invoices.total') }}</strong>
{{ Form::selectGroup('currency_code', '', 'exchange-alt', $currencies, $currency->code, ['required' => 'required', 'model' => 'form.currency_code', 'change' => 'onChangeCurrency'], 'document-total-currency') }}
{!! Form::hidden('currency_rate', (!empty($document)) ? $document->currency_rate : $currency->rate, ['id' => 'currency_rate', 'class' => 'form-control', 'required' => 'required']) !!}
</td>
<td class="text-right border-top-0 long-texts pt-0 pb-0 pr-3">
<div>
{{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'money-class' => 'text-right disabled-money'], 0.00, 'text-right disabled-money') }}
</div>
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('grand_total_td_end')
@stack('currency_conversion_td_start')
<tr id="tr-currency-conversion" class="d-none" :class="[{'d-table-row': (('{{ $currency->code }}' != form.currency_code) && totals.total)}]">
<td class="border-top-0 pb-0"></td>
<td class="text-right border-top-0 border-right-0 align-middle pb-0 pr-3 pr-0" colspan="2">
<akaunting-currency-conversion
currency-conversion-text="{{ trans('currencies.conversion') }}"
:price="(totals.total / form.currency_rate).toFixed(2)"
currecy-code="{{ $currency->code }}"
:currency-rate="form.currency_rate"
></akaunting-currency-conversion>
</td>
<td class="border-top-0 pt-0 pb-0" style="max-width: 50px"></td>
</tr>
@stack('currency_conversion_td_end')
</tbody>
</table>
</div>
<template>
<div class="d-flex align-items-center justify-content-end mt-3">
<span>{{ texts[0] }}</span>
<money v-bind="{
decimal: this.currencySymbol.decimal_mark,
thousands: this.currencySymbol.thousands_separator,
prefix: (this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
suffix: (!this.currencySymbol.symbol_first) ? this.currencySymbol.symbol : '',
precision: parseInt(this.currencySymbol.precision),
masked: true
}" :value="price" name="rate" disabled size="5" masked class="disabled-money text-right mr-2 js-conversion-input"></money>
<span class="mr-2">{{ currecyCode }}</span>
<input v-model="currencyRate" @input="onChange" class="disabled-money text-right js-conversion-input" size="4" />
</div>
</div>
</template>
<script>
import {Money} from 'v-money';
export default {
name: 'akaunting-currency-conversion',
components: {
Money
},
props: {
currencyConversionText: {
type: String,
default: 'Currency conversion'
},
price: {
type: String,
default: 'sale'
},
currecyCode: {
type: String,
default: 'USD'
},
currencyRate: {
default: 1.000,
},
currencySymbol: {
default: {}
}
},
data() {
return {
conversion: '',
rate: this.currencyRate,
texts: []
};
},
created() {
let conver = this.currencyConversionText.split(':price');
this.texts.push(conver[0]);
this.texts.push(conver[1].replace(':currency_code', this.currecyCode).replace(':currency_rate', this.currencyRate));
},
methods: {
onChange() {
this.$emit('change', this.rate);
}
},
watch: {
currencyConversionText: function (text) {
this.conversion = text.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace('', this.currencyRate);
},
price: function (price) {
this.conversion = this.currencyConversionText.replace(':price', price).replace(':currency_code', this.currecyCode).replace(':currency_rate', '');
},
currecyCode: function (currecyCode) {
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace(':currency_rate', '');
},
currencyRate: function (currencyRate) {
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace(':currency_rate', '');
},
currencySymbol: function (currencySymbol) {
this.conversion = this.currencyConversionText.replace(':price', this.price).replace(':currency_code', this.currecyCode).replace(':currency_rate', '');
},
},
};
</script>