mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
edmondlang
291 lines
21 KiB
Vue
291 lines
21 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col no-margin">
|
|
<div class="row m-b-15">
|
|
<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 col-sm-12 col-md-4">
|
|
<label>Order Status:</label>
|
|
<div class="col">
|
|
<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">
|
|
<div class="col p-t-5 p-b-5 fs-11">
|
|
{{orderStatus}}
|
|
</div>
|
|
<div class="col-auto b-l b-success">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa" :class="[{'fa-angle-down': !orderStatusFilterDropDownStatus}, {'fa-angle-up': orderStatusFilterDropDownStatus}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !orderStatusFilterDropDownStatus}]" style="top: 100%; right: 0; z-index: 1;">
|
|
<div class="row text-left no-margin bg-white">
|
|
<div class="col no-padding">
|
|
<div class="row no-margin" v-for="status in orderStatusFilterArray">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': orderStatus === status}, {'text-white': orderStatus === status}, {'hover-primary': orderStatus !== status}, {'pointer': orderStatus !== status}]" @click="updateOrderStatusFilter(status)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading fs-11">{{status}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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(filters)">
|
|
<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 class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<table class="display w-100 m-b-10">
|
|
<thead>
|
|
<tr>
|
|
<th class="padding-10 b-a b-grey bg-master-light pointer" :class="[{'bg-primary-lighter': filters.order_by.column == 'reference'}]" @click="updateOrderBy('reference')">Order No <i class="fa float-right" :class="[{'fa-angle-down': filters.order_by.column == 'reference' && filters.order_by.DESC == false}, {'fa-angle-up': filters.order_by.column == 'reference' && filters.order_by.DESC == true}]"></i></th>
|
|
<th class="padding-10 b-a b-grey bg-master-light not-allowed">Warehouse</th>
|
|
<th class="padding-10 b-a b-grey bg-master-light not-allowed">Delivery Address</th>
|
|
<th class="padding-10 b-a b-grey bg-master-light not-allowed">Marking</th>
|
|
<th class="padding-10 b-a b-grey bg-master-light pointer" :class="[{'bg-primary-lighter': filters.order_by.column == 'created_at'}]" @click="updateOrderBy('created_at')">Date <i class="fa float-right" :class="[{'fa-angle-down': filters.order_by.column == 'created_at' && filters.order_by.DESC == false}, {'fa-angle-up': filters.order_by.column == 'created_at' && filters.order_by.DESC == true}]"></i></th>
|
|
<th class="padding-10 b-a b-grey bg-master-light not-allowed">Total CBM</th>
|
|
<th class="padding-10 b-a b-grey bg-master-light not-allowed"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="data in $store.getters.getListData(section)">
|
|
<td class="padding-10 b-a b-grey">{{data.reference}}</td>
|
|
<td class="padding-10 b-a b-grey">{{data.warehouse.name}} {{$store.getters.isAdmin ? data.warehouse.reference : ''}}</td>
|
|
<td class="padding-10 b-a b-grey">{{data.address.reference}} <i class="fa fa-info-circle float-right" data-html="true" v-tooltip:right="'<h6 class=\'text-white text-left fs-13 m-t-0 m-b-5 semi-bold\'>'+data.address.reference+'</h6><p class=\'text-white text-left lh-17 no-margin\'>'+data.address.street_one+' '+(data.address.street_two ? data.address.street_two : '')+', '+ data.address.district.name+', '+data.address.post_code+' '+data.address.state.name+', '+data.address.country.name+'</p>'" ></i></td>
|
|
<td class="padding-10 b-a b-grey"><a :href="route('customer.profile', data.company_module.marking)">{{data.company_module.marking}}</a></td>
|
|
<td class="padding-10 b-a b-grey">{{data.created_at}}</td>
|
|
<td class="padding-10 b-a b-grey">{{(Math.ceil((data.parcels.origin_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.in_transit_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.destination_warehouse_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0) + data.parcels.delivered_packages.flatMap(packing_list => packing_list.packages).reduce((total, obj) => obj.cbm + total, 0)) * 10000) / 10000).toFixed(3)}}</td>
|
|
<td class="padding-10 b-a b-grey"><a :href="route('order.show', data.reference)"><i class="fa fa-eye pointer"></i></a></td>
|
|
</tr>
|
|
<tr v-show="metaData.total === 0">
|
|
<td class="b-a b-grey" colspan="7">
|
|
<div class="row align-items-center justify-content-center p-t-50 p-b-50">
|
|
<div class="col-10">
|
|
<div class="row align-items-center justify-content-center hint-text">
|
|
<div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col">
|
|
<div class="row m-t-20">
|
|
<div class="col">
|
|
<p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-5 align-items-center justify-content-center hide">
|
|
<div class="col">
|
|
<small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col d-flex justify-content-center flex-column">
|
|
<span>Showing {{metaData.from}} to {{metaData.to}} of {{metaData.total}} entries</span>
|
|
</div>
|
|
<div class="col d-flex justify-content-end align-items-center">
|
|
<div class="m-r-10">Show</div>
|
|
<div class="row m-b-5 m-r-10">
|
|
<div class="col p-r-0">
|
|
<div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="perPageFilterDropDownStatus = !perPageFilterDropDownStatus">
|
|
<div class="row">
|
|
<div class="col p-t-5 p-b-5 fs-9">
|
|
{{filters.per_page}}
|
|
</div>
|
|
<div class="col-auto b-l b-success">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa" :class="[{'fa-angle-down': !perPageFilterDropDownStatus}, {'fa-angle-up': perPageFilterDropDownStatus}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-primary" :class="[{'hide': !perPageFilterDropDownStatus}]" style="top: 100%; right: 0; z-index: 1;">
|
|
<div class="row text-left no-margin bg-white">
|
|
<div class="col no-padding">
|
|
<div class="row no-margin" v-for="num in pageFilterArray">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': filters.per_page === num}, {'text-white': filters.per_page === num}, {'hover-primary': filters.per_page !== num}, {'pointer': filters.per_page !== num}]" @click="updatePerPageFilter(num)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="font-heading">{{num}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>entries</div>
|
|
</div>
|
|
<div class="col-auto" v-show="filters.per_page < metaData.total">
|
|
<pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
section: 'ListOrderTableSection',
|
|
emptyListSection: false,
|
|
pageFilterArray: [2, 5, 10, 20, 50],
|
|
perPageFilterDropDownStatus: false,
|
|
orderStatus: 'Active',
|
|
orderStatusFilterArray: ['Active', 'Complete', 'Pending Verification', 'Cancelled'],
|
|
orderStatusFilterDropDownStatus: false,
|
|
filters: {
|
|
per_page: 2,
|
|
status_in: [1],
|
|
with_packing_lists: true,
|
|
reference_like: '',
|
|
order_by: {
|
|
column: 'id',
|
|
DESC: false,
|
|
},
|
|
},
|
|
metaData: {
|
|
from: null,
|
|
to: null,
|
|
total: null,
|
|
current_page: null,
|
|
},
|
|
}
|
|
},
|
|
created(){
|
|
this.setDecoratorDefault();
|
|
this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});
|
|
},
|
|
computed: {
|
|
pendingList () {
|
|
return this.$store.getters.isInCompleteQueue(this.section);
|
|
}
|
|
},
|
|
watch: {
|
|
pendingList(inComplete){
|
|
if(inComplete){
|
|
this.fetchList();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
fetchList(){
|
|
let listDecorators = this.$store.getters.getListDetails(this.section);
|
|
this.submit(this.route('api.order.list') + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters), 'get', this.section, false, false)
|
|
},
|
|
updateOrderBy(field) {
|
|
field == this.filters.order_by.column ? this.filters.order_by.DESC = !this.filters.order_by.DESC : '';
|
|
this.filters.order_by.column = field;
|
|
this.updateFilters(this.filters);
|
|
},
|
|
updateOrderStatusFilter(status) {
|
|
this.orderStatusFilterDropDownStatus = false;
|
|
this.orderStatus = status;
|
|
|
|
switch(status) {
|
|
case 'Active':
|
|
this.filters.status_in = [2];
|
|
break;
|
|
|
|
case 'Complete':
|
|
this.filters.status_in = [3];
|
|
break;
|
|
|
|
case 'Pending Verification':
|
|
this.filters.status_in = [1];
|
|
break;
|
|
|
|
case 'Cancelled':
|
|
this.filters.status_in = [4, 5, 6];
|
|
break;
|
|
}
|
|
|
|
this.updateFilters(this.filters);
|
|
},
|
|
updatePerPageFilter(number) {
|
|
this.perPageFilterDropDownStatus = false;
|
|
this.filters.per_page = parseInt(number);
|
|
this.updateFilters(this.filters);
|
|
},
|
|
updateFilters(filters){
|
|
this.filters = filters;
|
|
this.setDecoratorDefault();
|
|
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});
|
|
this.$refs.pagination.makePagination(response.payload.meta, response.payload.links);
|
|
this.metaData = response.payload.meta;
|
|
},
|
|
resetFilter() {
|
|
this.filters.order_by.column = 'id';
|
|
this.filters.order_by.DESC = false;
|
|
this.filters.reference_like = '';
|
|
this.updateFilters(this.filters);
|
|
},
|
|
}
|
|
}
|
|
</script>
|