JS: Filter by status

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<ul class="js-orders">
  <li data-status="working">Item 1 - Working</li>
  <li data-status="cancelled">Item 2 - Cancelled</li>
  <li data-status="working">Item 3 - Working</li>
  <li data-status="cancelled">Item 4 - Cancelled</li>
  <li data-status="working">Item 5 - Working</li>
  <li data-status="cancelled">Item 6 - Cancelled</li>
  <li data-status="held">Item 7 - Held</li>
  <li data-status="held">Item 8 - Held</li>
  <li data-status="filled">Item 9 - Filled</li>
</ul>

<button class="js-action--filter" data-action="working">Add Working</button>
<button class="js-action--filter" data-action="filled">Add Filled</button>
<button class="js-action--filter" data-action="cancelled">Add Cancelled</button>
<button class="js-action--filter" data-action="held">Add Held</button>
<button class="js-action--reset-filters" data-action="reset">Reset Filters</button>

CSS

.is-hidden {
  display: none;
}

JavaScript

console.clear();

var filtersArray = [],
		orders = $('.js-orders').children();

function filterOrders(arr) {
  var filtered = orders.filter(function(index, element) {
    // we would use the model.get('status)
    return arr.indexOf($(element).data('status')) === -1;
  });
  
  orders.removeClass('is-hidden');
  filtered.addClass('is-hidden')
}

function updateFilters() {
	var action = $(this).data('action');
  
  filtersArray.push(action);
  
  filterOrders(filtersArray);
}

function resetFilters() {
	filtersArray = [];
	orders.removeClass('is-hidden');
}

$('.js-action--filter').on('click', updateFilters);
$('.js-action--reset-filters').on('click', resetFilters);