open-nomad/ui/app/mixins/searchable.js

128 lines
3.5 KiB
JavaScript
Raw Normal View History

import Mixin from '@ember/object/mixin';
import { get, computed } from '@ember/object';
import { reads } from '@ember/object/computed';
import Fuse from 'fuse.js';
2017-09-19 14:47:10 +00:00
/**
Searchable mixin
Simple search filtering behavior for a list of objects.
Properties to override:
- searchTerm: the string to use as a query
- searchProps: the props on each object to search
-- exactMatchSearchProps: the props for exact search when props are different per search type
-- regexSearchProps: the props for regex search when props are different per search type
-- fuzzySearchProps: the props for fuzzy search when props are different per search type
- exactMatchEnabled: (true) disable to not use the exact match search type
- fuzzySearchEnabled: (false) enable to use the fuzzy search type
- regexEnabled: (true) disable to disable the regex search type
2017-09-19 14:47:10 +00:00
- listToSearch: the list of objects to search
Properties provided:
- listSearched: a subset of listToSearch of items that meet the search criteria
2017-09-19 14:47:10 +00:00
*/
export default Mixin.create({
searchTerm: '',
listToSearch: computed(() => []),
2017-09-19 14:47:10 +00:00
searchProps: null,
exactMatchSearchProps: reads('searchProps'),
regexSearchProps: reads('searchProps'),
fuzzySearchProps: reads('searchProps'),
// Three search modes
exactMatchEnabled: true,
fuzzySearchEnabled: false,
regexEnabled: true,
// Search should reset pagination. Not every instance of
// search will be paired with pagination, but it's still
// preferable to generalize this rather than risking it being
// forgotten on a single page.
resetPagination() {
2019-03-26 07:46:44 +00:00
if (this.currentPage != null) {
this.set('currentPage', 1);
}
},
fuse: computed('listToSearch.[]', 'fuzzySearchProps.[]', function() {
2019-03-26 07:46:44 +00:00
return new Fuse(this.listToSearch, {
shouldSort: true,
threshold: 0.4,
location: 0,
distance: 100,
tokenize: true,
matchAllTokens: true,
maxPatternLength: 32,
minMatchCharLength: 1,
2019-03-26 07:46:44 +00:00
keys: this.fuzzySearchProps || [],
getFn(item, key) {
return get(item, key);
},
});
}),
2017-09-19 14:47:10 +00:00
listSearched: computed(
'searchTerm',
'listToSearch.[]',
'exactMatchEnabled',
'fuzzySearchEnabled',
'regexEnabled',
'exactMatchSearchProps.[]',
'fuzzySearchProps.[]',
'regexSearchProps.[]',
function() {
2019-03-26 07:46:44 +00:00
const searchTerm = this.searchTerm.trim();
if (!searchTerm || !searchTerm.length) {
2019-03-26 07:46:44 +00:00
return this.listToSearch;
}
const results = [];
2019-03-26 07:46:44 +00:00
if (this.exactMatchEnabled) {
results.push(
...exactMatchSearch(
searchTerm,
2019-03-26 07:46:44 +00:00
this.listToSearch,
this.exactMatchSearchProps
)
);
}
2019-03-26 07:46:44 +00:00
if (this.fuzzySearchEnabled) {
results.push(...this.fuse.search(searchTerm));
}
2019-03-26 07:46:44 +00:00
if (this.regexEnabled) {
results.push(
2019-03-26 07:46:44 +00:00
...regexSearch(searchTerm, this.listToSearch, this.regexSearchProps)
);
}
return results.uniq();
2017-09-19 14:47:10 +00:00
}
),
2017-09-19 14:47:10 +00:00
});
function exactMatchSearch(term, list, keys) {
if (term.length) {
return list.filter(item => keys.some(key => get(item, key) === term));
}
}
2017-10-19 02:45:12 +00:00
function regexSearch(term, list, keys) {
if (term.length) {
2017-09-19 14:47:10 +00:00
try {
const regex = new RegExp(term, 'i');
2017-09-19 14:47:10 +00:00
// Test the value of each key for each object against the regex
// All that match are returned.
return list.filter(item => keys.some(key => regex.test(get(item, key))));
} catch (e) {
// Swallow the error; most likely due to an eager search of an incomplete regex
}
return [];
2017-09-19 14:47:10 +00:00
}
}