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

<template>
    <div class="row">
        <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 :is="stepComponent(this.order.current_step.details.reference_id)" :attachments="this.order.current_step.attachments" :data="this.order.id"></component>
                    <div class="btn btn-sm btn-default b-rad-none">View Details</div>
                </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>
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                order: this.data,
            }
        },
        watch: {
            'data': function() {
                this.order = this.data;
            }
        },
        methods: {
            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>