exm-data-helper.html

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

<!--
`exm-data-helper` is helper element that facilitates sorting and paging on local data sets.

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

<exm-data-helper
  raw-items="[[rawItems]]"
  items="{{items}}"
  page-index="[[pageIndex]]"
  page-size="[[pageSize]]"
  sorted="[[sorted]]"
  sort-direction="[[sortDirection]]"
  total-items="{{totalItems}}">
</exm-data-helper>

<table is="exm-datatable">
  <thead is="exm-thead" sorted="{{sorted}}" sort-direction="{{sortDirection}}">
    <tr>
      <th sortable="name">Name</th>
      <th sortable="email">Email</th>
      <th sortable="phone">Phone</th>
    </tr>
  </thead>
  <tbody is="exm-tbody" items='[[items]]'>
    <template id="tbody">
      <tr>
        <td>[[item.name]]</td>
        <td>[[item.email]]</td>
        <td>[[item.phone]]</td>
      </tr>
    </template>
  </tbody>
</table>

<exm-paging
  total-items="[[totalItems]]"
  page-index="{{pageIndex}}"
  page-size="{{pageSize}}">
</exm-paging>
```

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

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

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

      /**
       * Returnes a page of the sorted items
       */
      items: {
        type: Array,
        notify: true
      },

      /**
      * Returns the total length of the raw list that will be used in the exm-paging
      * as indication on how much pages there are available.
      */
      totalItems: {
        notify: true,
        type: Number,
        computed: '_computeLength(rawItems.*)'
      },

      /**
      * This property can be used to change the current visible items page
      */
      pageIndex: {
        type: Number,
        value: 0
      },

      /**
      * Set the page size of the exposed item list
      */
      pageSize: {
        type: Number,
        value: 10
      },

      /**
      * An string containing the column sort key
      */
      sorted: String,

      /**
      * An string containing 'ASC' or 'DESC' to indicate the sorting direction
      */
      sortDirection: String

    },
    observers: [
      '_sortChanged(sorted,sortDirection)',
      '_ramItemsChanged(rawItems.*)',
      '_pageChanged(pageIndex, pageSize)'
    ],
    _sortChanged: function(sorted, sortDirection) {
      this._updatePage();
    },
    _computeLength: function(rawItems) {
      return this.rawItems.length;
    },
    _ramItemsChanged: function() {
      this._updatePage();
    },
    _pageChanged: function(pageIndex, pageSize) {
      this._updatePage();
    },
    _updatePage: function() {
      const lookupValueByPath = (o, path) => path.split('.').reduce((r, p) => r[p], o);
      const isArray = (o) => Array.isArray(o) || Object.prototype.toString.call(o) === '[object Array]';
      const properArray = (o) => {
        return isArray(o) ? o : [];
      };

      const workArray = [...properArray(this.rawItems)];
      const start = (this.pageIndex * this.pageSize);
      const sortArray = (a, b) => {
        let fieldA = lookupValueByPath(a, this.sorted);
        let fieldB = lookupValueByPath(b, this.sorted);
        if (typeof fieldA === 'number' || typeof fieldA === 'boolean') {
          return this.sortDirection === 'ASC' ? fieldA - fieldB : fieldB - fieldA;
        } else {
          fieldA = fieldA ? fieldA.toLowerCase() : '';
          fieldB = fieldB ? fieldB.toLowerCase() : '';
          if (fieldA < fieldB) {
            return this.sortDirection === 'ASC' ? -1 : 1;
          }
          if (fieldA > fieldB) {
            return this.sortDirection === 'ASC' ? 1 : -1;
          }
        }
        return 0;
      }

      if (this.sorted) {
        workArray.sort((a, b) => sortArray(a, b));
      }

      this.set('items', []);
      this.set('items', workArray.slice(start, start + this.pageSize));
    }
  });
  </script>
</dom-module>