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

<template>
    <div class="row">
        <notification-component ref="notification"></notification-component>
        <div class="col">
            <div class="row 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 p-l-0">
                    <component v-if="this.order.current_step.details" v-on:updateStep="updateOrderStep($event)" :is="stepComponent(this.order.current_step.reference_id)" :attachments="this.order.current_step.attachments" :data="this.order.id"></component>
                    <div class="dropdown inline">
                        <!--<a class="btn btn-sm btn-default b-rad-none p-t-10 p-b-10" :href="route('order.profile', {orderId: this.order.id})"></a>-->
                        <button class="btn btn-sm btn-default b-rad-none p-t-10 p-b-10" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-angle-down"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right b-rad-none no-padding pointer" aria-labelledby="dropdownMenuLink" style="box-shadow: none; min-width: 150px;">
                            <a :href="route('order.profile', {orderId: this.order.id})">
                                <div class="row no-margin align-items-center justify-content-center text-black" style=" border-bottom: solid 1px #e1e1e1; ">
                                    <div class="col-3 p-t-15 p-b-15 bg-master-lighter muted"><i class="fa fa-chevron-right fs-10"></i></div>
                                    <div class="col" style="white-space: nowrap;"><span class="fs-10 all-caps bold">View Details</span></div>
                                </div>
                            </a>
                            <div class="text-danger all-caps gb-master-lightest" style=" white-space: nowrap;">
                                <div class="row no-margin align-items-center justify-content-center">
                                    <div class="col-3 p-t-15 p-b-15 bg-master-lighter"><i class="fa fa-times fs-10"></i></div>
                                    <div class="col" style="white-space: nowrap;"><span class="fs-10 bold">Cancel Order</span></div>
                                </div>
                            </div>
                        </div>
                    </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>
    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>