From 3852ba78cf072e66e76eee69343235a5b5d8e69a Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sun, 6 Mar 2022 18:45:16 +0800
Subject: [PATCH] update RFM search bar include date range for frequency and
 monetary

---
 .../sections/CustomerSectionComponent.vue     | 51 +++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue
index be864c9a..65bed7f7 100644
--- a/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue
@@ -16,20 +16,49 @@
                                 <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 justify-content-center align-items-center">
-                            <button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch()">Search</button>
+                        <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="reserSearch()">Reset</button>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="row no-margin" v-show="search">
+            <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': recency, 'frequency': frequency, 'monetary': monetary, 'business_type': 2, with_bookings:true, order_by:{ column:'total_payments', DESC:true}}">
                         <template slot="list" slot-scope="{data}">
@@ -53,16 +82,32 @@ export default {
             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.search = true;
+            this.serachSectionKey ++;
+        },
+        reserSearch() {
+            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';
+            this.serachSectionKey ++;
         }
     },
     validations: {