vaadin-grid-data-provider-mixin.html

<!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<script>
  window.Vaadin = window.Vaadin || {};
  window.Vaadin.Grid = window.Vaadin.Grid || {};

  Vaadin.Grid.ItemCache = class ItemCache {

    constructor(grid, parentCache, parentItem) {
      this.grid = grid;
      this.parentCache = parentCache;
      this.parentItem = parentItem;
      this.itemCaches = {};
      this.items = {};
      this.effectiveSize = 0;
      this.size = 0;
      this.pendingRequests = {};
    }

    isLoading() {
      return Object.keys(this.pendingRequests).length || Object.keys(this.itemCaches).filter(index => {
        return this.itemCaches[index].isLoading();
      })[0];
    }

    getItemForIndex(index) {
      const {cache, scaledIndex} = this.getCacheAndIndex(index);
      return cache.items[scaledIndex];
    }

    updateSize() {
      this.effectiveSize = (!this.parentItem || this.grid._isExpanded(this.parentItem)) ?
        this.size + Object.keys(this.itemCaches).reduce((prev, curr) => {
          const subCache = this.itemCaches[curr];
          subCache.updateSize();
          return prev + subCache.effectiveSize;
        }, 0) :
        0;
    }

    ensureSubCacheForScaledIndex(scaledIndex) {
      if (!this.itemCaches[scaledIndex]) {
        const subCache = new Vaadin.Grid.ItemCache(this.grid, this, this.items[scaledIndex]);
        this.itemCaches[scaledIndex] = subCache;
        this.grid._loadPage(0, subCache);
      }
    }

    getCacheAndIndex(index) {
      let thisLevelIndex = index;
      const keys = Object.keys(this.itemCaches);
      for (var i = 0; i < keys.length; i++) {
        const expandedIndex = Number(keys[i]);
        const subCache = this.itemCaches[expandedIndex];
        if (thisLevelIndex <= expandedIndex) {
          return {cache: this, scaledIndex: thisLevelIndex};
        } else if (thisLevelIndex <= expandedIndex + subCache.effectiveSize) {
          return subCache.getCacheAndIndex(thisLevelIndex - expandedIndex - 1);
        }
        thisLevelIndex -= subCache.effectiveSize;
      }
      return {cache: this, scaledIndex: thisLevelIndex};
    }

  };


  /**
   * @polymerMixin
   */
  Vaadin.Grid.DataProviderMixin = superClass => class DataProviderMixin extends superClass {

    static get properties() {
      return {

        /**
         * Number of items fetched at a time from the dataprovider.
         */
        pageSize: {
          type: Number,
          value: 50,
          observer: '_pageSizeChanged'
        },

        /**
         * Function that provides items lazily. Receives arguments `params`, `callback`
         *
         * `params.page` Requested page index
         *
         * `params.pageSize` Current page size
         *
         * `params.filters` Currently applied filters
         *
         * `params.sortOrders` Currently applied sorting orders
         *
         */
        dataProvider: {
          type: Object,
          notify: true,
          observer: '_dataProviderChanged'
        },

        /**
         * `true` while data is being requested from the data provider.
         */
        _loading: {
          type: Boolean,
          observer: '_loadingChanged'
        },

        _cache: {
          type: Object,
          value: function() {
            const cache = new Vaadin.Grid.ItemCache(this);
            return cache;
          }
        },

        /**
         * Path to an item sub-property that identifies the item.
         */
        itemIdPath: {
          type: String,
          value: null
        },

        /**
         * An array that contains the expanded items.
         */
        expandedItems: {
          type: Object,
          notify: true,
          value: () => []
        }

      };
    }

    static get observers() {
      return [
        '_sizeChanged(size)',
        '_expandedItemsChanged(expandedItems.*)'
      ];
    }

    _sizeChanged(size) {
      const delta = size - this._cache.size;
      this._cache.size += delta;
      this._cache.effectiveSize += delta;
      this._effectiveSize = this._cache.effectiveSize;
    }

    _loadingChanged(loading) {
      this._toggleAttribute('loading', loading, this);
    }

    _updateRowItem(item, el) {
      el.children.forEach(cell => {
        cell._instance && (cell._instance.item = item);
      });
    }

    _getItem(index, el) {
      if (this._effectiveSize && index >= this._effectiveSize) {
        return;
      }

      el.index = index;
      const {cache, scaledIndex} = this._cache.getCacheAndIndex(index);
      const item = cache.items[scaledIndex];
      if (item) {
        this._updateItem(el, item);
        if (this._isExpanded(item)) {
          cache.ensureSubCacheForScaledIndex(scaledIndex);
        }
      } else {
        this._loadPage(this._getPageForIndex(scaledIndex), cache);
      }

    }

    _pagesForPhysicalItems() {
      // TODO: potentially heavy operation to run first visible index,
      // reconsider if performance issues occur on data binding / scrolling.
      // TODO: _vidxOffset shouldn't be read from here.
      const firstVisiblePage = this._getPageForIndex(this._firstVisibleIndex + this._vidxOffset);

      return [firstVisiblePage].concat(
        this._physicalItems
          .filter(row => row.index)
          .items(row => this._getPageForIndex(row.index))
        ).reduce((prev, curr) => {
          if (prev.indexOf(curr) === -1) {
            prev.push(curr);
          }

          return prev;
        }, []);
    }

    _expandedInstanceChangedCallback(inst, value) {
      if (inst.item === undefined) {
        return;
      }
      if (value) {
        this.expandItem(inst.item);
      } else {
        this.collapseItem(inst.item);
      }
    }

    /**
     * Returns a value that identifies the item. Uses `itemIdPath` if available.
     * Can be customized by overriding.
     */
    getItemId(item) {
      return this.itemIdPath ? this.get(this.itemIdPath, item) : item;
    }

    _isExpanded(item) {
      return this.expandedItems && this._getItemIndexInArray(item, this.expandedItems) > -1;
    }

    _expandedItemsChanged(e) {
      this._cache.updateSize();
      this._effectiveSize = this._cache.effectiveSize;
      this._assignModels();
    }

    /**
     * Expands the given item hierarchy.
     */
    expandItem(item) {
      if (!this._isExpanded(item)) {
        this.push('expandedItems', item);
      }
    }

    /**
     * Collapses the given item hierarchy.
     */
    collapseItem(item) {
      if (this._isExpanded(item)) {
        this.splice('expandedItems', this._getItemIndexInArray(item, this.expandedItems), 1);
      }
    }

    _getIndexLevel(index) {
      let {cache} = this._cache.getCacheAndIndex(index);
      let level = 0;
      while (cache.parentCache) {
        cache = cache.parentCache;
        level++;
      }
      return level;
    }

    _canPopulate() {
      return this._hasData;
    }

    _loadPage(page, cache) {
      // make sure same page isn't requested multiple times.
      if (!cache.pendingRequests[page] && this.dataProvider) {
        cache.pendingRequests[page] = true;
        const params = {
          page,
          pageSize: this.pageSize,
          sortOrders: this._mapSorters(),
          filters: this._mapFilters(),
          parentItem: cache.parentItem
        };

        this.dataProvider(params, (items, size) => {
          if (size !== undefined) {
            cache.size = size;
          } else {
            if (params.parentItem) {
              cache.size = items.length;
            }
          }

          items.forEach((item, itemsIndex) => {
            cache.items[page * this.pageSize + itemsIndex] = item;
          });
          this._cache.updateSize();
          this._effectiveSize = this._cache.effectiveSize;

          Array.from(this.$.items.children).forEach(row => {
            const cachedItem = this._cache.getItemForIndex(row.index);
            if (items.indexOf(cachedItem) > -1) {
              this._updateItem(row, cachedItem);
            }
          });

          this._hasData = true;
          this._increasePoolIfNeeded(0);

          delete cache.pendingRequests[page];

          this._loading = this._cache.isLoading();
        });
      }
    }

    _getPageForIndex(index) {
      return Math.floor(index / this.pageSize);
    }

    /**
     * Clears the cached pages and reloads data from dataprovider when needed.
     */
    clearCache() {
      this._cache = new Vaadin.Grid.ItemCache(this);
      this._cache.size = this.size;
      this._cache.updateSize();
      this._hasData = false;
      this._loading = true;
      this._assignModels();
    }

    _flushItemsDebouncer() {
      if (this._debouncerLoad) {
        this._debouncerLoad.flush();
      }
    }

    _pageSizeChanged(pageSize, oldPageSize) {
      if (oldPageSize !== undefined && pageSize !== oldPageSize) {
        this.clearCache();
      }
    }

    _checkSize() {
      if (this.size === undefined) {
        console.warn('The <vaadin-grid> needs a value for "size" property in order to display rows.');
      }
    }

    _dataProviderChanged(dataProvider, oldDataProvider) {
      if (oldDataProvider !== undefined) {
        this.clearCache();
      }

      if (dataProvider && this.items && this.items.length) {
        // Fixes possibly invalid cached lastVisibleIndex value in <iron-list>
        this._scrollToIndex(this._firstVisibleIndex);
      }

      if (!this._hasData) {
        // load data before adding rows to make sure they have content when
        // rendered for the first time.
        this._loading = true;
        this._loadPage(0, this._cache, () => {
          const hadData = this._hasData;
          this._hasData = true;
          if (!hadData) {
            this.notifyResize();
          }
        });
      }

      this._debouncerCheckSize = Polymer.Debouncer.debounce(
        this._debouncerCheckSize,
        Polymer.Async.timeOut.after(2000),
        this._checkSize.bind(this));

      this._scrollHandler();
    }

    _itemsEqual(item1, item2) {
      return this.getItemId(item1) === this.getItemId(item2);
    }

    _getItemIndexInArray(item, array) {
      let result = -1;
      array.forEach((i, idx) => {
        if (this._itemsEqual(i, item)) {
          result = idx;
        }
      });
      return result;
    }

  };
</script>