[IMP] componentized styles, supplier and product steps

package.json

@@ -27,7 +27,7 @@
 		"webpack-livereload-plugin": "^0.11.0"
 	},
 	"dependencies": {
-		"fuse.js": "^3.0.5",
+		"fuse.js": "^3.2.0",
 		"vue": "^2.4.1",
 		"vue-form-wizard": "^0.7.0",
 		"vue-js-modal": "^1.3.1",

src/App.vue

@@ -40,6 +40,8 @@
 </script>
 
 <style lang="sass">
+    @import './assets/variables'
+    
     .purchases
         width: 100%
         height: 100%
@@ -70,7 +72,7 @@
                         .purchase-step
                             width: 100%
                             height: 100%
-                            background: #fff
+                            background: $app-bg-color
             .wizard-card-footer
                 width: 100%
                 height: 50px
@@ -83,5 +85,5 @@
                     box-shadow: none
                     border: none
                     &:hover, &:focus
-                        background: #7c7bad
+                        background: $app-main-color
 </style>

src/assets/_variables.sass

@@ -0,0 +1,3 @@
+$app-main-color: #7c7bad
+$app-bg-color: #fff
+$app-border-color: #d3d3d3

src/components/supplier/SupplierAdd.vue → src/components/common/AddCard.vue

@@ -1,24 +1,26 @@
 <template lang="pug">
-    .supplier-add(@click='addSupplier')
+    .add-card(@click='onClick')
         i.fa.fa-plus(aria-hidden='true')
 </template>
 
 <script>
-    import { mapActions } from 'vuex'
-
     export default {
-        methods: mapActions([
-            'addSupplier'
-        ])
+        methods: {
+            onClick(e) {
+                this.$emit('onAdd')
+            }
+        }
     }
 </script>
 
 <style lang="sass">
-    .supplier-add
+    @import '../../assets/variables'
+
+    .add-card
         width: 130px
         height: 160px
         margin: 5px
-        border: 1px solid #d3d3d3
+        border: 1px solid $app-border-color
         display: inline-block
         position: relative
         &:hover
@@ -32,5 +34,5 @@
             left: 50%
             margin-right: -50%
             transform: translate(-50%, -50%)
-            color: #7c7bad
-</style>
+            color: $app-main-color
+</style>

src/components/common/Card.vue

@@ -0,0 +1,85 @@
+<template lang="pug">
+    .card(@click='onClick' :class="{ 'selected-card': isSelected }")
+        h2.card-title {{ title }}
+        img.card-image(:src="'data:image/png;base64,' + (image || 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg==')")
+        .card-description(v-if='withDescription')
+            span {{ description }}
+</template>
+
+<script>
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: 'Sin título'
+            },
+            image: {
+                type: String,
+                default: 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAACXZwQWcAAABAAAAAQADq8/hgAAAEWklEQVRYw9WX6XKjRhCAef8HiySQvGt5vfZuEselOUAcEpe4GdI9MAgQOjb5k3SVyzY1801PX9OtNf9StP80QJR5miRpXtb/AFCnvmMySgmhlJn2Mal+BSBSj1NCGeNSGAMOd0/iQYCI95TAXnm+FCr/I2ZYPwJILEJhPaGm7flBFIW+Z5sUvwEivguovG7pMR0cV2e+BbYArF3cBqQclKfEvryvSB2KaHa6BYhgDSP7ZN7gmUNQCf86wCdgcBaKq04/cTzAuwbA/czKb8VdZYMSI8IAEOJ+XjTiFkF4SDjOARIIHLiBK+4E/xHOIdEloMSAAwZx7hEOBKIquwA4lFPbR/3uEhzCqSUmgBiwrGgeIlQm5b0zO0CN3yKw34QgQC4JKZqrGAFC0MpWvuwJ3V6hWD3BI5wchoDaBAumzYQgmsrd7ewZx5bosHIAAAtQp4+nXUuA+2yXy9Xyi4OsIorjauBLZQWtd0Gqrt3EvCXQlb4BMZYfsPP7cr0gvS4FaNw6Qus0ovtez8DZcYyHt8Wmk9XWdF+Mjf570Ke4q46UgAgUCtX55mKl/wSbsD83hrEE0VGJ1RrEWHz2aaXuIAEe7b3SNG/601oSzL/W20/T2r2uDNACARvjWelZQTTaCiCg2vSR1bzrsFgSQMk8SbPi8FWX+0GFbX2OXMarDoAmOGfo+wpXt7cwj4Hv+1n+rSMYW3HOfS4TAgHZIDIVYG38wNzchyB+kj4ZUwB4npw6ABokmgA2qz9kfbIkoWDLzQSQ0tbw2gA20kA/nmyqCHG8nmqQd2prbSKQZAIwnk5B5PSE/EWfACCUZGFSgHQKeE6DsCcExfc5wKEDRLMaJHBwTwA/zFzhOLBBPGODoCfEyYUb0XVBB1AGHXvho/SVDsSjF15QrtMG1xlpsDbCrCewj7UxAWAJSjsAlJOuHI0AX9Mi8IMgsJnMC2MMOJA2f7RhXI8AG/2LVxZZVlQWmKElnAFiT5nMH62L67Mb3lTmbIzVK3Uc9r6GvJAEyMa6d0KXP1oXliqbRPPzN0NvBcrBAmSpr37wlrB8GeRS6zkJECZVNRKeuLfty1C+wc/zp7TD9jVQN7DUDq2vkUEzfAymIl9uZ5iL1B0U1Rw7surmc4SE/sUBE3KaDB8Wd1QS7hJQga4Kayow2aAsXiV0L458HE/jx9UbPi33CIf+ITwDSnxM/IcIcAGIrHzaH+BX8Ky4awdq41nBZYsjG4/kEQLjg9Q5A9A1jJ7u3CJEa1OzmuvSKgubwPA24IT7WT7fJ5YmEtwbASWO2AkP94871WpPOCc8vmYHaORhv5lf75VrV3bD+9nZIrUJamhXN9v9kMlu3wonYVlGe9msU1/cGTgKpx0YmO2fsrKq66rMk8Bh7dd99sDIk+xxxsE5icqhqfsLflkz1pkbukSCBzI5bqG0EGrPGvfK2FeGDseRi1I5eVFuB8WvDp51FvsH13Fcz4+y6n86Oz8kfwPMD02INEiadQAAAABJRU5ErkJggg=='
+            },
+            withDescription: {
+                type: Boolean,
+                default: false
+            },
+            description: {
+                type: String,
+                default: 'Sin descripción'
+            },
+            isSelected: {
+                type: Boolean,
+                default: false
+            }
+        },
+        methods: {
+            onClick() {
+                this.$emit('onClick')
+            }
+        } 
+    }
+</script>
+
+<style lang="sass">
+    @import '../../assets/variables'
+    .card
+        width: 130px
+        height: 160px
+        margin: 5px
+        border: 1px solid $app-border-color
+        display: inline-block
+        position: relative
+        .selected-card
+            transition-duration: 300ms
+            border-bottom: 3px solid $app-main-color
+        &:hover
+            cursor: pointer
+        .card-title
+            width: 100%
+            height: 30px
+            font-size: 9pt
+            text-align: center
+            margin-top: 10px
+            position: absolute
+            top: 0
+        .card-image
+            width: 80px
+            height: 80px;
+            margin: 0
+            border: none
+            position: absolute
+            top: 50%
+            left: 50%
+            margin-right: -50%
+            transform: translate(-50%, -50%)
+        .card-description
+            width: 100%
+            height: 30px
+            padding-top: 5px
+            text-align: center
+            font-size: 10pt
+            font-weight: bold
+            background: $app-main-color
+            color: $app-bg-color
+            position: absolute
+            bottom: 0
+</style>
+

src/components/common/CardGrid.vue

@@ -0,0 +1,38 @@
+<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')
+</template>
+
+<script>
+    import AddCard from '@/components/common/AddCard'
+    import Card from '@/components/common/Card'
+
+    export default {
+        props: {
+            items: {
+                type: Array,
+                default: []
+            },
+            canAdd: {
+                type: Boolean,
+                default: false
+            }
+        },
+        components: {
+            AddCard,
+            Card
+        }
+    }
+</script>
+
+<style lang="sass">
+    .card-grid-wrapper
+        width: 100%
+        height: calc(100% - 100px)
+        margin-top: 15px
+        overflow-y: auto
+        .card-grid
+            width: 100%
+</style>

src/components/common/Searcher.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
-    input.searcher(type='search' placeholder='placeholder')
+    input.searcher(type='search' :placeholder='placeholder' :style='{ width, height }' v-model='search')
 </template>
 
 <script>
+    import Fuse from 'fuse.js'
+
     export default {
         props: {
             items: {
@@ -10,10 +12,6 @@
                 default: [],
                 required: true
             },
-            onSearch: {
-                type: Function,
-                default: null
-            },
             placeholder: {
                 type: String,
                 default: 'Buscar...'
@@ -24,8 +22,74 @@
             },
             height: {
                 type: String,
-                default: '45px'
+                default: '35px'
+            },
+            shouldSort: {
+                type: Boolean,
+                default: true
+            },
+            threshold: {
+                type: Number,
+                default: 0.4,
+            },
+            location: {
+                type: Number,
+                default: 0
+            },
+            distance: {
+                type: Number,
+                default: 100
+            },
+            maxPatternLength: {
+                type: Number,
+                default: 32
+            },
+            minMatchCharLength: {
+                type: Number,
+                default: 1
+            },
+            keys: {
+                type: Array,
+                default: [],
+                required: true
+            }
+        },
+        watch: {
+            items(values) {
+                this.fuse.setCollection(values)
+            },
+            search(value) {
+                this.performSearch(value.trim())
+            },
+            results(values) {
+                this.$emit('onSearch', values)
+            }
+        },
+        methods: {
+            initFuse() {
+                this.fuse = new Fuse(this.items, {
+                    shouldSort: this.shouldSort,
+                    threshold: this.threshold,
+                    location: this.location,
+                    distance: this.distance,
+                    maxPatternLength: this.maxPatternLength,
+                    minMatchCharLength: this.minMatchCharLength,
+                    keys: this.keys
+                })
+            },
+            performSearch(value) {
+                this.results = this.fuse.search(value)
+            }
+        },
+        data() {
+            return {
+                fuse: null,
+                search: '',
+                results: []
             }
+        },
+        mounted() {
+            this.initFuse()
         }
     }
 </script>

src/components/payment/PaymentStep.vue

@@ -5,17 +5,16 @@
                 .form-separator
                     h3 Detalles del Pago
                     hr
-                    .cash-payment(v-if="selectedJournal.type === 'cash'")
-                        .form-item
-                            label.form-label Monto a pagar
-                            input.form-input(:value='cartTotal' readonly)
-                        .form-item
-                            label.form-label Total recibido
-                            input.form-input(:value='amount' v-model='amount' autofocus)
-                        hr
-                        .form-item
-                            label.form-label Total a devolver
-                            input.form-input(:value='amountResidual' readonly)
+                .form-item
+                    label.form-label Monto a pagar
+                    input.form-input(:value='cartTotal' readonly)
+                .form-item
+                    label.form-label Total recibido
+                    input.form-input(:value='amount' v-model='amount' autofocus)
+                hr
+                .form-item
+                    label.form-label Total a devolver
+                    input.form-input(:value='amountResidual' readonly)
 </template>
 
 

src/components/product/ProductAdd.vue

@@ -1,31 +0,0 @@
-<template lang="pug">
-    .product-add
-        i.fa.fa-plus(aria-hidden='true')
-</template>
-
-<script>
-    export default {
-    }
-</script>
-
-<style lang="sass">
-    .product-add
-        width: 130px
-        height: 160px
-        margin: 5px
-        border: 1px solid #d3d3d3
-        display: inline-block
-        position: relative
-        &:hover
-            cursor: pointer
-        i
-            font-size: 36pt
-            margin: 0
-            border: none
-            position: absolute;
-            top: 50%
-            left: 50%
-            margin-right: -50%
-            transform: translate(-50%, -50%)
-            color: #7c7bad
-</style>

src/components/product/ProductCard.vue

@@ -1,69 +0,0 @@
-<template lang="pug">
-    .product-card(@click='selectProduct(item)')
-        h2.product-name {{ item.name }}
-        img.product-image(:src="item.imageMedium ? 'data:image/png;base64,' + item.imageMedium : '/web/static/src/img/placeholder.png'")
-        .product-price
-            span {{ getPrice() }}
-</template>
-
-<script>
-    import { mapActions } from 'vuex'
-
-    export default {
-        props: {
-            item: {
-                type: Object,
-                default: {}
-            }
-        },
-        methods: {
-            getPrice() {
-                return this.item.listPrice
-            },
-            ...mapActions([
-                'selectProduct'
-            ])
-        }
-    }
-</script>
-
-<style lang="sass">
-    .product-card
-        width: 130px
-        height: 160px
-        margin: 5px
-        border: 1px solid #d3d3d3
-        display: inline-block
-        position: relative
-        &:hover
-            cursor: pointer
-        .product-name
-            width: 100%
-            height: 30px
-            font-size: 9pt
-            text-align: center
-            margin-top: 10px
-            position: absolute
-            top: 0
-        .product-image
-            width: 80px
-            height: 80px
-            margin: 0
-            border: none
-            position: absolute
-            top: 50%
-            left: 50%
-            margin_right: 50%
-            transform: translate(-50%, -50%)
-        .product-price
-            width: 100%
-            height: 30px
-            padding-top: 5px
-            text-align: center
-            font-size: 10pt
-            font-weight: bold
-            background: #7c7bad
-            color: #fff
-            position: absolute
-            bottom: 0
-</style>

src/components/product/ProductSearcher.vue

@@ -1,23 +0,0 @@
-<template lang="pug">
-    input.product-searcher(type='text' placeholder='Buscar un producto')
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-    
-    }
-</script>
-
-<style lang="sass">
-    .product-searcher
-        width: 100%
-        height: 35px
-        text-align: center
-        border-radius: 0 !important
-        font:
-            size: 11pt
-            style: normal
-            weight: bold
-</style>

src/components/product/ProductsGrid.vue

@@ -1,33 +0,0 @@
-<template lang="pug">
-    .products-grid-wrapper
-        .products-grid
-            product-add
-            product-card(v-for='product in products' :key='product.id' :item='product')
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-
-    import ProductAdd from '@/components/product/ProductAdd'
-    import ProductCard from '@/components/product/ProductCard'
-
-    export default {
-        components: {
-            ProductAdd,
-            ProductCard
-        },
-        computed: mapGetters([
-            'products'
-        ])
-    }
-</script>
-
-<style lang="sass">
-    .products-grid-wrapper
-        width: 100%
-        height: calc(100% - 50px)
-        margin-top: 15px
-        overflow-y: auto
-        .products-grid
-            width: 100%
-</style>

src/components/product/ProductsStep.vue

@@ -1,22 +1,28 @@
 <template lang="pug">
     .purchase-step
         .products-selector
-            product-searcher
-            products-grid
+            searcher(:items='products' :keys="['name', 'displayName']")
+            card-grid(:items='visibleProducts' canAdd)
         cart
 </template>
 
 <script>
-    import ProductSearcher from '@/components/product/ProductSearcher'
-    import ProductsGrid from '@/components/product/ProductsGrid'
+    import Searcher from '@/components/common/Searcher'
+    import CardGrid from '@/components/common/CardGrid'
     import Cart from '@/components/product/Cart'
 
+    import { mapGetters, mapActions } from 'vuex'
+
     export default {
         components: {
-            ProductSearcher,
-            ProductsGrid,
+            Searcher,
+            CardGrid,
             Cart
-        }
+        },
+        computed: mapGetters([
+            'products',
+            'visibleProducts'
+        ])
     }
 </script>
 

src/components/supplier/SupplierCard.vue

@@ -1,65 +0,0 @@
-<template lang="pug">
-    .supplier-card(@click='selectSupplier(item)' :class="{ 'supplier-selected': isSupplierSelected() }")
-        h2.supplier-name {{ item.name }}
-        img.supplier-image(:src="!!item.imageMedium ? 'data:image/png;base64,' + item.imageMedium : 'base/static/src/img/avatar.png'")
-</template>
-
-<script>
-    import { mapActions, mapGetters } from 'vuex'
-
-    export default {
-        props: {
-            item: {
-                type: Object,
-                default: {}
-            }
-        },
-        computed: mapGetters([
-            'supplierSelected'
-        ]),
-        methods: {
-            /**
-             * 
-             */
-            isSupplierSelected() {
-                return !!this.supplierSelected && this.item.id === this.supplierSelected.id
-            },
-            ...mapActions([
-                'selectSupplier'
-            ])
-        }
-    }
-</script>
-
-<style lang="sass">
-    .supplier-card
-        width: 130px
-        height: 160px
-        margin: 5px
-        border: 1px solid #d3d3d3
-        display: inline-block
-        position: relative
-        &.supplier-selected
-            transition-duration: 300ms
-            border-bottom: 3px solid #7c7bad
-        &:hover
-            cursor: pointer
-        .supplier-name
-            width: 100%
-            height: 30px
-            font-size: 9pt
-            text-align: center
-            margin-top: 10px
-            position: absolute
-            top: 0
-        .supplier-image
-            width: 80px
-            height: 80px;
-            margin: 0
-            border: none
-            position: absolute
-            top: 50%
-            left: 50%
-            margin-right: -50%
-            transform: translate(-50%, -50%)
-</style>

src/components/supplier/SupplierSearcher.vue

@@ -1,23 +0,0 @@
-<template lang="pug">
-    input.supplier-searcher(type='text' placeholder='Buscar un proveedor')
-</template>
-
-<script>
-    import { mapGetters, mapActions } from 'vuex'
-
-    export default {
-    
-    }
-</script>
-
-<style lang="sass">
-    .supplier-searcher
-        width: 100%
-        height: 35px
-        text-align: center
-        border-radius: 0 !important
-        font:
-            size: 11pt
-            style: normal
-            weight: bold
-</style>

src/components/supplier/SupplierStep.vue

@@ -2,27 +2,32 @@
     .purchase-step
         .supplier-selection-step
             .supplier-selector
-                supplier-searcher
-                supplier-grid
+                searcher(:items='suppliers' :keys="['name', 'displayName']" @onSearch='filterSuppliers')
+                card-grid(:items='visibleSuppliers' canAdd)
             transition(name='slide-fade')
                 supplier-details(v-if='!!supplierSelected')
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
+    import { mapGetters, mapActions } from 'vuex'
 
-    import SupplierSearcher from '@/components/supplier/SupplierSearcher'
-    import SupplierGrid from '@/components/supplier/SuppliersGrid'
+    import Searcher from '@/components/common/Searcher'
+    import CardGrid from '@/components/common/CardGrid'
     import SupplierDetails from '@/components/supplier/SupplierDetails'
 
     export default {
         components: {
-            SupplierSearcher,
-            SupplierGrid,
-            SupplierDetails
+            Searcher,
+            CardGrid,
+            SupplierDetails,
         },
         computed: mapGetters([
+            'suppliers',
+            'visibleSuppliers',
             'supplierSelected'
+        ]),
+        methods: mapActions([
+            'filterSuppliers'
         ])
     }
 </script>
@@ -41,7 +46,7 @@
                 width: 360px
                 margin: 0 15px
             .slide-fade-enter-active
-                transition: all .3s ease
+                transition: all 300ms ease
             .slide-fade-leave-active
                 transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0)
             .slide-fade-enter, .slide-fade-leave-to

src/components/supplier/SuppliersGrid.vue

@@ -1,36 +0,0 @@
-<template lang="pug">
-    .supplier-grid-wrapper
-        .supplier-grid
-            supplier-add
-            supplier-card(v-for='supplier in suppliers' :key='supplier.id' :item='supplier')
-        supplier-form
-</template>
-
-<script>
-    import { mapGetters } from 'vuex'
-
-    import SupplierAdd from '@/components/supplier/SupplierAdd'
-    import SupplierCard from '@/components/supplier/SupplierCard'
-    import SupplierForm from '@/components/supplier/SupplierForm'
-
-    export default {
-        components: {
-            SupplierAdd,
-            SupplierCard,
-            SupplierForm
-        },
-        computed: mapGetters([
-            'suppliers'
-        ])
-    }
-</script>
-
-<style lang="sass">
-    .supplier-grid-wrapper
-        width: 100%
-        height: calc(100% - 100px)
-        margin-top: 15px
-        overflow-y: auto
-        .supplier-grid
-            width: 100%
-</style>

src/store/modules/product.js

@@ -21,6 +21,13 @@ const getters = {
     products(state) {
         return state.products.values
     },
+    /**
+     * 
+     * @param {*} state 
+     */
+    visibleProducts(state) {
+        return state.products.values
+    },
     /**
      * 
      * @param {*} state 

src/store/modules/supplier.js

@@ -25,6 +25,13 @@ const getters = {
     suppliers(state) {
         return state.suppliers.values
     },
+    /**
+     * 
+     * @param {*} state 
+     */
+    visibleSuppliers(state) {
+        return state.filteredSuppliers.values.length === 0 ? state.suppliers.values : state.filteredSuppliers.values
+    },
     /**
      * 
      * @param {*} state 

yarn.lock

@@ -1798,9 +1798,9 @@ function-bind@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-fuse.js@^3.0.5:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.1.0.tgz#9062146c471552189b0f678b4f5a155731ae3b3c"
+fuse.js@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.2.0.tgz#f0448e8069855bf2a3e683cdc1d320e7e2a07ef4"
 
 gauge@~2.7.3:
   version "2.7.4"