From 97bd0f94881f538b08d3a44b5e56127cc6901557 Mon Sep 17 00:00:00 2001
From: Fairuz <fairuz.tester@gmail.com>
Date: Wed, 12 May 2021 16:53:11 +0800
Subject: [PATCH] EXCHANGE-149 - Frontend bug fixes, clean-up

---
 .../elements/BookingMergeModalComponent.vue   | 43 +++++-----
 .../elements/BookingMergeableComponent.vue    | 34 +++++---
 .../sections/BookingMergeSectionComponent.vue | 82 ++++++++++---------
 3 files changed, 90 insertions(+), 69 deletions(-)

diff --git a/resources/assets/vue/components/bookings/elements/BookingMergeModalComponent.vue b/resources/assets/vue/components/bookings/elements/BookingMergeModalComponent.vue
index cdbc6ea3..05ff0701 100644
--- a/resources/assets/vue/components/bookings/elements/BookingMergeModalComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingMergeModalComponent.vue
@@ -1,26 +1,21 @@
 <template>
     <div class="row m-b-10 parentContainer">
         <div class="col">
-            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
-            <div class="row" v-show="!isLoading">
-                <div class="col">
-                    <div class="row align-items-center">
-                        <div class="col p-t-5 p-b-5">
-                            <div class="col text-center">
-                                <div class="row m-b-20">
-                                    <div class="col">
-                                        <h5 class="all-caps">Merge Transfers</h5>
-                                        <div class="fs-11">Are you sure you want to merge? This action is undoable.</div>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="col p-r-5">
-                                        <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
-                                    </div>
-                                    <div class="col p-l-5">
-                                        <div data-dismiss="modal" class="btn btn-sm btn-success btn-block b-rad-none" @click="mergeTransfer()">Merge</div>
-                                    </div>
-                                </div>
+            <div class="row align-items-center">
+                <div class="col p-t-5 p-b-5">
+                    <div class="col text-center">
+                        <div class="row m-b-20">
+                            <div class="col">
+                                <h5 class="all-caps">Merge Transfers</h5>
+                                <div class="fs-11">Are you sure you want to merge? This action is undoable.</div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col p-r-5">
+                                <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
+                            </div>
+                            <div class="col p-l-5">
+                                <div data-dismiss="modal" class="btn btn-sm btn-success btn-block b-rad-none" @click="mergeTransfer()">Merge</div>
                             </div>
                         </div>
                     </div>
@@ -47,10 +42,13 @@
         data(){
             return {
                 parameters:null,
+                isLoading: true,
             }
         },
         methods: {
             mergeTransfer(){
+                this.$root.$emit('setLoading', true);
+
                 let bookings=[];
                 this.data.forEach(function(booking) {
                     bookings.push(booking.id);
@@ -67,7 +65,10 @@
                 setTimeout(function(){
                     window.location.href = this.route('dashboard');
                 }, 2000);
-            }
+            },
+            errorHandler() {
+                this.$root.$emit('setLoading', false);
+            },
         },
         mixins: [componentHandler, staticFormHandler]
     }
diff --git a/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue b/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue
index 9ab6fb3f..6b267fb2 100644
--- a/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingMergeableComponent.vue
@@ -1,32 +1,35 @@
 <template>
-    <div class="row align-items-center m-b-15 parentContainer">
+    <div class="row align-items-center m-b-10 parentContainer">
         <div class="row w-100 m-0 p-0">
             <div class="col-auto hide" @click="showPurchaseDetails(item.id)">
                 <div class="hint-text">
                     <i class="fa fa-plus fs-8 muted hint-text"></i>
                 </div>
             </div>
-            <div class="col-auto">
+            <div class="col-auto pt-1 pb-0 pr-1">
                 <div class="font-heading fs-12" style="line-height: 0px;">
                     <input type="checkbox" v-bind:data-id="this.item.id" @change="selectedBookings">
                 </div>
             </div>
-            <div class="col-2">
-                <div class="font-heading all-caps fs-10 muted">{{this.item.created_at}}</div>
+            <div class="col-auto" :style="minWidth">
+                <div class="font-heading all-caps fs-11">{{this.item.created_at}}</div>
             </div>
-            <div class="col-2">
+            <div class="col-auto" :style="minWidth">
                 <div class="font-heading all-caps fs-11 bold">{{this.item.marking}}</div>
             </div>
-            <div class="col-2">
-                <div class="font-heading fs-12 bold">
-                    <span class="flag-icon fs-12" :class="'flag-icon-'+item.convertible_currency.country.short_code.toLowerCase()"></span> {{this.item.convertible_currency.short_code}}
+            <div class="col-auto" :style="minWidth">
+                <div class="font-heading fs-11 bold">
+                    <span class="flag-icon fs-11" :class="'flag-icon-'+item.convertible_currency.country.short_code.toLowerCase()"></span> {{this.item.convertible_currency.short_code}}
                 </div>
             </div>
-            <div class="col-2">
+            <div class="col-auto" :style="minWidth">
                 <div class="font-heading fs-11">{{this.item.service.name}}</div>
             </div>
-            <div class="col-2">
-                <div class="font-heading fs-11 text-success bold">{{this.item.amount}} {{this.item.fixed_currency.short_code}}</div>
+            <div class="col-auto" :style="minWidth150">
+                <div class="font-heading fs-11 text-success bold">{{formatAmount(this.item.purchase_order.amount)}} {{this.item.purchase_order.original_currency.short_code}}</div>
+            </div>
+            <div class="col-auto" :style="minWidth150">
+                <div class="font-heading fs-11 text-success bold">{{formatAmount(this.item.amount)}} {{this.item.fixed_currency.short_code}}</div>
             </div>
         </div>
 
@@ -53,6 +56,12 @@
     export default {
         data(){
             return {
+                minWidth:{
+                    minWidth:'100px',
+                },
+                minWidth150:{
+                    minWidth:'150px',
+                },
                 selected_id:0,
             }
         },
@@ -64,6 +73,9 @@
                 console.log(this.selected_id);
                 this.selected_id = id;
             },
+            formatAmount(amount){
+                return (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2)
+            },
         },
         mixins: [componentHandler]
     }
diff --git a/resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue b/resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue
index ed17bc23..9dad2dda 100644
--- a/resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue
+++ b/resources/assets/vue/components/bookings/sections/BookingMergeSectionComponent.vue
@@ -11,7 +11,7 @@
                             </div>
                             <div class="absolute shadow-sm " style="top: 0px; right: 0px; width: 0px; height: 0px; border-style: solid; border-width: 100px 0px 0px 100px; border-color: transparent transparent transparent rgb(255, 255, 255); z-index: 1;"></div>
                             <!--<bear-component class="animate__animated animate__slow animate__fadeInDown" v-on:mouseover.native="bearShowing = true" v-on:mouseleave.native="bearShowing = false" v-if="bearShowing"></bear-component>-->
-                            <div class="row align-items-center m-b-25">
+                            <div class="row align-items-center m-b-0">
                                 <div class="col-auto p-r-0">
                                     <div class="icon-thumbnail icon-35 bg-transparent">
                                         <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
@@ -27,23 +27,19 @@
                                     <p>Merge multiple transfer orders to generate a single invoice for your purchase order</p>
                                 </div>
                             </div>
-                            <div class="row b-b b-dashed b-grey p-b-25" >
+                            <div class="row b-b b-dashed b-grey p-b-0" >
                                 <div class="col-10">
                                     <div class="row m-b-15">
-                                        <div class="col-4">
-                                            <div class="row">
-                                                <div class="col-auto">
-                                                    <div class="font-heading fs-10 muted all-caps">Date</div>
-                                                    <div class="font-heading fs-10">
-                                                        {{booking.created_at}}
-                                                    </div>
-                                                </div>
-                                                <div class="col-auto">
-                                                    <div class="font-heading fs-10 muted all-caps">Reference</div>
-                                                    <div class="font-heading fs-10">
-                                                        {{booking.marking}}
-                                                    </div>
-                                                </div>
+                                        <div class="col-auto">
+                                            <div class="font-heading fs-10 muted all-caps">Date</div>
+                                            <div class="font-heading fs-10">
+                                                {{booking.created_at}}
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <div class="font-heading fs-10 muted all-caps">Reference</div>
+                                            <div class="font-heading fs-10">
+                                                {{booking.marking}}
                                             </div>
                                         </div>
                                         <div class="col-auto">
@@ -52,17 +48,16 @@
                                                 {{booking.company.identification.reference}}
                                             </div>
                                         </div>
-                                        <div class="col">
-                                            <div class="row align-items-end">
-                                                <div class="col-auto">
-                                                    <div class="font-heading fs-10 muted all-caps">Contact</div>
-                                                    <div class="font-heading fs-10 bold">
-                                                        {{booking.company.contact.phone}}
-                                                    </div>
-                                                </div>
-                                                <div class="col-auto p-l-0 hide">
-                                                    <button class="btn btn-xs btn-default bg-master-lightest no-border b-rad-none"><i class="fa fa-pencil text-complete"></i></button>
-                                                </div>
+                                        <div class="col-auto">
+                                            <div class="font-heading fs-10 muted all-caps">Purchase Order Amount</div>
+                                            <div class="font-heading fs-10 text-info">
+                                                {{formatAmount(booking.purchase_order.amount)}}
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <div class="font-heading fs-10 muted all-caps">Booking Amount</div>
+                                            <div class="font-heading fs-10 text-info">
+                                                {{formatAmount(booking.amount)}}
                                             </div>
                                         </div>
                                     </div>
@@ -76,26 +71,29 @@
                                 <p class="col-auto pull-left">Select Transfer Orders to merge with the order above</p>
                             </div>
                             <div class="b-b b-dashed b-grey p-b-25">
-                                <div class="row align-items-center m-b-15 parentContainer">
-                                    <div class="col-auto">
+                                <div class="row align-items-center m-b-5 parentContainer">
+                                    <div class="col-auto pl3">
                                         <div class="font-heading fs-12" style="line-height: 0px;">
                                             <input type="checkbox" class="hide"/>
                                         </div>
                                     </div>
-                                    <div class="col-2">
+                                    <div class="col-auto" :style="minWidth">
                                         <div class="font-heading fs-10 muted all-caps">Created At</div>
                                     </div>
-                                    <div class="col-2">
+                                    <div class="col-auto" :style="minWidth">
                                         <div class="font-heading fs-10 muted all-caps">Marking</div>
                                     </div>
-                                    <div class="col-2">
+                                    <div class="col-auto" :style="minWidth">
                                         <div class="font-heading fs-10 muted all-caps">Currency</div>
                                     </div>
-                                    <div class="col-2">
+                                    <div class="col-auto" :style="minWidth">
                                         <div class="font-heading fs-10 muted all-caps">Type</div>
                                     </div>
-                                    <div class="col-2">
-                                        <div class="font-heading fs-10 muted all-caps">Amount</div>
+                                    <div class="col-auto" :style="minWidth150">
+                                        <div class="font-heading fs-10 muted all-caps">P.O. Amount</div>
+                                    </div>
+                                    <div class="col-auto" :style="minWidth150">
+                                        <div class="font-heading fs-10 muted all-caps">Booking Amount</div>
                                      </div>
                                 </div>
                                 <list-component key="2" section="transferSection" :endpoint="route('api.booking.list')" :options="{per_page: 10, id_not: booking.id, status: 2,service_id:booking.service.id,convertible_currency_id:booking.convertible_currency.id,fixed_currency_id:booking.fixed_currency.id,with_transactions:true}">
@@ -141,8 +139,6 @@
                                             <modal-component type="mergeTransferModal">
                                                 <booking-merge-modal-component section="bookingDetailSection" :id="booking.id" :data="this.bookings"></booking-merge-modal-component>
                                             </modal-component>
-
-
                                         </div>
                                     </div>
                                 </div>
@@ -166,6 +162,12 @@
         },
         data(){
             return {
+                minWidth:{
+                    minWidth:'100px',
+                },
+                minWidth150:{
+                    minWidth:'150px',
+                },
                 section: 'bookingDetailSection',
                 selected_id: '',
                 isLoading: true,
@@ -216,6 +218,9 @@
                     }
                 }
             });
+            this.$root.$on('setLoading', (isLoading) => {
+                this.isLoading = isLoading;
+            });
         },
         methods: {
             fetchBooking(){
@@ -232,6 +237,9 @@
             getAmountClass(){
                 return  this.totalAmount == this.totalPurchaseAmount ? 'text-success' : 'text-danger';
             },
+            formatAmount(amount){
+              return (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2)
+            },
         }
     }
 </script>
\ No newline at end of file