eiru_payments/src/components/partner/PartnerSearcher.vue

<template lang="pug">
    .partner-searcher
        input(type="text" placeholder="Buscar un cliente" v-model="search")
</template>

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

    export default {
        computed: mapGetters([
            'partners'
        ]),
        methods: {
            initFuse() {
                if (this.fuse) {
                    this.fuse.setCollection(this.partners)
                    return
                }

                this.fuse = new Fuse(this.partners, {
                    shouldSort: true,
                    threshold: 0.4,
                    location: 0,
                    distance: 100,
                    maxPatternLength: 32,
                    minMatchCharLength: 1,
                    keys: [
                        'name',
                        'phone',
                        'mobile',
                        'email',
                        'categories.name'
                    ]
                })
            },
            fuzzySearch() {
                this.results = this.fuse.search(this.search)
            },
            ...mapActions([
                'filterCustomers'
            ])
        },
        watch: {
            partners() {
                this.initFuse()
            },
            search() {
                this.fuzzySearch()
            },
            results() {
                this.filterCustomers(this.results)
            }
        },
        data() {
            return {
                search: '',
                fuse: null,
                results: []
            }
        }
    }
</script>
<style lang="sass">
    .partner-searcher
        width: 100%
        height: 35px

        input
            width: 100%
            height: inherit
            text-align: center
            border-radius: 0
            font:
                size: 11pt
                style: normal
                weight: bold
</style>