From 4d682c2ac61c48c43991e838d0090db12053aa91 Mon Sep 17 00:00:00 2001
From: Dillon Ngo <dillonngoweijoon@gmail.com>
Date: Tue, 26 Dec 2023 04:21:46 +0800
Subject: [PATCH] Proof of concept - Vue Polling - Performance Improvement and
 tweaking for better  user experience

---
 .../AdminPaymentsBillingSectionComponent.vue  | 25 ++++++++++++-------
 .../assets/vue/general/mixins/tabHandler.js   | 24 ++++++++++++++++++
 2 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 resources/assets/vue/general/mixins/tabHandler.js

diff --git a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
index bda36503..ee91d849 100644
--- a/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue
@@ -6,7 +6,7 @@
                     <div class="row justify-content-end">
                         <div class="col">
                             <div class="row fs-12 text-center">
-                                <div class="col p-t-20 p-b-20 m-r-5 bg-master-lighter tabButton" :class="{'active': item ? item.status === 2 : true }" tab-name="pendingInvoice">
+                                <div class="col p-t-20 p-b-20 m-r-5 bg-master-lighter tabButton" :class="{'active': item ? item.status === 2 : true }" tab-name="pendingInvoice" @click="setActiveTab($event)">
                                     <div class="row justify-content-center m-b-5">
                                         <div class="col-auto">
                                             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
@@ -29,7 +29,7 @@
                     <div class="row justify-content-end">
                         <div class="col">
                             <div class="row fs-12 text-center">
-                                <div class="col p-t-20 p-b-20 m-r-5 bg-master-lighter tabButton" tab-name="pendingApproval">
+                                <div class="col p-t-20 p-b-20 m-r-5 bg-master-lighter tabButton" tab-name="pendingApproval" @click="setActiveTab($event)">
                                     <div class="row justify-content-center m-b-5">
                                         <div class="col-auto">
                                             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
@@ -52,7 +52,7 @@
                     <div class="row justify-content-end">
                         <div class="col">
                             <div class="row fs-12 text-center">
-                                <div class="col p-t-20 p-b-20 m-r-5 bg-master-lighter tabButton" tab-name="pendingPayment">
+                                <div class="col p-t-20 p-b-20 m-r-5 bg-master-lighter tabButton" tab-name="pendingPayment" @click="setActiveTab($event)">
                                     <div class="row justify-content-center m-b-5">
                                         <div class="col-auto">
                                             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
@@ -78,7 +78,7 @@
                     <div class="row justify-content-end">
                         <div class="col">
                             <div class="row fs-12 text-center">
-                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="paidInvoice">
+                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="paidInvoice" @click="setActiveTab($event)">
                                     <div class="row justify-content-center m-b-5">
                                         <div class="col-auto">
                                             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
@@ -100,23 +100,23 @@
             </div>
             <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="row tabsContainer tabContent" tab-name="pendingInvoice" v-if="isActiveTab('pendingInvoice') || showTabContent('pendingInvoice')">
                         <div class="col">
                             <admin-payments-billing-with-search-component :options="{does_not_have_transaction_type: 1, type: 2, per_page: 5}" section="pendingInvoiceSection" invoice_status="Pending Invoice"></admin-payments-billing-with-search-component>
                         </div>
                     </div>
-                    <div class="row tabsContainer tabContent hide" tab-name="pendingApproval">
+                    <div class="row tabsContainer tabContent hide" tab-name="pendingApproval" v-if="isActiveTab('pendingApproval') || showTabContent('pendingApproval')">
                         <div class="col">
                             <admin-payments-billing-with-search-component :options="{has_invoice_status_in: [0, 1], per_page: 5}" section="pendingApprovalSection" invoice_status="Pending Approval"></admin-payments-billing-with-search-component>
                         </div>
                     </div>
-                    <div class="row tabsContainer tabContent hide" tab-name="pendingPayment">
+                    <div class="row tabsContainer tabContent hide" tab-name="pendingPayment" v-if="isActiveTab('pendingPayment') || showTabContent('pendingPayment')">
                         <div class="col">
                             <payment-filter-component :endpoint="route('api.packing_list.list')" :data="data"></payment-filter-component>
                             <admin-payments-billing-with-search-component :options="{has_invoice_status_in: [2], packing_list_ordered_by_invoice_date: true, per_page: 5}" section="pendingPaymentSection" invoice_status="Pending Payment" :with_export="true"></admin-payments-billing-with-search-component>
                         </div>
                     </div>
-                    <div class="row tabsContainer tabContent hide" tab-name="paidInvoice">
+                    <div class="row tabsContainer tabContent hide" tab-name="paidInvoice" v-if="isActiveTab('paidInvoice') || showTabContent('paidInvoice')">
                         <div class="col">
                             <admin-payments-billing-with-search-component :options="{has_invoice_status_in: [3], per_page: 5}" section="paidInvoiceSection" invoice_status="Paid Invoice" :with_export="true"></admin-payments-billing-with-search-component>
                         </div>
@@ -128,7 +128,14 @@
 </template>
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
+    import tabHandler from '../../../general/mixins/tabHandler';
     export default {
-        mixins: [componentHandler]
+        data() {
+            return {
+                activeTab: 'pendingInvoice',
+                displayedTabs: ['pendingInvoice'],
+            };
+        },
+        mixins: [componentHandler, tabHandler]
     }
 </script>
diff --git a/resources/assets/vue/general/mixins/tabHandler.js b/resources/assets/vue/general/mixins/tabHandler.js
new file mode 100644
index 00000000..81790ed0
--- /dev/null
+++ b/resources/assets/vue/general/mixins/tabHandler.js
@@ -0,0 +1,24 @@
+export default {
+    data() {
+        return {
+            activeTab: null,
+            displayedTabs: [],
+        };
+    },
+    methods: {
+        setActiveTab(event) {
+            const tabName = event.currentTarget.getAttribute('tab-name');
+            // console.log(`Tab "${tabName}" clicked`);
+            this.activeTab = tabName;
+            if (!this.displayedTabs.includes(tabName)) {
+                this.displayedTabs.push(tabName);
+            }
+        },
+        isActiveTab(tabName) {
+            return this.activeTab === tabName;
+        },
+        showTabContent(tabName) {
+            return this.displayedTabs.includes(tabName);
+        },
+    },
+}