Files
exchange-2.0/resources/assets/vue/components/wallets/elements/CustomerTransactionComponent.vue
T
2023-09-30 15:51:09 +08:00

112 lines
4.1 KiB
Vue

<template>
<div class="row">
<div class="col">
<div class="row m-b-5" @keyup.enter="submitSearch">
<div class="col p-r-0">
<validation-wrapper-component :validator="$v.parameters.reference_no">
<label class="all-caps">Booking Reference</label>
<input type="text" class="form-control" v-model="parameters.reference_no">
</validation-wrapper-component>
</div>
<div class="col p-r-0">
<validation-wrapper-component :validator="$v.parameters.startDate">
<label class="all-caps">Start Date</label>
<date-picker-component v-model.lazy="parameters.startDate"></date-picker-component>
</validation-wrapper-component>
</div>
<div class="col p-r-0">
<validation-wrapper-component :validator="$v.parameters.endDate">
<label class="all-caps">End Date</label>
<date-picker-component v-model.lazy="parameters.endDate"></date-picker-component>
</validation-wrapper-component>
</div>
<div class="col col-md-auto d-flex justify-content-center align-items-center">
<button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch()">Search</button>
</div>
</div>
<div class="row">
<div class="col">
<div class="row padding-10">
<div class="col-3 fs-10">Date</div>
<div class="col fs-10">Description</div>
<div class="col-2 fs-10 text-center">Incoming</div>
<div class="col-2 fs-10 text-center">Outgoing</div>
<div class="col-2 fs-10 text-right">Balance</div>
</div>
<list-component :key="key" section="topUp" :endpoint="route('api.transaction.wallet.list')" :options="options">
<template slot="list" slot-scope="{data}">
<customer-wallet-transaction-component :data="data" :deciamls="deciamls"></customer-wallet-transaction-component>
</template>
</list-component>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
deciamls: {
type: Number,
required: true
},
showingTransactionCount: {
required: true
},
wallet_id: {
type: Number,
required: true
}
},
data(){
return {
key: 1,
parameters: {
reference_no: null,
startDate: null,
endDate: null,
},
options: {
status_in: [2, 3],
owner_type: 'App\\Models\\Wallet',
owner_id: this.wallet_id,
per_page: this.showingTransactionCount
}
}
},
validations: {
parameters: {
reference_no: { },
startDate: { },
endDate: { },
}
},
watch: {
showingTransactionCount() {
this.options.per_page = this.showingTransactionCount;
this.key ++;
}
},
methods: {
submitSearch() {
delete this.options.with_booking_marking_like;
delete this.options.created_after_or_equal;
delete this.options.created_before_or_equal;
if (this.parameters.reference_no) {
this.options.with_booking_marking_like = this.parameters.reference_no
}
if (this.parameters.startDate) {
this.options.created_after_or_equal = this.parameters.startDate
}
if (this.parameters.endDate) {
this.options.created_before_or_equal = this.parameters.endDate
}
this.key ++;
},
},
}
</script>