paper-datatable-card.html

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

<link rel="import" href="paper-datatable.html">

<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-styles/paper-styles.html">


<script src="weakCache.js"></script>
<dom-module id="paper-datatable-card">
	<template>
    <style type="text/css">:host {
  display: block;
  @apply (--paper-font-common-base); }

paper-material {
  border-radius: 2px;
  background: white;
  @apply (--paper-datatable-card); }

#selectionToolbar {
  display: none;
  background: var(--paper-datatable-selection-toolbar-color, --paper-pink-50);
  @apply (--paper-datatable-selection-toolbar);
  padding: 0px 12px 0px 24px; }

#selectionToolbar .selectionHeader, #selectionToolbar .toolbar ::content paper-icon-button {
  color: var(--paper-datatable-selection-toolbar-text-color, --accent-color); }

#selectionToolbar[data-visible] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

#selectionToolbar .toolbar {
  display: none; }

#selectionToolbar .toolbar[data-visible] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

#toolbar-main {
  padding-right: 12px; }

#topBlock {
  height: 64px;
  padding: 0px 6px 0px 24px;
  position: relative;
  @apply (--paper-datatable-top-toolbar); }

#topBlock .header {
  font-size: 20px;
  @apply (--paper-font-common-base);
  color: var(--paper-datatable-top-toolbar-text-color); }

#selectionToolbar > ::content paper-icon-button, .toolbar > ::content paper-icon-button,
#selectionToolbar > ::content paper-icon, .toolbar > ::content paper-icon,
#selectionToolbar > ::content iron-icon, .toolbar > ::content iron-icon {
  color: var(--paper-datatable-selection-toolbar-icon-color, rgba(0, 0, 0, 0.54)); }

#toolbar-main ::content paper-icon-button, #toolbar-main ::content paper-icon, #toolbar-main ::content iron-icon {
  color: var(--paper-datatable-top-toolbar-icon-color); }

#topBlock .selectionHeader {
  font-size: 16px;
  @apply (--paper-font-common-base); }

#bottomBlock {
  height: 56px;
  padding: 0px 6px;
  border-top: 1px solid var(--paper-datatable-divider-color, --divider-color);
  color: var(--paper-datatable-navigation-bar-text-color, rgba(0, 0, 0, 0.54));
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
              -ms-grid-row-align: center;
          align-items: center;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
  @apply (--paper-datatable-navigation-bar); }

#bottomBlock paper-dropdown-menu {
  vertical-align: middle;
  --paper-input-container-underline-display: none;
  --paper-input-container-input-text-align: right;
  --paper-input-container-input-font-size: 12px;
  --paper-input-container-input-font-weight: 500;
  --paper-input-container-input-color: var(--paper-datatable-navigation-bar-text-color, rgba(0, 0, 0, 0.54));
  --paper-dropdown-menu-icon-color: var(--paper-datatable-navigation-bar-text-color, rgba(0, 0, 0, 0.54));
  margin-right: 18px; }
</style>
		<paper-material elevation="1">
			<div class="horizontal center layout" id="topBlock">
				<div class="flex header">
					<span>{{header}}</span>
				</div>
				<div id="toolbar-main" class="toolbar">
					<content select="*[toolbar-main]"></content>
				</div>
				<div id="selectionToolbar" class="horizontal center layout fit" data-visible$="[[_selectedToolbarVisible]]">
					<div class="flex selectionHeader">
						<span>[[_numberselectedIds]]</span> item selected
					</div>
					<div class="toolbar" data-visible$="{{_singleSelectToolbarVisible}}">
						<content select="*[toolbar-select-single]"></content>
					</div>
					<div class="toolbar" data-visible$="{{_multiSelectToolbarVisible}}">
						<content select="*[toolbar-select-multi]"></content>
					</div>
					<div class="toolbar" data-visible>
						<content select="*[toolbar-select]"></content>
					</div>
				</div>
			</div>
			<div>
				<content select="paper-datatable"></content>
			</div>
			<div class="horizontal center layout" id="bottomBlock">
				<div class="flex"></div>
				<span>Rows per page:</span>
				<paper-dropdown-menu no-label-float style="width: 68px;">
					<paper-menu class="dropdown-content" selected="{{pageSize}}" attr-for-selected="value">
						<template is="dom-repeat" items="{{pageSizeOptions}}">
							<paper-item value="{{item}}">{{item}}</paper-item>
						</template>
					</paper-menu>
				</paper-dropdown-menu>
				<span>
					<span>[[_getRangeStart(page, pageSize)]]</span>-<span>[[_getRangeEnd(page, pageSize, numberOfItems)]]</span> of&nbsp;<span>[[numberOfItems]]</span>
				</span>
				<paper-icon-button icon="datatable:first-page" on-tap="firstPage" disabled="[[_prevPageDisabled(page)]]"></paper-icon-button>
				<paper-icon-button icon="datatable:prev-page" on-tap="prevPage" disabled="[[_prevPageDisabled(page)]]"></paper-icon-button>
				<paper-icon-button icon="datatable:next-page" on-tap="nextPage" disabled="[[_nextPageDisabled(page, pageSize, numberOfItems)]]"></paper-icon-button>
				<paper-icon-button icon="datatable:last-page" on-tap="lastPage" disabled="[[_nextPageDisabled(page, pageSize, numberOfItems)]]"></paper-icon-button>
			</div>
		</paper-material>
	</template>

  <script>'use strict';

(function () {
  'use strict';

  /*
   A [material design implementation of the tables within cards spec](https://www.google.com/design/spec/components/data-tables.html#data-tables-tables-within-cards).
     @element paper-datatable-card
   @demo demo/users-card.html Polished demo
   @demo demo/paper-datatable-card.html Complex demo
   */

  Polymer({

    is: 'paper-datatable-card',
    properties: {
      /**
       * Heading shown above the data table
       *
       * @attribute String
       * @default ''
       * @type Object
       */
      header: String,
      /**
       * See general documentation.
       *
       * @attribute dataSource
       * @type Object
       */
      dataSource: Object,
      /**
       * Number of items per page
       *
       * @attribute pageSize
       * @default 10
       * @type Number
       */
      pageSize: {
        type: Number,
        value: 10,
        notify: true
      },
      /**
       * Possible number of items per page
       *
       * @attribute pageSizeOptions
       * @default [5, 10, 25, 100]
       * @type Array
       */
      pageSizeOptions: {
        type: Array,
        value: [5, 10, 25, 100],
        notify: true
      },
      /**
       * Current page shown
       *
       * @attribute Number
       * @default 1
       * @type Object
       */
      page: {
        type: Number,
        value: 1,
        notify: true
      },
      _disableSave: {
        type: Boolean,
        value: false
      },
      _datatable: {
        type: Object
      },
      /**
       * Used when the value is `undefined`.
       *
       * @attribute default
       * @type Object
       */
      default: {
        type: Object
      },
      /**
       * Property containing the `id` of every row. It is **important** this is available for multi-page selection to work
       *
       * @attribute idProperty
       * @type String
       * @default 'id'
       * @required
       */
      idProperty: {
        type: String,
        value: 'id'
      },
      /**
       * An array of selected row id's.
       *
       * @attribute selectedIds
       * @type Array
       * @default []
       */
      selectedIds: {
        type: Array,
        notify: true,
        value: []
      },
      _cacheUsed: {
        type: Boolean
      },
      _sortDirection: {
        type: String,
        value: 'asc'
      },
      _sortProperty: {
        type: String
      },
      _selectedToolbarVisible: Boolean,
      _singleSelectToolbarVisible: Boolean,
      _multiSelectToolbarVisible: Boolean,
      _numberselectedIds: Number
    },
    ready: function ready() {
      this._datatable = Polymer.dom(this).querySelector("paper-datatable");
      this._datatable.data = [];
      this._datatable.addEventListener("data-changed", this._triggerSave.bind(this));
      this._datatable.addEventListener("sort", this._handleSort.bind(this));
      this._datatable.addEventListener("selection-changed", this._setSelectedIds.bind(this));
      this._datatable.addEventListener("selection-changed", this._setSelectedToolbarVisible.bind(this));
      this._datatable.addEventListener("toggle-all", this._toggleAll.bind(this));
      this._datatable._setPartialSelection = function () {};
      this.set('selectedIds', []);
      this.set('_sortProperty', this.idProperty);
    },
    observers: ['retrieveVisibleData(dataSource, pageSize, page, _datatable, _sortDirection, _sortProperty)', '_setNumberOfItems(dataSource.length)', '_createCache(dataSource.queryForIds)'],
    _createCache: function _createCache() {
      this._cacheUsed = true;
      this._cache = new WeakCache(100);
    },
    _triggerSave: function _triggerSave(ev) {
      if (this.dataSource) {
        if (!this._disableSave && ev.detail.path) {
          var path = ev.detail.path.split(".");
          if (path.length == 2) {
            return;
          }
          var item = path.shift();
          var rowKey = path.shift();
          var property = path.shift();
          this.debounce('save' + rowKey + property, function () {
            var value = ev.detail.value;
            var data = this._datatable.get(['data', rowKey]);
            if (!data) {
              return console.warn('Some elements (like the \<google-map\>) will trigger erroneous' + ' change notifications. Sadly this causes the paper-datatable to error out' + ' when browsing too quickly.');
            }
            var id = data[this.idProperty];
            // setting properties in the `set` functions causes trouble, so it's more sensible for that
            // to simply have no effect rather than make the entire element break, especially
            // as the 'no effect' version can be useful (see paper-datatable-card.html demo)
            var dataClone = JSON.parse(JSON.stringify(data));

            if (path.length > 0) {
              value = dataClone[property];
              var setPromise = this.dataSource.set(dataClone, property, value);
            } else {
              var setPromise = this.dataSource.set(dataClone, property, value);
            }

            this._datatable.set('progress', true);
            setPromise.then(function (successOrId) {
              if (typeof successOrId === 'boolean') {
                if (successOrId !== true) {
                  throw new Error('failure');
                }
              } else {
                console.warn('re-implement');
                //var index = this._datatable._getIndexById('__new__');
                //this._datatable.set(['data', index, this._datatable.idProperty], successOrId);
              }
              this._datatable.set('progress', false);
            }.bind(this), function (err) {
              throw new Error('failure');
              this._datatable.set('progress', false);
            }.bind(this)).catch(function () {
              console.warn('saving failed');
              this._datatable.set('progress', false);
            }.bind(this));
          }, 1000);
        }
      }
    },
    _handleSort: function _handleSort(ev) {
      if (this.dataSource) {
        ev.preventDefault();
        this.firstPage();
        console.log(ev.detail);
        this._sortProperty = ev.detail.sort.property;
        this._sortDirection = ev.detail.sort.direction;

        //this.retrieveVisibleData();
      }
    },
    /**
     * Call this function to trigger reloading of the current page
     */
    retrieveVisibleData: function retrieveVisibleData() {

      this.debounce("visibleData", function () {
        this._disableSave = true;

        var processItems = function (items) {

          this._datatable.deselectAll(false);
          this._datatable.splice('data', 0, this._datatable.data.length);

          var args = ['data'].concat(items);
          this._datatable.push.apply(this._datatable, args);
          this._setSelectedKeysOnDatatable();
          this._datatable.set('progress', false);

          this._disableSave = false;

          // no rush, so let's do it next tick
          this.async(function () {
            items.forEach(function (item) {
              this._cache.set(item[this.idProperty], item);
            }.bind(this));
          });
        }.bind(this);

        var queryArgs = [{
          property: this._sortProperty,
          direction: this._sortDirection
        }, this.page, this.pageSize];

        this._datatable.set('progress', true);

        if ('queryForIds' in this.dataSource) {
          this.dataSource.queryForIds.apply(this.dataSource, queryArgs).then(function (ids) {
            var _this2 = this;

            var items = [];
            var i = 0;
            var done = function () {
              var _this = this;

              i++;
              if (i == 2) {
                var sortedItems = ids.map(function (id) {
                  return items.find(function (item) {
                    return item[_this.idProperty] == id;
                  });
                });
                processItems(sortedItems);
              }
            }.bind(this);

            var idsInCache = ids.filter(function (id) {
              return _this2._cache.has(id);
            });
            if (idsInCache.length) {
              var cacheItems = [];
              idsInCache.forEach(function (id) {
                cacheItems.push(this._cache.get(id));
              }.bind(this));
              items = items.concat(cacheItems);
              done();
            } else {
              done();
            }

            var idsNotInCache = ids.filter(function (id) {
              return !_this2._cache.has(id);
            });
            if (idsNotInCache.length) {
              this.dataSource.getByIds(idsNotInCache).then(function (newItems) {
                items = items.concat(newItems);
                done();
              });
            } else {
              done();
            }
          }.bind(this));
        } else {
          this.dataSource.get.apply(this.dataSource, queryArgs).then(function (items) {
            processItems(items);
          });
        }
      }, 0);
    },
    _getRangeStart: function _getRangeStart() {
      return (this.page - 1) * this.pageSize;
    },
    _getRangeEnd: function _getRangeEnd() {
      return Math.min(this.page * this.pageSize, this.numberOfItems);
    },
    /**
     * Navigate to the next page
     */
    nextPage: function nextPage() {
      this.set("page", this.page + 1);
    },
    /**
     * Navigate to the previous page
     */
    prevPage: function prevPage() {
      this.set("page", this.page - 1);
    },
    /**
     * Navigate to the first page
     */
    firstPage: function firstPage() {
      this.set("page", 1);
    },
    /**
     * Navigate to the last page
     */
    lastPage: function lastPage() {
      this.set("page", Math.ceil(this.numberOfItems / this.pageSize));
    },
    _prevPageDisabled: function _prevPageDisabled() {
      return this.page == 1;
    },
    _nextPageDisabled: function _nextPageDisabled() {
      return this.page * this.pageSize >= this.numberOfItems;
    },
    _setSelectedToolbarVisible: function _setSelectedToolbarVisible() {
      this._selectedToolbarVisible = this.selectedIds.length > 0;
      this._singleSelectToolbarVisible = this.selectedIds.length == 1;
      this._multiSelectToolbarVisible = this.selectedIds.length > 1;
      this._numberselectedIds = this.selectedIds.length;
      this._datatable._partialSelection = this.selectedIds.length > 0;
    },
    _setSelectedIds: function _setSelectedIds(ev) {
      if (ev.detail.selected) {
        if (!this._datatable.multiSelection) {
          this.splice('selectedIds', 0, 1);
        }
        ev.detail.selected.forEach(function (key) {
          var id = this._datatable._getByKey(key)[this.idProperty];
          if (this.selectedIds.indexOf(id) == -1) {
            this.push('selectedIds', id);
          }
        }.bind(this));
      }
      if (ev.detail.deselected) {
        ev.detail.deselected.forEach(function (key) {
          var id = this._datatable._getByKey(key)[this.idProperty];
          if (this.selectedIds.indexOf(id) > -1) {
            this.splice('selectedIds', this.selectedIds.indexOf(id), 1);
          }
        }.bind(this));
      }
    },
    _setSelectedKeysOnDatatable: function _setSelectedKeysOnDatatable() {
      this._datatable.data.forEach(function (item) {
        var id = item[this.idProperty];
        if (this.selectedIds.indexOf(id) > -1) {
          this._datatable.select(item, false);
        }
      }.bind(this));
    },
    _setNumberOfItems: function _setNumberOfItems() {
      this.set('numberOfItems', this.dataSource.length);
    },
    _toggleAll: function _toggleAll(ev) {
      if (this.dataSource) {
        if ('queryForIds' in this.dataSource) {
          if (this.selectedIds.length === this.dataSource.length) {
            this.deselectAll();
          } else {
            this.deselectAll();
            this._datatable.set('progress', true);
            this.dataSource.queryForIds(undefined, 1, this.dataSource.length).then(function (ids) {
              this._datatable.set('progress', undefined);
              this.push.apply(this, ['selectedIds'].concat(ids));
              this._setSelectedKeysOnDatatable();
              this._setSelectedToolbarVisible();
            }.bind(this));
          }
          ev.preventDefault();
        }
      }
    },
    /**
     * Deselect all items
     */
    deselectAll: function deselectAll() {
      this._datatable.deselectAll(false);
      this.splice('selectedIds', 0, this.selectedIds.length);
      this._setSelectedToolbarVisible();
    },
    /**
     * Select the item with the specified id
     * @param id
     */
    select: function select(id) {
      this.push('selectedIds', id);
      this._setSelectedKeysOnDatatable();
      this._setSelectedToolbarVisible();
    }

  });
})();</script>

</dom-module>