mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
add page orders table
This commit is contained in:
edmondlang
@@ -643,6 +643,10 @@ hr{
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.not-allowed {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
/* Labels
|
||||
------------------------------------
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col no-margin">
|
||||
<div class="row m-b-15">
|
||||
<div class="col-sm-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">
|
||||
<label>Order Status:</label>
|
||||
<div class="col">
|
||||
<div class="row m-b-5 m-r-10">
|
||||
<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(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>
|
||||
@@ -82,6 +82,9 @@
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.text-complete {
|
||||
color: #009add;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
|
||||
|
||||
@extends('layouts.base_portal')
|
||||
@section('inner_content')
|
||||
{{--<div class="row m-b-20" v-if="$store.getters.isAdmin">--}}
|
||||
{{--<div class="col"></div>--}}
|
||||
{{--<div class="col-auto">--}}
|
||||
{{--<a :href="route('orders.refresh')"><div class="btn btn-sm btn-warning all-caps b-rad-none pointer"><i class="fa fa-refresh m-r-10"></i>Refresh Orders</div></a>--}}
|
||||
{{--</div>--}}
|
||||
{{--</div>--}}
|
||||
{{--<order-search-section-component v-show="!$store.getters.isShowing('createOrderForm')"></order-search-section-component>--}}
|
||||
<orders-table-section-component></orders-table-section-component>
|
||||
@endsection
|
||||
@@ -63,6 +63,10 @@ Route::get('/orders', function () {
|
||||
return view('pages.orders.index');
|
||||
})->name('orders');
|
||||
|
||||
Route::get('/orders-table', function () {
|
||||
return view('pages.orders.table');
|
||||
})->name('ordersTable');
|
||||
|
||||
Route::get('/order/show/{order_number}', function ($orderNumber) {
|
||||
return view('pages.orders.profile', ['id' => $orderNumber]);
|
||||
})->name('order.show');
|
||||
|
||||
Reference in New Issue
Block a user