Filtering

action-dropdown.hbs

{{#basic-dropdown as |dropdown|}}
  {{#dropdown.trigger
    class='c-button'
  }}
    Filters
  {{/dropdown.trigger}}
  {{#dropdown.content}}
    <div>
      <h2>
        Bidders
      </h2>

      {{#each (filter-by BIDDING_ACTIVITY_FILTERS 'section' 'bidders') as |subsection|}}
        <div class='filter-section'>
          <div class='filter-section--subsection'>
            {{#each subsection as |filter|}}
              <div
               class='filter'
              >
              {{!-- on click, toggle filter, remove other subsection filters--}}
                {{filter.value}}
                {{filter.key}}
                {{filter.name}}
              </div>
            {{/each}}
          </div>

        <div class='filter-section--subsection'>
          <div
           class='filter'
          >
            Reducing Eligibility
          </div>
          <div
            class='filter'
          >
            Maintaining Eligibility
          </div>
        </div>

        <div class='filter-section--subsection'>
          <div
           class='filter'
          >
            Unread Messages
          </div>
        </div>

        <div class='filter-section--subsection'>
          <div
           class='filter'
          >
            Unread Announcements
          </div>
        </div>

        <div class='filter-section--subsection'>
          <div
           class='filter'
          >
            Disabled User
          </div>
        </div>

        <div class='filter-section--subsection'>
          <div
           class='filter'
          >
            Note
          </div>
        </div>
      </div>
    </div>
    <div>
      <h2>
        Bids
      </h2>
    </div>
    <div>
      <h2>
        Products
      </h2>
    </div>
    <div>
      <button class='c-button'>
        Clear filters
      </button>
      <button class='c-button'>
        Cancel
      </button>
      <button class='c-button'>
        Apply
      </button>
    </div>
  {{/dropdown.content}}
{{/basic-dropdown}}

bidding-activity-filter-sections.js

export default [
  {
    sectionHeader: 'Bidders',
    filters: [
      [
        {
          value: 'eligible',
          label: 'Eligible',
          key: 'eligibility',
          isSelected: false,
        },
        {
          value: 'not_eligible',
          label: 'Not Eligible',
          key: 'eligibility',
          isSelected: false,
        },
      ],
    ],
  },
  {
    section: 1,
    subsection: 1,
    key: 'eligibility',
    value: 'eligible',
    label: 'Eligible',
  },
  {
    section: 1,
    subsection: 1,
    key: 'eligibility',
    value: 'not_eligible',
    label: 'Not Eligible',
  },
  {
    section: 1,
    subsection: 2,
    key: 'eligibility',
    value: 'reducing_eligibility',
    label: 'Reducing Eligibility',
  },
  {
    section: 1,
    subsection: 2,
    key: 'eligibility',
    value: 'maintaining_eligibility',
    label: 'Maintaining Eligibility',
  },
  {
    section: 1,
    subsection: 3,
    key: 'message',
    value: 'unread',
    label: 'Unread Messages',
  },
  {
    section: 1,
    subsection: 4,
    key: 'announcement',
    value: 'unread',
    label: 'Unread Announcements',
  },
  {
    section: 1,
    subsection: 5,
    key: 'user',
    value: 'disabled',
    label: 'Disabled User',
  },
  {
    section: 1,
    subsection: 6,
    key: 'note',
    value: 'has_note',
    label: 'Note',
  },
  {
    section: 2,
    subsection: 1,
    key: 'bid',
    value: 'proxy',
    label: 'Proxies',
  },
  {
    section: 2,
    subsection: 1,
    key: 'bid',
    value: 'no_proxy',
    label: 'No Proxies',
  },
  {
    section: 2,
    subsection: 2,
    key: 'bid',
    value: 'discontinue',
    label: 'Discontinue',
  },
  {
    section: 2,
    subsection: 2,
    key: 'bid',
    value: 'no_discontinue',
    label: 'No Discontinue',
  },
  {
    section: 2,
    subsection: 3,
    key: 'bid',
    value: 'missing',
    label: 'Missing',
  },
  {
    section: 2,
    subsection: 4,
    key: 'bid',
    value: 'continue',
    label: 'Continue',
  },
  {
    section: 2,
    subsection: 4,
    key: 'bid',
    value: 'no_continue',
    label: 'No Continue',
  },
  {
    section: 3,
    subsection: 1,
    key: 'lot',
    value: 'won',
    label: 'Won',
  },
  {
    section: 3,
    subsection: 1,
    key: 'lot',
    value: 'no_won',
    label: 'No Won',
  },
]

yep.md

/* 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}}

1. yield block
2. action menu on bottom with buttons for: Clear Filters, Cancel, Apply
3. clear - clears filters
4. apply - calls onApply with an object of mutated filters
5. 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}}

1. Click one of pair
2. Toggle isSelected on filter object
3. Toggle off other pair filter if present filter has state - isSelected or not