From a84e826c31abd1d8ba1a31d1413e3aadc1737363 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Wed, 23 Feb 2022 17:26:26 +0800
Subject: [PATCH] Create search function in container page

---
 .../elements/ContainerSearchComponent.vue     | 82 +++++++++++++++++++
 .../sections/OrdersTableSectionComponent.vue  |  8 +-
 resources/views/pages/containers.blade.php    | 11 +--
 3 files changed, 88 insertions(+), 13 deletions(-)
 create mode 100644 resources/assets/vue/components/containers/elements/ContainerSearchComponent.vue

diff --git a/resources/assets/vue/components/containers/elements/ContainerSearchComponent.vue b/resources/assets/vue/components/containers/elements/ContainerSearchComponent.vue
new file mode 100644
index 00000000..ac674d56
--- /dev/null
+++ b/resources/assets/vue/components/containers/elements/ContainerSearchComponent.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="row m-b-15">
+        <div class="col no-margin">
+            <div class="row m-b-15">
+                <div class="col col-sm-12 col-md-4">
+                    <label>Container Reference:</label>
+                    <input type="text" class="form-control form-input" placeholder="ABC-12345" v-model="reference_like">
+                </div>
+            </div>
+            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
+            <div class="row" v-show="!$store.getters.isLoading(section)">
+                <div class="col">
+                    <div class="row m-b-15">
+                        <div class="col-auto p-r-5">
+                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none" @click="updateFilters()">
+                                <div class="row align-items-center">
+                                    <div class="col p-r-5">Search</div>
+                                    <div class="col-auto p-l-10">
+                                        <i class="fa fa-search fs-16"></i>
+                                    </div>
+                                </div>
+                            </button>
+                        </div>
+                        <div class="col-auto p-l-5">
+                            <button type="button" class="btn btn-sm btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-secondary b-rad-none bg-secondary" @click="resetFilter()">
+                                <div class="row align-items-center">
+                                    <div class="col p-r-5 text-white">Reset</div>
+                                    <div class="col-auto p-l-10">
+                                        <i class="fa fa-refresh fs-16 text-white"></i>
+                                    </div>
+                                </div>
+                            </button>
+                        </div>
+                    </div>
+                     <div class="row" key="2" v-show="!$store.getters.isLoading(section)">
+                        <div class="col">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row" v-show="isSearch" :key="componentKey">
+                <div class="col bg-master-lightest p-1 p-sm-4">
+                    <list-component section="section" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, reference_like: reference_like, order_by: {column: 'loading_date', DESC: true}}">
+                        <template slot="list" slot-scope="{data}">
+                            <container-component :data="data"></container-component>
+                        </template>
+                    </list-component>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        data(){
+            return {
+                section: 'searchContainerComponent',
+                componentKey: 3,
+                reference_like: '',
+                isSearch: false,
+            }
+        },
+        methods: {
+            updateFilters() {
+                this.isSearch = true,
+                this.componentKey += 1;
+                this.updateSectiontoggle();
+            },
+            resetFilter() {
+                this.isSearch = false;
+                this.reference_like = '';
+                this.updateSectiontoggle();
+            },
+            updateSectiontoggle() {
+                this.$store.dispatch('toggleSection', {name: 'searchContainerSection', status: this.isSearch});
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
+
diff --git a/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue b/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue
index 0175534f..d7766718 100644
--- a/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue
+++ b/resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue
@@ -2,14 +2,14 @@
     <div class="row">
         <div class="col no-margin">
             <div class="row m-b-15">
-                <div class="col-sm-4">
+                <div class="col col-sm-12 col-md-4">
                     <label>Order No:</label>
                     <input type="text" class="form-control form-input" placeholder="12345678" v-model="filters.reference_like">
                 </div>
-                <div class="col-sm-4">
+                <div class="col col-sm-12 col-md-4">
                     <label>Order Status:</label>
                     <div class="col">
-                        <div class="row m-b-5 m-r-10">
+                        <div class="row m-b-5">
                             <div class="col p-l-0 p-r-0">
                                 <div class="btn btn-xs b-grey btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="orderStatusFilterDropDownStatus = !orderStatusFilterDropDownStatus">
                                     <div class="row">
@@ -272,7 +272,7 @@
             updateFilters(filters){
                 this.filters = filters;
                 this.setDecoratorDefault();
-                this.submit(route('api.order.list') + '?page=' + this.metaData.current_page + '&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false)
+                this.submit(this.route('api.order.list') + '?page=' + this.metaData.current_page + '&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false)
             },
             successHandler(response){
                 this.$store.dispatch('completeList', {'name': this.section, 'data': response.payload.data});
diff --git a/resources/views/pages/containers.blade.php b/resources/views/pages/containers.blade.php
index b8ab329b..b4f2acb8 100644
--- a/resources/views/pages/containers.blade.php
+++ b/resources/views/pages/containers.blade.php
@@ -1,13 +1,5 @@
 @extends('layouts.base_portal')
 @section('inner_content')
-<div class="row m-1 mt-3 mb-3 hide">
-    <div class="col col-10 m-r-5">
-        <div class="row border p-1">Search</div>
-    </div>
-    <div class="col col m-l-5">
-        <div class="row border p-1">Filter</div>
-    </div>
-</div>
 
 <div class="row m-b-15" v-if="false" v-show="!$store.getters.isShowing('createContainerFormSection')">
     <div class="col">
@@ -15,8 +7,9 @@
     </div>
 </div>
 
+<container-search-component section="containerListSection"></container-search-component>
 <create-load-container-form-component section="containerListSection" v-show="$store.getters.isShowing('createContainerFormSection')"></create-load-container-form-component>
-<div class="row tabsContainer" v-show="!$store.getters.isShowing('createContainerFormSection')">
+<div class="row tabsContainer" v-show="!$store.getters.isShowing('createContainerFormSection') && !$store.getters.isShowing('searchContainerSection')">
     <div class="col no-padding">
         <div class="row m-l-0 m-r-0">
             <div class="col col-md-4 m-r-5">