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

<template>
    <div class="inline">
        <div class="btn btn-sm btn-success b-rad-none requestModal p-t-10 p-b-10" v-if="!arrangementExist" data-type="shippingArrangement">Shipping Arrangement</div>
        <div class="btn btn-sm btn-success b-rad-none requestModal p-t-10 p-b-10" v-if="arrangementExist" data-type="shippingComplete">Port Arrival</div>
        <!--<div class="btn btn-sm btn-warning text-black b-rad-none requestModal p-t-10 p-b-10" v-if="arrangementExist" data-type="shippingArrangement">Reschedule Shipping</div>-->
        <modal-component type="shippingArrangement">
            <div class="card card-default no-border">
                <div class="card-block no-padding">
                    <shipping-arrangement-form-component :attachments="this.attachments" :data="this.data"></shipping-arrangement-form-component>
                </div>
            </div>
        </modal-component>
        <confirm-modal-component v-if="arrangementExist"
                title="Arrived To Port"
                :message="'Are you sure this order has arrived to port?'"
                type="shippingComplete"
                v-on:confirm="completeShipping()">
            <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: {
            completeShipping() {
                this.$emit('updateStep', {'complete_date': this.complete_date, 'type': 'PORT_ARRIVAL'});
            }
        }
    }
</script>