/* filter = { eligibility: [''], message: [''], announcement: [''], user: [''], } */
actions: {
clear() {
const defaultValues = get(this, 'defaultValues');
set(this, 'mutableQ', get(defaultValues, 'q'));
set(this, 'mutableSort', get(defaultValues, 'sort'));
set(this, 'mutableFilter', get(defaultValues, 'filter'));
},
},
// Container {{#filter-dropdown filter=filter q=q sort=sort defaulValues=defaultValues onApply=onApply as |dropdown| }}
{{filter-input value=dropdown.q}} {{filter-sort sort=dropdown.sort}} {{filter-sections filter=dropdown.filter sections=sections}}
{{/filter-dropdown}}
- yield block
- action menu on bottom with buttons for: Clear Filters, Cancel, Apply
- clear - clears filters
- apply - calls onApply with an object of mutated filters
- cancel - closes menu
// Container
init() {
this._updateIsSelected();
},
_updateIsSelected() {
get(this, 'sections').forEach((section) => {
get(section, 'filters').forEach((filter) => {
const key = get(filter, 'key');
const filterValue = get(this, `filter.${key}`);
const isSelected = filterValue.includes(get(filter, 'value'));
set(filter, 'isSelected', isSelected);
});
});
},
sectionsWithSelection: observer('filter', function() {
run.scheduleOnce(() => {
this._updateIsSelected();
});
}),
actions: {
onUpdate(key) {
this._refreshFilterByKey(key);
}
},
_refreshFilterByKey(key) {
const selectedFilters = get(this, 'filterObjects').filterBy('key', key).filterBy('isSelected).mapBy('value');
const newFilterValue = selectedFilters.joins(',');
set(this, `filter.${key}`, newFilterValue);
},
filterObjects: computed({
get() {
return flatten(get(this, 'sections').mapBy('filters'));
},
})
// Technique taken from https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript
function flatten(arrays) {
return [].concat.apply([], arrays)
},
{{filter-sections filter=dropdown.filter sections=sections}} section.header {{each}} section.filterPairs as |filterPair|
// onToggle(filter1, filter2) {{filter-pair filterPair=filterPair onUpdate=onUpdate}}
- Click one of pair
- Toggle
isSelectedon filter object - Toggle off other pair filter if present filter has state - isSelected or not