[IMP] components events to card and grid ok

src/components/common/AddCard.vue

@@ -7,7 +7,7 @@
     export default {
         methods: {
             onClick(e) {
-                this.$emit('onAdd')
+                this.$emit('onClick')
             }
         }
     }

src/components/common/Card.vue

@@ -27,7 +27,7 @@
             },
             isSelected: {
                 type: Boolean,
-                default: false
+                default: true
             }
         },
         methods: {
@@ -47,7 +47,7 @@
         border: 1px solid $app-border-color
         display: inline-block
         position: relative
-        .selected-card
+        &.selected-card
             transition-duration: 300ms
             border-bottom: 3px solid $app-main-color
         &:hover

src/components/common/CardGrid.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
     .card-grid-wrapper
         .card-grid
-            add-card(v-if='canAdd')
-            card(v-for='item in items' :key='item.id' :title='item.name' :image='item.imageMedium')
+            add-card(v-if='canAdd' @onClick='onClickAdd')
+            card(v-for='item in items' :key='item.id' :title='item.name' :image='item.imageMedium' :isSelected='item.id === selectedId' @onClick='onClickCard(item)')
 </template>
 
 <script>
@@ -23,6 +23,20 @@
         components: {
             AddCard,
             Card
+        },
+        methods: {
+            onClickAdd() {
+                this.$emit('onAdd')
+            },
+            onClickCard(item) {
+                this.selectedId = item.id
+                this.$emit('onSelect', item)
+            }
+        },
+        data() {
+            return {
+                selectedId: -1
+            }
         }
     }
 </script>

src/components/supplier/SupplierStep.vue

@@ -3,7 +3,7 @@
         .supplier-selection-step
             .supplier-selector
                 searcher(:items='suppliers' :keys="['name', 'displayName']" @onSearch='filterSuppliers')
-                card-grid(:items='visibleSuppliers' canAdd)
+                card-grid(:items='visibleSuppliers' canAdd @onAdd='showSupplierForm' @onSelect='selectSupplier')
             transition(name='slide-fade')
                 supplier-details(v-if='!!supplierSelected')
 </template>
@@ -23,11 +23,12 @@
         },
         computed: mapGetters([
             'suppliers',
-            'visibleSuppliers',
-            'supplierSelected'
+            'visibleSuppliers'
         ]),
         methods: mapActions([
-            'filterSuppliers'
+            'filterSuppliers',
+            'showSupplierForm',
+            'selectSupplier'
         ])
     }
 </script>

src/store/modules/supplier.js

@@ -89,7 +89,8 @@ const actions = {
      * @param {*} payload 
      */
     selectSupplier({ commit }, payload) {
-        commit('setSupplierSelected', payload)
+        console.log(payload)
+        // commit('setSupplierSelected', payload)
     },
     /**
      * 
@@ -107,6 +108,14 @@ const actions = {
     addSupplier({ commit }) {
         commit('setAddSupplier', true)
     },
+    /**
+     * 
+     * @param {*} param0 
+     * @param {*} payload 
+     */
+    showSupplierForm({ commit }) {
+        console.log('show')
+    },
     /**
      * 
      * @param {*} param0