[ADD] customer details when select a customer

models/res_partner.py

@@ -22,6 +22,7 @@ class ResPartner(models.Model):
                 'id': customer.id,
                 'name': customer.name,
                 'display_name': customer.display_name,
+                'ruc': customer.ruc,
                 'image_medium': customer.image_medium,
                 'phone': customer.phone,
                 'mobile': customer.mobile,

src/components/customer/CustomerDetails.vue

@@ -1,16 +1,78 @@
 <template lang="pug">
-    .customer-details Customer Display
+    .customer-details
+        form.customer-form
+            .form-separator
+                h3 Detalles generales
+                hr
+            .customer-form-item
+                label.form-label Nombre
+                input.form-input(readonly :value="selectedCustomer.name")
+            .customer-form-item
+                label.form-label RUC/CIN
+                input.form-input(readonly :value="getRuc()")
+            .customer-form-item
+                label.form-label Celular
+                input.form-input(readonly :value="selectedCustomer.mobile")
+            .customer-form-item
+                label.form-label Teléfono
+                input.form-input(readonly :value="selectedCustomer.phone")
+            .customer-form-item
+                label.form-label Email
+                input.form-input(readonly :value="selectedCustomer.email")
+            .form-separator
+                h3 Créditos
+                hr
+            .customer-form-item
+                label.form-label Crédito
+                input.form-input(readonly :value="getCredit()")
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
+
     export default {
-    
+        computed: mapGetters([
+            'hasSelectedCustomer',
+            'selectedCustomer'
+        ]),
+        methods: {
+            getRuc() {
+                return this.hasSelectedCustomer && !!this.selectedCustomer.ruc ? this.selectedCustomer.ruc : ''
+            },
+            getCredit() {
+                return this.hasSelectedCustomer && this.selectedCustomer.credit_limit >= this.selectedCustomer.credit ? this.selectedCustomer.credit_limit - this.selectedCustomer.credit : 0
+            }
+        }
     }
 </script>
 
 <style lang="sass">
     .customer-details
-        width: 350px
+        width: 100%
         height: 100%
-        border-left: 1px solid #d3d3d3
+
+        .customer-form
+            width: 100%
+            height: 100%
+
+            .form-separator
+                h3
+                    color: #9e9e9e
+                    font-size: 8pt
+                hr
+                    margin-top: 5px
+
+            .customer-form-item
+                width: 100%
+                height: 35px
+                margin-bottom: 5px
+
+                .form-label
+                    width: 65px
+                    height: 35px
+
+                .form-input
+                    width: 210px
+                    height: 35px
+                    border-radius: 0
 </style>

src/components/customer/CustomerStep.vue

@@ -1,22 +1,59 @@
 <template lang="pug">
     .pos-step
-        customer-searcher
-        customers-grid
+        .customers-step
+            .customers-left
+                customer-searcher
+                customers-grid
+            transition(name="slide-fade")
+                .customers-right(v-if="hasSelectedCustomer")
+                    customer-details
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
+
     import CustomerSearcher from '@/components/customer/CustomerSearcher'
     import CustomersGrid from '@/components/customer/CustomersGrid'
+    import CustomerDetails from '@/components/customer/CustomerDetails'
 
     export default {
         components: {
             CustomerSearcher,
-            CustomersGrid
-        }
+            CustomersGrid,
+            CustomerDetails
+        },
+        computed: mapGetters([
+            'hasSelectedCustomer'
+        ])
     }
 </script>
 
 <style lang="sass">
+    .pos-step
+        .customers-step
+            width: 100%
+            height: 100%
+            display: flex
+
+            .customers-left, .customers-right
+                height: 100%
+
+            .customers-left
+                width: 100%
+
+            .customers-right
+                width: 360px
+                margin: 0 15px
+
+            .slide-fade-enter-active
+                transition: all .3s ease;
+
+            .slide-fade-leave-active
+                transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0)
+
+            .slide-fade-enter, .slide-fade-leave-to
+                transform: translateX(10px)
+                opacity: 0
 </style>