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

<template>
    <div class="inline">
        <div class="btn btn-sm btn-success b-rad-none requestModal" v-if="!arrangementExist" data-type="deliveryArrangement">Delivery Arrangement</div>
        <div class="btn btn-sm btn-success b-rad-none requestModal" v-if="arrangementExist" data-type="deliveryComplete">Successful Delivery</div>
        <div class="btn btn-sm btn-warning text-black b-rad-none requestModal" v-if="arrangementExist" data-type="deliveryArrangement">Reschedule Delivery</div>
        <modal-component type="deliveryArrangement">
            <div class="card card-default no-border">
                <div class="card-block no-padding">
                    <delivery-arrangement-form-component :attachments="this.attachments" :data="this.data"></delivery-arrangement-form-component>
                </div>
            </div>
        </modal-component>
        <confirm-modal-component v-if="arrangementExist"
                 title="Order Packed"
                 :message="'Are you sure this order delivery is successful?'"
                 type="deliveryComplete"
                 v-on:confirm="completeDelivery()">
            <div class="card card-default no-border m-b-0 m-t-15">
                <div class="card-block no-padding">
                    <action-date-component v-model="complete_date"></action-date-component>
                </div>
            </div>
        </confirm-modal-component>
    </div>

</template>

<script>
    export default {
        props: {
            'data': {
                required: true
            },
            'attachments': {
                type: Object
            }
        },
        data() {
            return {
                arrangementExist: false,
                complete_date: null,
                isLoading: false
            }
        },
        watch: {
            'attachments': function() {
                if(this.attachments !== null){
                    this.arrangementExist = true;
                }
            }
        },
        created(){
            if(this.attachments !== null){
                this.arrangementExist = true;
            }
        },
        methods: {
            completeDelivery() {
                this.$emit('updateStep', {'complete_date': this.complete_date, 'type': 'COMPLETE'});
            }
        }
    }
</script>