crowdskout/e50-filter-bar

##Installation

bower install e50-filter-bar

##Usage Inject E50Filter into a controller or provider.

var filterBar = $scope.filterBar = E50Filter.new();

Inside your template, pass the filterBar scope variable into the e50-filter-bar directive.

<e50-filter-bar filter="filterBar"></e50-filter-bar>

Default Options

E50Filter.new({
  count: true,
  filters: true,
  views: true,
  sort: true, 
  actions: true,
  search: true
});

Top level API

// returns what value to filter on. 
filterBar.filterKey()

// returns which key to sort by
filterBar.sortKey()

// returns boolean, whether ascending or descending
filterBar.asc()

// returns the text in the search field
filterBar.searchText()

Dropdown API

Each filterBar instance has three dropdowns. filterBar.filter, filterBar.sort, and filterBar.actions all extend the dropdown api

var drop = filterBar.filter;
// Set the dropdown options
drop.setOptions([{value: 'user', label: 'Filter by User'}]);

// returns boolean,
drop.hasOptions();

var drop = filterBar.sort;
// returns the current sort by option
drop.getKey(); 

// sort by creation date
drop.setKey({value: 'id', label: 'Creation Date'})

// set onChange callback
drop.onChange(function(selectedOption) {
  this.setKey(selectedOption);
});

Toggle API

Each dropdown extends the toggle api

// return boolean, true if it's open
drop.isOpen();

// return boolean, true if it's closed
drop.isClosed();

// Opens the dropdown
drop.open();

// Closes the dropdown
drop.close();

// Toggles the dropdown
drop.toggle();

Custom Template

Either override the templateUrl or create your own directive and pass in the filterBar instance.

Directive

app.directive('customFilter', function() {
  return {
    restrict: 'EA',
    scope: {
      bar: '=filterBar'
    },
    templateUrl: 'your/tpl/path.html'
  }
});

Implementation

<custom-filter bar="filterBar"></custom-filter>

Template

<div class="custom-filter">
  In here, you have access to the filterBar instance api. 
  <div ng-if="bar.options.sort">Only show this if the sort option is available</div>
  <a href="" ng-click="bar.filter.toggle()">Toggle filter dropdown</a>
  <ul ng-if="bar.filter.isOpen()">
    <li ng-repeat="option in bar.filter.options">
      <a href="" ng-click="bar.filter.setKey(option)">{{option.label}}</>
    </li>
  </ul>
</div