From bf4c1080fcab410e0455295f1bd77e5bbb0b7623 Mon Sep 17 00:00:00 2001
From: Fairuz <fairuz.tester@gmail.com>
Date: Mon, 31 May 2021 19:37:53 +0800
Subject: [PATCH] Removed Credit Profile, Rearrange Tabs & Move Address to
 Customer Profile

---
 .../elements/CompanyDetailsComponent.vue      | 66 ++++++++++++++-----
 .../CustomerProfileSectionComponent.vue       | 59 +----------------
 2 files changed, 53 insertions(+), 72 deletions(-)

diff --git a/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue b/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
index b258a4f0..4d02b219 100644
--- a/resources/assets/vue/components/companies/elements/CompanyDetailsComponent.vue
+++ b/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+')'
                             }
                         }
+
                     });
                 }
             }
diff --git a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
index 4140bf55..1238ac6d 100644
--- a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
@@ -53,25 +53,6 @@
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="col">
-                                                    <div class="row fs-12 text-center">
-                                                        <div class="col p-t-15 p-b-15 bg-master-lighter tabButton" tab-name="credit">
-                                                            <div class="row justify-content-center">
-                                                                <div class="col-auto">
-                                                                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                                                                         width="35" height="35"
-                                                                         viewBox="0 0 172 172"
-                                                                         style=" fill:#000000;"><defs><linearGradient x1="131.6875" y1="110.58794" x2="131.6875" y2="150.61556" gradientUnits="userSpaceOnUse" id="color-1_DhXzKyWAbozd_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="86.74444" x2="86" y2="148.45481" gradientUnits="userSpaceOnUse" id="color-2_DhXzKyWAbozd_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="22.41375" x2="86" y2="32.92994" gradientUnits="userSpaceOnUse" id="color-3_DhXzKyWAbozd_gr3"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="40.3125" y1="65.12888" x2="40.3125" y2="74.98125" gradientUnits="userSpaceOnUse" id="color-4_DhXzKyWAbozd_gr4"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="131.6875" y1="45.40262" x2="131.6875" y2="56.24131" gradientUnits="userSpaceOnUse" id="color-5_DhXzKyWAbozd_gr5"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86.00269" y1="16.40988" x2="86.00269" y2="161.42738" gradientUnits="userSpaceOnUse" id="color-6_DhXzKyWAbozd_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="16.40988" x2="86" y2="161.42738" gradientUnits="userSpaceOnUse" id="color-7_DhXzKyWAbozd_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="40.31519" y1="16.40988" x2="40.31519" y2="161.42738" gradientUnits="userSpaceOnUse" id="color-8_DhXzKyWAbozd_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="131.69019" y1="16.40988" x2="131.69019" y2="161.42738" gradientUnits="userSpaceOnUse" id="color-9_DhXzKyWAbozd_gr9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="40.3125" y1="128.94356" x2="40.3125" y2="150.2205" gradientUnits="userSpaceOnUse" id="color-10_DhXzKyWAbozd_gr10"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><rect x="48" y="41" transform="scale(2.6875,2.6875)" width="2" height="16" fill="url(#color-1_DhXzKyWAbozd_gr1)"></rect><rect x="31" y="32" transform="scale(2.6875,2.6875)" width="2" height="25" fill="url(#color-2_DhXzKyWAbozd_gr2)"></rect><path d="M83.06525,20.30675l-7.54113,12.15287c-0.73637,1.07231 0.09675,2.47788 1.46738,2.47788h18.01431c1.37331,0 2.20375,-1.40556 1.46738,-2.47788l-7.54112,-12.15287c-1.36525,-1.99144 -4.49887,-1.99144 -5.86681,0z" fill="url(#color-3_DhXzKyWAbozd_gr3)"></path><path d="M37.37775,63.30675l-7.54112,12.15288c-0.73638,1.07231 0.09675,2.47787 1.46737,2.47787h18.01431c1.37331,0 2.20375,-1.40556 1.46737,-2.47787l-7.54113,-12.15288c-1.36525,-1.99144 -4.49887,-1.99144 -5.86681,0z" fill="url(#color-4_DhXzKyWAbozd_gr4)"></path><path d="M128.75275,44.49425l-7.54112,12.15288c-0.73638,1.07231 0.09675,2.47787 1.46737,2.47787h18.01431c1.37331,0 2.20375,-1.40556 1.46738,-2.47788l-7.54112,-12.15288c-1.36525,-1.99144 -4.49888,-1.99144 -5.86681,0z" fill="url(#color-5_DhXzKyWAbozd_gr5)"></path><path d="M76.9915,37.625h6.321v16.125h5.375v-16.125h6.321c1.67162,0 3.182,-0.89494 3.94256,-2.34081c0.72831,-1.38406 0.63156,-3.04763 -0.19081,-4.24356l-7.60831,-12.25769c-1.14487,-1.66356 -3.07181,-2.65794 -5.15194,-2.65794c-2.08013,0 -4.00706,0.99438 -5.15194,2.65794c-0.02419,0.03494 -0.04838,0.06987 -0.06719,0.10481l-7.47394,12.05075c-0.88688,1.29537 -0.98631,2.96163 -0.25531,4.343c0.76056,1.44856 2.27094,2.3435 3.93988,2.3435zM85.30125,21.79562c0.215,-0.27413 0.58588,-0.29562 0.69875,-0.29562c0.11556,0 0.51062,0.02419 0.65306,0.22306l6.53331,10.52694h-14.37006z" fill="url(#color-6_DhXzKyWAbozd_gr6)"></path><path d="M150.5,150.5v-61.8125c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-26.875c-2.96431,0 -5.375,2.41069 -5.375,5.375v61.8125h-8.0625v-86c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-26.875c-2.96431,0 -5.375,2.41069 -5.375,5.375v86h-8.0625v-43c0,-2.96431 -2.41069,-5.375 -5.375,-5.375h-26.875c-2.96431,0 -5.375,2.41069 -5.375,5.375v43h-5.375v5.375h8.0625h32.25h13.4375h32.25h16.125h26.875h10.75v-5.375zM99.4375,64.5v5.375h-26.875v-5.375zM53.75,107.5v5.375h-26.875v-5.375zM26.875,150.5v-32.25h26.875v32.25zM72.5625,150.5v-75.25h26.875v75.25zM145.125,88.6875v5.375h-26.875v-5.375zM118.25,150.5v-51.0625h26.875l0.00269,51.0625z" fill="url(#color-7_DhXzKyWAbozd_gr7)"></path><path d="M31.304,80.625h6.321v16.125h5.375v-16.125h6.321c1.67163,0 3.182,-0.89494 3.94256,-2.34081c0.72831,-1.38406 0.63156,-3.04762 -0.19081,-4.24356l-7.60831,-12.25769c-1.14487,-1.66356 -3.07181,-2.65794 -5.15194,-2.65794c-2.08012,0 -4.00706,0.99438 -5.15194,2.65794c-0.02419,0.03494 -0.04838,0.06987 -0.06719,0.10481l-7.47394,12.05075c-0.88687,1.29537 -0.98631,2.96162 -0.25531,4.343c0.76056,1.44856 2.27094,2.3435 3.93988,2.3435zM39.61375,64.79563c0.215,-0.27412 0.58587,-0.29563 0.69875,-0.29563c0.11556,0 0.51062,0.02419 0.65306,0.22306l6.53331,10.52694h-14.37006z" fill="url(#color-8_DhXzKyWAbozd_gr8)"></path><path d="M122.679,61.8125h6.321v16.125h5.375v-16.125h6.321c1.67163,0 3.182,-0.89494 3.94256,-2.34081c0.72831,-1.38406 0.63156,-3.04762 -0.19081,-4.24356l-7.60831,-12.25769c-1.14487,-1.66356 -3.07181,-2.65794 -5.15194,-2.65794c-2.08013,0 -4.00706,0.99437 -5.15194,2.65794c-0.02419,0.03494 -0.04838,0.06987 -0.06719,0.10481l-7.47394,12.05075c-0.88688,1.29537 -0.98631,2.96162 -0.25531,4.343c0.76056,1.44856 2.27094,2.3435 3.93988,2.3435zM130.98875,45.98313c0.215,-0.27413 0.58587,-0.29563 0.69875,-0.29563c0.11556,0 0.51063,0.02419 0.65306,0.22306l6.53331,10.52694h-14.37006z" fill="url(#color-9_DhXzKyWAbozd_gr9)"></path><rect x="14" y="48" transform="scale(2.6875,2.6875)" width="2" height="8" fill="url(#color-10_DhXzKyWAbozd_gr10)"></rect></g></g></svg>
-                                                                </div>
-                                                            </div>
-                                                            <div class="row">
-                                                                <div class="col">
-                                                                    <div class="fs-12 m-t-5">Credit Profile</div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
                                             </div>
                                         </div>
                                         <div class="col">
@@ -135,30 +116,6 @@
                                                 </div>
                                             </div>
                                             <div class="row tabsContainer hide tabContent" tab-name="PO">
-                                                <div class="col">
-                                                    <div class="row">
-                                                        <div class="col">
-                                                            <div class="row">
-                                                                <div class="col" v-show="!displayAddressForm">
-                                                                    <list-component key="2" section="addresslist" :endpoint="route('api.address.list')" :options="{'company_id':this.id}">
-                                                                        <template slot="list" slot-scope="{data}">
-                                                                           <address-component :data="data" section="addressListItem"></address-component>
-                                                                        </template>
-                                                                    </list-component>
-                                                                    <modal-component id="deleteAddressModal">
-                                                                        <address-modal-component section="deleteAddressModal" :address_id="this.address_id"></address-modal-component>
-                                                                    </modal-component>
-                                                                </div>
-                                                                <div class="col"  v-show="this.displayAddressForm">
-                                                                    <div>Address form</div>
-                                                                    <address-form-component :id="parseInt(this.id)" :type="3" :addressData="this.address"></address-form-component>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="row tabsContainer hide tabContent" tab-name="credit">
                                                 <div class="col">
                                                     <div class="row">
                                                         <div class="col">
@@ -170,6 +127,7 @@
                                                                         </template>
                                                                     </list-component>
                                                                 </div>
+
                                                             </div>
                                                         </div>
                                                     </div>
@@ -243,20 +201,7 @@
                 })
             }
         },
-        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;
-                }
-            });
-        },
+
         watch: {
             pendingQueue(inComplete){
                 if(inComplete){