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

<template>
    <div class="inline">
        <div class="btn btn-sm btn-success b-rad-none requestModal"  data-type="receiveNote">Confirm Warehouse</div>
        <modal-component type="receiveNote">
            <notification-component ref="notification"></notification-component>
            <loading-component style="left: 0;" v-show="isLoading"></loading-component>
            <div class="card card-default no-border">
                <div class="card-block no-padding">
                    <div class="row p-t-30">
                        <div class="col no-padding">
                            <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
                                <h6 class="bold all-caps no-margin text-success">Confirm Warehouse</h6>
                                <div class="muted all-caps fs-12">Setup and confirm order</div>
                            </div>
                        </div>
                    </div>
                    <form method="post" @submit.prevent="addOrder">
                        <div class="row">
                            <div class="col no-padding">
                                <div class="row"  v-show="this.showWarehouse">
                                    <div class="col no-padding">
                                        <div class="form-group form-group-default form-group-default-select2 m-b-0" >
                                            <label class="muted" style="z-index: 10000;">Warehouse</label>
                                            <select-component  :options="this.warehouses" v-model="order.warehouse_id"></select-component>
                                        </div>
                                    </div>
                                    <div class="col-auto padding-5 bg-master-lighter pointer" @click="toggleIncludeWarehouse()">
                                        <div class="row align-items-center justify-content-center h-100">
                                            <div class="col">
                                                <i class="fa fa-times text-danger m-l-5 m-r-5"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row m-b-20">
                                    <div class="col no-padding">
                                        <div v-show="!this.showWarehouse" @click="toggleIncludeWarehouse()" class="b-a b-grey pull-right bold text-complete all-caps fs-11 p-l-15 p-r-15 p-t-5 p-b-5 pointer"><i class="fa fa-plus m-r-5"></i>Add Warehouse</div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col text-right no-padding">
                                        <div class="row">
                                            <div class="col no-padding">
                                                <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn b-rad-none btn-primary" @click="confirmOrder()" data-dismiss="modal">Confirm Warehouse</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </modal-component>
    </div>
</template>
<script>
    import notificationConstant from '../../../../../js/notification';
    export default {
        props: {
            'data': {
                type: String,
                required: true
            }
        },
        data() {
            return {
                order: {
                    warehouse_id: null
                },
                warehouses: [],
                showWarehouse: false,
                isLoading: false
            }
        },
        created() {
            this.fetchWarehouses();
        },
        methods: {
            fetchWarehouses(){
                //turn on loading animation
                this.isLoading = true;

                fetch(route('api.warehouse.list', {'all': true})).then(response => response.json())
                    .then(response => {

                        this.warehouses = $.map(response.data, function(value, key){
                            return {'id': value.id, 'text': value.name};
                        });

                        //turn off loading animation
                        this.isLoading = false;

                    })
                    .catch(error => console.log(error))
            },
            confirmOrder() {

                //turn on loading animation
                this.isLoading = true;
                fetch(route('api.order.step.update', {orderId: this.data}), {
                    method: 'post',
                    body: JSON.stringify(this.order),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(() => {
                    this.clearForm();
                    //turn off loading animation
                    this.isLoading = false;

                    let notification = this.$refs.notification;

                    notification.title = notificationConstant.ORDER.ORDER_WAREHOUSE_CONFIRMED.TITLE;
                    notification.message = notificationConstant.ORDER.ORDER_WAREHOUSE_CONFIRMED.MESSAGE;


                    notification.execute();

                    Event.$emit('updateOrdersList');

                })
            },
            toggleIncludeWarehouse(){
                this.order.warehouse_id = null;
                this.showWarehouse = !this.showWarehouse;
            },
            clearForm(){
                this.order.warehouse_id = null;
                this.showWarehouse = false;
            }
        }
    }
</script>