user-story-3.md

3. Filter and sort the game list

Goal: As a user, I want to filter and sort the game list

Keywords: two-way databinding, observable, event handler

1. In models.dart, add those methods in Game class. They will help you to filter and sort.

   // Used for FILTERING
   bool contains(String search) {
     var pattern = new RegExp(search, caseSensitive: false);
     return name.contains(pattern) || genre.contains(pattern) || description.contains(pattern);
   }
   
   // Used for SORTING
   static getComparator(String field) => 
     _comparators.containsKey(field) ? _comparators[field] : (a, b) => 0;
   static final Map _comparators = {
     "name": (Game a, Game b) => a.name.compareTo(b.name),
     "rating": (Game a, Game b) => a.rating.compareTo(b.rating)
   };

2. Filter the game list when typing text in search input

   • Add a search attribute in games.dart and bind it to the search input value (Hints)
   • Implement a filter function filterSearch that allows to filter a game sequence and use it in the template loop binding (Hints):

   <template repeat="{{game in games | filterSearch(search)}}">

3. Sort game list when clicking on Sort by name or Sort by rating buttons

• In games.html, bind click events to sort handler

  <button class="btn btn-info" on-click="{{sort}}" data-field="name">Sort by name</button>
  <button class="btn btn-info" on-click="{{sort}}" data-field="rating">Sort by rating</button>

• In games.dart, implement the click handler sort that sets two new fields sortField and sortAscending

  • sortField is set from the data-field attribute in the target element (Hints)
  • sortAscending is reversed each time a button is clicked

• Implement a filter function sortBy that sorts a game sequence and use it in the template loop binding (Hints):

  <template repeat="{{game in games | filterSearch(search) | sortBy(sortField, sortAscending)}}">

4. Try to sort and filter the games
   

Hints:

• In this user story, attributes must be @observable, when the value changed, bindings are notified (See Data binding)

• Dynamic filter function with bound parameters must return a filter function Oo

  dynamicFilterFunction(param1, param2) {
    return (Iterable games) {
      // ...
    };
  }

• An event handler is a three parameter method defined in the custom element class (See Event Handlers)
  myEventHandler(Event e, var detail, Element target)

  • An Event that contains information about the event, such as its type and when it occurred.
  • The detail object can provide additional, event-specific information.
  • The Element that fired the event.

• Element.dataset allows access to all custom data attributes (data-*) set on this element.

• List and Iterable methods are your friends ;)

Next >