mirror of
https://gitlab.com/uldvstar/exchange-2.0.git
synced 2026-08-19 04:24:16 +00:00
Bug fixes & added chart - simple booking summary
This commit is contained in:
Fairuz
@@ -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",
|
||||
|
||||
@@ -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> {{this.company_details ? this.company_details.contact.email : ""}}</label>
|
||||
<label><i class="fa fa-envelope text-primary fs-10"></i> {{this.company_details.contact ? this.company_details.contact.email : ""}}</label>
|
||||
</div>
|
||||
<div class="col-12 p-0">
|
||||
<label class="muted" :style="minWidth"> </label>
|
||||
<label><i class="fa fa-phone"></i> {{this.company_details ? this.company_details.contact.phone : ""}}</label>
|
||||
<label><i class="fa fa-phone text-primary fs-10"></i> {{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]
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
+27
-6
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user