cief/shipping-portal
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git synced 2026-08-19 04:24:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create search function in container page

Browse Source
This commit is contained in:
edmondlang
2022-02-23 17:26:26 +08:00
parent c882450dce
commit a84e826c31
3 changed files with 88 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/vue/components/containers/elements/ContainerSearchComponent.vue
+82
View File
@@ -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>
resources/assets/vue/components/orders/sections/OrdersTableSectionComponent.vue
+4 -4
View File
@@ -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});
resources/views/pages/containers.blade.php
+2 -9
View File
@@ -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">