px-data-grid-navigation.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer-element.html"/>
<link rel="import" href="px-data-grid-theme.html">
<link rel="import" href="../px-dropdown/px-dropdown.html">
<link rel="import" href="../px-icon-set/px-icon-set-navigation.html">
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html"/>
<link rel="import" href="css/px-data-grid-navigation-styles.html">

<dom-module id="px-data-grid-navigation">
  <template>
    <style include="px-data-grid-navigation-styles"></style>

    <!-- page size select -->
    <dom-if if="[[!hidePageSizeSelect]]">
      <template>
        <div class="page-size-select">
          [[localize('Rows per page')]]
          <px-dropdown
            allow-outside-scroll
            display-value="[[_numToStr(pageSize)]]"
            items="[[_numArrayToStrArray(selectablePageSizes)]]"
            on-selected-changed="_pageSizeChange"
            button-style="bare--primary"
            disable-truncate
            disable-clear>
          </px-dropdown>
        </div>
      </template>
    </dom-if>

    <dom-if if="[[!hidePageList]]">
      <template>
        <div class="right">
          <!-- row counts -->
          <div class="row-counts">
            <span class="current-rows">
              [[_getItemsRangeStr(currentPage, pageSize, totalItemCount)]]
            </span> [[_getOfStr(totalItemCount, localize)]]
          </div>

          <!-- page selection list -->
          <div class="page-selection">
            <!-- back arrow -->
            <button
                class="page-button arrow back"
                on-click="_onBackClick"
                disabled$="[[!_isBackArrowEnabled(currentPage, numberOfPages)]]">
              <px-icon icon="px-nav:back"></px-icon>
            </button>
            <!-- page number list -->
            <div class="page-list">
              <template is="dom-repeat" items="[[_getPagesList(currentPage, numberOfPages)]]">
                <template is="dom-if" if="[[_isCurrentPage(item, currentPage)]]" restamp>
                  <button class="page-button page-number selected">
                    [[item]]
                  </button>
                </template>
                <template is="dom-if" if="[[!_isCurrentPage(item, currentPage)]]" restamp>
                  <button
                      class="page-button page-number"
                      on-click="_onPageClick">
                    [[item]]
                  </button>
                </template>
              </template>
            </div>
            <!-- next arrow -->
            <button
                class="page-button arrow next"
                on-click="_onNextClick"
                disabled$="[[!_isNextArrowEnabled(currentPage, numberOfPages)]]">
              <px-icon icon="px-nav:next"></px-icon>
            </button>
          </div>
        </div>
      </template>
    </dom-if>

  </template>
  <script>
    {
      /**
       * Navigation component that is the UI component for paging.
       *
       * #### Example:
       * ```html
       * <px-data-grid-navigation
       *   on-navigation-change="_onNavigationChange"
       *   selectable-page-sizes="[10, 20, 30]"
       *   page-size="10"
       *   total-item-count="300"
       *   current-page="1"
       *   number-of-pages="50">
       * </px-data-grid-navigation>
       * ```
       *
       * @memberof Predix
       * @extends Polymer.Element
       */
      class DataGridNavigationElement extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element) {
        static get is() {
          return 'px-data-grid-navigation';
        }

        static get properties() {
          return {

            /**
             * Values selectable by user that dicatate how many items to show per page.
             */
            selectablePageSizes: {
              type: Array,
              value: [
                10,
                20,
                30
              ]
            },

            /**
             * Current number of items/rows per page.
             */
            pageSize: {
              type: Number,
              value: 10
            },

            /**
             * Currently displayed page number.
             */
            currentPage: {
              type: Number,
              value: 0
            },

            /**
             * Total number of pages.
             */
            numberOfPages: {
              type: Number,
              value: 0
            },

            /**
             * Total number of items in table.
             */
            totalItemCount: {
              type: Number,
              value: 0
            },

            /**
             * If true, the page numbers list is not shown.
             */
            hidePageList: {
              type: Boolean,
              value: false
            },

            /**
             * Max number of page number items to show in the page list.
             */
            _pageListMaxCount: {
              type: Number,
              value: 9
            },

            /**
             * If true, the page size select drop-down is not shown.
             */
            hidePageSizeSelect: {
              type: Boolean,
              value: false
            }

          };
        }

        /**
         * Fired when user selects a new page size.
         */
        _pageSizeChange(event) {
          let pageSize = this.pageSize;
          // px dropdown files event when initial values are set, but the value
          // attribute in it's event is null
          if (event.detail.value !== undefined
              && event.detail.value !== null) {
            pageSize = this.selectablePageSizes[event.detail.value];
          }
          this._fireChangeEvent({
            pageSize: pageSize,
            currentPage: this.currentPage
          });
        }

        /**
         * Fired when user clicks on a page number.
         */
        _onPageClick(event) {
          const pageNumber = event.model.item;
          if (!isNaN(pageNumber)) {
            this._fireChangeEvent({
              pageSize: this.pageSize,
              currentPage: pageNumber
            });
          }
        }

        _onBackClick(event) {
          if (this.currentPage == 1) {
            return;
          }
          this._fireChangeEvent({
            pageSize: this.pageSize,
            currentPage: this.currentPage - 1
          });
        }

        _onNextClick(event) {
          if (this.currentPage == this.numberOfPages) {
            return;
          }
          this._fireChangeEvent({
            pageSize: this.pageSize,
            currentPage: this.currentPage + 1
          });
        }

        /**
         * Fires the general change event which includes all data
         * that can be set by the user.
         */
        _fireChangeEvent(detail) {
          this.dispatchEvent(new CustomEvent('navigation-change', {
            detail: detail,
            bubbles: true
          }));
        }

        /**
         * Converts array of Numbers to array of Strings.
         */
        _numArrayToStrArray(numArray) {
          const strArray = [];
          numArray.forEach(val => strArray.push(val.toString()));
          return strArray;
        }

        /**
         * Converts a Number to a String.
         */
        _numToStr(num) {
          return num.toString();
        }

        /**
         * Returns string showing the min and max item numbers based on
         * the current page.
         */
        _getItemsRangeStr(currentPage, pageSize, totalItemCount) {
          // min can be no less than 1
          let min = (currentPage - 1) * pageSize + 1;
          min = (min < 1) ? 1 : min;
          // max can be no more than totalItemCount
          let max = currentPage * pageSize;
          max = (totalItemCount > 0 && max > totalItemCount) ? totalItemCount : max;
          return min + ' - ' + max;
        }

        _getOfStr(totalItemCount) {
          return this.localize('of {total}', 'total', totalItemCount.toString());
        }

        /**
         * Gets an array of page numbers based on the numberOfPages property.
         */
        _getPagesList() {
          const pageList = [];

          if (this.numberOfPages <= this._pageListMaxCount) {
            // show all page numbers
            for (let i = 1; i < this.numberOfPages + 1; i++) {
              pageList.push(i);
            }
          } else {
            // figure out what the min and max displayed page numbers are (besides page 1 and last page)
            if (this.currentPage < 5) {
              // only set ellipsis on left
              const firstPage = 1;
              for (let i = 0; i < this._pageListMaxCount; i++) {
                pageList.push(firstPage + i);
              }
              pageList[pageList.length - 2] = '…';
            } else if (this.numberOfPages - this.currentPage < 5) {
              // only set ellipsis on right
              const firstPage = this.numberOfPages - this._pageListMaxCount + 1;
              for (let i = 0; i < this._pageListMaxCount; i++) {
                pageList.push(firstPage + i);
              }
              pageList[1] = '…';
            } else {
              // set ellipsis on both left and right
              const firstPage = this.currentPage - 4;
              for (let i = 0; i < this._pageListMaxCount; i++) {
                pageList.push(firstPage + i);
              }
              pageList[1] = '…';
              pageList[pageList.length - 2] = '…';
            }

            // always show max and min pages
            pageList[0] = 1;
            pageList[pageList.length - 1] = this.numberOfPages;
          }

          return pageList;
        }

        /**
         * Returns true if param pageNumber is equal to this.currentPage.
         */
        _isCurrentPage(pageNumber) {
          return this.currentPage === pageNumber;
        }

        _isBackArrowEnabled(currentPage) {
          return currentPage > 1;
        }

        _isNextArrowEnabled(currentPage) {
          return currentPage < this.numberOfPages;
        }

      }

      customElements.define(DataGridNavigationElement.is, DataGridNavigationElement);

      /**
       * @namespace Predix
       */
      window.Predix = window.Predix || {};
      Predix.DataGridNavigationElement = DataGridNavigationElement;
    }
  </script>
</dom-module>