mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
container profile forms ui
This commit is contained in:
edmondlang
+1
-1
@@ -65,8 +65,8 @@ class RescheduleContainerLogic extends AbstractControllerLogic
|
||||
$this->updatesScheduleStatus->execute($old_sechedule, ApprovalStatus::REJECTED);
|
||||
|
||||
$scheduleObject = new ScheduleObject(
|
||||
Carbon::parse($request->input('eta')),
|
||||
Carbon::parse($request->input('etd')),
|
||||
Carbon::parse($request->input('eta')),
|
||||
ApprovalStatus::APPROVED
|
||||
);
|
||||
$schedule = $this->createsSchedule->execute($transport, $scheduleObject);
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
|
||||
<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 :class="[{'hide': expanded}]">Are you sure this container has arrived the Destination Port today?</p>
|
||||
<p :class="[{'hide': !expanded}]">Plese select the actual date of arrival for this container.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-20" :class="[{'hide': !expanded}]">
|
||||
<div class="col">
|
||||
<div class="row m-auto mt-10 mb-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.eta">
|
||||
<label class="text-primary">Date of Arrival </label>
|
||||
<date-picker-component :parameters="parameters" :value="'eta'"></date-picker-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-15">
|
||||
<div class="col">
|
||||
<div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.container.update_dispatch_date', data.id), 'put', section, true, true)">Confirm</div>
|
||||
<p class="text-right small-text m-b-0" @click="expanded = !expanded" >Choose another Date</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import modalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
parameters: {
|
||||
eta: new Date().toJSON().slice(0,10).replace(/-/g,'/'),
|
||||
},
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
parameters: {
|
||||
eta: { required },
|
||||
}
|
||||
},
|
||||
mixins: [modalFormHandler]
|
||||
}
|
||||
</script>
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
|
||||
<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 :class="[{'hide': expanded}]">Are you sure the container has depart from the origin port today?</p>
|
||||
<p :class="[{'hide': !expanded}]">Plese select the actual date of departure for this container.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-20" :class="[{'hide': !expanded}]">
|
||||
<div class="col">
|
||||
<div class="row m-auto mt-10 mb-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.etd">
|
||||
<label class="text-primary">Date of Departure</label>
|
||||
<date-picker-component :parameters="parameters" :value="'etd'"></date-picker-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-15">
|
||||
<div class="col">
|
||||
<div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.container.update_drop_date', data.id), 'put', section, true, true)">Confirm</div>
|
||||
<p class="text-right small-text m-b-0" @click="expanded = !expanded" >Choose another Date</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import modalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
parameters: {
|
||||
etd: new Date().toJSON().slice(0,10).replace(/-/g,'/'),
|
||||
},
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
parameters: {
|
||||
etd: { required },
|
||||
}
|
||||
},
|
||||
mixins: [modalFormHandler]
|
||||
}
|
||||
</script>
|
||||
+361
-207
@@ -1,132 +1,167 @@
|
||||
<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 d-flex justify-content-between align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="bold m-b-0">{{container.container_reference}}</h5>
|
||||
<p>{{container.container_number}}</p>
|
||||
<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;
|
||||
border: 1px solid #444;
|
||||
position: relative;
|
||||
}
|
||||
.percentageInner{
|
||||
position: absolute;
|
||||
width: calc(100% - 2px);
|
||||
height: calc(100% - 2px);
|
||||
background: #73AD21;
|
||||
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;
|
||||
}
|
||||
</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 d-flex justify-content-between align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="bold m-b-0">{{container.container_reference}}</h5>
|
||||
<p>{{container.container_number}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="m-t-0">Container Type: {{container.container_type}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="m-t-0">Container Type: {{container.container_type}}</p>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">ETD</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-t-0 large-text">{{container.transport.current_schedule.etd}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">ETD</h5>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">ETA</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-t-0 large-text">{{container.transport.current_schedule.eta}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-t-0 large-text">{{container.transport.current_schedule.etd}}</h5>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">Loading Place</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-t-0 large-text">SHANGHAI, CHINA</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">ETA</h5>
|
||||
<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="row">
|
||||
<div class="col">
|
||||
<h5 class="m-t-0 large-text">{{container.transport.current_schedule.eta}}</h5>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 large-text normal l-20">Loading Place</h5>
|
||||
</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>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-t-0 large-text">{{container.status}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">{{ containerFilledPercentage }}%</p>
|
||||
</div>
|
||||
<div class="batteryContainer">
|
||||
<div class="batteryOuter">
|
||||
<div id="batteryLevel" :style="{ width: svgLenght + 'px' }"></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">
|
||||
<div class="col padding-20 p-l-40 p-r-50">
|
||||
<div class="row" v-for="packingList in container.packing_lists">
|
||||
<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="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>
|
||||
@@ -135,48 +170,175 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- <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>
|
||||
<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 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="row p-l-10 p-r-10">
|
||||
<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 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">
|
||||
<div class="col">
|
||||
<div class="percentageContainer">
|
||||
<div class="percentageInner" :style="{ height: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
|
||||
<div class="percentageInnerText">
|
||||
{{ Math.round((loadedCBM / CBMcapacity) * 100, 2) }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
</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="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row p-l-10 p-r-10">
|
||||
<div class="col rounded bg-master-lighter padding-15">
|
||||
documents
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="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>
|
||||
</div>
|
||||
<div class="row m-t-15">
|
||||
<div class="col">
|
||||
<div class="row p-l-10 p-r-10">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row p-l-10 p-r-10">
|
||||
<div class="col rounded bg-master-lighter padding-15">
|
||||
documents
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,70 +348,62 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
section: 'containerPofileSection',
|
||||
isLoading: true,
|
||||
container: null,
|
||||
expanded: false,
|
||||
totalCBM: 6,
|
||||
CBMcapacity: 30,
|
||||
svgLenght: 0,
|
||||
svgLenghtSquare: 0,
|
||||
confirmLanding: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pendingQueue () {
|
||||
return this.$store.getters.isInCompleteQueue(this.section);
|
||||
</template>
|
||||
<script>
|
||||
import RescheduleDateFormComponent from './RescheduleDateFormComponent.vue';
|
||||
export default {
|
||||
components: { RescheduleDateFormComponent },
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
containerFilledPercentage() {
|
||||
this.svgLenght = this.totalCBM / this.CBMcapacity * 25;
|
||||
this.svgLenghtSquare = this.totalCBM / this.CBMcapacity * 100 -2;
|
||||
return this.totalCBM / this.CBMcapacity * 100;
|
||||
}
|
||||
// totalCbm () {
|
||||
// let totalCbm = 0;
|
||||
|
||||
// return this.container.packing_lists.map(function(packing_list){
|
||||
// totalCbm += packing_list.packages.reduce((total, obj) => obj.quantity + total, 0);
|
||||
// })
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
pendingQueue(inComplete){
|
||||
if(inComplete){
|
||||
this.fetchCompany();
|
||||
data(){
|
||||
return {
|
||||
section: 'containerPofileSection',
|
||||
isLoading: true,
|
||||
container: null,
|
||||
expanded: false,
|
||||
totalCBM: 6,
|
||||
CBMcapacity: 30,
|
||||
svgLenght: 0,
|
||||
svgLenghtSquare: 0,
|
||||
confirmLanding: false,
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
confirmStatus(){
|
||||
this.confirmLanding = true;
|
||||
console.log(this.confirmLanding);
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
confirmStatus(){
|
||||
this.confirmLanding = true;
|
||||
console.log(this.confirmLanding);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
|
||||
<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" data-bs-dismiss="modal" aria-label="Close"><i class="fa fa-times text-white fs-12"></i></div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col text-center">
|
||||
<p>Plese set the approximate dates of below.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-auto mt-10 mb-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.etd">
|
||||
<label class="text-primary">Etd</label>
|
||||
<date-picker-component :parameters="parameters" :value="'etd'"></date-picker-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col">
|
||||
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.eta">
|
||||
<label class="text-primary">Eta</label>
|
||||
<date-picker-component :parameters="parameters" :value="'eta'"></date-picker-component>
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-15 m-l-20 m-r-20">
|
||||
<div class="col">
|
||||
<div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.container.reschedule', data.id), 'put', section, true, true)">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import modalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
parameters: {
|
||||
etd: this.etd,
|
||||
eta: this.eta,
|
||||
}
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
parameters: {
|
||||
etd: { required },
|
||||
eta: { required },
|
||||
}
|
||||
},
|
||||
mixins: [modalFormHandler]
|
||||
}
|
||||
|
||||
</script>
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="row" style="width: 450px; margin: auto;" @keyup.enter="submitForm">
|
||||
<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>Are you sure this container has been unpacked today?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-t-15">
|
||||
<div class="col">
|
||||
<div class="btn btn-primary w-100 btn-lg" @click="submit(route('api.packing_list.container.complete', data.id), 'put', section, true, true)">Confirm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import modalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
expanded: false,
|
||||
};
|
||||
},
|
||||
mixins: [modalFormHandler]
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user