mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-28 17:03:59 +00:00
edmondlang
123 lines
6.5 KiB
Vue
123 lines
6.5 KiB
Vue
<template>
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
|
|
<div class="row m-l-0 m-r-0 bg-master-light padding-10" v-show="!isLoading">
|
|
<div class="col-12 col-md mb-2 mb-md-0">
|
|
<validation-wrapper-component :validator="$v.parameters.recency">
|
|
<label class="all-caps">Last Payment Date</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.recency"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-12 col-md mb-2 mb-md-0">
|
|
<validation-wrapper-component :validator="$v.parameters.frequency">
|
|
<label class="all-caps">Bookings Frequency</label>
|
|
<input type="text" class="form-control" v-model.lazy="parameters.frequency">
|
|
</validation-wrapper-component>
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component :validator="$v.parameters.frequency">
|
|
<label class="all-caps">Date From</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.frequencyDateFrom"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col p-l-0">
|
|
<validation-wrapper-component :validator="$v.parameters.frequency">
|
|
<label class="all-caps">Date To</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.frequencyDateTo"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md mb-2 mb-md-0">
|
|
<validation-wrapper-component :validator="$v.parameters.monetary">
|
|
<label class="all-caps">Total Payments</label>
|
|
<input type="text" class="form-control" v-model.lazy="parameters.monetary">
|
|
</validation-wrapper-component>
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<validation-wrapper-component :validator="$v.parameters.frequency">
|
|
<label class="all-caps">Date From</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.monetaryDateFrom"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col p-l-0">
|
|
<validation-wrapper-component :validator="$v.parameters.frequency">
|
|
<label class="all-caps">Date To</label>
|
|
<date-picker-component :parameters="parameters" v-model.lazy="parameters.monetaryDateTo"></date-picker-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-auto d-flex align-items-center flex-md-column justify-content-center">
|
|
<button type="button" class="btn btn-lg btn-primary fs-11 w-100 d-block m-r-5 mr-md-0 mb-md-1 mb-0" @click="submitSearch()">Search</button>
|
|
<button type="button" class="btn btn-lg btn-secondary fs-11 w-100 d-block m-l-5 ml-md-0 mt-md-1 0t-0" @click="resetSarch()">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin" v-show="search" :key="serachSectionKey">
|
|
<div class="col bg-white padding-25">
|
|
<list-component :section="section" :endpoint="route('api.company.list')" :options="{'with_total_payments': true, 'recency': parameters.recency, 'frequency': parameters.frequency, 'monetary': parameters.monetary, 'business_type': 2, with_bookings:true, order_by:{ column:'total_payments', DESC:true}}">
|
|
<template slot="list" slot-scope="{data}">
|
|
<company-component :data="data"></company-component>
|
|
</template>
|
|
</list-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import componentHandler from "../../../general/mixins/componentHandler";
|
|
import { required, minValue} from "vuelidate/lib/validators";
|
|
import {VMoney} from 'v-money'
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
section: 'customerSectionComponent',
|
|
isLoading: false,
|
|
search: false,
|
|
serachSectionKey: 2,
|
|
parameters: {
|
|
recency: '2022-02-15',
|
|
frequency: 0,
|
|
frequencyDateFrom: '2021-01-01',
|
|
frequencyDateTo: '2022-01-01',
|
|
monetary : 0,
|
|
monetaryDateFrom: '2021-01-01',
|
|
monetaryDateTo: '2022-02-15',
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
submitSearch(){
|
|
this.serachSectionKey ++;
|
|
this.search = true;
|
|
},
|
|
resetSarch() {
|
|
this.search = false;
|
|
this.parameters.recency = '2022-02-15';
|
|
this.parameters.frequency = 0;
|
|
this.parameters.frequencyDateFrom ='2021-01-01';
|
|
this.parameters.frequencyDateTo = '2022-01-01';
|
|
this.parameters.monetary = 0;
|
|
this.parameters.monetaryDateFrom = '2021-01-01';
|
|
this.parameters.monetaryDateTo = '2022-02-15';
|
|
}
|
|
},
|
|
validations: {
|
|
parameters: {
|
|
recency: {},
|
|
frequency: {},
|
|
monetary: {},
|
|
}
|
|
},
|
|
mixins: [componentHandler]
|
|
};
|
|
</script>
|