izyim/resources/assets/vue/components/order/elements/OrderActionComponenet.vue

<template>
    <div class="row">
        <notification-component ref="notification"></notification-component>
        <div class="col p-t-10 p-b-10">
            <div class="row no-margin align-items-center justify-content-center">
                <div class="col">
                    <small class="text-danger fs-10 requestModal pointer"  data-type="delete"><i class="fa fa-times"></i> delete order</small>
                </div>
                <div class="col-auto">
                    <component v-if="this.order.current_step.details" v-on:updateStep="updateOrderStep($event)" :is="stepComponent(this.order.current_step.details.reference_id)" :attachments="this.order.current_step.attachments" :data="this.order.id"></component>
                    <a class="btn btn-sm btn-default b-rad-none" :href="route('order.profile', {orderId: this.order.id})">View Details</a>
                </div>
            </div>
            <confirm-modal-component
                    title="Cancel Order"
                    :message="'Are you sure you want to cancel this order ?'"
                    type="delete"
                    danger
                    v-on:confirm="deleteOrder()"></confirm-modal-component>
        </div>
    </div>

</template>

<script>
    import notificationConstant from '../../../../js/notification';
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                order: this.data,
            }
        },
        watch: {
            'data': function() {
                this.order = this.data;
            },
            'data.current_step.attachments': function() {
                this.order = this.data;
            }
        },
        methods: {
            route: route,
            updateOrderStep(event){
                let notification = this.$refs.notification;

                fetch(route('api.order.step.update', {orderId: this.data}), {
                    method: 'post',
                    responseType: 'json',
                    body: JSON.stringify({'complete_date': event.complete_date}),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(response => {
                    if(!response.ok){ throw response }
                    return response.json()

                }).then( () => {
                    notification.title = notificationConstant.ORDER[event.type].TITLE;
                    notification.message = notificationConstant.ORDER[event.type].MESSAGE;
                    notification.execute();

                    Event.$emit('updateOrdersList');
                }).catch(error => {
                    error.json().then( error => {
                        notification.type = 'error';
                        notification.title = notificationConstant.ORDER[event.type].TITLE;
                        notification.message = error.message;
                        notification.execute();
                    })
                })
            },
            deleteOrder(){
                fetch(route('api.order.delete', {'id': this.data}), {
                    method: 'delete'
                }).then(() => {
                        Event.$emit('updateOrdersList');
                    })
                    .catch(error => console.log(error))
            },
            stepComponent(stepReference){
                switch (stepReference) {
                    case 'PS_PROCESSING':
                        return 'confirm-order-component';
                    case 'MS_WAREHOUSE_RECEIVING':
                        return 'receive-step-component';
                    case 'MS_WAREHOUSE_PACKING':
                        return 'packing-step-component';
                    case 'MS_NO_WAREHOUSE_PENDING_SUPPLIER':
                        return 'supplier-packing-step-component';
                    case 'PS_SHIPPING':
                        return 'shipping-step-component';
                    case 'MS_WAREHOUSE_ARRIVAL':
                        return 'arrival-step-component';
                    case 'MS_WAREHOUSE_UNPACKING':
                        return 'unpacking-step-component';
                    case 'PS_DELIVERY':
                        if(this.order.complete){
                            return 'complete-order-component';
                        }
                        return 'delivery-step-component';
                }
            }
        }
    }
</script>