[ADD] cards view in customers module

src/components/CustomerCard.vue

@@ -1,11 +1,52 @@
 <template lang="pug">
     .customer-card
+        h2.customer-name {{ data.name }}
+        img.customer-photo(:src="this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/base/static/src/img/avatar.png'")
 </template>
 
 <script>
     export default {
+        props: {
+            data: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            }
+        }
     }
 </script>
 
 <style lang="sass">
+    .customer-card
+        width: 130px
+        height: 160px
+        margin: 5px
+        border: 1px solid #d3d3d3
+        display: inline-block
+        position: relative
+
+        &:hover
+            cursor: pointer
+
+        .customer-name
+            width: 100%
+            height: 30px
+            font-size: 9pt
+            text-align: center
+            margin-top: 10px
+            position: absolute
+            top: 0
+        
+        .customer-photo
+            width: 80px
+            height: 80px
+            margin: 0
+            border: none
+            border-radius: 50%
+            position: absolute;
+            top: 50%
+            left: 50%
+            margin-right: -50%
+            transform: translate(-50%, -50%)
 </style>

src/components/CustomersGrid.vue

@@ -1,9 +1,20 @@
 <template lang="pug">
-    .customers Customers Component
+    .customers-grid
+        template(v-for="customer in customers")
+            customer-card(:data="customer")
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
+    import CustomerCard from '@/components/CustomerCard'
+
     export default {
+        components: {
+            'customer-card': CustomerCard
+        },
+        computed: mapGetters({
+            customers: 'getCustomers'
+        })
     }
 </script>
 

src/components/ProductCard.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
-    .product-card(@click="selectProduct({ data })")
+    //- .product-card(@click="selectProduct({ data })")
+    .product-card(@click="selectVariant()")
         h2.product-title {{ data.name }}
         img.product-image(:src="this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'")
         .product-price
@@ -38,6 +39,9 @@
                 console.log(this.data.image_medium)
                 img.src = this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'
             },
+            selectVariant() {
+                this.$modal.show('variant-selector')
+            },
             ...mapActions([
                 'selectProduct'
             ])
@@ -75,6 +79,7 @@
             height: 80px
             margin: 0
             border: none
+            border-radius: 50%
             position: absolute;
             top: 50%
             left: 50%

src/components/ProductsGrid.vue

@@ -2,13 +2,13 @@
     .products-grid
         template(v-for="product in products")
             product-card(:data="product")
-        modal(name="product-selector")
+        modal(name="variant-selector" transition="nice-modal-fade")
 </template>
 
 <script>
     import ProductCard from '@/components/ProductCard'
     import VModal from 'vue-js-modal'
-    import { mapGetters } from 'vuex'
+    import { mapGetters, mapActions } from 'vuex'
 
     export default {
         components: {
@@ -18,9 +18,9 @@
         computed: mapGetters({
             products: 'getProducts'
         }),
-        mounted() {
-            this.$modal.show('product-selector')
-        }
+        methods: mapActions([
+            'selectProduct'
+        ])
     }
 </script>
 

src/store/modules/customers.js

@@ -24,7 +24,7 @@ const mutations = {
 const actions = {
     fetchCustomers({ commit }){
         let customer = new openerp.web.Model('res.partner')
-        customer.query(['name', 'display_name']).filter([['customer', '=', true], ['active', '=', true]]).all().then(response => {
+        customer.query(['name', 'display_name', 'image_medium']).filter([['customer', '=', true], ['is_company', '=', false], ['active', '=', true]]).all().then(response => {
             commit('pushCustomers', {
                 customers: response
             })

src/store/modules/products.js

@@ -25,8 +25,11 @@ const actions = {
             console.log(error)
         })
     },
-    selectProduct({ dispatch }, payload) {
-        dispatch('addToCart', payload)
+    // selectProduct({ dispatch }, payload) {
+    //     // dispatch('addToCart', payload)
+    // }
+    selectProduct(args) {
+        console.log(args)
     }
 }