mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
update container profile section component
This commit is contained in:
edmondlang
+397
-209
@@ -1,36 +1,4 @@
|
||||
<style scoped>
|
||||
.batteryContainer {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.batteryOuter {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #444;
|
||||
width: 25px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.batteryBump {
|
||||
border-radius: 2px;
|
||||
background-color: #444;
|
||||
margin: 2px;
|
||||
width: 1px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
#batteryLevel {
|
||||
border-radius: 2px;
|
||||
background-color: #73AD21;
|
||||
width: 18px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.percentageContainer{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
@@ -41,7 +9,6 @@
|
||||
position: absolute;
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
background: #73AD21;
|
||||
margin: 1px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -57,90 +24,196 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 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">
|
||||
<div class="col">
|
||||
<div class="row align-items-center">
|
||||
<div class="col bg-master-light rounded padding-20 m-l-10 m-r-10">
|
||||
<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-auto">
|
||||
<div class="col b-r">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="bold m-b-0">{{container.container_reference}}</h5>
|
||||
<p>{{container.container_number}}</p>
|
||||
<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">Container Type: {{container.container_type}}</p>
|
||||
<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-auto">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">ETD</h5>
|
||||
<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">
|
||||
<h5 class="m-t-0 large-text">{{container.transport.current_schedule.etd}}</h5>
|
||||
<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-auto">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">ETA</h5>
|
||||
<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">
|
||||
<h5 class="m-t-0 large-text">{{container.transport.current_schedule.eta}}</h5>
|
||||
<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-auto">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">Loading Place</h5>
|
||||
<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">
|
||||
<h5 class="m-t-0 large-text">SHANGHAI, CHINA</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">Destination port</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-t-0 large-text">PORT KLANG NORTH PORT, MALAYSIA</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto p-r-50">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">Status</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-t-0 large-text">{{container.status}}</h5>
|
||||
<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">
|
||||
@@ -171,123 +244,169 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="confirmStatus">
|
||||
<div class="row" style="width: 400px; margin: auto;">
|
||||
<div class="col bg-white padding-40 b-rad-lg">
|
||||
<div class="absolute" style="right: -25px; top: -10px;">
|
||||
<div class="icon-thumbnail btn-rounded icon-25 bg-master fs-12"><i class="fa fa-times text-white fs-12"></i></div>
|
||||
</div>
|
||||
<div class="row m-auto" style="width: 300px;">
|
||||
<div class="col text-center">
|
||||
<p>Plese upload required documents eg bill of lading, license, etc. before send container to port of loading</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-auto mt-10">
|
||||
<div class="col b-a b-rad-lg">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-auto padding-40">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-auto">
|
||||
<i class="fa fa-upload fs-50 m-t-10 text-master-lighter"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p>Drag and drop here</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-15">
|
||||
<div class="col">
|
||||
<div class="btn btn-complete w-100 btn-lg">Browse</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="btn btn-primary w-100 btn-lg">Next</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal-component> -->
|
||||
|
||||
<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-20">
|
||||
<div class="col bg-master-light rounded m-l-10 m-r-10">
|
||||
<div class="row align-items-center p-t-10 p-b-10 padding-10">
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="bold m-b-0">Package List</h5>
|
||||
<p>(Total 77 Package in this container)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="m-b-0">{{ Math.round((loadedCBM / CBMcapacity) * 100, 2) }}%</p>
|
||||
</div>
|
||||
<div class="batteryContainer">
|
||||
<div class="batteryOuter">
|
||||
<div id="batteryLevel" :style="{ width: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
|
||||
</div>
|
||||
<div class="batteryBump"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="btn btn-default">
|
||||
Add Package
|
||||
</div>
|
||||
<div class="btn btn-default">
|
||||
Export List
|
||||
</div>
|
||||
<div class="btn btn-default">
|
||||
Print Custom
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto p-r-30">
|
||||
<h5 class="m-b-0 large-text normal l-20">Custom Declaration Status</h5>
|
||||
<h5 class="m-t-0 text-right">__</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<div class="percentageContainer">
|
||||
<div class="percentageInner" :style="{ height: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
|
||||
<div class="percentageInnerText">
|
||||
<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">
|
||||
<div class="col padding-20 p-l-40 p-r-50">
|
||||
<!-- table -->
|
||||
<div class="row" v-for="packingList in container.packing_lists">
|
||||
<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="row b-a b-grey bg-master-lightest rounded align-items-center m-b-15 p-t-10 p-b-10" v-for="package_item in packingList.packages">
|
||||
<div class="col">{{package_item.description}}</div>
|
||||
<div class="col">Quantity: {{package_item.quantity}}</div>
|
||||
<div class="col">cbm:{{ package_item.cbm }}</div>
|
||||
<div class="col">Remark</div>
|
||||
<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>
|
||||
@@ -297,48 +416,124 @@
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="col" style="height: 300px;">
|
||||
<div class="row h-100">
|
||||
<div class="col">
|
||||
<h5 class="m-b-5 large-text bold l-20">Timeline:</h5>
|
||||
<div class="row h-100 p-l-10 p-r-10">
|
||||
<div class="col rounded bg-master-lighter padding-15">
|
||||
Timeline
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row h-100">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-5 large-text bold l-20">Comments:</h5>
|
||||
<div class="row p-l-10 p-r-10">
|
||||
<div class="col rounded bg-master-lighter padding-15">
|
||||
Comments
|
||||
</div>
|
||||
</div>
|
||||
<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 m-t-15">
|
||||
<div class="col">
|
||||
<div class="row p-l-10 p-r-10">
|
||||
<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">
|
||||
<h5 class="m-b-5 large-text bold l-20">Related documents:</h5>
|
||||
</div>
|
||||
<div class="co-auto">
|
||||
<div class="btn justify-content bg-master-light">
|
||||
<i class="fa fa-upload m-r-10" ></i>Upload Documents
|
||||
</div>
|
||||
<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 p-l-10 p-r-10">
|
||||
<div class="col rounded bg-master-lighter padding-15">
|
||||
documents
|
||||
</div>
|
||||
<div class="row" v-if="tabShowing === 'Comments'">
|
||||
<div class="col">
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<div class="row justify-content-center align-items-center m-l-5 m-b-15">
|
||||
<div class="col-auto b-a btn-rounded padding-10 p-l-15 p-r-15">
|
||||
<i class="fa fa-user"></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="no-margin muted bold fs-20">Jacob Arlington</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p>Adipisicing occaecat pariatur id sunt ullamco quis laborum irure ea excepteur enim dolore est. Deserunt do consectetur ex in dolor labore ad reprehenderit velit laboris officia ut.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<div class="row justify-content-center align-items-center m-l-5 m-b-15">
|
||||
<div class="col-auto b-a btn-rounded padding-10 p-l-15 p-r-15">
|
||||
<i class="fa fa-user"></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="no-margin muted bold fs-20">Jacob Arlington</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p>Adipisicing occaecat pariatur id sunt ullamco quis laborum irure ea excepteur enim dolore est. Deserunt do consectetur ex in dolor labore ad reprehenderit velit laboris officia ut.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Write your comments...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -365,11 +560,8 @@ import RescheduleDateFormComponent from './RescheduleDateFormComponent.vue';
|
||||
isLoading: true,
|
||||
container: null,
|
||||
expanded: false,
|
||||
totalCBM: 6,
|
||||
CBMcapacity: 30,
|
||||
svgLenght: 0,
|
||||
svgLenghtSquare: 0,
|
||||
confirmLanding: false,
|
||||
tabShowing: 'Timeline',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -400,10 +592,6 @@ import RescheduleDateFormComponent from './RescheduleDateFormComponent.vue';
|
||||
this.isLoading = false;
|
||||
this.container = response.payload.data;
|
||||
},
|
||||
confirmStatus(){
|
||||
this.confirmLanding = true;
|
||||
console.log(this.confirmLanding);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user