From 0b30300706921137181dcac461371194dc4e7a60 Mon Sep 17 00:00:00 2001
From: Kawlll Maxso <muhdazreen12@gmail.com>
Date: Wed, 10 Apr 2019 12:09:32 +0800
Subject: [PATCH 1/2] Git date etd eta and validation

---
 .../components/common/DatePickerComponent.vue |   5 +-
 .../order/elements/ShippingStepComponenet.vue | 117 ++++++++++--------
 2 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/resources/assets/vue/components/common/DatePickerComponent.vue b/resources/assets/vue/components/common/DatePickerComponent.vue
index 41ed080..803d804 100644
--- a/resources/assets/vue/components/common/DatePickerComponent.vue
+++ b/resources/assets/vue/components/common/DatePickerComponent.vue
@@ -12,7 +12,10 @@
                 todayBtn: true,
                 todayHighlight: true
             }).on('changeDate',function(event){
-                vm.$emit('updateDate', event.target.value)
+                if(event.target.value !== ''){
+                    vm.$emit('updateDate', event.target.value)
+                }
+
             })
         },
         props: ['value']
diff --git a/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue b/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
index 5279254..aaa6373 100644
--- a/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
+++ b/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
@@ -46,7 +46,7 @@
                                             <div class="row w-100">
                                                 <div class="col no-padding">
                                                     <label class="muted block">ETD</label>
-                                                    <date-picker-component name="ETD" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETD')"></date-picker-component>
+                                                    <date-picker-component class="ETD" 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>
-                                                    <date-picker-component name="ETA" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETA')"></date-picker-component>
+                                                    <date-picker-component class="ETA" name="ETA" v-on:updateDate="setDate($event, 'shippingArrangement.schedule.ETA')"></date-picker-component>
                                                 </div>
                                             </div>
                                         </div>
@@ -99,7 +99,7 @@
                                             <div class="row w-100">
                                                 <div class="col no-padding">
                                                     <label class="muted block">ETD</label>
-                                                    <date-picker-component name="ETD" v-on:updateDate="setDate($event, 'reschedule.ETD')"></date-picker-component>
+                                                    <date-picker-component class="ETD" 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>
-                                                    <date-picker-component name="ETA" v-on:updateDate="setDate($event, 'reschedule.ETA')"></date-picker-component>
+                                                    <date-picker-component class="ETA" name="ETA" v-on:updateDate="setDate($event, 'reschedule.ETA')"></date-picker-component>
                                                 </div>
                                             </div>
                                         </div>
@@ -149,6 +149,7 @@
 </template>
 
 <script>
+    import moment from 'moment'
     export default {
         props: {
             'data': {
@@ -178,52 +179,7 @@
             }
         },
         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')
-                }
-            })
+            this.dataValidation();
         },
         created(){
             if(this.attachments !== null){
@@ -233,15 +189,75 @@
             }
         },
         methods: {
+            dataValidation() {
+                $(this.$el).find('.shippingForm').validate({
+                    rules: {
+                        container_no: "required",
+                        seal_no: "required",
+                        ETD: "required",
+                        ETA: "required"
+                    },
+                    messages: {
+                        ETA: {
+                            min : '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"
+                    },
+                    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('.ETA').rules( "add", {
+                        min: this.shippingArrangement.schedule.ETD + 1
+                    })
                 }
 
                 if(field === 'shippingArrangement.schedule.ETA'){
                     $(this.$el).find('.shippingForm').valid();
                     this.shippingArrangement.schedule.ETA = date;
+                    if($(this.$el).find('.ETD').datepicker('getDate') === null) {
+                        let estimatedEtd = moment(date, "DD-MM-YYYY").subtract(3, 'days').format('DD-MM-YYYY');
+                        $(this.$el).find('.ETD').datepicker('setDate', estimatedEtd);
+                    }
                 }
 
                 if(field === 'reschedule.ETD'){
@@ -282,7 +298,6 @@
                 }
             },
             rescheduleShipping() {
-                console.log(this.reschedule);
                 if($(this.$el).find('.rescheduleShipping').valid()) {
                     //turn on loading animation
                     this.isLoading = true;

From a20caf4e56ebd2bccb899d9840ce202f8136890b Mon Sep 17 00:00:00 2001
From: Kawlll Maxso <muhdazreen12@gmail.com>
Date: Thu, 11 Apr 2019 15:52:20 +0800
Subject: [PATCH 2/2] Git date etd eta and validation

---
 .../order/elements/ShippingStepComponenet.vue | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue b/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
index aaa6373..d415d32 100644
--- a/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
+++ b/resources/assets/vue/components/order/elements/ShippingStepComponenet.vue
@@ -225,6 +225,11 @@
                         ETA: "required",
                         remark: "required"
                     },
+                    messages: {
+                        ETA: {
+                            min : 'ETA must be greater than ETD'
+                        }
+                    },
                     errorPlacement: function ( error, element ) {
 
                         if(element.parents('.form-group').hasClass('form-group')){
@@ -246,28 +251,35 @@
                 if(field === 'shippingArrangement.schedule.ETD'){
                     $(this.$el).find('.shippingForm').valid();
                     this.shippingArrangement.schedule.ETD = date;
-                    $(this.$el).find('.ETA').rules( "add", {
-                        min: this.shippingArrangement.schedule.ETD + 1
+                    $(this.$el).find('.shippingForm .ETA').rules("add", {
+                        min: 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('.ETD').datepicker('getDate') === null) {
+                    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('.ETD').datepicker('setDate', estimatedEtd);
+                        $(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", {
+                        min: 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);
+                    }
                 }
 
             },