eiru_pos/src/components/ProductSelector.vue

<template lang="pug">
    .product-selector
        modal(name="product-selector" transition="nice-modal-fade" height="500" @closed="handleClosed")
            input.variant-searcher(type="search" placeholder="Buscar una variante de producto" v-model="search")
            .product-variants
                product-variant(v-for="variant in variants" :key="variant.id" :data="variant")
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import Fuse from 'fuse.js'
    import ProductVariant from '@/components/ProductVariant'

    export default {
        components: {
            'product-variant': ProductVariant
        },
        computed: mapGetters({
            variants: 'getVariants'
        }),
        methods: {
            initFuse() {
                if (this.fuse) {
                    this.fuse.setCollection(this.variants)
                    return
                } 

                this.fuse = new Fuse(this.variants, {
                    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)
            },
            handleClosed() {
                this.search = ''
            },
            ...mapActions([
                'filterVariants'
            ])
        },
        watch: {
            variants() {
                this.initFuse()
            },
            search() {
                this.fuzzySearch()
            },
            results() {
                this.filterVariants(this.results)
            }
        },
        data() {
            return {
                search: '',
                results: [],
                fuse: null,
            }
        },
        mounted() {
            this.$store.watch(state => {
                return state.products.selectedProduct
            }, value => {
                if (value) {                    
                    this.$modal.show("product-selector")
                } else {
                    this.$modal.hide("product-selector")                                
                }
            })
        }
    }
</script>

<style lang="sass">
    .product-selector
        .variant-searcher
            width: calc(100% - 30px)
            height: 35px
            text-align: center
            margin: 10px 15px
            border-radius: 0
            font: 
                size: 10pt
                style: normal
                weight: bold

        .product-variants
            width: 100%;
            height: calc(100% - 70px);
            overflow-y: auto;
</style>