[ADD] fuzzy search in products component

package.json

@@ -26,6 +26,7 @@
 		"webpack-livereload-plugin": "^0.11.0"
 	},
 	"dependencies": {
+		"fuse.js": "^3.0.5",
 		"vue": "^2.4.1",
 		"vue-form-wizard": "^0.6.1",
 		"vue-js-modal": "^1.2.6",

src/components/CartTotal.vue

@@ -36,9 +36,6 @@
             getSymbol() {
                 return this.symbol
             }
-        },
-        mounted() {
-            console.log(this)
         }
     }
 

src/components/ProductsSearcher.vue

@@ -1,11 +1,40 @@
 <template lang="pug">
     .products-searcher
-        input(type="text" placeholder="Buscar un producto")
+        input(type="search" placeholder="Buscar un producto" v-model="search")
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
+    import Fuse from 'fuse.js'
+
     export default {
+        data() {
+            return {
+                search: '',
+                fuse: null
+            }
+        },
+        computed: mapGetters({
+            products: 'getProducts'
+        }),
+        watch: {
+            search() {
+                console.log(this.products)
+            }
+        },
+        mounted() {
+            this.fuse = new Fuse(this.products, {
+                shouldSort: true,
+                threshold: 0.6,
+                location: 0,
+                distance: 100,
+                maxPatternLength: 32,
+                minMatchCharLength: 1,
+                keys: ['name', 'display_name']
+            })
 
+            console.log(this.fuse)
+        }
     }
 </script>
 

src/store/modules/products.js

@@ -20,7 +20,16 @@ const mutations = {
         state.products = [...payload.products]
     },
     setSelectedProduct(state, payload) {
+        if (!payload.product) {
+            return
+        }
+        
         state.selectedProduct = payload.product
+    },
+    applyFilter(state, payload) {
+        if (!payload.constraint) {
+            return
+        }
     }
 }
 

yarn.lock

@@ -1732,6 +1732,10 @@ function-bind@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
 
+fuse.js@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.0.5.tgz#b58d85878802321de94461654947b93af1086727"
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"