From a832142dcd0ad992c5434967704170b459133e13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Burak=20=C3=87ak=C4=B1rel?= <burakcakirel@gmail.com>
Date: Sun, 3 Jan 2021 23:46:19 +0300
Subject: [PATCH] Refactor total and line discount calculation according to new
 design

---
 resources/assets/js/views/common/documents.js | 47 +++++++----
 .../components/documents/form/items.blade.php | 15 ----
 .../documents/form/line-item.blade.php        | 81 +++++--------------
 .../documents/form/totals.blade.php           |  6 +-
 4 files changed, 55 insertions(+), 94 deletions(-)

diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 9fc970c6d..e791afd17 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -65,14 +65,14 @@ const app = new Vue({
 
     methods: {
         onCalculateTotal() {
-            let global_discount = this.discount;
+            let global_discount = 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;
- 
+
             // items calculate
             this.items.forEach(function(item, index) {
                 let item_discount = 0;
@@ -188,16 +188,16 @@ const app = new Vue({
                 }
 
 
-                    // calculate sub, tax, discount all items.
+                // 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;
 
-                // set item total
-                if (item.discount) {
-                    item.total = item_discounted_total;
-                }
-
                 this.form.items[index].name = item.name;
                 this.form.items[index].description = item.description;
                 this.form.items[index].quantity = item.quantity;
@@ -207,15 +207,13 @@ const app = new Vue({
             }, this);
 
             // Apply discount to total
-            /*
-            if (discount_in_totals) {
-                discount_total = sub_total * (discount_in_totals / 100);
+            if (global_discount) {
+                discount_total = sub_total * (global_discount / 100);
 
                 this.totals.discount = discount_total;
 
-                sub_total = sub_total - (sub_total * (discount_in_totals / 100));
+                grand_total = sub_total - (sub_total * (global_discount / 100));
             }
-            */
 
             this.totals.item_discount = line_item_discount_total;
             this.totals.sub = sub_total;
@@ -333,10 +331,27 @@ const app = new Vue({
             this.onCalculateTotal();
         },
 
-        onAddDiscount(item_index) {
+        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;
         },
@@ -503,9 +518,9 @@ const app = new Vue({
                             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);
diff --git a/resources/views/components/documents/form/items.blade.php b/resources/views/components/documents/form/items.blade.php
index 5fb9ebd9e..7b6b9cbb1 100644
--- a/resources/views/components/documents/form/items.blade.php
+++ b/resources/views/components/documents/form/items.blade.php
@@ -13,11 +13,6 @@
                     <col style="width: 30%;">
                     <col style="width: 100px;">
                     <col style="width: 100px;">
-                    @if (!$hideDiscount)
-                        @if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
-                            <col style="width: 100px;">
-                        @endif
-                    @endif
                     <col style="width: 250px;">
                     <col style="width: 40px;">
                 </colgroup>
@@ -57,16 +52,6 @@
                             @endif
                         @stack('price_th_end')
 
-                        @if (!$hideDiscount)
-                            @if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
-                                @stack('discount_th_start')
-                                    <th id="line-discount" class="text-right border-top-0 border-right-0 border-bottom-0">
-                                        {{ trans('invoices.discount') }}
-                                    </th>
-                                @stack('discount_th_end')
-                            @endif
-                        @endif
-
                         @stack('total_th_start')
                             @if (!$hideAmount)
                                 <th class="text-right border-top-0 border-bottom-0 item-total">
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index de88f348e..7eeb02e79 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -2,7 +2,7 @@
     :index="index">
     @stack('name_td_start')
         <td class="border-right-0 border-bottom-0 p-0"
-            :class="[{'has-error': form.errors.has('items.' + index + '.name') }]" 
+            :class="[{'has-error': form.errors.has('items.' + index + '.name') }]"
             colspan="7">
             <table class="w-100">
                 <colgroup>
@@ -11,11 +11,6 @@
                     <col style="width: 30%;">
                     <col style="width: 100px;">
                     <col style="width: 100px;">
-                    @if (!$hideDiscount)
-                        @if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
-                            <col style="width: 100px;">
-                        @endif
-                    @endif
                     <col style="width: 250px;">
                     <col style="width: 40px;">
                 </colgroup>
@@ -46,7 +41,7 @@
                                                     v-model="row.name"
                                                     @input="onBindingItemField(index, 'name')"
                                                     @change="form.errors.clear('items.' + index + '.name')">
-                                
+
                                                 <div class="invalid-feedback d-block"
                                                     v-if="form.errors.has('items.' + index + '.name')"
                                                     v-html="form.errors.get('items.' + index + '.name')">
@@ -58,9 +53,9 @@
                                 @stack('name_td_end')
 
                                 @stack('description_td_start')
-                                    @if (!$hideDescription) 
+                                    @if (!$hideDescription)
                                         <td class="pb-3 border-bottom-0" colspan="1">
-                                            <textarea 
+                                            <textarea
                                                 class="form-control"
                                                 placeholder="Enter item description"
                                                 style="height: 46px; overflow: hidden;"
@@ -90,7 +85,7 @@
                                         v-model="row.quantity"
                                         @input="onCalculateTotal"
                                         @change="form.errors.clear('items.' + index + '.quantity')">
-                    
+
                                     <div class="invalid-feedback d-block"
                                         v-if="form.errors.has('items.' + index + '.quantity')"
                                         v-html="form.errors.get('items.' + index + '.quantity')">
@@ -113,41 +108,7 @@
                             @endif
                         @stack('price_td_end')
 
-                        @if (!$hideDiscount)
-                            @if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
-                                @stack('discount_td_start')
-                                    <td colspan="1" class="pb-3 border-bottom-0"
-                                        :class="[{'has-error': form.errors.has('items.' + index + '.discount') }]">
-                                        @stack('discount_input_start')
-                                        <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>
-                            
-                                            <input type="number"
-                                                max="100"
-                                                min="0"
-                                                class="form-control text-center p-0"
-                                                :name="'items.' + index + '.discount'"
-                                                autocomplete="off"
-                                                required="required"
-                                                data-item="discount"
-                                                v-model="row.discount"
-                                                @input="onCalculateTotal"
-                                                @change="form.errors.clear('items.' + index + '.discount')">
-                            
-                                            <div class="invalid-feedback d-block"
-                                                v-if="form.errors.has('items.' + index + '.discount')"
-                                                v-html="form.errors.get('items.' + index + '.discount')">
-                                            </div>
-                                        </div>
-                                        @stack('discount_input_end')
-                                    </td>
-                                @stack('discount_td_end')
-                            @endif
-                        @endif
+
 
                         @stack('total_td_start')
                             @if (!$hideAmount)
@@ -175,7 +136,7 @@
                             @stack('item_custom_fields')
                         </td>
 
-                        <td class="border-top-0 p-0" colspan="{{ (!$hideDiscount && in_array(setting('localisation.discount_location', 'total'), ['item', 'both'])) ? '5' : '4' }}">
+                        <td class="border-top-0 p-0" colspan="{{ (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both'])) ? '5' : '4' }}">
                             <table class="w-100">
                                 <colgroup>
                                     <col style="width: 100px;">
@@ -185,11 +146,11 @@
                                 </colgroup>
                                 <tbody>
 
-                                    @if (!$hideDiscount && in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
+                                    @if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
                                     <tr v-if="!row.add_tax || !row.add_discount">
                                         <td colspan="1" style="border: 0; max-width: 100px; border: 0px; padding-left: 10px;">
                                             <div style="max-width: 100px;">
-                                                <button type="button" class="btn btn-link btn-sm p-0" @click="onAddDiscount(index)" v-if="!row.add_discount">Add Discount</button>
+                                                <button type="button" class="btn btn-link btn-sm p-0" @click="onAddLineDiscount(index)" v-if="!row.add_discount">Add Discount</button>
                                             </div>
                                         </td>
                                         <td colspan="1" style="border: 0; max-width: 100px; border: 0px; padding-right: 10px; text-align: right;">
@@ -210,7 +171,7 @@
                                             @stack('discount_input_start')
                                             <div class="input-group input-group-merge">
                                                 <div class="input-group-prepend">
-                                                    <span class="input-group-text" id="input-discount-rate">
+                                                    <span class="input-group-text" id="input-discount">
                                                         <i class="fa fa-percent"></i>
                                                     </span>
                                                 </div>
@@ -218,17 +179,17 @@
                                                     max="100"
                                                     min="0"
                                                     class="form-control text-center"
-                                                    :name="'items.' + index + '.discount-rate'"
+                                                    :name="'items.' + index + '.discount'"
                                                     autocomplete="off"
                                                     required="required"
-                                                    data-item="discount_rate"
-                                                    v-model="row.discount_rate"
+                                                    data-item="discount"
+                                                    v-model="row.discount"
                                                     @input="onCalculateTotal"
-                                                    @change="form.errors.clear('items.' + index + '.discount_rate')">
-                            
+                                                    @change="form.errors.clear('items.' + index + '.discount')">
+
                                                 <div class="invalid-feedback d-block"
-                                                    v-if="form.errors.has('items.' + index + '.discount_rate')"
-                                                    v-html="form.errors.get('items.' + index + '.discount_rate')">
+                                                    v-if="form.errors.has('items.' + index + '.discount')"
+                                                    v-html="form.errors.get('items.' + index + '.discount')">
                                                 </div>
                                             </div>
                                             @stack('discount_input_end')
@@ -236,7 +197,7 @@
                                         </td>
                                         <td colspan="1" style="border: 0;" class="text-right total-column border-bottom-0 long-texts">
                                             <div>
-                                                {{ Form::moneyGroup('discount', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.discount', 'data-item' => 'discount', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
+                                                {{ Form::moneyGroup('discount', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'value' => 'row.discount', 'data-item' => 'discount', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
                                             </div>
                                         </td>
                                         <td colspan="1" style="border: 0;"  class="pb-0 align-middle">
@@ -342,10 +303,10 @@
                                             </div>
                                         </td>
                                         <td colspan="1" style="border: 0;">
-                                            @if (!$hideDiscount && in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
-                                            <button type="button" @click="onDeleteTax(index, row_tax_index)" class="btn btn-link btn-delete p-0">
+                                            @if (!$hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
                                                 <i class="far fa-trash-alt"></i>
-                                            </button>
+                                                <button type="button" @click="onDeleteDiscount(index)" class="btn btn-link btn-delete p-0">
+                                                </button>
                                             @endif
                                         </td>
                                     </tr>
diff --git a/resources/views/components/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index f471fd644..58156ee12 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -77,7 +77,7 @@
                                                     <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' => 'onAddDiscount', 'class' => 'btn btn-success']) !!}
+                                                    {!! Form::button(trans('general.save'), ['type' => 'button', 'id' => 'save-discount', '@click' => 'onAddTotalDiscount', 'class' => 'btn btn-success']) !!}
                                                 </div>
                                             </div>
                                         </div>
@@ -133,7 +133,7 @@
                         <tr id="tr-currency-conversion" class="d-none" :class="[{'d-table-row': (('{{ setting('default.currency') }}' != 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" colspan="2">
-                                <akaunting-currency-conversion 
+                                <akaunting-currency-conversion
                                     currency-conversion-text="{{ trans('currencies.conversion') }}"
                                     :price="(totals.total / form.currency_rate).toFixed(2)"
                                     currecy-code="{{ setting('default.currency') }}"
@@ -147,4 +147,4 @@
             </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>