oe-data-table-filter.html

<!-- 
  ©2016-2017 EdgeVerve Systems Limited (a fully owned Infosys subsidiary),
  Bangalore, India. All Rights Reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-list/iron-list.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-button/paper-button.html">

<!--
### oe-data-table-filter

`<oe-data-table-filter>` is used in `oe-data-table` component for displayig a column filter data. List of unique items present in a column is shown.

-->
<dom-module id="oe-data-table-filter">

  <template>
    <style>
      :host {
        display: block;
        margin: 0 !important;
        padding: 0 !important;
      }

      #list {
        height: 192px;
        width: 100%;
        min-width: 100px;
      }

      .input-container {
        padding: 16px;
        border-bottom: 1px solid #ededed;

        @apply(--layout);
        @apply(--layout-center);
      }

      paper-input {
        width: 100%;

        --paper-input-container: {
          padding: 0;
        }
        --paper-input-container-input: {
          font-size: 13px;
        }
      }

      paper-checkbox {
        --paper-checkbox-size: 14px;
        --paper-checkbox-ink-size: 38px;
      }

      paper-item {
        --paper-item: {
          font-size: 13px;
        }
      }

      paper-button {
        --paper-button: {
          color: #2196f3;
          font-size: 14px;
          letter-spacing: 0.5px;
        }
      }

      .action-buttons {
        padding: 8px 5px;
        font-weight: bold;

        @apply(--layout);
        @apply(--layout-around-justified);
      }

    </style>

    <div class="input-container">
      <paper-checkbox checked={{_selectAllItems}} on-change="_toggleSelectAll"> </paper-checkbox>
      <paper-input label="Search [[column.label]]" no-label-float value={{searchText}} on-input="_computeCheckBox"></paper-input>
    </div>

    <template is="dom-if" if=[[!searchText.length]] on-dom-change="_updateListSize">
      <iron-list id="list" items=[[_filterItems(_items,searchText)]]>
        <template>
          <paper-item tabindex="-1">
            <paper-checkbox checked={{_getSelectionState(item,_computeSelection)}} on-change="_toggleCheckboxSelection"> [[item]] </paper-checkbox>
          </paper-item>
        </template>
      </iron-list>

    </template>

    <template is="dom-if" if=[[searchText.length]] on-dom-change="_updateListSize">
      <iron-list id="list" items=[[_filterItems(_items,searchText)]]>
        <template>
          <paper-item>
            <paper-checkbox checked={{_getSelectionState(item,_computeSelection)}} on-change="_toggleCheckboxSelection"> [[item]] </paper-checkbox>
          </paper-item>
        </template>
      </iron-list>

    </template>

    <div class="action-buttons">
      <paper-button on-tap="_resetFilter"> Reset </paper-button>
      <paper-button on-tap="_closeFilter"> Cancel </paper-button>
      <paper-button on-tap="_applyFilter"> Apply </paper-button>
    </div>
  </template>

</dom-module>

<script>
  Polymer({
    is: 'oe-data-table-filter',
    properties: {

      /**
       * The definition of the column of the current cell.
       *
       * @type {{key: string, label: string, uiType: string, type: string, sort: string}}
       */
      column: {
        type: Object,
        notify: true
      },

      /**
       * data object array.
       */
      items: {
        type: Array
      }

    },

    get _selectedItems() {
      return this._items.filter(function (item) {
        return this._selectionState[item];
      }.bind(this));
    },

    observers: [
      '_itemsChanged(items.*)'
    ],

    ready: function () {
      this.set('_selectionState', {});
    },

    _computeCellData: function (row, column) {
      var key = column.key || column.field;
      return key ? row[key] : null;
    },

    _applyFilter: function (evt) { // eslint-disable-line no-unused-vars
      this.set('column.selectedItems', this._selectedItems);
      this.fire('apply-criteria');
      this.domHost.$.dialog.close();
    },

    _resetFilter: function (evt) { // eslint-disable-line no-unused-vars
      this._selectedItems.forEach(function (item) {
        this.set('_selectionState.' + item, false);
      }.bind(this));
      this.set('_selectAllItems', false);
      this.set('_computeSelection', !this._computeSelection);
      this.set('column.selectedItems', this._selectedItems);
      this.fire('apply-criteria');
      this.domHost.$.dialog.close();
    },

    _closeFilter: function (event) { // eslint-disable-line no-unused-vars
      this.domHost.$.dialog.close();
    },

    _itemsChanged: function (change) { // eslint-disable-line no-unused-vars
      //console.log(change);
      // if (change.path == 'items') {

      // } else if (change.path == 'items.splices') {

      // } else {

      // }
      if (this.items && this.items.length) {
        var uniqueData = [];

        this.items.forEach(function (d) {
          var val = d[this.column.key || this.column.field]
          if (uniqueData.indexOf(val) == -1) {
            //if(searchText && val.toString().toLowerCase().indexOf(searchText) == -1) return;
            uniqueData.push(val);
          }
        }.bind(this));

        this.set('_items', uniqueData.length ? uniqueData : []);
      }
    },

    _filterItems: function (items, searchText) {
      var search = searchText.toLowerCase();
      return search.length ? items.filter(function (item) {
        return item.toString().toLowerCase().indexOf(search) > -1;
      }) : items;
    },

    _getSelectionState: function (item) {
      return this._selectionState[item] ? true : false;
    },

    _toggleSelectAll: function (event) {
      var state = event.target.checked;
      var items = this.searchText.length ? this._filterItems(this._items, this.searchText) : this._items;
      items.forEach(function (item) {
        state ? this._selectionState[item] = state : delete this._selectionState[item];
      }.bind(this));
      this.set('_computeSelection', !this._computeSelection);
    },

    _toggleCheckboxSelection: function (event) {
      var item = event.model.item;
      if (event.target.checked) {
        //this.set('_selectionState.' + item, true);
        this._selectionState[item] = true;
      } else {
        delete this._selectionState[item];
        this.set('_selectAllItems', false);
      }
      this.set('_computeSelection', !this._computeSelection);
    },

    _computeCheckBox: function (event) { // eslint-disable-line no-unused-vars
      this.set('_selectAllItems', false);
    },

    _updateListSize: function (event) { // eslint-disable-line no-unused-vars
      this.async(function () {
        var lists = this.querySelectorAll('#list');
        for (var i = 0, l = lists.length; i < l; i++) {
          lists[i].notifyResize();
        }
      });
    }

  });

</script>