create loading when click

This commit is contained in:
David Chinh
2023-02-09 13:10:06 +07:00
parent 762add8e5c
commit 8a90676ad6
@@ -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,25 +101,30 @@
<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">
<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">
<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">
<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}">
@@ -127,9 +132,11 @@
</template>
</list-component>
</div>
</keep-alive>
</div>
<div class="row tabsContainer tabContent hide" tab-name="paidInvoice">
<div class="col">
<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>
@@ -141,6 +148,7 @@
</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>