Merge branch 'admin_customer_profile' into 'master'

Admin customer profile

See merge request CIEFWorldwideSdnBhd/exchange-2.0!48

resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="row align-items-center m-b-10 parentContainer">
-        <div class="row w-100 m-0 p-0">
+        <div class="row w-100 m-0 p-0" v-show="!displayAddressForm">
             <div class="col-12 p-0">
                 <label class="muted" :style="minWidth">Reference</label>
                 <label>{{this.company_details.reference ? this.company_details.reference : ""}}</label>
@@ -9,6 +9,10 @@
                 <label class="muted" :style="minWidth">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">Email</label>
+                <label><i class="fa fa-envelope text-primary fs-10"></i>&nbsp;{{this.company_details.employee ? this.company_details.employee.email : ""}}</label>
+            </div>
             <div class="col-12 p-0">
                 <label class="muted" :style="minWidth">Contacts</label>
                 <label><i class="fa fa-envelope text-primary fs-10"></i>&nbsp;{{this.company_details.contact ? this.company_details.contact.email : ""}}</label>
@@ -21,7 +25,7 @@
                 <label class="muted pull-left" :style="minWidth">Identification</label>
                 <div class="col-4 pull-left p-l-0 p-b-5">
                     <label>{{ this.company_details.identification.document_type === 'IDENTITY_CARD' ? 'IC' : 'SSM Registration' }}</label>
-                    <div class="row no-margin">
+                    <div class="row no-margin pull-right">
                         <div v-for="file in this.company_details.identification.files" v-bind:key="file.id"  class="col-auto no-padding m-r-5">
                             <document-file-viewer-component :file="file">
                                 <template slot="button">
@@ -35,13 +39,29 @@
                 </div>
             </div>
             <div class="col-12 p-0">
-                <label class="muted" :style="minWidth">Total Booking</label>
-                <label>{{this.company_details.bookings ? this.company_details.bookings.length : ""}}</label>
+                <label class="muted m-b-0" :style="minWidth">Address&nbsp;</label>
             </div>
-            <div class="col-12 p-0">
+            <div class="col-12 b-t b-b b-grey p-t-5 p-b-5 m-t-5 m-b-5 p-l-0 p-r-0">
+                <list-component key="2" section="addresslist" :endpoint="route('api.address.list')" :options="{'company_id':this.company_details.id}" v-if="this.company_details.id">
+                    <template slot="list" slot-scope="{data}">
+                        <address-component :data="data" section="addressListItem"></address-component>
+                    </template>
+                </list-component>
+            </div>
+            <div class="col-12 p-0" style="width: 500px; height:350px">
                 <canvas id="booking-chart"></canvas>
             </div>
         </div>
+
+        <div class="col" v-show="this.displayAddressForm">
+            <div>Address form</div>
+            <address-form-component :id="parseInt(this.company_details.id)" :type="3" :addressData="this.address" v-if="this.company_details.id"></address-form-component>
+        </div>
+
+        <modal-component id="deleteAddressModal">
+            <address-modal-component section="deleteAddressModal" :address_id="this.address_id"></address-modal-component>
+        </modal-component>
+
     </div>
 </template>
 
@@ -56,6 +76,20 @@
                 required:true
             },
         },
+        mounted(){
+            this.$root.$on('deleteAddressConfirm', (id) => {
+                this.address_id=id;
+                $("#deleteAddressModal").closest('.modal').modal('show');
+            });
+            this.$root.$on('updateAddressForm', (address, show) => {
+                if(show) {
+                    this.address = address;
+                    this.displayAddressForm = true;
+                }else{
+                    this.displayAddressForm = false;
+                }
+            });
+        },
         data(){
             return {
                 minWidth:{
@@ -64,13 +98,15 @@
                 minWidth150:{
                     minWidth:'150px',
                 },
+                address_id:0,
+                address:{},
+                displayAddressForm:false
             }
         },
         watch: {
             company_details: function(newVal, oldVal) {
                 this.company_details=newVal;
-                console.log(newVal);
-console.log('hellp');
+
                 if(newVal !== null) {
 
                     let approved  = 0, completed  = 0, rejected  = 0, expired  = 0, pending = 0;
@@ -119,16 +155,16 @@ console.log('hellp');
                         },
                         options: {
                             responsive: true,
-                                plugins: {
-                                legend: {
-                                    position: 'bottom',
-                                },
-                                title: {
-                                    display: true,
-                                        text: 'Booking Activity'
-                                }
+                            maintainAspectRatio: false,
+                            legend: {
+                                position: 'right',
+                            },
+                            title: {
+                                display: true,
+                                text: 'Booking Activity (Total: '+this.company_details.bookings.length+')'
                             }
                         }
+
                     });
                 }
             }