From 87116d29c921113e02a3369efa1082dd9de8d12f Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Thu, 7 Apr 2022 22:54:02 +0800
Subject: [PATCH] last mile delivery search order ui and search order number
 function

---
 .../DeliveryOrdersTableSectionComponent.vue   | 86 ++++++++++++++++++-
 1 file changed, 82 insertions(+), 4 deletions(-)

diff --git a/resources/assets/vue/components/orders/sections/DeliveryOrdersTableSectionComponent.vue b/resources/assets/vue/components/orders/sections/DeliveryOrdersTableSectionComponent.vue
index eb424fc9..f43fde99 100644
--- a/resources/assets/vue/components/orders/sections/DeliveryOrdersTableSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/DeliveryOrdersTableSectionComponent.vue
@@ -6,8 +6,58 @@
                 <div class="col">
                     <div class="row m-b-15" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
                         <div class="col-auto p-r-5">
+                            <div class="row m-b-20">
+                                <div class="col">
+                                    <div class="row m-l-0 m-r-0 bg-master-light padding-10" @keyup.enter="submitSearch()">
+                                        <div class="col-12 col-md mb-2 mb-md-0">
+                                            <div class="row">
+                                                <div class="col p-r-0 h-100">
+                                                    <validation-wrapper-component :validator="$v.orderNumber">
+                                                        <label class="all-caps">Order Number</label>
+                                                        <input class="form-control" v-model.lazy="orderNumber">
+                                                    </validation-wrapper-component>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-md mb-2 mb-md-0">
+                                            <div class="row">
+                                                <div class="col p-r-0 h-100">
+                                                    <validation-wrapper-component :validator="$v.orderMarking">
+                                                        <label class="all-caps">Marking</label>
+                                                        <input class="form-control" v-model.lazy="orderMarking">
+                                                    </validation-wrapper-component>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-md mb-2 mb-md-0">
+                                            <div class="row">
+                                                <div class="col p-r-0 h-100">
+                                                    <validation-wrapper-component :validator="$v.orderSenderName">
+                                                        <label class="all-caps">Sender Name</label>
+                                                        <input class="form-control" v-model.lazy="orderSenderName">
+                                                    </validation-wrapper-component>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-12 col-md-auto mb-2 mb-md-0">
+                                            <div class="row h-100">
+                                                <div class="col p-r-0 h-100">
+                                                    <div class="btn btn-primary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30" @click="submitSearch()">
+                                                        Search
+                                                    </div>
+                                                </div>
+                                                <div class="col p-l-0 h-100">
+                                                    <div class="btn btn-secondary b-rad-none w-100 h-100 d-flex justify-content-center align-items-center p-l-30 p-r-30" @click="resetSearch()">
+                                                        Reset
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                             <a :href="route('last_mile_delivery.order.export') + '?ids=' + JSON.stringify(selectedOrderId)" target="_blank">
-                                <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-complete b-rad-none">
+                                <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-complete b-rad-none">
                                     <div class="row align-items-center">
                                         <div class="col-auto p-r-0 p-l-0">
                                             <i class="fa fa-file-excel-o fs-16"></i>
@@ -47,7 +97,7 @@
                                                 </tr>
                                                 </thead>
                                                 <tbody>
-                                                <tr v-for="data in $store.getters.getListData(section)">
+                                                <tr v-for="data in orderData">
                                                     <td class="col-auto pointer align-items-center" @click="selectOrder(data.id)" v-if="$store.getters.isAdmin || $store.getters.getCompanyModuleType === 8">
                                                         <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectedOrderId.includes(data.id), 'fa-check-square': selectedOrderId.includes(data.id), 'text-complete': selectedOrderId.includes(data.id)}" ></i>
                                                     </td>
@@ -73,7 +123,7 @@
                                                     <td>{{data.delivery_address.street_one+' '+(data.delivery_address.street_two ? data.delivery_address.street_two : '')+', '+ data.delivery_address.district.name+', '+data.delivery_address.post_code+' '+data.delivery_address.state.name+', '+data.delivery_address.country.name}}</td>
                                                     <td>{{data.delivery_address.contact.phone}}</td>
                                                 </tr>
-                                                <tr v-if="$store.getters.getListData(section).length === 0">
+                                                <tr v-if="orderData.length === 0">
                                                     <td colspan="100%" class="text-center">No data available in table</td>
                                                 </tr>
                                                 </tbody>
@@ -101,12 +151,16 @@
         data(){
             return {
                 section: 'ListOrderTableSection',
+                orderData: [],
                 selectAllOrder: false,
                 selectedOrderId: [],
                 emptyListSection: false,
                 filters: this.data ? {
                     company_module_id: this.data.company_module.id,
                     per_page: 20,
+                    reference_like: '',
+                    orderMarking: '',
+                    orderSenderName: '',
                     status_in: [2], 
                     order_by: {
                         column: 'id',
@@ -114,6 +168,9 @@
                     },
                 } : {
                     per_page: 100,
+                    reference_like: '',
+                    orderMarking: '',
+                    orderSenderName: '',
                     status_in: [2], 
                     order_by: {
                         column: 'id',
@@ -126,8 +183,16 @@
                     total: null,
                     current_page: null,
                 },
+                orderNumber: '',
+                orderMarking: '',
+                orderSenderName: ''
             }
         },
+        validations: {
+            orderNumber: {  }, 
+            orderMarking: {  }, 
+            orderSenderName: {  }
+        },
         created(){
             this.setDecoratorDefault();
             this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
@@ -147,12 +212,16 @@
         methods: {
             fetchList(){
                 let listDecorators = this.$store.getters.getListDetails(this.section);
+                listDecorators.filters.reference_like = this.orderNumber;
+                listDecorators.filters.orderMarking = this.orderMarking;
+                listDecorators.filters.orderSenderName = this.orderSenderName;
                 this.submit(this.route('api.delivery.order.list') + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
             },
             successHandler(response){
                 this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
                 this.$refs.pagination.makePagination(response.payload.meta, response.payload.links);
                 this.metaData = response.payload.meta;
+                this.orderData = response.payload.data;
             },
             chooseAllOrder(){
                 this.selectAllOrder = !this.selectAllOrder;
@@ -166,7 +235,16 @@
             selectOrder(orderId){
                 this.selectedOrderId.includes(orderId) ? this.selectedOrderId.splice(this.selectedOrderId.indexOf(orderId), 1) : this.selectedOrderId.push(orderId);
                 this.selectedOrderId.length === this.$store.getters.getListData(this.section).length ? this.selectAllOrder = true : this.selectAllOrder = false;
-            }
+            },
+            submitSearch(){
+                this.fetchList();
+            },
+            resetSearch() {
+                this.orderNumber = '';
+                this.orderMarking = '';
+                this.orderSenderName = '';
+                this.fetchList();
+            },
         },
         mixins: [componentHandler]
     }