mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
omair saleh
177 lines
12 KiB
Vue
177 lines
12 KiB
Vue
<template>
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="row bg-white no-margin">
|
|
<div class="col">
|
|
<div class="row m-b-15">
|
|
<div class="col b-t b-primary" style="border-top-width: 5px;"></div>
|
|
<div class="col"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-b-10 align-items-center">
|
|
<div class="col-auto">
|
|
<p class="no-margin all-caps fs-10 lh-10 light">QTY</p>
|
|
<h5 class="no-margin text-primary bold">{{item.quantity}}</h5>
|
|
</div>
|
|
<div class="col">
|
|
<p class="no-margin all-caps fs-10 lh-18 light">Description</p>
|
|
<p class="bold m-b-5 fs-12">{{item.description}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row b-t b-b b-grey m-b-15">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto b-r b-grey p-t-10 p-b-10">
|
|
<p class="no-margin text-info bold">{{item.width}} <sup>CM</sup></p>
|
|
<p class="no-margin all-caps fs-10 light">Width</p>
|
|
</div>
|
|
<div class="col-auto b-r b-grey p-t-10 p-b-10">
|
|
<p class="no-margin text-info bold">{{item.height}} <sup>CM</sup></p>
|
|
<p class="no-margin all-caps fs-10 light">Height</p>
|
|
</div>
|
|
<div class="col-auto b-r b-grey p-t-10 p-b-10">
|
|
<p class="no-margin text-info bold">{{item.length}} <sup>CM</sup></p>
|
|
<p class="no-margin all-caps fs-10 light">Length</p>
|
|
</div>
|
|
<div class="col text-right p-t-10 p-b-10">
|
|
<p class="no-margin all-caps fs-10 lh-15 light">Total CBM</p>
|
|
<h5 class="no-margin text-primary bold">{{(Math.ceil(parseFloat((item.cbm * 1000))) / 1000).toFixed(3)}}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row b-b b-grey p-b-20 align-items-center">
|
|
<div class="col">
|
|
<div class="row m-b-5">
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">Order Number</small>
|
|
<p class="no-margin bold"><a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a></p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">Status</small>
|
|
<p class="no-margin bold">{{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>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">Warehouse</small>
|
|
<h6 class="no-margin small">{{item.order.warehouse.name}} {{$store.getters.isAdmin ? item.order.warehouse.reference : ''}}</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">Delivery Address</small>
|
|
<h6 class="no-margin small">{{item.order.address.reference}} <i class="fa fa-info-circle m-l-5" v-tooltip:right="item.order.address.street_one+' '+(item.order.address.street_two ? item.order.address.street_two : '')+', '+ item.order.address.district.name+', '+item.order.address.post_code+' '+item.order.address.state.name+', '+item.order.address.country.name" ></i></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row p-t-10 p-b-10" v-if="item.container">
|
|
<div class="col">
|
|
<div class="row" v-if="item.container.transport">
|
|
<div class="col-auto p-r-0 p-t-10">
|
|
<div class="row" v-for="schedule in item.container.transport.schedule_history" :key="schedule.id">
|
|
<div class="col">
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto">
|
|
<i class="fa fa-times fs-15 text-danger"></i>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto">
|
|
<div class="b-l b-dashed b-danger" style="height: 35px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto">
|
|
<i class="fa fa-check fs-15" :class="{'text-primary': status !== 'Ready To Ship', 'muted': status === 'Ready To Ship'}"></i>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto">
|
|
<div class="b-l b-dashed " style="height: 35px;" :class="{'b-primary': status === 'Preparing Delivery' || status === 'Delivered', 'b-grey': status !== 'Preparing Delivery' || status !== 'Delivered'}"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-auto">
|
|
<i class="fa fa-check fs-15" :class="{'text-primary': item.transport, 'muted': !item.transport}"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-l-0">
|
|
<div class="row m-b-15" v-for="schedule in item.container.transport.schedule_history" :key="schedule.id">
|
|
<div class="col">
|
|
<div class="row no-margin">
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">Etd</small>
|
|
<h6 class="no-margin small">{{schedule.etd}}</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">Eta</small>
|
|
<h6 class="no-margin small">{{schedule.eta}}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="row no-margin">
|
|
<div class="col-auto" v-if="!item.container.transport.schedule_history.length">
|
|
<small class="fs-10 all-caps muted">Etd</small>
|
|
<h6 class="no-margin small">{{item.container ? item.container.transport.current_schedule.etd : 'n/a'}}</h6>
|
|
</div>
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">{{!item.container.transport.schedule_history.length ? 'Eta' : 'Rescheduled Eta' }}</small>
|
|
<h6 class="no-margin small">{{item.container ? item.container.transport.current_schedule.eta : 'n/a'}}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">Delivery Date</small>
|
|
<h6 class="no-margin small">{{item.transport ? item.transport.current_schedule.eta : 'n/a'}}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-25" v-if="item.container">
|
|
<div class="col"></div>
|
|
<div class="col b-t b-primary" style="border-top-width: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import componentHandler from '../../../general/mixins/componentHandler';
|
|
export default {
|
|
props: {
|
|
status: {
|
|
required: true,
|
|
type: String
|
|
}
|
|
},
|
|
created(){
|
|
$('[data-toggle="tooltip"]').tooltip()
|
|
},
|
|
data(){
|
|
return {
|
|
expanded: false
|
|
}
|
|
},
|
|
mixins: [componentHandler]
|
|
}
|
|
</script> |