mirror of
https://gitlab.com/uldvstar/exchange-2.0.git
synced 2026-08-19 04:24:16 +00:00
List & view customer details components
This commit is contained in:
Fairuz
@@ -0,0 +1,64 @@
|
||||
<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 ? 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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
props:{
|
||||
company_details:{
|
||||
type:Object,
|
||||
required:true
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
minWidth:{
|
||||
minWidth:'100px',
|
||||
},
|
||||
minWidth150:{
|
||||
minWidth:'150px',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backToCompanyList() {
|
||||
this.$root.$emit('backToCompanyList');
|
||||
},
|
||||
getBusinessTypeDesc(type){
|
||||
return (type==1) ? 'Company Account':'Personal Account';
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,34 @@
|
||||
<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="font-heading all-caps fs-11">{{this.item.name}}</div>
|
||||
</div>
|
||||
<div class="col-auto text-right pull-right" :style="minWidth">
|
||||
<button type="button" @click="viewCompany()" class="btn btn-xs btn-primary fs-11">View</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
minWidth:{
|
||||
minWidth:'100px',
|
||||
},
|
||||
minWidth150:{
|
||||
minWidth:'150px',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
viewCompany() {
|
||||
this.$root.$emit('viewCompany', this.item);
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
<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>
|
||||
<company-details-component v-show="this.show_details" :company_details="company_details"></company-details-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
section: 'companyQuickViewSection',
|
||||
show_details: false,
|
||||
company_details: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$root.$on('backToCompanyList', () => {
|
||||
this.show_details=false;
|
||||
this.$store.dispatch('reloadList', {'name': this.section});
|
||||
});
|
||||
this.$root.$on('viewCompany', (company_details) => {
|
||||
this.show_details=true;
|
||||
this.company_details=company_details;
|
||||
});
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -461,7 +461,7 @@
|
||||
<div class="row justify-content-end">
|
||||
<div class="col">
|
||||
<div class="row fs-12 text-center">
|
||||
<div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="payments">
|
||||
<div class="col p-t-20 p-b-20 bg-master-lighter tabButton active" tab-name="customer-list">
|
||||
<div class="row justify-content-center m-b-5">
|
||||
<div class="col-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
@@ -484,7 +484,7 @@
|
||||
<div class="row justify-content-end">
|
||||
<div class="col">
|
||||
<div class="row fs-12 text-center">
|
||||
<div class="col p-t-20 p-b-20 bg-master-lighter tabButton active" tab-name="transactions">
|
||||
<div class="col p-t-20 p-b-20 bg-master-lighter tabButton " tab-name="transactions">
|
||||
<div class="row justify-content-center m-b-5">
|
||||
<div class="col-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
@@ -506,9 +506,8 @@
|
||||
</div>
|
||||
<div class="row no-margin">
|
||||
<div class="col bg-white padding-25">
|
||||
<div class="row tabsContainer tabContent" tab-name="transfers">
|
||||
<div class="col no-padding">
|
||||
</div>
|
||||
<div class="row tabsContainer tabContent" tab-name="customer-list">
|
||||
<company-quick-view-section-component></company-quick-view-section-component>
|
||||
</div>
|
||||
<div class="row tabsContainer hide tabContent" tab-name="PO">
|
||||
<div class="col">
|
||||
@@ -533,4 +532,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@endsection
|
||||
<script>
|
||||
import CompanyQuickViewSectionComponent
|
||||
from "../../assets/vue/components/companies/sections/CompanyQuickViewSectionComponent";
|
||||
export default {
|
||||
components: {CompanyQuickViewSectionComponent}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user