[ADD] fuzzy search in products templates

src/components/ProductsSearcher.vue

@@ -4,14 +4,15 @@
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
+    import { mapGetters, mapActions } from 'vuex'
     import Fuse from 'fuse.js'
 
     export default {
         data() {
             return {
                 search: '',
-                fuse: null
+                results: [],
+                fuse: null,
             }
         },
         computed: mapGetters({
@@ -19,21 +20,41 @@
         }),
         watch: {
             search() {
-                console.log(this.products)
+                this.fuzzySearch()
+            },
+            results() {
+                this.filterProducts(this.results)
+            },
+            products() {
+                this.initFuse()
             }
         },
-        mounted() {
-            this.fuse = new Fuse(this.products, {
-                shouldSort: true,
-                threshold: 0.6,
-                location: 0,
-                distance: 100,
-                maxPatternLength: 32,
-                minMatchCharLength: 1,
-                keys: ['name', 'display_name']
-            })
+        methods: {
+            initFuse() {
+                if (this.fuse) {
+                    return
+                }
 
-            console.log(this.fuse)
+                this.fuse = new Fuse(this.products, {
+                    shouldSort: true,
+                    threshold: 0.4,
+                    location: 0,
+                    distance: 100,
+                    maxPatternLength: 32,
+                    minMatchCharLength: 1,
+                    keys: [
+                        'name',
+                        'display_name',
+                        'ean13',
+                    ]
+                })
+            },
+            fuzzySearch() {
+                this.results = this.fuse.search(this.search)
+            },
+            ...mapActions([
+                'filterProducts'
+            ])
         }
     }
 </script>

src/store/modules/products.js

@@ -1,11 +1,12 @@
 const state = {
     products: [],
+    filtered: [],
     selectedProduct: null
 }
 
 const getters = {
     getProducts (state) {
-        return state.products
+        return state.filtered.length === 0 ? state.products : state.filtered
     },
     getSelectedProduct(state) {
         return state.selectedProduct
@@ -22,10 +23,8 @@ const mutations = {
     setSelectedProduct(state, payload) {
         state.selectedProduct = payload.product
     },
-    applyFilter(state, payload) {
-        if (!payload.constraint) {
-            return
-        }
+    applyProductsFilter(state, payload) {
+        state.filtered = payload
     }
 }
 
@@ -61,8 +60,6 @@ const actions = {
         }
     },
     selectVariant({ commit, dispatch }, payload) {
-        console.log(payload)
-
         commit('setSelectedProduct', {
             product: null
         })
@@ -70,6 +67,9 @@ const actions = {
         dispatch('addToCart', {
             product: payload.data
         })
+    },
+    filterProducts({ commit }, payload) {
+        commit('applyProductsFilter', payload)
     }
 }