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

152 lines
4.2 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
*/
// eslint-disable-next-line ember/no-new-mixins
2017-09-19 14:47:10 +00:00
export default Mixin.create({
searchTerm: '',
2021-12-28 14:45:20 +00:00
listToSearch: computed(function () {
return [];
}),
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,
includeFuzzySearchMatches: 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);
}
},
2021-12-28 14:45:20 +00:00
fuse: computed(
'fuzzySearchProps.[]',
'includeFuzzySearchMatches',
'listToSearch.[]',
function () {
return new Fuse(this.listToSearch, {
shouldSort: true,
threshold: 0.4,
location: 0,
distance: 100,
tokenize: true,
matchAllTokens: true,
maxPatternLength: 32,
minMatchCharLength: 1,
includeMatches: this.includeFuzzySearchMatches,
keys: this.fuzzySearchProps || [],
getFn(item, key) {
return get(item, key);
},
});
}
),
2017-09-19 14:47:10 +00:00
listSearched: computed(
'exactMatchEnabled',
'exactMatchSearchProps.[]',
'fuse',
'fuzzySearchEnabled',
'fuzzySearchProps.[]',
'includeFuzzySearchMatches',
'listToSearch.[]',
'regexEnabled',
'regexSearchProps.[]',
'searchTerm',
2021-12-28 14:45:20 +00:00
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(
2021-12-28 16:08:12 +00:00
...exactMatchSearch(
searchTerm,
this.listToSearch,
this.exactMatchSearchProps
)
);
}
2019-03-26 07:46:44 +00:00
if (this.fuzzySearchEnabled) {
let fuseSearchResults = this.fuse.search(searchTerm);
if (this.includeFuzzySearchMatches) {
2021-12-28 14:45:20 +00:00
fuseSearchResults = fuseSearchResults.map((result) => {
const item = result.item;
item.set('fuzzySearchMatches', result.matches);
return item;
});
}
results.push(...fuseSearchResults);
}
2019-03-26 07:46:44 +00:00
if (this.regexEnabled) {
2021-12-28 16:08:12 +00:00
results.push(
...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) {
2021-12-28 14:45:20 +00:00
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.
2021-12-28 16:08:12 +00:00
return list.filter((item) =>
keys.some((key) => regex.test(get(item, key)))
);
2017-09-19 14:47:10 +00:00
} 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
}
}