From de74523ac296090d3100344091a604f9b47943f3 Mon Sep 17 00:00:00 2001
From: Fairuz <fairuz.tester@gmail.com>
Date: Fri, 21 May 2021 21:12:23 +0800
Subject: [PATCH] List & view customer details components

---
 .../elements/CompanyDetailsComponent.vue      | 64 +++++++++++++++++++
 .../elements/CompanyListComponent.vue         | 34 ++++++++++
 .../CompanyQuickViewSectionComponent.vue      | 34 ++++++++++
 resources/views/pages/settings.blade.php      | 18 ++++--
 4 files changed, 144 insertions(+), 6 deletions(-)
 create mode 100644 resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
 create mode 100644 resources/assets/vue/components/companies/elements/CompanyListComponent.vue
 create mode 100644 resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue

diff --git a/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
new file mode 100644
index 00000000..6761b9f5
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
@@ -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>&nbsp;{{this.company_details ? 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>
+            </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>
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/elements/CompanyListComponent.vue b/resources/assets/vue/components/companies/elements/CompanyListComponent.vue
new file mode 100644
index 00000000..a8eab305
--- /dev/null
+++ b/resources/assets/vue/components/companies/elements/CompanyListComponent.vue
@@ -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>
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue b/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue
new file mode 100644
index 00000000..a20dc7c5
--- /dev/null
+++ b/resources/assets/vue/components/companies/sections/CompanyQuickViewSectionComponent.vue
@@ -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>
\ No newline at end of file
diff --git a/resources/views/pages/settings.blade.php b/resources/views/pages/settings.blade.php
index 9976e62c..3eb33179 100644
--- a/resources/views/pages/settings.blade.php
+++ b/resources/views/pages/settings.blade.php
@@ -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
\ No newline at end of file
+@endsection
+<script>
+    import CompanyQuickViewSectionComponent
+        from "../../assets/vue/components/companies/sections/CompanyQuickViewSectionComponent";
+    export default {
+        components: {CompanyQuickViewSectionComponent}
+    }
+</script>
\ No newline at end of file