exchange-2.0/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue

<template>
    <div class="row align-items-center m-b-10 parentContainer">
        <div class="container p-0 m-0" @click="backToCompanyList()">
            <i class="fa fa-arrow-left fs-11 align-middle"></i>
            <span class="fs-11 m-0 align-middle pl-2 text-uppercase">Back to list</span>
        </div>
        <div class="row w-100 m-0 p-0">
            <div class="col-auto p-0 pt-2 m-b-10" :style="minWidth">
                <div class="h5 m-0">{{this.company_details ? this.company_details.name : ""}}</div>
            </div>
            <div class="col-12 p-0">
                <label class="muted" :style="minWidth">Reference</label>
                <label>{{this.company_details ? this.company_details.reference : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label class="muted" :style="minWidth">Business Type</label>
                <label>{{this.company_details ? getBusinessTypeDesc(this.company_details.business_type) : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label class="muted" :style="minWidth">Contacts</label>
                <label><i class="fa fa-envelope"></i>&nbsp;{{this.company_details ? this.company_details.contact.email : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label class="muted" :style="minWidth">&nbsp;</label>
                <label><i class="fa fa-phone"></i>&nbsp;{{this.company_details ? this.company_details.contact.phone : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label class="muted" :style="minWidth">Total Booking</label>
                <label>{{this.company_details ? this.company_details.bookings.length : ""}}</label>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props:{
            company_details:{
                type:Object,
                required:true
            },
        },
        data(){
            return {
                minWidth:{
                    minWidth:'100px',
                },
                minWidth150:{
                    minWidth:'150px',
                },
            }
        },
        methods: {
            backToCompanyList() {
                this.$root.$emit('backToCompanyList');
            },
            getBusinessTypeDesc(type){
                return (type==1) ? 'Company Account':'Personal Account';
            }
        },
        mixins: [componentHandler]
    }
</script>