exmg-datatable/exmg-data-filter.html at master · exmg/exmg-datatable · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<link rel="import" href="../polymer/polymer-element.html">

<!--
 `exmg-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>

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

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

 <exmg-datatable>
   <exmg-tbody items='[[filteredItems]]'>
     <template>
       <tr>
         <td>[[item.name]]</td>
         <td>[[item.email]]</td>
         <td>[[item.phone]]</td>
       </tr>
     </template>
   </exmg-tbody>
 </exmg-datatable>
 ```

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

<dom-module id="exmg-data-filter">
  <script>
    class ExmgDataFilter extends Polymer.Element {
      static get is() { return 'exmg-data-filter'; }
      static get properties() {
        return {
          /**
           * 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
          }
        };
      }
      static get observers() {
        return [
          '_updateItems(rawItems.*, filterValue, filterFields)'
        ]
      }

      _updateItems() {

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

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

        /* Look for occurances of the filter value in the item fields */
        let items = [];
        const filterFields = this.filterFields.split(',');
        this.rawItems.forEach(o => { filterFields.some(p => o[p].indexOf(this.filterValue) !== -1) && items.push(o)});

        /* Reset result array before adding new results */
        this.set('items', []);
        this.set('items', items);

      }

    }

    window.customElements.define(ExmgDataFilter.is, ExmgDataFilter);
  </script>
</dom-module>