From 47fc81c6fb2de42308a0d8c349658dcb03ed7809 Mon Sep 17 00:00:00 2001
From: Fairuz <fairuz.tester@gmail.com>
Date: Mon, 24 May 2021 13:08:48 +0800
Subject: [PATCH] Bug fixes & added chart - simple booking summary

---
 package.json                                  |  1 +
 .../elements/CompanyDetailsComponent.vue      | 83 +++++++++++++++++--
 .../elements/CompanyListComponent.vue         |  9 +-
 .../CompanyQuickViewSectionComponent.vue      | 33 ++++++--
 4 files changed, 110 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index ea1b12a3..ced333fa 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
         "animate.css": "^4.1.1",
         "bootstrap": "^4.0.0",
         "bootstrap-datepicker": "^1.7.1",
+        "chart.js": "^2.9.4",
         "dropzone": "^5.7.2",
         "epic-spinners": "^1.1.0",
         "flag-icon-css": "^3.5.0",
diff --git a/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
index 6761b9f5..3fc57ff1 100644
--- a/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
+++ b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
@@ -6,27 +6,30 @@
         </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 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 ? this.company_details.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 ? getBusinessTypeDesc(this.company_details.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"></i>&nbsp;{{this.company_details ? this.company_details.contact.email : ""}}</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"></i>&nbsp;{{this.company_details ? this.company_details.contact.phone : ""}}</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 ? this.company_details.bookings.length : ""}}</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>
@@ -34,6 +37,8 @@
 
 <script>
     import componentHandler from '../../../general/mixins/componentHandler';
+    import Chart from 'chart.js';
+
     export default {
         props:{
             company_details:{
@@ -51,13 +56,77 @@
                 },
             }
         },
+        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]
     }
diff --git a/resources/assets/vue/components/companies/elements/CompanyListComponent.vue b/resources/assets/vue/components/companies/elements/CompanyListComponent.vue
index a8eab305..152dbecc 100644
--- a/resources/assets/vue/components/companies/elements/CompanyListComponent.vue
+++ b/resources/assets/vue/components/companies/elements/CompanyListComponent.vue
@@ -1,10 +1,13 @@
 <template>
     <div class="row align-items-center m-b-10 parentContainer">
-        <div class="row w-100 m-0 p-0 d-block">
-            <div class="col-auto pull-left mt-2">
+        <div class="row w-100 m-0 p-0 ">
+            <div class="col-8 pull-left mt-2 pr-0">
                 <div class="font-heading all-caps fs-11">{{this.item.name}}</div>
             </div>
-            <div class="col-auto text-right pull-right" :style="minWidth">
+            <div class="col-2 text-center mt-2">
+                <div class="font-heading all-caps fs-11">{{this.item.bookings.length}}</div>
+            </div>
+            <div class="col-2 text-right pull-right">
                <button type="button" @click="viewCompany()" class="btn btn-xs btn-primary fs-11">View</button>
             </div>
         </div>
diff --git a/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue b/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue
index a20dc7c5..c5d778fe 100644
--- a/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue
@@ -1,10 +1,25 @@
 <template>
     <div class="col-12">
-        <list-component  v-show="!this.show_details"   key="2" :section="this.section" :endpoint="route('api.company.list')" :options="{per_page: 25,with_bookings:true}">
-            <template slot="list" slot-scope="{data}">
-                <company-list-component :data="data"></company-list-component>
-            </template>
-        </list-component>
+        <div class="b-b b-dashed b-grey p-b-25" v-show="!this.show_details">
+            <div class="row align-items-center m-b-5 parentContainer">
+
+                   <div class="col-8">
+                        <div class="font-heading fs-10 muted all-caps">Company</div>
+                    </div>
+                    <div class="col-2 text-center">
+                        <div class="font-heading fs-10 muted all-caps">Booking</div>
+                    </div>
+                    <div class="col-2 text-right pull-right">
+                        <div class="font-heading fs-10 muted all-caps">Action</div>
+                    </div>
+
+            </div>
+            <list-component  key="2" :section="this.section" :endpoint="route('api.company.list')" :options="{per_page: 25,with_bookings:true}">
+                <template slot="list" slot-scope="{data}">
+                    <company-list-component :data="data"></company-list-component>
+                </template>
+            </list-component>
+        </div>
         <company-details-component  v-show="this.show_details" :company_details="company_details"></company-details-component>
     </div>
 </template>
@@ -16,7 +31,13 @@
             return {
                 section: 'companyQuickViewSection',
                 show_details: false,
-                company_details: null
+                company_details: {},
+                minWidth:{
+                    minWidth:'100px',
+                },
+                minWidth150:{
+                    minWidth:'150px',
+                },
             }
         },
         mounted() {