izyim/resources/assets/vue/components/order/elements/steps/ReceiveStepComponenet.vue

<template>
    <div class="inline">
        <div class="btn btn-sm btn-success b-rad-none requestModal"  data-type="receiveNote">Warehouse Received</div>
        <modal-component type="receiveNote">
            <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">Warehouse Received</h6>
                                <div class="muted all-caps fs-12">Order Receive Note</div>
                            </div>
                        </div>
                    </div>
                    <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" name="tracking_number" v-model="receiveNote.tracking_number">
                                        </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 name="complete_date" v-on:updateDate="setCompleteDate($event)"></date-picker-component>
                                    </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">Confirm</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </modal-component>
    </div>

</template>

<script>
    import notificationConstant from '../../../../../js/notification';
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                receiveNote: {
                    tracking_number: '',
                    complete_date: ''
                },
                isLoading: false
            }
        },
        mounted: function() {
            $(this.$el).find('.receiveForm').validate({
                rules: {
                    tracking_number: "required",
                    complete_date: "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')
                }
            });
        },
        methods: {

            setCompleteDate(date){
                $(this.$el).find('.receiveForm').valid();
                this.receiveNote.complete_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;

                        let notification = this.$refs.notification;

                        notification.title = notificationConstant.ORDER.WAREHOUSE_RECEIVE.TITLE;
                        notification.message = notificationConstant.ORDER.WAREHOUSE_RECEIVE.MESSAGE;

                        notification.execute();

                        $(this.$el).find('.receiveForm').parents('.modal').modal('hide')

                        Event.$emit('updateOrdersList');


                    })
                }
            },
            clearForm(){
                this.receiveNote.tracking_number = '';
                this.receiveNote.complete_date = '';
            }
        }
    }
</script>