exm-data-filter.html

<link rel="import" href="../polymer/polymer.html">

<!--
`exm-data-filter` is filter element that lets you filter local data sets.

```html
<iron-ajax url="data/contacts.json" last-response="{{rawItems}}" auto></iron-ajax>

<exm-data-filter
  raw-items="[[rawItems]]"
  items="{{filteredItems}}"
  filter-value="[[filterValue]]"
  filter-fields="name,email">
</exm-data-filter>

<input is="iron-input" bind-value="{{filterValue}}">

<table is="exm-datatable">
  <tbody is="exm-tbody" items='[[filteredItems]]'>
    <template id="tbody">
      <tr>
        <td>[[item.name]]</td>
        <td>[[item.email]]</td>
        <td>[[item.phone]]</td>
      </tr>
    </template>
  </tbody>
</table>
```

@element exm-data-filter
@demo demo/index.html
-->

<dom-module id="exm-data-filter">
  <template></template>
  <script>
  Polymer({
    is: 'exm-data-filter',
    properties: {

      /**
       * Raw item list
       */
      rawItems: {
        type: Array
      },

      /**
       * This array will conatin the filtered items list
       */
      items: {
        type: Array,
        notify: true
      },

      /**
       * Text string used for filtering the fields.
       */
      filterValue: {
        type: String
      },

      /**
       * Comma seperated list of filter fields.
       */
      filterFields: {
        type: String
      }

    },
    observers: [
      '_updateItems(rawItems.*, filterValue, filterFields)'
    ],
    _updateItems: function() {

      /* Skip if raw items or filterfields are not set */
      if(this.rawItems === undefined || this.filterFields === undefined) {
        return;
      }

      /* return all items when filter is empty */
      if(this.filterValue === undefined && this.filterValue === '') {
          this.set('items', []);
          this.set('items', this.rawItems);
          return;
      }

      /* Look for occurances of the filter value in the item fields */
      var items = [];
      var filterFields = this.filterFields.split(',');
      for(var i = 0; i < this.rawItems.length; i++) {
          for(var j = 0; j < filterFields.length; j++) {
              if(this.rawItems[i][filterFields[j].trim()] && this.rawItems[i][filterFields[j].trim()].toLowerCase()
                .indexOf(this.filterValue.toLowerCase()) !== -1){
                  items.push(this.rawItems[i]);
                  break;
              }
          }
      }
      this.set('items', []);
      this.set('items', items);

    }
  });
  </script>
</dom-module>