mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git
synced 2026-08-19 04:24:00 +00:00
datepicker for order
This commit is contained in:
hazim
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="inline">
|
||||
<div class="btn btn-sm btn-success b-rad-none requestModal" data-type="receiveNote">Confirm Order</div>
|
||||
<div class="btn btn-sm btn-success b-rad-none requestModal" data-type="receiveNote">Confirm Warehouse</div>
|
||||
<modal-component type="receiveNote">
|
||||
<loading-component style="left: 0;" v-show="isLoading"></loading-component>
|
||||
<div class="card card-default no-border">
|
||||
@@ -8,7 +8,7 @@
|
||||
<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">Confirm Order</h6>
|
||||
<h6 class="bold all-caps no-margin text-success">Confirm Warehouse</h6>
|
||||
<div class="muted all-caps fs-12">Setup and confirm order</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@
|
||||
<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-primary" @click="confirmOrder()" data-dismiss="modal">Confirm Order</button>
|
||||
<button type="submit" class="btn b-rad-none btn-primary" @click="confirmOrder()" data-dismiss="modal">Confirm Warehouse</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="inline">
|
||||
<div class="btn btn-sm btn-success b-rad-none requestModal" data-type="receiveNote">Order Received</div>
|
||||
<div class="btn btn-sm btn-success b-rad-none requestModal" data-type="receiveNote">Warehouse Received</div>
|
||||
<modal-component type="receiveNote">
|
||||
<loading-component style="left: 0;" v-show="isLoading"></loading-component>
|
||||
<div class="card card-default no-border">
|
||||
@@ -8,27 +8,27 @@
|
||||
<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">Order Received</h6>
|
||||
<h6 class="bold all-caps no-margin text-success">Warehouse Received</h6>
|
||||
<div class="muted all-caps fs-12">Order Receive Note</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="post" >
|
||||
<form method="post" class="receiveForm" @submit.prevent="createReceiveNote()">
|
||||
<div class="row">
|
||||
<div class="col no-padding">
|
||||
<div class="form-group form-group-default input-group">
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">Tracking Number</label>
|
||||
<input class="form-control block" v-model="receiveNote.tracking_no">
|
||||
<input class="form-control block" name="tracking_no" v-model="receiveNote.tracking_no">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group form-group-default input-group" style=" overflow: visible; ">
|
||||
<div class="form-input-group">
|
||||
<label>Date Received</label>
|
||||
<!--<date-picker-component v-on:updateDate="updateReceiveDate($event)"></date-picker-component>-->
|
||||
<input class="form-control block datepicker" v-model="receiveNote.receive_date">
|
||||
<date-picker-component name="receive_date" v-on:updateDate="setDate($event, 'receiveNote.receive_date')"></date-picker-component>
|
||||
<!--<input class="form-control block datepicker" v-model="receiveNote.receive_date">-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@@ -36,7 +36,7 @@
|
||||
<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" @click="createReceiveNote()" data-dismiss="modal">Confirm</button>
|
||||
<button type="submit" class="btn b-rad-none btn-success">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,30 +67,65 @@
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createReceiveNote() {
|
||||
mounted: function() {
|
||||
$(this.$el).find('.receiveForm').validate({
|
||||
rules: {
|
||||
tracking_no: "required",
|
||||
receive_date: "required"
|
||||
},
|
||||
errorPlacement: function ( error, element ) {
|
||||
|
||||
//turn on loading animation
|
||||
this.isLoading = true;
|
||||
fetch(route('api.order.step.update', {orderId: this.data}), {
|
||||
method: 'post',
|
||||
body: JSON.stringify(this.receiveNote),
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
if(element.parents('.form-group').hasClass('form-group')){
|
||||
error.insertAfter( element.parents('.form-group') );
|
||||
} else {
|
||||
error.insertAfter( element );
|
||||
}
|
||||
}).then(() => {
|
||||
this.clearForm();
|
||||
|
||||
//turn off loading animation
|
||||
this.isLoading = false;
|
||||
},
|
||||
highlight: function(element) {
|
||||
$(element).parents(".form-group").addClass('has-error');
|
||||
},
|
||||
unhighlight: function(element) {
|
||||
$(element).parents(".form-group").removeClass('has-error')
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
Event.$emit('updateOrdersList', true);
|
||||
setDate(date, field){
|
||||
if (field === 'receiveNote.receive_date') {
|
||||
$(this.$el).find('.receiveForm').valid();
|
||||
this.receiveNote.receive_date = date;
|
||||
}
|
||||
},
|
||||
|
||||
createReceiveNote() {
|
||||
if($(this.$el).find('.receiveForm').valid()) {
|
||||
|
||||
//turn on loading animation
|
||||
this.isLoading = true;
|
||||
fetch(route('api.order.step.update', {orderId: this.data}), {
|
||||
method: 'post',
|
||||
body: JSON.stringify(this.receiveNote),
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
}).then(() => {
|
||||
this.clearForm();
|
||||
|
||||
//turn off loading animation
|
||||
this.isLoading = false;
|
||||
|
||||
$(this.$el).find('.receiveForm').parents('.modal').modal('hide')
|
||||
|
||||
Event.$emit('updateOrdersList');
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
updateReceiveDate(value){
|
||||
alert(value);
|
||||
//alert(value);
|
||||
this.receiveNote.receive_date = value;
|
||||
},
|
||||
clearForm(){
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="post" >
|
||||
<form method="post" class="shippingForm" @submit.prevent="createShippingArrangement()">
|
||||
<div class="row">
|
||||
<div class="col no-padding">
|
||||
<div class="row">
|
||||
@@ -24,7 +24,7 @@
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">Container No.</label>
|
||||
<input class="form-control block" v-model="shippingArrangement.container_no">
|
||||
<input class="form-control block" name="container_no" v-model="shippingArrangement.container_no">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">Seal No.</label>
|
||||
<input class="form-control block" v-model="shippingArrangement.seal_no">
|
||||
<input class="form-control block" name="seal_no" v-model="shippingArrangement.seal_no">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,7 +46,7 @@
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">ETD</label>
|
||||
<input class="form-control block" v-model="shippingArrangement.ETD">
|
||||
<date-picker-component name="ETD" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETD')"></date-picker-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,7 +56,7 @@
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">ETA</label>
|
||||
<input class="form-control block" v-model="shippingArrangement.ETA">
|
||||
<date-picker-component name="ETA" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETA')"></date-picker-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +67,7 @@
|
||||
<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" @click="createShippingArrangement()" data-dismiss="modal">Create</button>
|
||||
<button type="submit" class="btn b-rad-none btn-success">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="post" >
|
||||
<form method="post" class="rescheduleShipping" @submit.prevent="rescheduleShipping()">
|
||||
<div class="row">
|
||||
<div class="col no-padding">
|
||||
<div class="row">
|
||||
@@ -99,7 +99,7 @@
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">ETD</label>
|
||||
<input class="form-control block" v-model="reschedule.ETD">
|
||||
<date-picker-component name="ETD" v-on:updateDate="setDate($event, 'reschedule.ETD')"></date-picker-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -109,7 +109,7 @@
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">ETA</label>
|
||||
<input class="form-control block" v-model="reschedule.ETA">
|
||||
<date-picker-component name="ETA" v-on:updateDate="setDate($event, 'reschedule.ETA')"></date-picker-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,7 +119,7 @@
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">Remark</label>
|
||||
<input class="form-control block" v-model="reschedule.remark">
|
||||
<input class="form-control block" name="remark" v-model="reschedule.remark">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,7 +128,7 @@
|
||||
<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" @click="rescheduleShipping()" data-dismiss="modal">Reschedule</button>
|
||||
<button type="submit" class="btn b-rad-none btn-success">Reschedule</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,6 +177,54 @@
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
$(this.$el).find('.shippingForm').validate({
|
||||
rules: {
|
||||
container_no: "required",
|
||||
seal_no: "required",
|
||||
ETD: "required",
|
||||
ETA: "required"
|
||||
},
|
||||
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"
|
||||
},
|
||||
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')
|
||||
}
|
||||
})
|
||||
},
|
||||
created(){
|
||||
if(this.attachments !== null){
|
||||
this.arrangementExist = true;
|
||||
@@ -185,50 +233,76 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createShippingArrangement() {
|
||||
//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) => {
|
||||
setDate(date, field){
|
||||
if(field === 'shippingArrangement.schedule.ETD'){
|
||||
$(this.$el).find('.shippingForm').valid();
|
||||
this.shippingArrangement.schedule.ETD = date;
|
||||
}
|
||||
|
||||
this.arrangementExist = true;
|
||||
//turn off loading animation
|
||||
this.isLoading = false;
|
||||
if(field === 'shippingArrangement.schedule.ETA'){
|
||||
$(this.$el).find('.shippingForm').valid();
|
||||
this.shippingArrangement.schedule.ETA = date;
|
||||
}
|
||||
|
||||
Event.$emit('updateOrdersList', true);
|
||||
if(field === 'reschedule.ETD'){
|
||||
$(this.$el).find('.rescheduleShipping').valid();
|
||||
this.reschedule.ETD = date;
|
||||
}
|
||||
|
||||
if(field === 'reschedule.ETA'){
|
||||
$(this.$el).find('.rescheduleShipping').valid();
|
||||
this.reschedule.ETA = date;
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
rescheduleShipping() {
|
||||
//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) => {
|
||||
if(response === 200){
|
||||
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;
|
||||
|
||||
|
||||
$(this.$el).find('.shippingForm').parents('.modal').modal('hide')
|
||||
|
||||
Event.$emit('updateOrdersList');
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
rescheduleShipping() {
|
||||
console.log(this.reschedule);
|
||||
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;
|
||||
|
||||
$(this.$el).find('.rescheduleShipping').parents('.modal').modal('hide')
|
||||
|
||||
Event.$emit('updateOrdersList', true);
|
||||
|
||||
} else {
|
||||
//failed to update;
|
||||
this.isLoading = false;
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
completeShipping() {
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="row w-100">
|
||||
<div class="col no-padding">
|
||||
<label class="muted block">Order No.</label>
|
||||
<input class="form-control block" v-model="order.marking">
|
||||
<input class="form-control block" name="marking" v-model="order.marking">
|
||||
</div>
|
||||
<div class="col-auto no-padding" @click="generateMarking()">
|
||||
<div class="input-group-addon pointer inline">
|
||||
@@ -35,7 +35,7 @@
|
||||
<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-primary" @click="addOrder()" data-dismiss="modal">Create Order</button>
|
||||
<button type="submit" class="btn b-rad-none btn-primary">Create Order</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,28 +63,54 @@
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
$(this.$el).find('form').validate({
|
||||
rules: {
|
||||
marking: "required"
|
||||
},
|
||||
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')
|
||||
}
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.generateMarking();
|
||||
},
|
||||
methods: {
|
||||
addOrder() {
|
||||
if($(this.$el).find('form').valid()) {
|
||||
|
||||
//turn on loading animation
|
||||
this.isLoading = true;
|
||||
fetch(route('api.order.create', {companyId: this.data}), {
|
||||
method: 'post',
|
||||
body: JSON.stringify(this.order),
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
}).then(() => {
|
||||
this.clearForm();
|
||||
//turn off loading animation
|
||||
this.isLoading = false;
|
||||
//turn on loading animation
|
||||
this.isLoading = true;
|
||||
fetch(route('api.order.create', {companyId: this.data}), {
|
||||
method: 'post',
|
||||
body: JSON.stringify(this.order),
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
}).then(() => {
|
||||
this.clearForm();
|
||||
//turn off loading animation
|
||||
this.isLoading = false;
|
||||
|
||||
Event.$emit('updateOrdersList');
|
||||
$(this.$el).parents('.modal').modal('hide')
|
||||
|
||||
})
|
||||
Event.$emit('updateOrdersList');
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
generateMarking(){
|
||||
this.order.marking = Math.floor(Math.random() * 799999) + 200000;
|
||||
|
||||
Reference in New Issue
Block a user