exchange-2.0/resources/assets/vue/components/bookings/elements/BookingMergeModalComponent.vue

<template>
    <div class="row m-b-10 parentContainer">
        <div class="col">
            <div class="row align-items-center">
                <div class="col p-t-5 p-b-5">
                    <div class="col text-center">
                        <div class="row m-b-20">
                            <div class="col">
                                <h5 class="all-caps">Merge Transfers</h5>
                                <div class="fs-11">Are you sure you want to merge? This action is undoable.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col p-r-5">
                                <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
                            </div>
                            <div class="col p-l-5">
                                <div data-dismiss="modal" class="btn btn-sm btn-success btn-block b-rad-none" @click="mergeTransfer()">Merge</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import staticFormHandler from '../../../general/mixins/staticFormHandler'
    export default {
        props: {
            'section' : {
                type: String,
                required:true,
            },
            'booking': {
                type: Object,
                required: true
            },
            'bookingToMerge': {
                type: Array,
                required: true
            },
        },
        data(){
            return {
                parameters:null,
                isLoading: false,
            }
        },
        methods: {
            mergeTransfer(){

                this.$root.$emit('setLoading', true);

                let bookings=[];
                this.bookingToMerge.forEach(function(booking) {
                    bookings.push(booking.id);
                });
                this.parameters = {};

                if(bookings.length>0) {
                    this.$set(this.parameters, 'id', this.booking.id);
                    this.$set(this.parameters, 'booking_ids', bookings);
                    this.submit(route('api.booking.merge'), 'post', this.section, true, true);
                }
            },
            successHandler(){
                setTimeout(function(marking){
                    window.location.href = this.route('booking.details', marking);
                }, 2000, this.booking.marking);
            },
            errorHandler() {
                this.$root.$emit('setLoading', false);
            },
        },
        mixins: [componentHandler, staticFormHandler]
    }
</script>