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

<template>
    <div class="row align-items-center m-b-10 parentContainer">
        <div class="row w-100 m-0 p-0" v-show="!displayAddressForm">
            <div class="col-12 p-0">
                <label :style="minWidth">Reference</label>
                <label>{{this.company_details.reference ? this.company_details.reference : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label :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 :style="minWidth">Company Type</label>
                <label>
                    {{getCompanyTypeDesc(this.company_details.type)}}
                    <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary" data-type="changeCompanyType" >
                        <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                    </div>
                </label>
            </div>
            <div class="col-12 p-0">
                <label :style="minWidth">Email</label>
                <label><i class="fa fa-envelope text-primary fs-10"></i>&nbsp;{{this.company_details.employee ? this.company_details.employee.email : ""}}</label>
            </div>
            <div class="col-12 p-0">
                <label :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 ? this.company_details.contact.email : "-"}}</label>
            </div>
            <div class="col-12 p-0">
                <label :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 : ""}}
                    <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary" data-type="changeCustomerContactNumber" >
                        <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                    </div>
                </label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.identification && this.company_details.identification.document_type">
                <label class="pull-left" :style="minWidth">Identification</label>
                <div class="col-4 pull-left p-l-0 p-b-5">
                    <label>{{ this.company_details.identification.document_type === 'IDENTITY_CARD' ? 'IC' : 'SSM Registration' }}</label>
                    - <label>{{ this.company_details.identification.reference }}</label>
                    <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary" data-type="changeCustomerCompanyDetails" >
                        <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                    </div>
                    <div class="row no-margin pull-right">
                        <div v-for="file in this.company_details.identification.files" v-bind:key="file.id"  class="col-auto no-padding m-r-5">
                            <document-file-viewer-component :file="file">
                                <template slot="button">
                                    <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
                                        <i class="fa fa-file-image-o fs-10"></i>
                                    </div>
                                </template>
                            </document-file-viewer-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 p-0 p-b-5 d-none">
                <div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15 requestModal" data-type="editProfileInfo">
                    <i class="fa fa-pencil m-r-10"></i>Edit Profile Info
                </div>
            </div>
            <div class="col-12 p-0 p-t-5" v-if="this.company_details.e_invoice">
                <label class="muted m-b-0" :style="minWidth175">E-Invoice Info&nbsp;</label>
                <div class="btn btn-xs b-rad-none pointer requestModal d-inline rounded no-border hover-primary" data-type="changeCustomerCompanyDetails" >
                    <i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i>
                </div>
            </div>
            <div class="col-12 b-t b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1" v-if="this.company_details.e_invoice">
                <label :style="minWidth175">TIN</label>
                <label>{{this.company_details.tin ? this.company_details.tin : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.e_invoice">
                <label :style="minWidth175">MSIC Code</label>
                <label>{{this.company_details.msic_code ? this.company_details.msic_code : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.e_invoice && this.company_details.address_einvoice">
                <label :style="minWidth175">Billing Address Line 1</label>
                <label>{{this.company_details.address_einvoice.street_one ? this.company_details.address_einvoice.street_one : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.e_invoice && this.company_details.address_einvoice">
                <label :style="minWidth175">Billing Address Line 2</label>
                <label>{{this.company_details.address_einvoice.street_two ? this.company_details.address_einvoice.street_two : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.e_invoice && this.company_details.address_einvoice">
                <label :style="minWidth175">District</label>
                <label>{{this.company_details.address_einvoice.district ? this.company_details.address_einvoice.district.name : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.e_invoice && this.company_details.address_einvoice">
                <label :style="minWidth175">Post Code</label>
                <label>{{this.company_details.address_einvoice.post_code ? this.company_details.address_einvoice.post_code : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.e_invoice && this.company_details.address_einvoice">
                <label :style="minWidth175">State</label>
                <label>{{this.company_details.address_einvoice.state ? this.company_details.address_einvoice.state.name : ""}}</label>
            </div>
            <div class="col-12 p-0" v-if="this.company_details.e_invoice && this.company_details.address_einvoice">
                <label :style="minWidth175">Country</label>
                <label>{{this.company_details.address_einvoice.country ? this.company_details.address_einvoice.country.name : ""}}</label>
            </div>
            <div class="col-12 p-0 p-t-5">
                <label class="muted m-b-0" :style="minWidth">Recipients Bank Accounts&nbsp;</label>
            </div>
            <div class="col-12 b-t b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1">
                <list-component key="2" section="companyBanksSection" :endpoint="route('api.bank.list')" :options="{'company_id': this.company_details.id}" v-if="this.company_details.id">
                    <template slot="list" slot-scope="{data}">
                        <company-bank-account-component :data="data" :company_id="parseInt(company_details.id)" section="companyBanksSection"></company-bank-account-component>
                    </template>
                </list-component>
            </div>
            <div class="col-12 p-0 p-t-5">
                <label class="muted m-b-0" :style="minWidth">Address&nbsp;</label>
            </div>
            <div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-1">
                <list-component key="2" section="addresslist" :endpoint="route('api.address.list')" :options="{'company_id':this.company_details.id}" v-if="this.company_details.id">
                    <template slot="list" slot-scope="{data}">
                        <address-component :data="data" section="addressListItem"></address-component>
                    </template>
                </list-component>
            </div>
            <div class="col-12 p-0" style="width: 500px; height:350px">
                <canvas id="booking-chart"></canvas>
            </div>
        </div>

        <div class="col" v-show="this.displayAddressForm">
            <div>Address form</div>
            <address-form-component :id="parseInt(this.company_details.id)" :type="3" :addressData="this.address" v-if="this.company_details.id"></address-form-component>
        </div>

        <modal-component id="deleteAddressModal">
            <address-modal-component section="deleteAddressModal" :address_id="this.address_id"></address-modal-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editProfileInfo">
            <edit-customer-profile-info-form-component :data="this.company_details" :section="section" v-if="this.company_details.id"></edit-customer-profile-info-form-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeCustomerContactNumber">
            <edit-customer-contact-number-form-component :data="this.company_details" :section="section"></edit-customer-contact-number-form-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeCompanyType">
            <edit-customer-company-type-form-component :data="this.company_details" :section="section"></edit-customer-company-type-form-component>
        </modal-component>
        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="changeCustomerCompanyDetails">
            <change-customer-company-details-form-component :section="'customerProfileSection'" :data="this.company_details"></change-customer-company-details-form-component>
        </modal-component>
    </div>
</template>

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

    export default {
        props:{
            company_details:{
                type:Object,
                required:true
            },
            section: {
                type: String,
                required: true
            },
        },
        mounted(){
            this.$root.$on('deleteAddressConfirm', (id) => {
                this.address_id=id;
                $("#deleteAddressModal").closest('.modal').modal('show');
            });
            this.$root.$on('updateAddressForm', (address, show) => {
                if(show) {
                    this.address = address;
                    this.displayAddressForm = true;
                }else{
                    this.displayAddressForm = false;
                }
            });
        },
        data(){
            return {
                minWidth:{
                    minWidth:'120px',
                },
                minWidth175:{
                    minWidth:'175px',
                },
                address_id:0,
                address:{},
                displayAddressForm:false
            }
        },
        watch: {
            company_details: function(newVal, oldVal) {
                this.company_details=newVal;

                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,
                            maintainAspectRatio: false,
                            legend: {
                                position: 'right',
                            },
                            title: {
                                display: true,
                                text: 'Booking Activity (Total: '+this.company_details.bookings.length+')'
                            }
                        }

                    });
                }
            }
        },
        methods: {
            backToCompanyList() {
                this.$root.$emit('backToCompanyList');
            },
            getBusinessTypeDesc(business_type_id) {
                switch (business_type_id) {
                    case 1:
                        return 'Freight Forwarder';
                    case 2:
                        return 'Importer';
                    case 3:
                        return 'Currency Vendor';
                    case 4:
                        return 'Transfer Agent';
                    default:
                        return null;
                }
            },
            getCompanyTypeDesc(company_type_id) {
                return (company_type_id == 1) ? 'Company Business' : 'Personal Business';
            },
        },
        mixins: [componentHandler]
    }
</script>