omair/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/uldvstar/exchange-2.0.git synced 2026-08-19 04:24:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bug fixes & added chart - simple booking summary

Browse Source
This commit is contained in:
Fairuz
2021-05-24 13:08:48 +08:00
parent de74523ac2
commit 47fc81c6fb
4 changed files with 110 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -13,6 +13,7 @@
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"bootstrap": "^4.0.0", "bootstrap": "^4.0.0",
"bootstrap-datepicker": "^1.7.1", "bootstrap-datepicker": "^1.7.1",
"chart.js": "^2.9.4",
"dropzone": "^5.7.2", "dropzone": "^5.7.2",
"epic-spinners": "^1.1.0", "epic-spinners": "^1.1.0",
"flag-icon-css": "^3.5.0", "flag-icon-css": "^3.5.0",
resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
+76 -7
View File
@@ -6,27 +6,30 @@
</div> </div>
<div class="row w-100 m-0 p-0"> <div class="row w-100 m-0 p-0">
<div class="col-auto p-0 pt-2 m-b-10" :style="minWidth"> <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>
<div class="col-12 p-0"> <div class="col-12 p-0">
<label class="muted" :style="minWidth">Reference</label> <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>
<div class="col-12 p-0"> <div class="col-12 p-0">
<label class="muted" :style="minWidth">Business Type</label> <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>
<div class="col-12 p-0"> <div class="col-12 p-0">
<label class="muted" :style="minWidth">Contacts</label> <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>
<div class="col-12 p-0"> <div class="col-12 p-0">
<label class="muted" :style="minWidth">&nbsp;</label> <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>
<div class="col-12 p-0"> <div class="col-12 p-0">
<label class="muted" :style="minWidth">Total Booking</label> <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> </div>
</div> </div>
@@ -34,6 +37,8 @@
<script> <script>
import componentHandler from '../../../general/mixins/componentHandler'; import componentHandler from '../../../general/mixins/componentHandler';
import Chart from 'chart.js';
export default { export default {
props:{ props:{
company_details:{ 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: { methods: {
backToCompanyList() { backToCompanyList() {
this.$root.$emit('backToCompanyList'); this.$root.$emit('backToCompanyList');
}, },
getBusinessTypeDesc(type){ getBusinessTypeDesc(type){
return (type==1) ? 'Company Account':'Personal Account'; return (type==1) ? 'Company Account':'Personal Account';
} },
}, },
mixins: [componentHandler] mixins: [componentHandler]
} }
resources/assets/vue/components/companies/elements/CompanyListComponent.vue
+6 -3
View File
@@ -1,10 +1,13 @@
<template> <template>
<div class="row align-items-center m-b-10 parentContainer"> <div class="row align-items-center m-b-10 parentContainer">
<div class="row w-100 m-0 p-0 d-block"> <div class="row w-100 m-0 p-0 ">
<div class="col-auto pull-left mt-2"> <div class="col-8 pull-left mt-2 pr-0">
<div class="font-heading all-caps fs-11">{{this.item.name}}</div> <div class="font-heading all-caps fs-11">{{this.item.name}}</div>
</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> <button type="button" @click="viewCompany()" class="btn btn-xs btn-primary fs-11">View</button>
</div> </div>
</div> </div>
resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue
+27 -6
View File
@@ -1,10 +1,25 @@
<template> <template>
<div class="col-12"> <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}"> <div class="b-b b-dashed b-grey p-b-25" v-show="!this.show_details">
<template slot="list" slot-scope="{data}"> <div class="row align-items-center m-b-5 parentContainer">
<company-list-component :data="data"></company-list-component>
</template> <div class="col-8">
</list-component> <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> <company-details-component v-show="this.show_details" :company_details="company_details"></company-details-component>
</div> </div>
</template> </template>
@@ -16,7 +31,13 @@
return { return {
section: 'companyQuickViewSection', section: 'companyQuickViewSection',
show_details: false, show_details: false,
company_details: null company_details: {},
minWidth:{
minWidth:'100px',
},
minWidth150:{
minWidth:'150px',
},
} }
}, },
mounted() { mounted() {