mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-20 13:04:11 +00:00
improve loading speed for container page
This commit is contained in:
omair saleh
@@ -5,6 +5,7 @@ namespace App\Http\Resources;
|
||||
use App\Classes\ValueObjects\Constants\ContainerTypes;
|
||||
use App\Models\Remark;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
|
||||
class ContainerResource extends JsonResource
|
||||
{
|
||||
@@ -24,11 +25,13 @@ class ContainerResource extends JsonResource
|
||||
'seal_reference' => $this->seal_reference,
|
||||
'loading_date' => $this->loading_date ? $this->loading_date->format('d-m-Y') : $this->loading_date,
|
||||
'transport' => new TransportResource($this->transports()->first()),
|
||||
'packing_lists' => PackingListResource::collection($this->whenLoaded('packingLists', function(){
|
||||
return $this->packingLists()->whereHas('packages')->get();
|
||||
})),
|
||||
'packages_count' => $this->packages->sum('quantity'),
|
||||
'total_cbm' => $this->packages()->sum(DB::raw('(width/100) * (height/100) * (length/100) * quantity')),
|
||||
'remarks' => RemarkResource::collection($this->remarks),
|
||||
'status' => $this->status
|
||||
'status' => $this->status,
|
||||
'packing_lists' => $this->whenLoaded('packingLists', PackingListResource::collection($this->whenLoaded('packingLists', function(){
|
||||
return $this->packingLists()->whereHas('packages')->get();
|
||||
})))
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,11 +28,11 @@
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="no-margin fs-10 all-caps">Packages</p>
|
||||
<p class="no-margin">{{ item.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.quantity + total, 0), 0) }}</p>
|
||||
<p class="no-margin">{{ item.packages_count }}</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="no-margin fs-10 all-caps">Loaded CBM</p>
|
||||
<p class="no-margin">{{ (Math.ceil((item.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.cbm + total, 0), 0)) * 1000) / 1000).toFixed(3) }}</p>
|
||||
<p class="no-margin">{{ (Math.ceil(item.total_cbm * 1000) / 1000).toFixed(3) }}</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="no-margin fs-10 all-caps">Status</p>
|
||||
@@ -49,52 +49,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-show="expanded">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row align-items-center p-t-10 p-b-10 b-t b-grey muted all-caps fs-10">
|
||||
<div class="col-2">Marking</div>
|
||||
<div class="col-1 text-center">Quantity</div>
|
||||
<div class="col-1">CBM</div>
|
||||
<div class="col-1 text-center">status</div>
|
||||
<div class="col-3">Delivery Details</div>
|
||||
<div class="col">Delivery Date</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row align-items-center p-t-10 p-b-10 b-t b-grey" v-for="(packingList, index) in item.packing_lists">
|
||||
<div class="col-2"><a :href="route('customer.profile', packingList.order.company_module.marking)">{{packingList.order.company_module.marking}}</a>/<a :href="route('order.show', packingList.order.reference)">{{packingList.order.reference}}</a></div>
|
||||
<div class="col-1 text-center">{{packingList.packages.reduce((total, obj) => obj.quantity + total, 0)}}</div>
|
||||
<div class="col-1">{{ (Math.ceil((packingList.packages.reduce((total, obj) => obj.cbm + total, 0)) * 1000) / 1000).toFixed(3)}}</div>
|
||||
<div class="col-1 bold text-center" :class="{'text-danger': packingList.status === 5, 'text-success': packingList.status !== 5}">{{packingList.transport ? 'Delivery' : packingList.status === 5 ? 'On Hold' : 'Release'}}</div>
|
||||
<div class="col-3">{{packingList.order.address.contact ? packingList.order.address.contact.reference+' '+packingList.order.address.contact.phone : ''}}<br>{{packingList.order.address.street_one+' '+(packingList.order.address.street_two ? packingList.order.address.street_two : '')+', '+ packingList.order.address.district.name+', '+packingList.order.address.post_code+' '+packingList.order.address.state.name+', '+packingList.order.address.country.name}}<br>{{packingList.order.address.remark ? packingList.order.address.remark.content: ''}}</div>
|
||||
<div class="col">
|
||||
<p class="no-margin">{{packingList.transport ? packingList.transport.current_schedule.eta : 'n/a'}}</p>
|
||||
</div>
|
||||
<div class="col-auto text-right" v-if="!packingList.transport">
|
||||
<div class="btn btn-xs btn-success pointer" v-if="packingList.status === 5" @click="updateStatus(index, item.status === 1 ? 1 : 2)"><i class="fa fa-check m-r-5"></i>Release</div>
|
||||
<div class="btn btn-xs btn-danger pointer" v-if="packingList.status !== 5" @click="updateStatus(index, 5)"><i class="fa fa-hand-paper-o m-r-5"></i>Hold</div>
|
||||
</div>
|
||||
<div class="col-auto hide">
|
||||
<a class="btn btn-xs btn-warning all-caps b-rad-none pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Report <i class="fa fa-download m-r-10"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" :href="route('report.customclearance',packingList.order.id)">Origin custom cleared</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<packing-list-component :data="item" v-if="expanded"></packing-list-component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<loading-component v-if="isLoading" style="height: 200px; top: 0;"></loading-component>
|
||||
<div class="row" v-show="!isLoading">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row align-items-center p-t-10 p-b-10 b-t b-grey muted all-caps fs-10">
|
||||
<div class="col-2">Marking</div>
|
||||
<div class="col-1 text-center">Quantity</div>
|
||||
<div class="col-1">CBM</div>
|
||||
<div class="col-1 text-center">status</div>
|
||||
<div class="col-3">Delivery Details</div>
|
||||
<div class="col">Delivery Date</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row align-items-center p-t-10 p-b-10 b-t b-grey" v-for="(packingList, index) in packingLists">
|
||||
<div class="col-2"><a :href="route('customer.profile', packingList.order.company_module.marking)">{{packingList.order.company_module.marking}}</a>/<a :href="route('order.show', packingList.order.reference)">{{packingList.order.reference}}</a></div>
|
||||
<div class="col-1 text-center">{{packingList.packages.reduce((total, obj) => obj.quantity + total, 0)}}</div>
|
||||
<div class="col-1">{{ (Math.ceil((packingList.packages.reduce((total, obj) => obj.cbm + total, 0)) * 1000) / 1000).toFixed(3)}}</div>
|
||||
<div class="col-1 bold text-center" :class="{'text-danger': packingList.status === 5, 'text-success': packingList.status !== 5}">{{packingList.transport ? 'Delivery' : packingList.status === 5 ? 'On Hold' : 'Release'}}</div>
|
||||
<div class="col-3">{{packingList.order.address.contact ? packingList.order.address.contact.reference+' '+packingList.order.address.contact.phone : ''}}<br>{{packingList.order.address.street_one+' '+(packingList.order.address.street_two ? packingList.order.address.street_two : '')+', '+ packingList.order.address.district.name+', '+packingList.order.address.post_code+' '+packingList.order.address.state.name+', '+packingList.order.address.country.name}}<br>{{packingList.order.address.remark ? packingList.order.address.remark.content: ''}}</div>
|
||||
<div class="col">
|
||||
<p class="no-margin">{{packingList.transport ? packingList.transport.current_schedule.eta : 'n/a'}}</p>
|
||||
</div>
|
||||
<div class="col-auto text-right" v-if="!packingList.transport">
|
||||
<div class="btn btn-xs btn-success pointer" v-if="packingList.status === 5" @click="updateStatus(index, item.status === 1 ? 1 : 2)"><i class="fa fa-check m-r-5"></i>Release</div>
|
||||
<div class="btn btn-xs btn-danger pointer" v-if="packingList.status !== 5" @click="updateStatus(index, 5)"><i class="fa fa-hand-paper-o m-r-5"></i>Hold</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
import LoadingComponent from "../../general/elements/LoadingComponent";
|
||||
export default {
|
||||
components: {LoadingComponent},
|
||||
data(){
|
||||
return {
|
||||
isLoading: true,
|
||||
packingLists: []
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.submit(route('api.packing_list.container.show', this.item.id), 'get', this.section, false, false);
|
||||
},
|
||||
methods: {
|
||||
successHandler(response){
|
||||
this.packingLists = response.payload.data.packing_lists;
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -87,7 +87,7 @@
|
||||
<div class="col bg-master-lightest p-1 p-sm-4">
|
||||
<div class="row tabsContainer tabContent" tab-name="active">
|
||||
<div class="col">
|
||||
<list-component section="activeContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'with_packing_lists': true, 'status_in': [1], order_by: {column: 'loading_date', DESC: true}}">
|
||||
<list-component section="activeContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'status_in': [1], order_by: {column: 'loading_date', DESC: true}}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<container-component :data="data"></container-component>
|
||||
</template>
|
||||
@@ -96,7 +96,7 @@
|
||||
</div>
|
||||
<div class="row tabsContainer tabContent hide" tab-name="arrived">
|
||||
<div class="col">
|
||||
<list-component section="arrivedContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'with_packing_lists': true, 'status_in': [3], 'has_pending_delivery': true, order_by: {column: 'loading_date', DESC: true}}">
|
||||
<list-component section="arrivedContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'status_in': [3], 'has_pending_delivery': true, order_by: {column: 'loading_date', DESC: true}}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<container-component :data="data"></container-component>
|
||||
</template>
|
||||
@@ -105,7 +105,7 @@
|
||||
</div>
|
||||
<div class="row tabsContainer tabContent hide" tab-name="complete">
|
||||
<div class="col">
|
||||
<list-component section="completeContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'with_packing_lists': true, 'status_in': [3], 'has_pending_delivery': false, order_by: {column: 'loading_date', DESC: true}}">
|
||||
<list-component section="completeContainerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'status_in': [3], 'has_pending_delivery': false, order_by: {column: 'loading_date', DESC: true}}">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<container-component :data="data"></container-component>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user