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

<template>
    <div class="row align-items-center m-b-10 parentContainer">
        <div class="row w-100 m-0 p-0">
            <div class="col-auto hide" @click="showPurchaseDetails(item.id)">
                <div class="hint-text">
                    <i class="fa fa-plus fs-8 muted hint-text"></i>
                </div>
            </div>
            <div class="col-auto pt-1 pb-0 pr-1">
                <div class="font-heading fs-12" style="line-height: 0px;">
                    <input type="checkbox" v-bind:data-id="this.item.id" @change="selectedBookings">
                </div>
            </div>
            <div class="col-auto" :style="minWidth">
                <div class="font-heading all-caps fs-11">{{this.item.created_at}}</div>
            </div>
            <div class="col-auto" :style="minWidth">
                <div class="font-heading all-caps fs-11 bold">{{this.item.marking}}</div>
            </div>
            <div class="col-auto" :style="minWidth">
                <div class="font-heading fs-11 bold">
                    <span class="flag-icon fs-11" :class="'flag-icon-'+item.convertible_currency.country.short_code.toLowerCase()"></span> {{this.item.convertible_currency.short_code}}
                </div>
            </div>
            <div class="col-auto" :style="minWidth">
                <div class="font-heading fs-11">{{this.item.service.name}}</div>
            </div>
            <div class="col-auto" :style="minWidth150">
                <div class="font-heading fs-11 text-success bold" v-if="item.purchase_order!==null">{{formatAmount(this.item.purchase_order.amount)}} {{this.item.purchase_order.original_currency.short_code}}</div>
            </div>
            <div class="col-auto" :style="minWidth150">
                <div class="font-heading fs-11 text-success bold">{{formatAmount(this.item.amount)}} {{this.item.fixed_currency.short_code}}</div>
            </div>
        </div>

        <div class="row text-left no-margin bg-white hide" v-if="item.purchase_order!==null" v-for="po in (this.item.purchase_order ? this.item.purchase_order.details : [])" v-bind:key="po.id">
            <div class="col">
                <div class="font-heading fs-11 text-success bold">{{po.description}}</div>
            </div>
            <div class="col">
                <div class="font-heading fs-11 text-success bold">{{po.quantity}}</div>
            </div>
            <div class="col">
                <div class="font-heading fs-11 text-success bold">{{po.unit_price}}</div>
            </div>
            <div class="col">
                <div class="font-heading fs-11 text-success bold">{{po.total}}</div>
            </div>
        </div>
    </div>

</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                minWidth:{
                    minWidth:'100px',
                },
                minWidth150:{
                    minWidth:'150px',
                },
                selected_id:0,
            }
        },
        methods: {
            selectedBookings(e) {
                this.$root.$emit('selectedBookings', e.target, this.item);
            },
            showPurchaseDetails(id){
                console.log(this.selected_id);
                this.selected_id = id;
            },
            formatAmount(amount){
                return (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2)
            },
        },
        mixins: [componentHandler]
    }
</script>