mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
update container and container remarks
This commit is contained in:
edmondlang
@@ -23,17 +23,25 @@ class ContainerResource extends JsonResource
|
||||
'container_specification' => ContainerTypes::CONTAINER_SPECIFICATION[$this->container_type],
|
||||
'container_number' => $this->container_number,
|
||||
'seal_reference' => $this->seal_reference,
|
||||
'loading_date' => $this->loading_date ? $this->loading_date->format('d-m-Y') : $this->loading_date,
|
||||
'loading_date' => optional($this->loading_date)->format('d-m-Y'),
|
||||
'transport' => new TransportResource($this->transports()->first()),
|
||||
'packages_count' => $this->packages()->where('packages.type', '!=', 2)->sum('quantity'),
|
||||
'total_cbm' => $this->packages()->sum(DB::raw('(width/100) * (height/100) * (length/100) * quantity')),
|
||||
'remarks' => RemarkResource::collection($this->remarks),
|
||||
'status' => $this->status,
|
||||
'packing_lists' => $this->whenLoaded('packingLists', PackingListResource::collection($this->whenLoaded('packingLists', function(){
|
||||
return $this->packingLists()->get()->sortBy(function ($packingList) {
|
||||
return $packingList->owner->company_module_id;
|
||||
});
|
||||
})))
|
||||
'packing_lists' => $this->shouldIncludePackingListData($request) ? $this->getSortedPackingLists() : null,
|
||||
];
|
||||
}
|
||||
|
||||
protected function shouldIncludePackingListData($request)
|
||||
{
|
||||
return (isset($request->all()['with_packing_list_data']) && ($request->all()['with_packing_list_data'] == false)) ? false : true;
|
||||
}
|
||||
|
||||
protected function getSortedPackingLists()
|
||||
{
|
||||
return $this->whenLoaded('packingLists', PackingListResource::collection(
|
||||
$this->packingLists()->get()->sortBy(fn ($packingList) => $packingList->owner->company_module_id)
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="row m-t-5">
|
||||
<div class="row m-t-5" @keyup.enter="submitForm">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.parameters.content">
|
||||
<input type="text" class="form-control fs-12" placeholder="Write your comments..." v-model.trim="parameters.content">
|
||||
@@ -42,7 +42,7 @@
|
||||
submitForm() {
|
||||
this.submit(this.data ? this.route('api.remark.update', this.data.id) : this.route('api.packing_list.container.remark.create', this.id), this.data ? 'put' : 'post', this.section, true, true);
|
||||
this.$emit('submit')
|
||||
}
|
||||
},
|
||||
},
|
||||
mixins: [modalFormHandler]
|
||||
}
|
||||
|
||||
+229
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row" v-if="container">
|
||||
<div class="col">
|
||||
<div class="row align-items-center m-t-10">
|
||||
<div class="col bg-master-lightest rounded padding-20 m-l-10 m-r-10">
|
||||
<div class="row d-flex justify-content-between align-items-center">
|
||||
<div class="col b-r">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="m-b-0 large-text normal m-b-10">Container Number</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="m-t-0 m-b-0 fs-20 bold">{{ container.container_reference }}</p>
|
||||
<p class="m-t-0 m-b-0 small-text">{{ container.container_number }}</p>
|
||||
<p class="m-t-0 m-b-0 small-text">seal number</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="fs-10 bold m-b-0">ETD</p>
|
||||
<p class="small-text m-t-0">{{ container.transport.current_schedule.etd }} <a class="b-rad-none all-caps requestModal" data-type="rescheduleDate"><i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="fs-10 bold m-b-0">ETA</p>
|
||||
<p class="small-text m-t-0">{{ container.transport.current_schedule.eta }} <a class="b-rad-none all-caps requestModal" data-type="rescheduleDate"><i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="fs-10 bold m-b-0">Location</p>
|
||||
<p class="small-text m-t-0">-tbc-</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="fs-10 bold m-b-0">Destination</p>
|
||||
<p class="small-text m-t-0">-tbc-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="fs-10 bold m-b-0">Container Type</p>
|
||||
<p class="small-text m-t-0">{{ container.container_specification.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="fs-10 bold m-b-0">Owner</p>
|
||||
<p class="small-text m-t-0">-tbc-</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-10 m-b-50">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row h-100">
|
||||
<div class="col">
|
||||
<h5 class="m-b-5 large-text bold l-20">Tracking:</h5>
|
||||
<div class="row padding-10">
|
||||
<div class="col rounded bg-master-lighter padding-15">
|
||||
<li class="m-t-10">
|
||||
<a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
|
||||
data-type="containerDepature">Container Departure</a>
|
||||
</li>
|
||||
<li class="m-t-10">
|
||||
<a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
|
||||
data-type="containerArrival">Arrival Date</a>
|
||||
</li>
|
||||
<li class="m-t-10">
|
||||
<a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
|
||||
data-type="containerUnpacking">Date of Unpacking</a>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
|
||||
type="rescheduleDate">
|
||||
<reschedule-date-form-component :section="section"
|
||||
:data="container"></reschedule-date-form-component>
|
||||
</modal-component>
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
|
||||
type="containerDepature">
|
||||
<container-depature-form-component :section="section"
|
||||
:data="container"></container-depature-form-component>
|
||||
</modal-component>
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
|
||||
type="containerArrival">
|
||||
<container-arrival-form-component :section="section"
|
||||
:data="container"></container-arrival-form-component>
|
||||
</modal-component>
|
||||
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
|
||||
type="containerUnpacking">
|
||||
<container-unpacking-form-container :section="section"
|
||||
:data="container"></container-unpacking-form-container>
|
||||
</modal-component>
|
||||
|
||||
<div class="row m-t-10">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-auto padding-5 m-l-15 m-r-15 pointer" :class="[{ 'text-primary': tabShowing === 'Comments' }, { 'b-b': tabShowing === 'Comments' }]" @click="tabShowing = 'Comments'">
|
||||
<h5 class="large-text bold l-20" :class="[{ 'text-primary': tabShowing === 'Comments' }]"> Comments</h5>
|
||||
</div>
|
||||
<!-- <div class="col-auto padding-5 m-l-15 m-r-15 pointer" :class="[{ 'text-primary': tabShowing === 'Timeline' }, { 'b-b': tabShowing === 'Timeline' }]" @click="tabShowing = 'Timeline'">
|
||||
<h5 class="large-text bold l-20" :class="[{ 'text-primary': tabShowing === 'Timeline' }]"> Activity Timeline</h5>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="row p-l-10 p-r-10">
|
||||
<div class="col rounded padding-15">
|
||||
<div class="row" v-if="tabShowing === 'Comments'">
|
||||
<div class="col">
|
||||
<div class="row" v-for="remarks in container.remarks">
|
||||
<div class="col">
|
||||
<container-comment-component :section="section" :data="remarks"></container-comment-component>
|
||||
</div>
|
||||
</div>
|
||||
<container-comment-form-component :section="section" :id="container.id"></container-comment-form-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="tabShowing === 'Timeline'">
|
||||
<div class="col">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
section: 'containerPofileSection',
|
||||
isLoading: true,
|
||||
container: null,
|
||||
expanded: false,
|
||||
CBMcapacity: 30,
|
||||
// tabShowing: 'Timeline',
|
||||
tabShowing: 'Comments',
|
||||
selectAllPackingList: false,
|
||||
selectedPackageList: [],
|
||||
deleteCommentId: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pendingQueue() {
|
||||
return this.$store.getters.isInCompleteQueue(this.section);
|
||||
},
|
||||
loadedCBM() {
|
||||
return (Math.ceil((this.container.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.cbm + total, 0), 0)) * 1000) / 1000).toFixed(3)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
pendingQueue(inComplete) {
|
||||
if (inComplete) {
|
||||
this.fetchCompany();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('updateListQueue', { 'name': this.section });
|
||||
},
|
||||
methods: {
|
||||
fetchCompany() {
|
||||
this.isLoading = true;
|
||||
this.submit(route('api.packing_list.container.show', this.id) + '?with_packing_list_data=0', 'get', this.section, false, false)
|
||||
},
|
||||
successHandler(response) {
|
||||
this.$store.dispatch('completeList', { 'name': this.section, 'data': [] });
|
||||
this.isLoading = false;
|
||||
this.container = response.payload.data;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -47,7 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row b-b b-grey p-b-20 align-items-center">
|
||||
<div class="row b-b b-grey p-b-20 align-items-center parentContainer">
|
||||
<div class="col">
|
||||
<div class="row m-b-5">
|
||||
<div class="col-auto">
|
||||
@@ -59,8 +59,46 @@
|
||||
<p class="no-margin bold">{{item.container ? item.container.transport.schedule_complete && status === 'Shipping' ? 'Custom Clearance' : status : status}}</p>
|
||||
</div>
|
||||
<div class="col-auto" v-if="$store.getters.isAdmin">
|
||||
<small class="fs-10 all-caps muted">Container</small>
|
||||
<p class="no-margin bold">{{item.container ? item.container.container_reference : '-'}}</p>
|
||||
<div class="row h-100 justify-content-center align-items-center">
|
||||
<div class="col">
|
||||
<small class="fs-10 all-caps muted">Container</small>
|
||||
<p class="no-margin bold">{{ item.container ? item.container.container_reference : '-' }}</p>
|
||||
</div>
|
||||
<div class="col" v-if="$store.getters.isAdmin && item.container">
|
||||
<i class="fa fa-comment fs-15 pointer requestModal" data-type="commentsModal"></i>
|
||||
<modal-component type="commentsModal" styleType="fill-in">
|
||||
<div class="row">
|
||||
<div class="col bg-white padding-40 b-rad-lg">
|
||||
<div class="row" v-if="item.container.remarks.length">
|
||||
<div class="col">
|
||||
<div class="row" v-for="remarks in item.container.remarks">
|
||||
<div class="col">
|
||||
<container-comment-component :section="section" :data="remarks"></container-comment-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center justify-content-center p-t-50 p-b-50" v-else>
|
||||
<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 Yet!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@extends('layouts.base_portal')
|
||||
@section('inner_content')
|
||||
<container-profile-section-component :id="{{$id}}"></container-profile-section-component>
|
||||
<!-- <container-profile-section-component :id="{{$id}}"></container-profile-section-component> -->
|
||||
<container-profile-v2-section-component :id="{{$id}}"></container-profile-v2-section-component>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user