kouts / vue-dataset

A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!
https://next--vue-dataset-demo.netlify.app/
MIT License
220 stars 26 forks source link

Add custom search function property to DataSet #93

Open pieterjandebruyne opened 2 years ago

pieterjandebruyne commented 2 years ago

This change will allow for a custom search function to be passed to Dataset. If none is passed, things will work as they do now because of the default function.

Usecase for me:

How to use:

// HTML
<DataSet
    v-slot="{ ds }"
    :ds-data="data"
    :ds-sortby="sortBy"
    :ds-search-fc="customSearch"
>

 // JS function:
       customSearch(dataset, searchValue) {
        return dataset.filter((item) => {
            return item.value.searchString.includes(searchValue)
        })
    }

note: When passing custom search fc dsSearchAs & dsSearchIn are no longer used since you have to add that logic in your custom search fc now.

pieterjandebruyne commented 2 years ago

This could be the most basic implementation for a fuzzy search inside an object with nested inside an email adress using fuse:

customSearch(dataset, searchValue) {
        if (searchValue === '') {
            return dataset
        }
        return new Fuse(dataset, {
            keys: ['value.customer.email'],
            findAllMatches: true,
            includeScore: true,
        }).search(searchValue).reduce((collection, currItem) => {
            if ((currItem.score ?? 1) < 0.3) {
                collection.push(currItem.item)
            }
            return collection
        }, [])

This would return all matches that have a fuzzy match score < 0.3, this can be tweaked to make it less or more fuzzy, you can also add keys like phone by adding

       keys: ['value.customer.email', 'value.customer.phone'],

Look at fuse documentation for more info or use whatever filtering function you'd like.

kouts commented 2 years ago

@pieterjandebruyne thanks for the PR, but we have the search-as https://vue-dataset-demo.netlify.app/components/#dataset prop which you can use to pass a custom search function to the desired fields.

pieterjandebruyne commented 2 years ago

Hi @kouts I first used the search-as but I was not able to get the results I wanted.. If you want to use a libary for fuzzy search you need to be able to provide it with the whole dataset and options for filtering. Searching inside an object could be done with search-as, that's true.

Would be nice to see this merged so I can update from this package, otherwise I will probably fork it for my use-case.

kouts commented 2 years ago

Thanks @pieterjandebruyne, I'll find some time to create a demo using fuse with search-as to see if it works. If it doesn't, I like the idea of passing a custom search function, but we'll have to find a way to integrate it with the rest of dataset's features (e.g searchAs, searchIn) and have it thoroughly tested as well.

pieterjandebruyne commented 2 years ago

Not sure if compatibility with searchAs and searchIn needs to be possible. Since you fully overwrite everything that has to do with searching/filtering within the function you pass. Things like searchAs is possible within Fuse and searchIn would also be passed as params to Fuse itself. But you might have another vision on this for you lib :). Thanks in advance.

pieterjandebruyne commented 2 years ago

@kouts reading through the code I also noticed the whenChanged watcher. Here is both the sort and search logic combined. If we enter a searchvalue, it will first search the original dataset for matches and then sort it. But if we then want to sort those results in another way, we again search the whole dataset for matches and then sort it.

You would probably gain a lot of sorting performance when you split the watchers into sorting change / searching change when the data changes you can probably keep the current logic.

Especially if you integrate more advanced searching techniques, like fuzzy searches in this example, it would be great to gain some improved performance on large datasets you want to search/sort.