mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git
synced 2026-08-27 16:33:57 +00:00
Omair Saleh
385 lines
19 KiB
Vue
385 lines
19 KiB
Vue
<template>
|
|
<div class="inline">
|
|
<div class="btn btn-sm btn-success b-rad-none requestModal" v-if="!arrangementExist" data-type="shippingArrangement">Shipping Arrangement</div>
|
|
<div class="btn btn-sm btn-success b-rad-none requestModal" v-if="arrangementExist" data-type="shippingComplete">Port Arrival</div>
|
|
<div class="btn btn-sm btn-warning text-black b-rad-none requestModal" v-if="arrangementExist" data-type="rescheduleShipping">Reschedule Shipping</div>
|
|
<modal-component type="shippingArrangement" v-if="!arrangementExist">
|
|
<notification-component ref="notification"></notification-component>
|
|
<loading-component style="left: 0;" v-show="isLoading"></loading-component>
|
|
<div class="card card-default no-border">
|
|
<div class="card-block no-padding">
|
|
<div class="row p-t-30">
|
|
<div class="col no-padding">
|
|
<div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
|
|
<h6 class="bold all-caps no-margin text-success">Shipping Arrangement</h6>
|
|
<div class="muted all-caps fs-12">Order shipping Schedule</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form method="post" class="shippingForm" @submit.prevent="createShippingArrangement()">
|
|
<div class="row">
|
|
<div class="col no-padding">
|
|
<div class="row">
|
|
<div class="col p-l-0 p-r-5">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Container No.</label>
|
|
<input class="form-control block" name="container_no" v-model="shippingArrangement.container_no">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-r-0 p-l-5">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Seal No.</label>
|
|
<input class="form-control block" name="seal_no" v-model="shippingArrangement.seal_no">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col p-l-0 p-r-5">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">ETD</label>
|
|
<date-picker-component class="ETD" name="ETD" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETD')"></date-picker-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-r-0 p-l-5">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">ETA</label>
|
|
<date-picker-component class="ETA" name="ETA" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETA')"></date-picker-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-right no-padding">
|
|
<div class="row">
|
|
<div class="col no-padding">
|
|
<button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn b-rad-none btn-success">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</modal-component>
|
|
<modal-component type="rescheduleShipping" v-if="arrangementExist">
|
|
<notification-component ref="notification"></notification-component>
|
|
<loading-component style="left: 0;" v-show="isLoading"></loading-component>
|
|
<div class="card card-default no-border">
|
|
<div class="card-block no-padding">
|
|
<div class="row p-t-30">
|
|
<div class="col no-padding">
|
|
<div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
|
|
<h6 class="bold all-caps no-margin text-success">Reschedule Shipping</h6>
|
|
<div class="muted all-caps fs-12">Order shipping reschedule</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form method="post" class="rescheduleShipping" @submit.prevent="rescheduleShipping()">
|
|
<div class="row">
|
|
<div class="col no-padding">
|
|
<div class="row">
|
|
<div class="col p-l-0 p-r-5">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">ETD</label>
|
|
<date-picker-component class="ETD" name="ETD" v-on:updateDate="setDate($event, 'reschedule.ETD')"></date-picker-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-r-0 p-l-5">
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">ETA</label>
|
|
<date-picker-component class="ETA" name="ETA" v-on:updateDate="setDate($event, 'reschedule.ETA')"></date-picker-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group form-group-default input-group">
|
|
<div class="row w-100">
|
|
<div class="col no-padding">
|
|
<label class="muted block">Remark</label>
|
|
<input class="form-control block" name="remark" v-model="reschedule.remark">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-right no-padding">
|
|
<div class="row">
|
|
<div class="col no-padding">
|
|
<button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn b-rad-none btn-success">Reschedule</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</modal-component>
|
|
<confirm-modal-component v-if="arrangementExist"
|
|
title="Arrived To Port"
|
|
:message="'Are you sure this order has arrived to port?'"
|
|
type="shippingComplete"
|
|
v-on:confirm="completeShipping()"></confirm-modal-component>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment';
|
|
import notificationConstant from '../../../../../js/notification';
|
|
export default {
|
|
props: {
|
|
'data': {
|
|
required: true
|
|
},
|
|
'attachments': {
|
|
type: Object
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
arrangementExist: false,
|
|
shippingArrangement: {
|
|
container_no: '',
|
|
seal_no: '',
|
|
schedule: {
|
|
ETD: '',
|
|
ETA: ''
|
|
}
|
|
},
|
|
reschedule: {
|
|
ETD: '',
|
|
ETA: '',
|
|
remark: ''
|
|
},
|
|
isLoading: false
|
|
}
|
|
},
|
|
mounted: function() {
|
|
this.validateMethod();
|
|
this.dataValidation();
|
|
},
|
|
created(){
|
|
if(this.attachments !== null){
|
|
this.arrangementExist = true;
|
|
this.shippingArrangement = this.attachments;
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
validateMethod() {
|
|
$.validator.addMethod("minDate", function(value, element, params) {
|
|
return (moment(value, "DD-MM-YYYY") > moment(params, "DD-MM-YYYY"))
|
|
});
|
|
},
|
|
dataValidation() {
|
|
$(this.$el).find('.shippingForm').validate({
|
|
rules: {
|
|
container_no: "required",
|
|
seal_no: "required",
|
|
ETD: "required",
|
|
ETA: "required"
|
|
},
|
|
messages: {
|
|
ETA: {
|
|
minDate : 'ETA must be greater than ETD'
|
|
}
|
|
},
|
|
errorPlacement: function ( error, element ) {
|
|
|
|
if(element.parents('.form-group').hasClass('form-group')){
|
|
error.insertAfter( element.parents('.form-group') );
|
|
} else {
|
|
error.insertAfter( element );
|
|
}
|
|
|
|
},
|
|
highlight: function(element) {
|
|
$(element).parents(".form-group").addClass('has-error');
|
|
},
|
|
unhighlight: function(element) {
|
|
$(element).parents(".form-group").removeClass('has-error')
|
|
}
|
|
});
|
|
|
|
$(this.$el).find('.rescheduleShipping').validate({
|
|
rules: {
|
|
ETD: "required",
|
|
ETA: "required",
|
|
remark: "required"
|
|
},
|
|
messages: {
|
|
ETA: {
|
|
minDate : 'ETA must be greater than ETD'
|
|
}
|
|
},
|
|
errorPlacement: function ( error, element ) {
|
|
|
|
if(element.parents('.form-group').hasClass('form-group')){
|
|
error.insertAfter( element.parents('.form-group') );
|
|
} else {
|
|
error.insertAfter( element );
|
|
}
|
|
|
|
},
|
|
highlight: function(element) {
|
|
$(element).parents(".form-group").addClass('has-error');
|
|
},
|
|
unhighlight: function(element) {
|
|
$(element).parents(".form-group").removeClass('has-error')
|
|
}
|
|
})
|
|
},
|
|
setDate(date, field){
|
|
if(field === 'shippingArrangement.schedule.ETD'){
|
|
$(this.$el).find('.shippingForm').valid();
|
|
this.shippingArrangement.schedule.ETD = date;
|
|
$(this.$el).find('.shippingForm .ETA').rules("add", {
|
|
minDate: moment(this.shippingArrangement.schedule.ETD, "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')
|
|
})
|
|
}
|
|
|
|
if(field === 'shippingArrangement.schedule.ETA'){
|
|
$(this.$el).find('.shippingForm').valid();
|
|
this.shippingArrangement.schedule.ETA = date;
|
|
if($(this.$el).find('.shippingForm .ETD').datepicker('getDate') === null) {
|
|
let estimatedEtd = moment(date, "DD-MM-YYYY").subtract(3, 'days').format('DD-MM-YYYY');
|
|
$(this.$el).find('.shippingForm .ETD').datepicker('setDate', estimatedEtd);
|
|
}
|
|
}
|
|
|
|
if(field === 'reschedule.ETD'){
|
|
$(this.$el).find('.rescheduleShipping').valid();
|
|
this.reschedule.ETD = date;
|
|
$(this.$el).find('.rescheduleShipping .ETA').rules("add", {
|
|
minDate: moment(this.reschedule.ETD, "DD-MM-YYYY").add(1, 'days').format('DD-MM-YYYY')
|
|
})
|
|
}
|
|
|
|
if(field === 'reschedule.ETA'){
|
|
$(this.$el).find('.rescheduleShipping').valid();
|
|
this.reschedule.ETA = date;
|
|
if($(this.$el).find('.rescheduleShipping .ETD').datepicker('getDate') === null) {
|
|
let estimatedEtd = moment(date, "DD-MM-YYYY").subtract(3, 'days').format('DD-MM-YYYY');
|
|
$(this.$el).find('.rescheduleShipping .ETD').datepicker('setDate', estimatedEtd);
|
|
}
|
|
}
|
|
|
|
},
|
|
createShippingArrangement() {
|
|
if($(this.$el).find('.shippingForm').valid()) {
|
|
|
|
//turn on loading animation
|
|
this.isLoading = true;
|
|
fetch(route('api.order.shipping.arrangement.create', {orderId: this.data}), {
|
|
method: 'post',
|
|
body: JSON.stringify(this.shippingArrangement),
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
}
|
|
}).then(response => response.json()).then((response) => {
|
|
|
|
this.arrangementExist = true;
|
|
//turn off loading animation
|
|
this.isLoading = false;
|
|
|
|
let notification = this.$refs.notification;
|
|
|
|
notification.title = notificationConstant.ORDER.SHIPPING_ARRANGEMENT.TITLE;
|
|
notification.message = notificationConstant.ORDER.SHIPPING_ARRANGEMENT.MESSAGE;
|
|
|
|
notification.execute();
|
|
|
|
$(this.$el).find('.shippingForm').parents('.modal').modal('hide')
|
|
|
|
Event.$emit('updateOrdersList');
|
|
|
|
|
|
})
|
|
}
|
|
},
|
|
rescheduleShipping() {
|
|
if($(this.$el).find('.rescheduleShipping').valid()) {
|
|
//turn on loading animation
|
|
this.isLoading = true;
|
|
fetch(route('api.order.shipping.arrangement.reschedule', {orderId: this.data}), {
|
|
method: 'post',
|
|
body: JSON.stringify(this.reschedule),
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
}
|
|
}).then(response => response.json()).then((response) => {
|
|
//turn off loading animation
|
|
this.isLoading = false;
|
|
|
|
let notification = this.$refs.notification;
|
|
|
|
notification.title = notificationConstant.ORDER.SHIPPING_ARRANGEMENT.RESCHEDULE.TITLE;
|
|
notification.message = notificationConstant.ORDER.SHIPPING_ARRANGEMENT.RESCHEDULE.MESSAGE;
|
|
|
|
|
|
notification.execute();
|
|
|
|
$(this.$el).find('.rescheduleShipping').parents('.modal').modal('hide')
|
|
|
|
Event.$emit('updateOrdersList', true);
|
|
|
|
|
|
})
|
|
}
|
|
},
|
|
completeShipping() {
|
|
|
|
//turn on loading animation
|
|
this.isLoading = true;
|
|
fetch(route('api.order.step.update', {orderId: this.data}), {
|
|
method: 'post',
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
}
|
|
}).then(() => {
|
|
//turn off loading animation
|
|
this.isLoading = false;
|
|
|
|
let notification = this.$refs.notification;
|
|
|
|
notification.title = notificationConstant.ORDER.PORT_ARRIVAL.TITLE;
|
|
notification.message = notificationConstant.ORDER.PORT_ARRIVAL.MESSAGE;
|
|
|
|
|
|
notification.execute();
|
|
|
|
Event.$emit('updateOrdersList', true);
|
|
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |