mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-22 05:54:08 +00:00
edmondlang
697 lines
40 KiB
Vue
697 lines
40 KiB
Vue
<style scoped>
|
|
.percentageContainer{
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid #444;
|
|
position: relative;
|
|
}
|
|
.percentageInner{
|
|
position: absolute;
|
|
width: calc(100% - 2px);
|
|
height: calc(100% - 2px);
|
|
margin: 1px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
bottom: 0;
|
|
}
|
|
.percentageInnerText{
|
|
position: absolute;
|
|
width: calc(100% - 2px);
|
|
height: calc(100% - 2px);
|
|
margin: 1px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* timeline */
|
|
ul.timeline_ul {
|
|
list-style-type: none;
|
|
position: relative;
|
|
}
|
|
|
|
ul.timeline_ul:before {
|
|
content: ' ';
|
|
background: #d4d9df;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 21px;
|
|
width: 2px;
|
|
height: 100%;
|
|
z-index: 1;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
ul.timeline_ul>li {
|
|
margin: 10px 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
ul.timeline_ul>li:before {
|
|
content: ' ';
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 12px;
|
|
z-index: 1;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
margin-top: 3px;
|
|
opacity: 12%;
|
|
}
|
|
ul.timeline_ul>li .row:before {
|
|
content: ' ';
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 16px;
|
|
z-index: 2;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
ul.timeline_ul>li.bg-blue:before,
|
|
ul.timeline_ul>li.bg-blue .row:before {
|
|
background: #00CFE8;
|
|
}
|
|
|
|
ul.timeline_ul>li.bg-purple:before,
|
|
ul.timeline_ul>li.bg-purple .row:before {
|
|
background: #7367F0;
|
|
}
|
|
|
|
ul.timeline_ul>li.bg-orange:before,
|
|
ul.timeline_ul>li.bg-orange .row:before {
|
|
background: #FF9F43;
|
|
}
|
|
|
|
/* delivery_status_ul */
|
|
.delivery_status{
|
|
position: relative;
|
|
}
|
|
|
|
.delivery_status hr{
|
|
background: #A6A6A6;
|
|
display: block;
|
|
height: 2px;
|
|
width: 100%;
|
|
}
|
|
|
|
.delivery_status .overlay12 {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
justify-content: space-between;
|
|
align-self: center;
|
|
display: flex;
|
|
}
|
|
|
|
.delivery_status .overlay12 .dot {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
|
|
border: 2px solid #A6A6A6;
|
|
background-color: white;
|
|
}
|
|
|
|
.delivery_status .overlay12 .dot.checked {
|
|
border: 2px solid #912873;
|
|
background-color: #912873;
|
|
position:relative;
|
|
}
|
|
|
|
.delivery_status .overlay12 .dot.checked::before {
|
|
font-family: FontAwesome;
|
|
position:absolute;
|
|
top:0;
|
|
content: "\f00c";
|
|
color: white;
|
|
|
|
margin-left: 3px;
|
|
display: block;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.line_div{
|
|
height: 36px;
|
|
}
|
|
|
|
.status_p{
|
|
top: 25px;
|
|
left: -40px;
|
|
width: 100px;
|
|
}
|
|
</style>
|
|
<template>
|
|
<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}}</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}}</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">Guangzhou, China</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">Port Klang, Malaysia</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">Greenway Logistic</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 h-100 p-l-10 p-r-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="rescheduleDate">Reschedule Date form</a>
|
|
</li>
|
|
<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-40 m-b-0">
|
|
<div class="col">
|
|
<h5 class="bold m-b-40">Overview</h5>
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<div class="percentageContainer rounded bg-master-lightest b-grey">
|
|
<div class="percentageInner bg-primary rounded-bottom" :style="{ height: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
|
|
<div class="percentageInnerText muted">
|
|
{{ Math.round((loadedCBM / CBMcapacity) * 100, 2) }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<p class="m-b-5 muted">Container No #{{container.container_number}}</p>
|
|
<h5 class="m-b-5 m-t-0 bold">Your order(s) are ready for shipment</h5>
|
|
<p class="m-b-5 m-t-0 muted">Total 1 package(s) in this container</p>
|
|
<p class="m-b-5 m-t-0">Loaded CBM: <span class="text-complete bold fs-20">{{loadedCBM}}</span></p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a class="btn btn-sm btn-danger b-rad-none all-caps requestModal rounded" data-type="rescheduleDate">Reschedule Date form</a>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-40">
|
|
<div class="col">
|
|
<div class="row m-l-30 m-r-30 m-b-50">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="delivery_status">
|
|
<div class="line_div w-100 justify-content-center align-content-center d-flex">
|
|
<hr>
|
|
</div>
|
|
<div class="overlay12 p-l-0">
|
|
<div class="dot checked">
|
|
<div class="position-relative">
|
|
<div class="status_p text-center position-absolute">Warehouse-CN(K2921)</div>
|
|
</div>
|
|
</div>
|
|
<div class="dot requestModal pointer disabled" data-type="rescheduleDate">
|
|
<div class="position-relative">
|
|
<div class="status_p text-center position-absolute">Loading<br>Port</div>
|
|
</div>
|
|
</div>
|
|
<div class="dot">
|
|
<div class="position-relative">
|
|
<div class="status_p text-center position-absolute">In<br>Transit</div>
|
|
</div>
|
|
</div>
|
|
<div class="dot">
|
|
<div class="position-relative">
|
|
<div class="status_p text-center position-absolute">Discharge<br>Port</div>
|
|
</div>
|
|
</div>
|
|
<div class="dot">
|
|
<div class="position-relative">
|
|
<div class="status_p text-center position-absolute">Warehouse-MY(M2525)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-50">
|
|
<div class="col">
|
|
<input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Search by Package Name, Package Number...">
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="btn rounded btn-default m-r-10 p-t-10 p-b-10">
|
|
Print Custom
|
|
</div>
|
|
<div class="btn rounded btn-default m-r-10 p-t-10 p-b-10">
|
|
Export List
|
|
</div>
|
|
<div class="btn rounded btn-primary p-t-10 p-b-10">
|
|
<div><i class="fa fa-plus m-r-10"></i>Add Container</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row m-t-50">
|
|
<div class="col">
|
|
<div class="row" v-for="packingList in container.packing_lists">
|
|
<div class="col">
|
|
<div class="row m-t-10 b-a rounded b-grey m-l-5 m-r-5 padding-10 p-t-20 p-b-20" v-for="package_item in packingList.packages">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto hide">
|
|
<svg width="97" height="80" viewBox="0 0 97 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M60.087 79.4989L0.178711 59.8679V13.3069L60.087 26.6089V79.4989Z" fill="#D3B875"/>
|
|
<path d="M96.2289 58.07L60.0823 79.5V26.61L96.2289 8.46899V58.07Z" fill="#B78C58"/>
|
|
<path d="M0.175781 13.3119L36.7404 0.00390625L96.2288 8.47189L60.087 26.6119L0.175781 13.3119Z" fill="#F2D08B"/>
|
|
<path opacity="0.6" d="M17.5637 6.97882L74.0242 19.8788L75.1844 40.9638L77.1729 43.9878L78.1566 40.0988L79.4932 41.3088L80.8192 38.5438L81.8135 40.0988L80.5344 16.3498L22.5418 5.16382L17.5637 6.97882Z" fill="#846B3D"/>
|
|
<path opacity="0.6" d="M24.7881 18.7679L60.0842 3.31787L66.0891 4.17287L32.2254 20.4189L24.7881 18.7679Z" fill="#846B3D"/>
|
|
<path d="M24.7881 18.7729V67.935L32.2254 70.3719V20.424L24.7881 18.7729Z" fill="#846B3D"/>
|
|
<path d="M73.3618 66.1058C73.3618 66.6788 72.9524 66.8748 72.3675 67.1428L66.2369 70.3708C65.4085 70.8008 65.2427 69.9068 65.2427 69.3338V59.4828C65.2427 58.9098 65.6013 58.7748 66.2369 58.4458L72.3675 55.2178C73.6657 54.5268 73.2764 55.9318 73.3618 58.5878V66.1058Z" fill="white"/>
|
|
<path d="M65.8706 60.4519L71.9552 57.3679V57.7219L65.8706 60.9129V60.4519Z" fill="#4C402C"/>
|
|
<path d="M65.8706 61.668L71.9552 58.584V58.939L65.8706 62.132V61.668Z" fill="#4C402C"/>
|
|
<path d="M65.8706 63.0308L71.9552 59.9468V60.3018L65.8706 63.4928V63.0308Z" fill="#4C402C"/>
|
|
<path d="M66.0134 66.7698L69.8601 64.8198L69.9081 65.1888L66.0144 67.2308L66.0134 66.7698Z" fill="#4C402C"/>
|
|
<path d="M66.0134 67.6949L69.8601 65.7449L69.9081 66.1139L66.0144 68.1559L66.0134 67.6949Z" fill="#4C402C"/>
|
|
<path d="M66.0134 68.6319L69.8601 66.6819L69.9081 67.0509L66.0144 69.0929L66.0134 68.6319Z" fill="#4C402C"/>
|
|
</svg>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="bold normal-text">Customer: <a :href="route('customer.profile', packingList.order.company_module.marking)">{{packingList.order.company_module.marking}}</a></p>
|
|
<p class="bold normal-text">Order: <a :href="route('order.show', packingList.order.reference)">{{packingList.order.reference}}</a></p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="col-auto" v-if="!packingList.transport">
|
|
<div class="btn btn-xs btn-success pointer" v-if="packingList.status === 5"><i class="fa fa-check m-r-5"></i>Release</div>
|
|
<div class="btn btn-xs btn-danger pointer" v-if="packingList.status !== 5"><i class="fa fa-hand-paper-o m-r-5"></i>Hold</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="normal-text bold">{{package_item.description}} <span class="muted normal m-l-10">(Quantity: {{package_item.quantity}})</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="large-text">{{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}}</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<p class="small-text bold">{{package_item.length}}x{{package_item.width}}x{{package_item.height}} CM / <span class="text-complete bold fs-20">{{ (Math.ceil((package_item.cbm) * 1000) / 1000).toFixed(3)}}CBM</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="small-text muted">Remark</p>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-20">
|
|
<div class="col">
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Add Remarks</div>
|
|
<div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Edit Address</div>
|
|
<div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Edit Package</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editContainer">
|
|
<edit-container-form-component :section="section" :data="container"></edit-container-form-component>
|
|
</modal-component>
|
|
|
|
<div class="row m-t-10">
|
|
<div class="col">
|
|
<h5 class="fs-20 bold">Create Delivery Packing List</h5>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-md-8" v-show="!$store.getters.isShowing('createDeliveryPackingListFormSection')">
|
|
<div class="row">
|
|
<div class="col b-a b-grey rounded m-l-10 m-r-20">
|
|
<div class="row">
|
|
<div class="col b-b b-grey bg-master-lightest">
|
|
<div class="row">
|
|
<div class="col padding-20">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto pointer align-items-center" @click="chooseAllPackingList()">
|
|
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectAllPackingList, 'fa-check-square': selectAllPackingList, 'text-primary':selectAllPackingList}" ></i>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="no-margin semi-bold">Order No</h5>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="no-margin semi-bold">Customer Marking</h5>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="no-margin semi-bold">No. Packgaes</h5>
|
|
</div>
|
|
<div class="col">
|
|
<h5 class="no-margin semi-bold">CBM</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-for="packingList in container.packing_lists">
|
|
<div class="col">
|
|
<list-packagelist-form-component :data="packingList" v-on:input="updateList($event)"></list-packagelist-form-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<div class="col-atuo">
|
|
<div class="btn rounded btn-primary btn-lg p-t-10 p-b-10 m-t-10 m-r-20" @click="$store.dispatch('toggleSection', {name: 'createDeliveryPackingListFormSection', status: true})">Next <i class="fa fa-arrow-right m-l-10"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-8" v-show="$store.getters.isShowing('createDeliveryPackingListFormSection')">
|
|
<create-delivery-packinglist-form-component :section="'containerListSection'" :data="selectedPackageList"></create-delivery-packinglist-form-component>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-4 mt-2 mt-md-0">
|
|
<div class="row align-items-center">
|
|
<div class="col b-a b-grey rounded padding-25">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="semi-bold muted">Summary</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<h6 class="semi-bold text-primary">{{selectedPackageList.length}} Packing List Selected</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-show="selectedPackageList.length != 0">
|
|
<div class="col">
|
|
<div class="row" v-for="selectedPackageList in selectedPackageList">
|
|
<div class="col">
|
|
<h6 class="no-margin">{{selectedPackageList.order.reference}}</h6>
|
|
</div>
|
|
<div class="col">
|
|
<h6 class="no-margin">noPackages</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<h6 class="no-margin">Total Cbm</h6>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="normal m-t-5 m-b-5">Total Packages</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<h6 class="normal m-t-5 m-b-5">RM 212.15</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="normal m-t-5 m-b-5">Total Address</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<h6 class="normal m-t-5 m-b-5">RM 41.25</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="normal m-t-5 m-b-5">Total Cbm</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<h6 class="normal m-t-5 m-b-5">RM 0.00</h6>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="normal">Total Payments</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<h6 class="text-primary bold">RM 3300.00</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row m-t-10">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto padding-5 m-l-15 m-r-15" :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 class="col-auto padding-5 m-l-15 m-r-15" :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>
|
|
<div class="row p-l-10 p-r-10">
|
|
<div class="col rounded padding-15">
|
|
<div class="row" v-if="tabShowing === 'Timeline'">
|
|
<div class="col">
|
|
<ul class="timeline_ul">
|
|
<li class="bg-purple">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin bold">Item Returned</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<p class="muted no-margin">5 September 2021</p>
|
|
</div>
|
|
</div>
|
|
<p>Item has been returned due to mismatch</p>
|
|
</li>
|
|
<li class="bg-orange">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin bold">Client Report</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<p class="muted no-margin">21 August 2021</p>
|
|
</div>
|
|
</div>
|
|
<p>Client report order number #012AS12W</p>
|
|
</li>
|
|
<li class="bg-blue">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin bold">Item Cancelled</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<p class="muted no-margin">8 May 2021</p>
|
|
</div>
|
|
</div>
|
|
<p>Item has been cancelled by clients number #012ASJ21</p>
|
|
</li>
|
|
<li class="bg-blue">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin bold">Item Cancelled</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<p class="muted no-margin">8 May 2021</p>
|
|
</div>
|
|
</div>
|
|
<p>Item has been cancelled by clients number #012ASJ21</p>
|
|
</li>
|
|
<li class="bg-orange">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin bold">Client Report</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<p class="muted no-margin">21 August 2021</p>
|
|
</div>
|
|
</div>
|
|
<p>Client report order number #012AS12W</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</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',
|
|
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), 'get', this.section, false, false)
|
|
},
|
|
successHandler(response){
|
|
this.$store.dispatch('completeList', {'name': this.section, 'data': []});
|
|
this.isLoading = false;
|
|
this.container = response.payload.data;
|
|
},
|
|
updateList(packageList){
|
|
this.selectedPackageList.includes(packageList) ? this.selectedPackageList.splice(this.selectedPackageList.indexOf(packageList), 1) : this.selectedPackageList.push(packageList);
|
|
this.selectedPackageList.length === this.container.packing_lists.length ? this.selectAllPackingList = true : this.selectAllPackingList = false;
|
|
},
|
|
chooseAllPackingList() {
|
|
this.selectAllPackingList = !this.selectAllPackingList;
|
|
this.selectedPackageList = [];
|
|
if (this.selectAllPackingList) {
|
|
this.selectedPackageList = this.container.packing_lists;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script> |