From 8a90676ad647e717d1f4fdcd49b0ec176caf6018 Mon Sep 17 00:00:00 2001
From: David Chinh <myr.david.chinh@gmail.com>
Date: Thu, 9 Feb 2023 13:10:06 +0700
Subject: [PATCH] create loading when click

---
 .../AdminPaymentsBillingSectionComponent.vue  | 95 +++++++++++--------
 1 file changed, 58 insertions(+), 37 deletions(-)

diff --git a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
index 3a0175f7..d193b463 100644
--- a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
@@ -2,7 +2,7 @@
     <div class="row tabsContainer">
         <div class="col no-padding">
             <div class="row m-l-0 m-r-0">
-                <div class="col">
+                <div class="col" @click="changeTabName('pendingInvoice')">
                     <div class="row justify-content-end">
                         <div class="col">
                             <div class="row fs-12 text-center">
@@ -25,7 +25,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+                <div class="col" @click="changeTabName('pendingApproval')">
                     <div class="row justify-content-end">
                         <div class="col">
                             <div class="row fs-12 text-center">
@@ -48,7 +48,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+                <div class="col" @click="changeTabName('pendingPayment')">
                     <div class="row justify-content-end">
                         <div class="col">
                             <div class="row fs-12 text-center">
@@ -74,7 +74,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+                <div class="col" @click="changeTabName('paidInvoice')">
                     <div class="row justify-content-end">
                         <div class="col">
                             <div class="row fs-12 text-center">
@@ -101,46 +101,54 @@
             <div class="row no-margin">
                 <div class="col bg-master-lightest p-1 p-sm-4">
                     <div class="row tabsContainer tabContent" tab-name="pendingInvoice">
-                        <div class="col">
-                            <list-component section="pendingInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{does_not_have_transaction_type: 1, type: 2}">
-                                <template slot="list" slot-scope="{data}">
-                                    <admin-payments-billing-component :data="data" invoice_status="Pending Invoice" section="pendingInvoiceSection" ></admin-payments-billing-component>
-                                </template>
-                            </list-component>
-                        </div>
+                        <keep-alive>
+                            <div class="col" v-if="tabName == 'pendingInvoice'">
+                                <list-component section="pendingInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{does_not_have_transaction_type: 1, type: 2}">
+                                    <template slot="list" slot-scope="{data}">
+                                        <admin-payments-billing-component :data="data" invoice_status="Pending Invoice" section="pendingInvoiceSection" ></admin-payments-billing-component>
+                                    </template>
+                                </list-component>
+                            </div>
+                        </keep-alive>
                     </div>
                     <div class="row tabsContainer tabContent hide" tab-name="pendingApproval">
-                        <div class="col">
-                            <list-component section="pendingApprovalSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [0, 1]}">
-                                <template slot="list" slot-scope="{data}">
-                                    <admin-payments-billing-component :data="data" invoice_status="Pending Approval" section="pendingApprovalSection" ></admin-payments-billing-component>
-                                </template>
-                            </list-component>
-                        </div>
+                        <keep-alive>
+                            <div class="col" v-if="tabName == 'pendingApproval'">
+                                <list-component section="pendingApprovalSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [0, 1]}">
+                                    <template slot="list" slot-scope="{data}">
+                                        <admin-payments-billing-component :data="data" invoice_status="Pending Approval" section="pendingApprovalSection" ></admin-payments-billing-component>
+                                    </template>
+                                </list-component>
+                            </div>
+                        </keep-alive>
                     </div>
                     <div class="row tabsContainer tabContent hide" tab-name="pendingPayment">
-                        <div class="col">
-                            <payment-filter-component :endpoint="route('api.packing_list.list')" :data="data"></payment-filter-component>
-                            <list-component section="pendingPaymentSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [2], packing_list_ordered_by_invoice_date: true}">
-                                <template slot="list" slot-scope="{data}">
-                                    <admin-payments-billing-component :data="data" invoice_status="Pending Payment" section="pendingPaymentSection" ></admin-payments-billing-component>
-                                </template>
-                            </list-component>
-                        </div>
+                        <keep-alive>
+                            <div class="col" v-if="tabName == 'pendingPayment'">
+                                <payment-filter-component :endpoint="route('api.packing_list.list')" :data="data"></payment-filter-component>
+                                <list-component section="pendingPaymentSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [2], packing_list_ordered_by_invoice_date: true}">
+                                    <template slot="list" slot-scope="{data}">
+                                        <admin-payments-billing-component :data="data" invoice_status="Pending Payment" section="pendingPaymentSection" ></admin-payments-billing-component>
+                                    </template>
+                                </list-component>
+                            </div>
+                        </keep-alive>
                     </div>
                     <div class="row tabsContainer tabContent hide" tab-name="paidInvoice">
-                        <div class="col">
-                            <div class="row">
-                                <div class="col-12 col-md-6 no-padding">
-                                    <download-billing-with-dates-component section="paymentsReportSection" ></download-billing-with-dates-component>
+                        <keep-alive>
+                            <div class="col" v-if="tabName == 'paidInvoice'">
+                                <div class="row">
+                                    <div class="col-12 col-md-6 no-padding">
+                                        <download-billing-with-dates-component section="paymentsReportSection" ></download-billing-with-dates-component>
+                                    </div>
                                 </div>
+                                <list-component section="paidInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [3]}">
+                                    <template slot="list" slot-scope="{data}">
+                                        <admin-payments-billing-component :data="data" invoice_status="Paid Invoice" section="paidInvoiceSection" ></admin-payments-billing-component>
+                                    </template>
+                                </list-component>
                             </div>
-                            <list-component section="paidInvoiceSection" :endpoint="route('api.packing_list.list')" :options="{has_invoice_status_in: [3]}">
-                                <template slot="list" slot-scope="{data}">
-                                    <admin-payments-billing-component :data="data" invoice_status="Paid Invoice" section="paidInvoiceSection" ></admin-payments-billing-component>
-                                </template>
-                            </list-component>
-                        </div>
+                        </keep-alive>
                     </div>
                 </div>
             </div>
@@ -150,6 +158,19 @@
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
     export default {
-        mixins: [componentHandler]
+        mixins: [componentHandler],
+        data() {
+            return {
+                tabName: ''
+            }
+        },
+        created() {
+            this.tabName = "pendingInvoice"
+        },
+        methods: {
+            changeTabName(value) {
+                this.tabName = value;
+            }
+        }
     }
 </script>