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

<template>
    <div class="inline">
        <notification-component ref="notification"></notification-component>
        <div class="btn btn-sm btn-success b-rad-none requestModal p-t-10 p-b-10"  data-type="packed">Order Packed</div>
        <confirm-modal-component
                title="Order Packed"
                :message="'Are you sure supplier has packed this order?'"
                type="packed"
                v-on:confirm="completePacking()"></confirm-modal-component>
    </div>

</template>

<script>
    import notificationConstant from '../../../../../js/notification';
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                isLoading: false
            }
        },
        methods: {
            completePacking() {

                //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.ORDER_PACKED.TITLE;
                    notification.message = notificationConstant.ORDER.ORDER_PACKED.MESSAGE;


                    notification.execute();

                    Event.$emit('updateOrdersList', true);


                })
            }
        }
    }
</script>