grafitto-filter

A polymer compatible reusable web element providing a solution for filtering a list of items before displaying them. This component also supports use of custom filter functions using the f property.

Install:

bower install --save grafitto/grafitto-filter

View the API and Demo Here

<h3>GRAFITTO-FILTER DEMO</h3>
    <paper-input label="Filter" id="like"></paper-input>
        <paper-checkbox class="styled" id="i" raised>
          Case
          <span class="subtitle">
            Enable case sensitivity
          </span>
        </paper-checkbox>
        <grafitto-filter where="name" like="" as="vitu">
          <template>
            <iron-list items=[[vitu]] as="item">
              <template>
                <paper-item>
                  <paper-item-body two-line>
                    <div>{{item.name}}</div>
                    <div class="small" secondary>{{item.code}}</div>
                  </paper-item-body>
                </paper-item>
              </template>
            </iron-list>
          </template>
        </grafitto-filter>
  </body>
  <script>
    var items = [
                    {"code": "+678","name": "Vanuatu"},
                    {"code": "+58","name": "Venezuela"},
                    {"code": "+84","name": "Vietnam"},
                    {"code": "+1 808","name": "Wake Island"},
                    {"code": "+681","name": "Wallis and Futuna"},
                    {"code": "+967","name": "Yemen"},
                    {"code": "+260","name": "Zambia"}
                ];
    
    var f = document.querySelector("grafitto-filter");
    f.items = items;

      //Set case sensitivity event handler
    document.getElementById("i").addEventListener("checked-changed", function(e){
      f.caseSensitive = e.detail.value;
    })

    //Listen for value changed
    document.getElementById("like").addEventListener("value-changed", function(from, to){
      f.like = from.detail.value;
    });
  </script>

array:

var array = ["one", "two", "three", "four", "five", "six", "seven"];

<grafitto-filter item=[[array]] like="o" as="vitu">
  <template>
    <iron-list items=[[vitu]] as="item">
      <template>
        <div>{{item}}</div>
      </template>
    </iron-list>
  </template> </grafitto-filter>

Arrays of Objects

data:

var data = [
  {
    name:"John",
    home: "Thika"
  },
  {
    name: "Doe",
    home: "Nairobi"
  }
]

Example using dom-repeat:

<grafitto-filter items='[[data]]' where="name" like="Doe" as="vitu">
  <template>
    <template is="dom-repeat" items=[[vitu]] as="item">
      <div>{{item.name}}</div>
    </template>
  </template>
</grafitto-filter>

Example using iron-list:

<grafitto-filter items=[[data]] where="name" like="Doe" as="vitu">
  <template>
    <iron-list items=[[vitu]] as="item">
      <template>
        <div>{{item.name}}</div>
      </template>
    </iron-list>
  </template>
</grafitto-filter>

Just incase you are wondering, vitu means items in Swahili :-)

Note: When a simple array E.g ["one","two","three","four"] is provided, the where attribute is ignored and filtering done on the array items themselves. Also an array of numbers behave like an array of strings when filtering.

grafitto-filter also supports complex objects. consider:

var complexObj = [
  {
    name: {
      first: "Thomas",
      second: "Kimtu"
    },
    home: "Thika"
  },
  {
    name: {
      first: "John",
      second: "Doe"
    },
    home: "Othaya"
  },
  {
    name: {
      first: "Clement",
      second: "Wainaina"
    },
    home: "Nakuru"
  }
]

Here is an example using the complexObj object above

<grafitto-filter items=[[complexObj]] where="name.first" like="tho" as="vitu">
  <template>
    <iron-list items=[[vitu]] as="item">
      <template>
        <div>{{item.name.first}} {{item.name.second}}, {{item.home}}</div>
      </template>
    </iron-list>
  </template>
</grafitto-filter>

You can also use your custom function to filter the items provided. The function receives a single item of the items provided and should return a boolean

<dom-module id="your-element">
  <template>
    <grafitto-filter items=[[data]] id="filter" as="vitu">
      <template>
        <iron-list items=[[vitu]] as="item">
          <template>
            <div>{{item.name}}, {{item.home}}</div>
          </template>
        </iron-list>
      </template>
    </grafitto-filter>
    <script>
      Polymer({
        is: "your-element",
        properties: {
          data: {
            type: Array,
            value: [
                    {
                      "name":"John",
                      "home": "Thika"
                    },
                    {
                      "name": "Doe",
                      "home": "Nairobi"
                    }
                  ]
          }
        },
        ready: function(){
          this.$.filter.f = function(item){
            return item.name == "Doe";
          };
        }
       //Then you can call filter() function to trigger filter
      })
    </script>
  </template>
</dom-module>

Rule of thumb

like is taken as a regular expression so remember to escape any characters that you don't want interpreted by the regular expression engine.