From b0fa7107f6cf6c8050e9dc362b14e5bdf8bd1dcd Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Thu, 17 Feb 2022 22:41:47 +0800
Subject: [PATCH] update RFM search ui

---
 .../sections/CustomerSectionComponent.vue     | 77 +++++++++++++++++++
 .../general/forms/DatePickerComponent.vue     | 28 +++++++
 .../views/pages/customers/index.blade.php     |  1 +
 3 files changed, 106 insertions(+)
 create mode 100644 resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue
 create mode 100644 resources/assets/vue/components/general/forms/DatePickerComponent.vue

diff --git a/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue
new file mode 100644
index 00000000..be864c9a
--- /dev/null
+++ b/resources/assets/vue/components/companies/sections/CustomerSectionComponent.vue
@@ -0,0 +1,77 @@
+<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>
+                        <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>
+                        <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>
+                    </div>
+                </div>
+            </div>
+            <div class="row no-margin" v-show="search">
+                <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}">
+                            <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,
+            parameters: {
+                recency: '2022-02-15',
+                frequency: 0,
+                monetary : 0,
+            }
+        }
+    },
+    methods: {
+        submitSearch(){
+            this.search = true;
+        }
+    },
+    validations: {
+        parameters: {
+            recency: {}, 
+            frequency: {}, 
+            monetary: {}, 
+        }
+    },
+    mixins: [componentHandler]
+};
+</script>
diff --git a/resources/assets/vue/components/general/forms/DatePickerComponent.vue b/resources/assets/vue/components/general/forms/DatePickerComponent.vue
new file mode 100644
index 00000000..571227ef
--- /dev/null
+++ b/resources/assets/vue/components/general/forms/DatePickerComponent.vue
@@ -0,0 +1,28 @@
+<template>
+    <input class="form-control">
+</template>
+
+<script>
+    export default {
+        props: {
+            value: {
+                required: false
+            }
+        },
+        mounted(){
+            let vm = this;
+            $(this.$el).datepicker({
+                format: 'dd-mm-yyyy',
+                autoclose: true,
+                clearBtn: true,
+            }).val(this.value).trigger("change").on('changeDate', function(){
+                vm.$emit('input', this.value);
+            });
+        },
+        watch: {
+            value: function(value){
+                $(this.$el).val(value).trigger('change');
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/customers/index.blade.php b/resources/views/pages/customers/index.blade.php
index 79dd6982..25099bc7 100644
--- a/resources/views/pages/customers/index.blade.php
+++ b/resources/views/pages/customers/index.blade.php
@@ -4,6 +4,7 @@
         <div class="col p-t-15 p-b-15">
             <div class="row m-b-25">
                 <div class="col">
+                    <customer-section-component></customer-section-component>
                     <div class="row tabsContainer">
                         <div class="col">
                             <div class="row m-l-0 m-r-0 d-flex">