From 0786753d480595265bc4b89192269d261292eb9f Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 28 Jun 2021 13:00:24 +0300
Subject: [PATCH 1/4] Currency conversion component edited

---
 .../AkauntingCurrencyConversion.vue           |  63 ++++-
 resources/assets/js/views/common/documents.js |  26 +-
 .../documents/form/totals.blade.php           | 238 +++++++-----------
 3 files changed, 168 insertions(+), 159 deletions(-)

diff --git a/resources/assets/js/components/AkauntingCurrencyConversion.vue b/resources/assets/js/components/AkauntingCurrencyConversion.vue
index 49e40ccff..a97e2f9b1 100644
--- a/resources/assets/js/components/AkauntingCurrencyConversion.vue
+++ b/resources/assets/js/components/AkauntingCurrencyConversion.vue
@@ -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', '');
         },
     },
 };
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 385da447b..03449c7af 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -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() {
diff --git a/resources/views/components/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index 90abf3fc4..925931617 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -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>

From f1f5fadc1c64d5880a87c873f563554c54b876bc Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 28 Jun 2021 18:23:40 +0300
Subject: [PATCH 2/4] Edit method edited

---
 .../AkauntingCurrencyConversion.vue           | 45 ++++++++++---------
 resources/assets/js/views/common/documents.js |  2 +-
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/resources/assets/js/components/AkauntingCurrencyConversion.vue b/resources/assets/js/components/AkauntingCurrencyConversion.vue
index a97e2f9b1..c31af8e6c 100644
--- a/resources/assets/js/components/AkauntingCurrencyConversion.vue
+++ b/resources/assets/js/components/AkauntingCurrencyConversion.vue
@@ -8,9 +8,9 @@
             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>
+        }" :value="price" 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" />
+        <input name="currency_rate" v-model="currencyRate" @input="onChange" class="text-right js-conversion-input" size="4" />
     </div>
 </template>
 
@@ -41,31 +41,14 @@ export default {
         },
         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
-            }
+            texts: []
         };
     },
 
@@ -78,7 +61,27 @@ export default {
 
     methods: {
         onChange() {
+            let self = this;
             this.$emit('change', this.rate);
+
+            if(self.currencyRate.length !== 0) {
+                window.axios({
+                method: 'PATCH',
+                url: url + "/settings/currencies",
+                data: {
+                    name: self.currencySymbol.name,
+                    code: self.currecyCode,
+                    rate: self.currencyRate
+                }
+                }).then(response => {
+                    this.$notify({
+                        message: 'SUCCESS',
+                        timeout: 200,
+                        icon: 'fas fa-bell',
+                        type
+                    });
+                })
+            }
         }
     },
 
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 03449c7af..9eb3b0503 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -553,7 +553,7 @@
                      this.form.currency_code = currency.code;
                      this.form.currency_rate = currency.rate;
                      this.currency_symbol = currency;
-
+                     
                      this.currencyConversion();
                  }
              }, this);

From ea7fc208ea021e23a0aa5ea520a24556d6f79e99 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 28 Jun 2021 21:45:55 +0300
Subject: [PATCH 3/4] Currency rate made development

---
 .../AkauntingCurrencyConversion.vue           | 775 +++++++++++++++---
 .../documents/form/totals.blade.php           | 240 ++++--
 2 files changed, 822 insertions(+), 193 deletions(-)

diff --git a/resources/assets/js/components/AkauntingCurrencyConversion.vue b/resources/assets/js/components/AkauntingCurrencyConversion.vue
index c31af8e6c..9eb3b0503 100644
--- a/resources/assets/js/components/AkauntingCurrencyConversion.vue
+++ b/resources/assets/js/components/AkauntingCurrencyConversion.vue
@@ -1,109 +1,674 @@
-<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" disabled size="5" masked class="disabled-money text-right mr-2 js-conversion-input"></money>
-        <span class="mr-2">{{ currecyCode }}</span>
-        <input name="currency_rate" v-model="currencyRate" @input="onChange" class="text-right js-conversion-input" size="4" />
-    </div>
-</template>
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
 
-<script>
-import {Money} from 'v-money';
+ require('./../../bootstrap');
 
-export default {
-    name: 'akaunting-currency-conversion',
-    components: {
-        Money
-    },
+ import Vue from 'vue';
+ 
+ import DashboardPlugin from './../../plugins/dashboard-plugin';
+ 
+ import Global from './../../mixins/global';
+ 
+ import Form from './../../plugins/form';
+ import Error from './../../plugins/error';
+ import BulkAction from './../../plugins/bulk-action';
+ 
+ // plugin setup
+ Vue.use(DashboardPlugin);
+ 
+ const app = new Vue({
+     el: '#main-body',
+ 
+     mixins: [
+         Global
+     ],
+ 
+     data: function () {
+         return {
+             form: new Form('document'),
+             bulk_action: new BulkAction('documents'),
+             totals: {
+                 sub: 0,
+                 item_discount: '',
+                 discount: '',
+                 discount_text: false,
+                 taxes: [],
+                 total: 0
+             },
+             transaction: [],
+             edit: {
+                 status: false,
+                 currency: false,
+                 items: 0,
+             },
+             colspan: 6,
+             discount: false,
+             tax: false,
+             discounts: [],
+             tax_id: [],
+ 
+             items: [],
+             taxes: [],
+             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":","
+             }
+         }
+     },
+ 
+     mounted() {
+         if ((document.getElementById('items') != null) && (document.getElementById('items').rows)) {
+             this.colspan = document.getElementById("items").rows[0].cells.length - 1;
+         }
+     },
+ 
+     methods: {
+         onCalculateTotal() {
+             let global_discount = parseFloat(this.form.discount);
+             let discount_total = 0;
+             let line_item_discount_total = 0;
+             let taxes = document_taxes;
+             let sub_total = 0;
+             let totals_taxes = [];
+             let grand_total = 0;
+             let inclusive_tax_total = 0;
+ 
+             // items calculate
+             this.items.forEach(function(item, index) {
+                 let item_discount = 0;
+ 
+                 item.total = item.price * item.quantity;
+                 item.grand_total = item.price * item.quantity;
+ 
+                 // item discount calculate.
+                 let line_discount_amount = 0;
+ 
+                 if (item.discount) {
+                     line_discount_amount = item.total * (item.discount / 100);
+                     item.discount_amount = line_discount_amount
+ 
+                     item_discounted_total = item.total -= line_discount_amount;
+                     item_discount = item.discount;
+                 }
+ 
+                 let item_discounted_total = item.total;
+ 
+                 if (global_discount) {
+                     item_discounted_total = item.total - (item.total * (global_discount / 100));
+ 
+                     item_discount = global_discount;
+                 }
+ 
+                 // item tax calculate.
+                 if (item.tax_ids) {
+                     let inclusives = [];
+                     let compounds = [];
+ 
+                     item.tax_ids.forEach(function(item_tax, item_tax_index) {
+                         for (var index_taxes = 0; index_taxes < taxes.length; index_taxes++) {
+                             let tax = taxes[index_taxes];
+ 
+                             if (item_tax.id != tax.id) {
+                                 continue;
+                             }
+ 
+                             switch (tax.type) {
+                                 case 'inclusive':
+                                     inclusives.push({
+                                         tax_index: item_tax_index,
+                                         tax_id: tax.id,
+                                         tax_name: tax.title,
+                                         tax_rate: tax.rate
+                                     });
+                                     break;
+                                 case 'compound':
+                                     compounds.push({
+                                         tax_index: item_tax_index,
+                                         tax_id: tax.id,
+                                         tax_name: tax.title,
+                                         tax_rate: tax.rate
+                                     });
+                                     break;
+                                 case 'fixed':
+                                     item_tax.price = tax.rate * item.quantity;
+ 
+                                     totals_taxes = this.calculateTotalsTax(totals_taxes, tax.id, tax.title, item_tax.price);
+ 
+                                     item.grand_total += item_tax.price;
+                                     break;
+                                 case 'withholding':
+                                     item_tax.price = 0 - item.total * (tax.rate / 100);
+ 
+                                     totals_taxes = this.calculateTotalsTax(totals_taxes, tax.id, tax.title, item_tax.price);
+ 
+                                     item.grand_total += item_tax.price;
+                                     break;
+                                 default:
+                                     item_tax.price = item.total * (tax.rate / 100);
+ 
+                                     totals_taxes = this.calculateTotalsTax(totals_taxes, tax.id, tax.title, item_tax.price);
+ 
+                                     item.grand_total += item_tax.price;
+                                     break;
+                             }
+                         }
+                     }, this);
+ 
+                     if (inclusives.length) {
+                         let inclusive_total = 0;
+ 
+                         inclusives.forEach(function(inclusive) {
+                             inclusive_total += inclusive.tax_rate;
+ 
+                             // tax price
+                             item.tax_ids[inclusive.tax_index].price = item.grand_total - (item.grand_total / (1 + inclusive.tax_rate / 100));
+ 
+                             totals_taxes = this.calculateTotalsTax(totals_taxes, inclusive.tax_id, inclusive.tax_name, item.tax_ids[inclusive.tax_index].price);
+                         }, this);
+ 
+                         let item_base_rate = parseFloat(item.grand_total / (1 + inclusive_total / 100));
+                         //item.grand_total = item.grand_total + item_base_rate;
+ 
+                         item.total = item_base_rate;
+ 
+                         inclusive_tax_total += parseFloat(item.grand_total - item.total);
+                     }
+ 
+                     if (compounds.length) {
+                         let price = 0;
+ 
+                         compounds.forEach(function(compound) {
+                             price = (item.grand_total / 100) * compound.tax_rate;
+ 
+                             item.tax_ids[compound.tax_index].price = price;
+ 
+                             totals_taxes = this.calculateTotalsTax(totals_taxes, compound.tax_id, compound.tax_name, price);
+                         }, this);
+ 
+                         item.grand_total += price;
+                     }
+                 }
+ 
+                 // set item total
+                 if (item.discount) {
+                     item.grand_total = item_discounted_total;
+                 }
+ 
+                 // calculate sub, tax, discount all items.
+                 line_item_discount_total += line_discount_amount;
+                 sub_total += item.total;
+                 grand_total += item.grand_total;
+ 
+                 this.form.items[index].name = item.name;
+                 this.form.items[index].description = item.description;
+                 this.form.items[index].quantity = item.quantity;
+                 this.form.items[index].price = item.price;
+                 this.form.items[index].discount = item.discount;
+                 this.form.items[index].total = item.total;
+             }, this);
+ 
+             // Apply discount to total
+             if (global_discount) {
+                 discount_total = parseFloat(sub_total + inclusive_tax_total) * (global_discount / 100);
+ 
+                 this.totals.discount = discount_total;
+ 
+                 grand_total -= discount_total;
+             }
+ 
+             this.totals.item_discount = line_item_discount_total;
+             this.totals.sub = sub_total;
+             this.totals.taxes = totals_taxes;
+             this.totals.total = grand_total;
+ 
+             this.form.items.forEach(function(form_item, form_index) {
+                 let item = this.items[form_index];
+                 
+                 for (const [key, value] of Object.entries(item)) {
+                     if (key == 'add_tax' || key == 'tax_ids' || key == 'add_discount') {
+                         continue
+                     }
+ 
+                     if (form_item[key] === undefined) {
+                         form_item[key] = value
+                     }
+                 }
+             }, this);
+         },
+ 
+         calculateTotalsTax(totals_taxes, id, name, price) {
+             let total_tax_index = totals_taxes.findIndex(total_tax => {
+                 if (total_tax.id === id) {
+                   return true;
+                 }
+             }, this);
+ 
+             if (total_tax_index === -1) {
+                 totals_taxes.push({
+                     id: id,
+                     name: name,
+                     total: price,
+                 });
+             } else {
+                 totals_taxes[total_tax_index].total = parseFloat(totals_taxes[total_tax_index].total) + parseFloat(price);
+             }
+ 
+             return totals_taxes;
+         },
+ 
+         // Select Item added form
+         onSelectedItem(item) {
+             let total = 1 * item.price;
+             let item_taxes = [];
+ 
+             if (item.tax_ids) {
+                 item.tax_ids.forEach(function (tax_id, index) {
+                     if (this.taxes.includes(tax_id)) {
+                         this.taxes[tax_id].push(item.id);
+                     } else {
+                         this.taxes.push(tax_id);
+                         this.taxes[tax_id] = [];
+                         this.taxes[tax_id].push(item.id);
+                     }
+ 
+                     item_taxes.push({
+                         id: tax_id,
+                         price: 10,
+                     });
+                 }, this);
+             }
+ 
+             this.form.items.push({
+                 item_id: item.id,
+                 name: item.name,
+                 description: item.description,
+                 quantity: 1,
+                 price: item.price,
+                 tax_ids: item.tax_ids,
+                 discount: 0,
+                 total: total,
+             });
+ 
+             this.items.push({
+                 item_id: item.id,
+                 name: item.name,
+                 description: item.description,
+                 quantity: 1,
+                 price: item.price,
+                 add_tax: (document.getElementById('invoice-item-discount-rows') != null) ? false : true,
+                 tax_ids: item_taxes,
+                 add_discount: false,
+                 discount: 0,
+                 discount_amount: 0,
+                 total: total,
+                 // @todo
+                 // invoice_item_checkbox_sample: [],
+             });
+ 
+             setTimeout(function() {
+                 this.onCalculateTotal();
+             }.bind(this), 800);
+         },
+ 
+         onSelectedTax(item_index) {
+             if (!this.tax_id) {
+                 return;
+             }
+ 
+             let selected_tax;
+ 
+             document_taxes.forEach(function(tax) {
+                 if (tax.id == this.tax_id) {
+                     selected_tax = tax;
+                 }
+             }, this);
+ 
+             this.items[item_index].tax_ids.push({
+                 id: selected_tax.id,
+                 name: selected_tax.title,
+                 price: 0
+             });
+ 
+             this.form.items[item_index].tax_ids.push(this.tax_id);
+ 
+             if (this.taxes.includes(this.tax_id)) {
+                 this.taxes[this.tax_id].push(this.items[item_index].item_id);
+             } else {
+                 this.taxes[this.tax_id] = [];
+                 this.taxes[this.tax_id].push(this.items[item_index].item_id);
+             }
+ 
+             this.tax_id = '';
+ 
+             this.onCalculateTotal();
+         },
+ 
+         // remove document item row => row_id = index
+         onDeleteItem(index) {
+             this.items.splice(index, 1);
+             this.form.items.splice(index, 1);
+ 
+             this.onCalculateTotal();
+         },
+ 
+         onAddLineDiscount(item_index) {
+             this.items[item_index].add_discount = true;
+         },
+ 
+         onAddTotalDiscount() {
+             let discount = document.getElementById('pre-discount').value;
+ 
+             if (discount < 0) {
+                 discount = 0;
+             } else if (discount > 100) {
+                 discount = 100;
+             }
+ 
+             document.getElementById('pre-discount').value = discount;
+ 
+             this.form.discount = discount;
+             this.discount = false;
+ 
+             this.onCalculateTotal();
+         },
+ 
+         onDeleteDiscount(item_index) {
+             this.items[item_index].add_discount = false;
+         },
+ 
+         onAddTax(item_index) {
+             this.items[item_index].add_tax = true;
+         },
+ 
+         onDeleteTax(item_index, tax_index) {
+             if (tax_index == '999') {
+                 this.items[item_index].add_tax = false;
+ 
+                 return;
+             }
+ 
+             this.items[item_index].tax_ids.splice(tax_index, 1);
+             this.form.items[item_index].tax_ids.splice(tax_index, 1);
+ 
+             this.onCalculateTotal();
+         },
+ 
+         onBindingItemField(item_index, field_name) {
+             this.form.items[item_index][field_name] = this.items[item_index][field_name];
+         },
+ 
+         async onPayment() {
+             let document_id = document.getElementById('document_id').value;
+ 
+             let payment = {
+                 modal: false,
+                 url: url + '/modals/documents/' + document_id + '/transactions/create',
+                 title: '',
+                 html: '',
+                 buttons:{}
+             };
+ 
+             let payment_promise = Promise.resolve(window.axios.get(payment.url));
+ 
+             payment_promise.then(response => {
+                 payment.modal = true;
+                 payment.title = response.data.data.title;
+                 payment.html = response.data.html;
+                 payment.buttons = response.data.data.buttons;
+ 
+                 this.component = Vue.component('add-new-component', (resolve, reject) => {
+                     resolve({
+                         template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+ 
+                         mixins: [
+                             Global
+                         ],
+ 
+                         data: function () {
+                             return {
+                                 form:{},
+                                 payment: payment,
+                             }
+                         },
+ 
+                         methods: {
+                             onSubmit(event) {
+                                 this.form = event;
+                                 this.form.response = {};
+ 
+                                 this.loading = true;
+ 
+                                 let data = this.form.data();
+ 
+                                 FormData.prototype.appendRecursive = function(data, wrapper = null) {
+                                     for(var name in data) {
+                                         if (wrapper) {
+                                             if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
+                                                 this.appendRecursive(data[name], wrapper + '[' + name + ']');
+                                             } else {
+                                                 this.append(wrapper + '[' + name + ']', data[name]);
+                                             }
+                                         } else {
+                                             if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
+                                                 this.appendRecursive(data[name], name);
+                                             } else {
+                                                 this.append(name, data[name]);
+                                             }
+                                         }
+                                     }
+                                 };
+ 
+                                 let form_data = new FormData();
+                                 form_data.appendRecursive(data);
+ 
+                                 window.axios({
+                                     method: this.form.method,
+                                     url: this.form.action,
+                                     data: form_data,
+                                     headers: {
+                                         'X-CSRF-TOKEN': window.Laravel.csrfToken,
+                                         'X-Requested-With': 'XMLHttpRequest',
+                                         'Content-Type': 'multipart/form-data'
+                                     }
+                                 })
+                                 .then(response => {
+                                     if (response.data.success) {
+                                         if (response.data.redirect) {
+                                             this.form.loading = true;
+ 
+                                             window.location.href = response.data.redirect;
+                                         }
+                                     }
+ 
+                                     if (response.data.error) {
+                                         this.form.loading = false;
+ 
+                                         this.form.response = response.data;
+                                     }
+                                 })
+                                 .catch(error => {
+                                     this.form.loading = false;
+ 
+                                     this.form.onFail(error);
+ 
+                                     this.method_show_html = error.message;
+                                 });
+                             },
+ 
+                             onCancel() {
+                                 this.payment.modal = false;
+                                 this.payment.html = null;
+ 
+                                 let documentClasses = document.body.classList;
+ 
+                                 documentClasses.remove("modal-open");
+                             },
+                         }
+                     })
+                 });
+             })
+             .catch(error => {
+             })
+             .finally(function () {
+                 // always executed
+             });
+         },
+ 
+         // Change currency get money
+         onChangeCurrency(currency_code) {
+             if (this.edit.status && this.edit.currency <= 3) {
+                 this.edit.currency++;
+                 return;
+             }
+ 
+             if (!this.currencies.length) {
+                 let currency_promise = Promise.resolve(window.axios.get((url + '/settings/currencies')));
+ 
+                 currency_promise.then(response => {
+                     if ( response.data.success) {
+                         this.currencies = response.data.data;
+                     }
+                 })
+                 .catch(error => {
+                     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);
+         },
+ 
+         setDueMinDate(date) {
+             this.min_due_date = date;
+         },
 
-    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() {
-            let self = this;
-            this.$emit('change', this.rate);
-
-            if(self.currencyRate.length !== 0) {
-                window.axios({
-                method: 'PATCH',
-                url: url + "/settings/currencies",
-                data: {
-                    name: self.currencySymbol.name,
-                    code: self.currecyCode,
-                    rate: self.currencyRate
+         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);
+                    }
                 }
-                }).then(response => {
-                    this.$notify({
-                        message: 'SUCCESS',
-                        timeout: 200,
-                        icon: 'fas fa-bell',
-                        type
-                    });
-                })
-            }
-        }
-    },
-
-    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>
+              }, 250)
+         }
+     },
+ 
+     created() {
+         this.form.items = [];
+ 
+         if (typeof document_items !== 'undefined' && document_items) {
+             this.edit.status = true;
+             this.edit.currency = 1;
+ 
+             document_items.forEach(function(item) {
+                 // form set item
+                 this.form.items.push({
+                     item_id: item.item_id,
+                     name: item.name,
+                     description: item.description === null ? "" : item.description,
+                     quantity: item.quantity,
+                     price: (item.price).toFixed(2),
+                     tax_ids: item.tax_ids,
+                     discount: item.discount_rate,
+                     total: (item.total).toFixed(2)
+                 });
+ 
+                 if (item.tax_ids) {
+                     item.tax_ids.forEach(function (tax_id, index) {
+                         if (this.taxes.includes(tax_id)) {
+                             this.taxes[tax_id].push(item.id);
+                         } else {
+                             this.taxes.push(tax_id);
+ 
+                             this.taxes[tax_id] = [];
+ 
+                             this.taxes[tax_id].push(item.id);
+                         }
+                     }, this);
+                 }
+ 
+                 let item_taxes = [];
+ 
+                 item.taxes.forEach(function(item_tax) {
+                     item_taxes.push({
+                         id: item_tax.tax_id,
+                         name: item_tax.name,
+                         price: (item_tax.amount).toFixed(2),
+                     });
+                 });
+ 
+                 this.items.push({
+                     item_id: item.item_id,
+                     name: item.name,
+                     description: item.description === null ? "" : item.description,
+                     quantity: item.quantity,
+                     price: (item.price).toFixed(2),
+                     add_tax: (!item_taxes.length && document.getElementById('invoice-item-discount-rows') != null) ? false : true,
+                     tax_ids: item_taxes,
+                     add_discount: (item.discount_rate) ? true : false,
+                     discount: item.discount_rate,
+                     total: (item.total).toFixed(2),
+                     // @todo
+                     // invoice_item_checkbox_sample: [],
+                 });
+             }, this);
+ 
+             this.items.forEach(function(item) {
+                 item.tax_ids.forEach(function(tax) {
+                     let total_tax_index = this.totals.taxes.findIndex(total_tax => {
+                         if (total_tax.id === tax.id) {
+                           return true;
+                         }
+                     }, this);
+ 
+                     if (total_tax_index === -1) {
+                         this.totals.taxes.push({
+                             id: tax.id,
+                             name: tax.name,
+                             total: tax.price,
+                         });
+                     } else {
+                         this.totals.taxes[total_tax_index].total = parseFloat(this.totals.taxes[total_tax_index].total) + parseFloat(tax.price);
+                     }
+                 }, this);
+             }, this);
+         }
+ 
+         this.page_loaded = true;
+ 
+         if (document_currencies) {
+             this.currencies = document_currencies;
+ 
+             this.currencies.forEach(function (currency, index) {
+                 if (document_default_currency == currency.code) {
+                     this.currency = currency;
+ 
+                     this.form.currency_code = currency.code;
+                 }
+             }, this);
+         }
+     }
+ });
+ 
\ No newline at end of file
diff --git a/resources/views/components/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index 925931617..2508a11ad 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -1,89 +1,153 @@
-<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 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="form.currency_code"
+                                    :currency-rate="form.currency_rate"
+                                    :currency-symbol="currency_symbol"
+                                    @change="form.currency_rate = $event"
+                                ></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>
     </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>
+</div>

From 96e448d3ba5f09f262df866a9a18f36e618e840d Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Tue, 29 Jun 2021 09:33:07 +0300
Subject: [PATCH 4/4] Javascirpt function edited

---
 .../AkauntingCurrencyConversion.vue           | 759 ++----------------
 resources/assets/js/views/common/documents.js |   1 +
 2 files changed, 89 insertions(+), 671 deletions(-)

diff --git a/resources/assets/js/components/AkauntingCurrencyConversion.vue b/resources/assets/js/components/AkauntingCurrencyConversion.vue
index 9eb3b0503..3ee000822 100644
--- a/resources/assets/js/components/AkauntingCurrencyConversion.vue
+++ b/resources/assets/js/components/AkauntingCurrencyConversion.vue
@@ -1,674 +1,91 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
+<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" disabled size="5" masked class="disabled-money text-right mr-2 js-conversion-input"></money>
+        <span class="mr-2">{{ currecyCode }} {{ texts[2] }}</span>
+        <input name="currency_rate" v-model="rate" @input="onChange" class="form-control text-right mwpx-100 h-auto js-conversion-input" />
+    </div>
+</template>
 
- require('./../../bootstrap');
+<script>
+import {Money} from 'v-money';
 
- import Vue from 'vue';
- 
- import DashboardPlugin from './../../plugins/dashboard-plugin';
- 
- import Global from './../../mixins/global';
- 
- import Form from './../../plugins/form';
- import Error from './../../plugins/error';
- import BulkAction from './../../plugins/bulk-action';
- 
- // plugin setup
- Vue.use(DashboardPlugin);
- 
- const app = new Vue({
-     el: '#main-body',
- 
-     mixins: [
-         Global
-     ],
- 
-     data: function () {
-         return {
-             form: new Form('document'),
-             bulk_action: new BulkAction('documents'),
-             totals: {
-                 sub: 0,
-                 item_discount: '',
-                 discount: '',
-                 discount_text: false,
-                 taxes: [],
-                 total: 0
-             },
-             transaction: [],
-             edit: {
-                 status: false,
-                 currency: false,
-                 items: 0,
-             },
-             colspan: 6,
-             discount: false,
-             tax: false,
-             discounts: [],
-             tax_id: [],
- 
-             items: [],
-             taxes: [],
-             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":","
-             }
-         }
-     },
- 
-     mounted() {
-         if ((document.getElementById('items') != null) && (document.getElementById('items').rows)) {
-             this.colspan = document.getElementById("items").rows[0].cells.length - 1;
-         }
-     },
- 
-     methods: {
-         onCalculateTotal() {
-             let global_discount = parseFloat(this.form.discount);
-             let discount_total = 0;
-             let line_item_discount_total = 0;
-             let taxes = document_taxes;
-             let sub_total = 0;
-             let totals_taxes = [];
-             let grand_total = 0;
-             let inclusive_tax_total = 0;
- 
-             // items calculate
-             this.items.forEach(function(item, index) {
-                 let item_discount = 0;
- 
-                 item.total = item.price * item.quantity;
-                 item.grand_total = item.price * item.quantity;
- 
-                 // item discount calculate.
-                 let line_discount_amount = 0;
- 
-                 if (item.discount) {
-                     line_discount_amount = item.total * (item.discount / 100);
-                     item.discount_amount = line_discount_amount
- 
-                     item_discounted_total = item.total -= line_discount_amount;
-                     item_discount = item.discount;
-                 }
- 
-                 let item_discounted_total = item.total;
- 
-                 if (global_discount) {
-                     item_discounted_total = item.total - (item.total * (global_discount / 100));
- 
-                     item_discount = global_discount;
-                 }
- 
-                 // item tax calculate.
-                 if (item.tax_ids) {
-                     let inclusives = [];
-                     let compounds = [];
- 
-                     item.tax_ids.forEach(function(item_tax, item_tax_index) {
-                         for (var index_taxes = 0; index_taxes < taxes.length; index_taxes++) {
-                             let tax = taxes[index_taxes];
- 
-                             if (item_tax.id != tax.id) {
-                                 continue;
-                             }
- 
-                             switch (tax.type) {
-                                 case 'inclusive':
-                                     inclusives.push({
-                                         tax_index: item_tax_index,
-                                         tax_id: tax.id,
-                                         tax_name: tax.title,
-                                         tax_rate: tax.rate
-                                     });
-                                     break;
-                                 case 'compound':
-                                     compounds.push({
-                                         tax_index: item_tax_index,
-                                         tax_id: tax.id,
-                                         tax_name: tax.title,
-                                         tax_rate: tax.rate
-                                     });
-                                     break;
-                                 case 'fixed':
-                                     item_tax.price = tax.rate * item.quantity;
- 
-                                     totals_taxes = this.calculateTotalsTax(totals_taxes, tax.id, tax.title, item_tax.price);
- 
-                                     item.grand_total += item_tax.price;
-                                     break;
-                                 case 'withholding':
-                                     item_tax.price = 0 - item.total * (tax.rate / 100);
- 
-                                     totals_taxes = this.calculateTotalsTax(totals_taxes, tax.id, tax.title, item_tax.price);
- 
-                                     item.grand_total += item_tax.price;
-                                     break;
-                                 default:
-                                     item_tax.price = item.total * (tax.rate / 100);
- 
-                                     totals_taxes = this.calculateTotalsTax(totals_taxes, tax.id, tax.title, item_tax.price);
- 
-                                     item.grand_total += item_tax.price;
-                                     break;
-                             }
-                         }
-                     }, this);
- 
-                     if (inclusives.length) {
-                         let inclusive_total = 0;
- 
-                         inclusives.forEach(function(inclusive) {
-                             inclusive_total += inclusive.tax_rate;
- 
-                             // tax price
-                             item.tax_ids[inclusive.tax_index].price = item.grand_total - (item.grand_total / (1 + inclusive.tax_rate / 100));
- 
-                             totals_taxes = this.calculateTotalsTax(totals_taxes, inclusive.tax_id, inclusive.tax_name, item.tax_ids[inclusive.tax_index].price);
-                         }, this);
- 
-                         let item_base_rate = parseFloat(item.grand_total / (1 + inclusive_total / 100));
-                         //item.grand_total = item.grand_total + item_base_rate;
- 
-                         item.total = item_base_rate;
- 
-                         inclusive_tax_total += parseFloat(item.grand_total - item.total);
-                     }
- 
-                     if (compounds.length) {
-                         let price = 0;
- 
-                         compounds.forEach(function(compound) {
-                             price = (item.grand_total / 100) * compound.tax_rate;
- 
-                             item.tax_ids[compound.tax_index].price = price;
- 
-                             totals_taxes = this.calculateTotalsTax(totals_taxes, compound.tax_id, compound.tax_name, price);
-                         }, this);
- 
-                         item.grand_total += price;
-                     }
-                 }
- 
-                 // set item total
-                 if (item.discount) {
-                     item.grand_total = item_discounted_total;
-                 }
- 
-                 // calculate sub, tax, discount all items.
-                 line_item_discount_total += line_discount_amount;
-                 sub_total += item.total;
-                 grand_total += item.grand_total;
- 
-                 this.form.items[index].name = item.name;
-                 this.form.items[index].description = item.description;
-                 this.form.items[index].quantity = item.quantity;
-                 this.form.items[index].price = item.price;
-                 this.form.items[index].discount = item.discount;
-                 this.form.items[index].total = item.total;
-             }, this);
- 
-             // Apply discount to total
-             if (global_discount) {
-                 discount_total = parseFloat(sub_total + inclusive_tax_total) * (global_discount / 100);
- 
-                 this.totals.discount = discount_total;
- 
-                 grand_total -= discount_total;
-             }
- 
-             this.totals.item_discount = line_item_discount_total;
-             this.totals.sub = sub_total;
-             this.totals.taxes = totals_taxes;
-             this.totals.total = grand_total;
- 
-             this.form.items.forEach(function(form_item, form_index) {
-                 let item = this.items[form_index];
-                 
-                 for (const [key, value] of Object.entries(item)) {
-                     if (key == 'add_tax' || key == 'tax_ids' || key == 'add_discount') {
-                         continue
-                     }
- 
-                     if (form_item[key] === undefined) {
-                         form_item[key] = value
-                     }
-                 }
-             }, this);
-         },
- 
-         calculateTotalsTax(totals_taxes, id, name, price) {
-             let total_tax_index = totals_taxes.findIndex(total_tax => {
-                 if (total_tax.id === id) {
-                   return true;
-                 }
-             }, this);
- 
-             if (total_tax_index === -1) {
-                 totals_taxes.push({
-                     id: id,
-                     name: name,
-                     total: price,
-                 });
-             } else {
-                 totals_taxes[total_tax_index].total = parseFloat(totals_taxes[total_tax_index].total) + parseFloat(price);
-             }
- 
-             return totals_taxes;
-         },
- 
-         // Select Item added form
-         onSelectedItem(item) {
-             let total = 1 * item.price;
-             let item_taxes = [];
- 
-             if (item.tax_ids) {
-                 item.tax_ids.forEach(function (tax_id, index) {
-                     if (this.taxes.includes(tax_id)) {
-                         this.taxes[tax_id].push(item.id);
-                     } else {
-                         this.taxes.push(tax_id);
-                         this.taxes[tax_id] = [];
-                         this.taxes[tax_id].push(item.id);
-                     }
- 
-                     item_taxes.push({
-                         id: tax_id,
-                         price: 10,
-                     });
-                 }, this);
-             }
- 
-             this.form.items.push({
-                 item_id: item.id,
-                 name: item.name,
-                 description: item.description,
-                 quantity: 1,
-                 price: item.price,
-                 tax_ids: item.tax_ids,
-                 discount: 0,
-                 total: total,
-             });
- 
-             this.items.push({
-                 item_id: item.id,
-                 name: item.name,
-                 description: item.description,
-                 quantity: 1,
-                 price: item.price,
-                 add_tax: (document.getElementById('invoice-item-discount-rows') != null) ? false : true,
-                 tax_ids: item_taxes,
-                 add_discount: false,
-                 discount: 0,
-                 discount_amount: 0,
-                 total: total,
-                 // @todo
-                 // invoice_item_checkbox_sample: [],
-             });
- 
-             setTimeout(function() {
-                 this.onCalculateTotal();
-             }.bind(this), 800);
-         },
- 
-         onSelectedTax(item_index) {
-             if (!this.tax_id) {
-                 return;
-             }
- 
-             let selected_tax;
- 
-             document_taxes.forEach(function(tax) {
-                 if (tax.id == this.tax_id) {
-                     selected_tax = tax;
-                 }
-             }, this);
- 
-             this.items[item_index].tax_ids.push({
-                 id: selected_tax.id,
-                 name: selected_tax.title,
-                 price: 0
-             });
- 
-             this.form.items[item_index].tax_ids.push(this.tax_id);
- 
-             if (this.taxes.includes(this.tax_id)) {
-                 this.taxes[this.tax_id].push(this.items[item_index].item_id);
-             } else {
-                 this.taxes[this.tax_id] = [];
-                 this.taxes[this.tax_id].push(this.items[item_index].item_id);
-             }
- 
-             this.tax_id = '';
- 
-             this.onCalculateTotal();
-         },
- 
-         // remove document item row => row_id = index
-         onDeleteItem(index) {
-             this.items.splice(index, 1);
-             this.form.items.splice(index, 1);
- 
-             this.onCalculateTotal();
-         },
- 
-         onAddLineDiscount(item_index) {
-             this.items[item_index].add_discount = true;
-         },
- 
-         onAddTotalDiscount() {
-             let discount = document.getElementById('pre-discount').value;
- 
-             if (discount < 0) {
-                 discount = 0;
-             } else if (discount > 100) {
-                 discount = 100;
-             }
- 
-             document.getElementById('pre-discount').value = discount;
- 
-             this.form.discount = discount;
-             this.discount = false;
- 
-             this.onCalculateTotal();
-         },
- 
-         onDeleteDiscount(item_index) {
-             this.items[item_index].add_discount = false;
-         },
- 
-         onAddTax(item_index) {
-             this.items[item_index].add_tax = true;
-         },
- 
-         onDeleteTax(item_index, tax_index) {
-             if (tax_index == '999') {
-                 this.items[item_index].add_tax = false;
- 
-                 return;
-             }
- 
-             this.items[item_index].tax_ids.splice(tax_index, 1);
-             this.form.items[item_index].tax_ids.splice(tax_index, 1);
- 
-             this.onCalculateTotal();
-         },
- 
-         onBindingItemField(item_index, field_name) {
-             this.form.items[item_index][field_name] = this.items[item_index][field_name];
-         },
- 
-         async onPayment() {
-             let document_id = document.getElementById('document_id').value;
- 
-             let payment = {
-                 modal: false,
-                 url: url + '/modals/documents/' + document_id + '/transactions/create',
-                 title: '',
-                 html: '',
-                 buttons:{}
-             };
- 
-             let payment_promise = Promise.resolve(window.axios.get(payment.url));
- 
-             payment_promise.then(response => {
-                 payment.modal = true;
-                 payment.title = response.data.data.title;
-                 payment.html = response.data.html;
-                 payment.buttons = response.data.data.buttons;
- 
-                 this.component = Vue.component('add-new-component', (resolve, reject) => {
-                     resolve({
-                         template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
- 
-                         mixins: [
-                             Global
-                         ],
- 
-                         data: function () {
-                             return {
-                                 form:{},
-                                 payment: payment,
-                             }
-                         },
- 
-                         methods: {
-                             onSubmit(event) {
-                                 this.form = event;
-                                 this.form.response = {};
- 
-                                 this.loading = true;
- 
-                                 let data = this.form.data();
- 
-                                 FormData.prototype.appendRecursive = function(data, wrapper = null) {
-                                     for(var name in data) {
-                                         if (wrapper) {
-                                             if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
-                                                 this.appendRecursive(data[name], wrapper + '[' + name + ']');
-                                             } else {
-                                                 this.append(wrapper + '[' + name + ']', data[name]);
-                                             }
-                                         } else {
-                                             if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
-                                                 this.appendRecursive(data[name], name);
-                                             } else {
-                                                 this.append(name, data[name]);
-                                             }
-                                         }
-                                     }
-                                 };
- 
-                                 let form_data = new FormData();
-                                 form_data.appendRecursive(data);
- 
-                                 window.axios({
-                                     method: this.form.method,
-                                     url: this.form.action,
-                                     data: form_data,
-                                     headers: {
-                                         'X-CSRF-TOKEN': window.Laravel.csrfToken,
-                                         'X-Requested-With': 'XMLHttpRequest',
-                                         'Content-Type': 'multipart/form-data'
-                                     }
-                                 })
-                                 .then(response => {
-                                     if (response.data.success) {
-                                         if (response.data.redirect) {
-                                             this.form.loading = true;
- 
-                                             window.location.href = response.data.redirect;
-                                         }
-                                     }
- 
-                                     if (response.data.error) {
-                                         this.form.loading = false;
- 
-                                         this.form.response = response.data;
-                                     }
-                                 })
-                                 .catch(error => {
-                                     this.form.loading = false;
- 
-                                     this.form.onFail(error);
- 
-                                     this.method_show_html = error.message;
-                                 });
-                             },
- 
-                             onCancel() {
-                                 this.payment.modal = false;
-                                 this.payment.html = null;
- 
-                                 let documentClasses = document.body.classList;
- 
-                                 documentClasses.remove("modal-open");
-                             },
-                         }
-                     })
-                 });
-             })
-             .catch(error => {
-             })
-             .finally(function () {
-                 // always executed
-             });
-         },
- 
-         // Change currency get money
-         onChangeCurrency(currency_code) {
-             if (this.edit.status && this.edit.currency <= 3) {
-                 this.edit.currency++;
-                 return;
-             }
- 
-             if (!this.currencies.length) {
-                 let currency_promise = Promise.resolve(window.axios.get((url + '/settings/currencies')));
- 
-                 currency_promise.then(response => {
-                     if ( response.data.success) {
-                         this.currencies = response.data.data;
-                     }
-                 })
-                 .catch(error => {
-                     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);
-         },
- 
-         setDueMinDate(date) {
-             this.min_due_date = date;
-         },
+export default {
+    name: 'akaunting-currency-conversion',
+    components: {
+        Money
+    },
 
-         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() {
-         this.form.items = [];
- 
-         if (typeof document_items !== 'undefined' && document_items) {
-             this.edit.status = true;
-             this.edit.currency = 1;
- 
-             document_items.forEach(function(item) {
-                 // form set item
-                 this.form.items.push({
-                     item_id: item.item_id,
-                     name: item.name,
-                     description: item.description === null ? "" : item.description,
-                     quantity: item.quantity,
-                     price: (item.price).toFixed(2),
-                     tax_ids: item.tax_ids,
-                     discount: item.discount_rate,
-                     total: (item.total).toFixed(2)
-                 });
- 
-                 if (item.tax_ids) {
-                     item.tax_ids.forEach(function (tax_id, index) {
-                         if (this.taxes.includes(tax_id)) {
-                             this.taxes[tax_id].push(item.id);
-                         } else {
-                             this.taxes.push(tax_id);
- 
-                             this.taxes[tax_id] = [];
- 
-                             this.taxes[tax_id].push(item.id);
-                         }
-                     }, this);
-                 }
- 
-                 let item_taxes = [];
- 
-                 item.taxes.forEach(function(item_tax) {
-                     item_taxes.push({
-                         id: item_tax.tax_id,
-                         name: item_tax.name,
-                         price: (item_tax.amount).toFixed(2),
-                     });
-                 });
- 
-                 this.items.push({
-                     item_id: item.item_id,
-                     name: item.name,
-                     description: item.description === null ? "" : item.description,
-                     quantity: item.quantity,
-                     price: (item.price).toFixed(2),
-                     add_tax: (!item_taxes.length && document.getElementById('invoice-item-discount-rows') != null) ? false : true,
-                     tax_ids: item_taxes,
-                     add_discount: (item.discount_rate) ? true : false,
-                     discount: item.discount_rate,
-                     total: (item.total).toFixed(2),
-                     // @todo
-                     // invoice_item_checkbox_sample: [],
-                 });
-             }, this);
- 
-             this.items.forEach(function(item) {
-                 item.tax_ids.forEach(function(tax) {
-                     let total_tax_index = this.totals.taxes.findIndex(total_tax => {
-                         if (total_tax.id === tax.id) {
-                           return true;
-                         }
-                     }, this);
- 
-                     if (total_tax_index === -1) {
-                         this.totals.taxes.push({
-                             id: tax.id,
-                             name: tax.name,
-                             total: tax.price,
-                         });
-                     } else {
-                         this.totals.taxes[total_tax_index].total = parseFloat(this.totals.taxes[total_tax_index].total) + parseFloat(tax.price);
-                     }
-                 }, this);
-             }, this);
-         }
- 
-         this.page_loaded = true;
- 
-         if (document_currencies) {
-             this.currencies = document_currencies;
- 
-             this.currencies.forEach(function (currency, index) {
-                 if (document_default_currency == currency.code) {
-                     this.currency = currency;
- 
-                     this.form.currency_code = currency.code;
-                 }
-             }, this);
-         }
-     }
- });
- 
\ No newline at end of file
+    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));
+        this.texts.push(this.texts[1].split(" ")[2])        
+    },
+
+    methods: {
+        onChange() {
+            this.$emit('change', this.rate);
+        }
+    },
+
+    watch: {
+        currencyConversionText: function (text) {
+            this.conversion = text.replace(':price', this.price).replace(':currency_code', this.currecyCode);
+        },
+
+        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.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', '');
+        },
+    },
+};
+</script>
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 9eb3b0503..0cebfa3ff 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -246,6 +246,7 @@
                      }
                  }
              }, this);
+             this.currencyConversion();
          },
  
          calculateTotalsTax(totals_taxes, id, name, price) {