[ADD] customer selection

src/components/CustomerCard.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-    .customer-card(@click="selectCustomer(item)")
+    .customer-card(@click="selectCustomer(item)" v-bind:class="{ 'selected-customer': isSelectedCustomer() }")
         h2.customer-name {{ item.name }}
         img.customer-photo(:src="this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/base/static/src/img/avatar.png'")
 </template>
 
 <script>
-    import { mapActions } from 'vuex'
+    import { mapActions, mapGetters } from 'vuex'
 
     export default {
         props: {
@@ -16,9 +16,18 @@
                 }
             }
         },
-        methods: mapActions([
-            'selectCustomer'
-        ])
+        computed: mapGetters({
+            selectedCustomer: 'getSelectedCustomer',
+            hasSelectedCustomer: 'hasSelectedCustomer' 
+        }),
+        methods: {
+            isSelectedCustomer() {
+                return this.hasSelectedCustomer ? this.item.id === this.selectedCustomer.id : false
+            },
+            ...mapActions([
+                'selectCustomer'
+            ])
+        }
     }
 </script>
 
@@ -31,6 +40,10 @@
         display: inline-block
         position: relative
 
+        &.selected-customer
+            transition-duration: 0.3s
+            border-bottom: 3px solid #7c7bad
+
         &:hover
             cursor: pointer
 

src/store/modules/customers.js

@@ -10,6 +10,9 @@ const getters = {
     },
     hasSelectedCustomer(state) {
         return !!state.selectedCustomer
+    },
+    getSelectedCustomer(state) {
+        return state.selectedCustomer
     }
 }
 
@@ -46,8 +49,9 @@ const actions = {
         })
     },
     selectCustomer({ commit }, payload) {
-        // commit('selectCustomer', payload)
-        console.log(payload)
+        commit('selectCustomer', {
+            customer: payload
+        })
     },
     filterCustomers({ commit }, payload) {
         commit('applyCustomersFilter', payload)