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.name ? this.company_details.name : ""}}</div>
            </div>
            <div class="col-12 p-0">
                <label class="muted" :style="minWidth">Reference</label>
                <label>{{this.company_details.reference ? this.company_details.reference : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label class="muted" :style="minWidth">Business Type</label>
                <label>{{this.company_details.business_type ? 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 text-primary fs-10"></i>&nbsp;{{this.company_details.contact ? 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 text-primary fs-10"></i>&nbsp;{{this.company_details.contact ? 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.bookings ? this.company_details.bookings.length : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <canvas id="booking-chart"></canvas>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import Chart from 'chart.js';

    export default {
        props:{
            company_details:{
                type:Object,
                required:true
            },
        },
        data(){
            return {
                minWidth:{
                    minWidth:'100px',
                },
                minWidth150:{
                    minWidth:'150px',
                },
            }
        },
        watch: {
            company_details: function(newVal, oldVal) {
                if(newVal !== null) {

                    let approved  = 0, completed  = 0, rejected  = 0, expired  = 0, pending = 0;
                    this.company_details.bookings.forEach(function (booking) {
                        if (booking) {
                            switch (booking.status) {
                                case 1:
                                    pending += 1;
                                    break;
                                case 2:
                                    approved += 1;
                                    break;
                                case 3:
                                    completed += 1;
                                    break;
                                case 4:
                                    rejected += 1;
                                    break;
                                case 6:
                                    expired += 1;
                                    break;
                                default:
                                    break;
                            }
                        }
                    });

                    const ctx = document.getElementById('booking-chart');
                    new Chart(ctx,  {
                        type: "pie",
                            data: {
                            labels: ['Completed','Approved','Rejected','Pending Verification','Expired'],
                                datasets: [
                                {
                                    label: 'Booking Summary',
                                    data: [completed,approved,rejected,pending,expired],
                                    backgroundColor: [
                                        '#4bc0c0',
                                        '#35a2eb',
                                        '#ff6384',
                                        '#ff9f40',
                                        '#ffcd56'
                                    ],
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                                plugins: {
                                legend: {
                                    position: 'bottom',
                                },
                                title: {
                                    display: true,
                                        text: 'Booking Activity'
                                }
                            }
                        }
                    });
                }
            }
        },
        methods: {
            backToCompanyList() {
                this.$root.$emit('backToCompanyList');
            },
            getBusinessTypeDesc(type){
                return (type==1) ? 'Company Account':'Personal Account';
            },
        },
        mixins: [componentHandler]
    }
</script>