px-data-grid-filters-preview.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-chip/px-chip.html">
<link rel="import" href="../px-icon-set/px-icon.html">
<link rel="import" href="../px-tooltip/px-tooltip.html">
<link rel="import" href="css/px-data-grid-filters-preview-styles.html">


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

    <template is="dom-if" if="[[!_filtersGrouped(flattenFilterEntities)]]">
      <template is="dom-repeat" items="[[filters]]" as="section">
        <template is="dom-repeat" items="[[section.entities]]" as="entity">
          <template is="dom-if" if="[[entity.active]]">
            <px-tooltip
              for="chip-[[index]]"
              orientation="top"
              smartOrientation
              tooltip-message="[[_getTooltipMessage(entity, section, filters.*, localize)]]">
            </px-tooltip>
            <px-chip
              id="chip-[[index]]"
              class="filter-entity-chip"
              content="[[_getChipTitle(entity, entity.*)]]"
              icon="px-utl:close"
              entity="[[entity]]"
              section="[[section]]"
              not-selectable
              show-icon>
            </px-chip>
          </template>
        </template>
      </template>
    </template>

    <template is="dom-if" if="[[_filtersGrouped(flattenFilterEntities)]]">
      <px-chip
        id="filter-group-chip"
        not-selectable
        content="[[flattenFilterEntities.length]] [[localize('filters applied')]]">
      </px-chip>
    </template>

    <template is="dom-if" if="[[_hasMultipleFilters(flattenFilterEntities)]]">
      <button class="btn btn--small btn--bare--primary clear-all-filters" on-click="_dispatchClearFilters">[[localize('Clear all filters')]]</button>
    </template>
  </template>

  <script>
    {
      /**
       * @memberof Predix
       * @extends Polymer.Element
       */
      class DataGridFiltersPreviewElement extends Polymer.Element {
        static get is() {
          return 'px-data-grid-filters-preview';
        }

        static get properties() {
          return {
            filters: {
              type: Array
            },

            flattenFilterEntities: {
              type: Array,
              computed: '_getFlattenFilterEntities(filters, filters.*)'
            },

            filtersLimit: {
              type: Number,
              value: 5
            },

            columns: {
              type: Array
            },

            localize: Function
          };
        }

        ready() {
          super.ready();

          this.addEventListener('px-chip-tapped', (ev) => {
            const chip = ev.composedPath()[0];
            if (chip.entity) {
              this.dispatchEvent(new CustomEvent('remove-filter',
                {
                  detail: {
                    section: chip.section,
                    entity: chip.entity
                  },
                  bubbles: true,
                  composed: true
                }
              ));
            } else {
              this.dispatchEvent(new CustomEvent('trigger-filters-modal', {bubbles: true, composed: true}));
            }
          });
        }

        _dispatchClearFilters() {
          this.dispatchEvent(new CustomEvent('clear-filters',
            {
              bubbles: true,
              composed: true
            }
          ));
        }

        _getColumnById(columnId) {
          if (columnId === '-any-') {
            return {
              id: '-any-',
              type: 'string',
              header: this.localize('Any column'),
              path: 'any'
            };
          }

          return this.columns.filter((column) => column.id === columnId)[0];
        }

        _getFlattenFilterEntities(filters) {
          return filters
            .map((section) => section.entities)
            .reduce((a, b) => a.concat(b), [])
            .filter((entity) => entity.active);
        }

        _capitalizeString(str) {
          return str.charAt(0).toUpperCase() + str.slice(1);
        }

        _underscoreToHumanReadable(str) {
          return this._capitalizeString(str.split('_').join(' '));
        }

        _getTooltipMessage(entity, section) {
          const column = this._getColumnById(entity.columnId);

          const name = column.header ? column.header : (column.name ? column.name : column.path);

          switch (column.type) {
            case 'number':
              if (entity.leftBound !== undefined && entity.rightBound !== undefined) {
                return `${section.action} ${section.operationType} / ${name} / ${this.localize('Between')}`;
              } else if (entity.condition !== undefined && entity.value !== undefined) {
                return `${section.action} ${section.operationType} / ${name} / ` +
                  `${this.localize(this._underscoreToHumanReadable(entity.condition))}`;
              }
              break;
            case 'date': {
              return `Date Range \/
                ${this._formatDateForTooltip(entity.dateFrom, column)} -
                ${this._formatDateForTooltip(entity.dateTo, column)}
              `;
            }
            default:
              return `${section.action} ${section.operationType} / ${name} / ${entity.pattern}`;
          }
        }

        _getChipTitle(entity) {
          const column = this._getColumnById(entity.columnId);

          switch (column.type) {
            case 'number':
              if (entity.leftBound !== undefined && entity.rightBound !== undefined) {
                return `${entity.leftBound}, ${entity.rightBound}`;
              } else if (entity.value !== undefined) {
                return entity.value;
              }
              break;
            case 'date': {
              return `
                ${this._formatDateForChip(entity.dateFrom, column)} -
                ${this._formatDateForChip(entity.dateTo, column)}
              `;
            }
            default:
              if (entity.query.length <= 15) {
                return entity.query;
              } else {
                return entity.query.slice(0, 11) + '…' + entity.query.slice(-4);
              }
          }
        }

        _filtersGrouped(flattenFilterEntities) {
          return flattenFilterEntities.length > this.filtersLimit;
        }

        _hasMultipleFilters(flattenFilterEntities) {
          return flattenFilterEntities.length > 1;
        }

        _formatDateForTooltip(value, column) {
          return this._getFormattedDate(value, column,
            this._getSourceTimezone(column), this._getSourceFormat(column),
            this._getDisplayTimezone(column), this._getDisplayFormat(column));
        }

        _formatDateForChip(value, column) {
          return this._getFormattedDate(value, column,
            this._getSourceTimezone(column), this._getSourceFormat(column),
            this._getDisplayTimezone(column), 'YYYY/MM/DD'); // GE requirement to force this format
        }

        _getFormattedDate(value, column, sourceTimezone, sourceFormat, displayTimezone, displayFormat) {
          var result;
          if (value) {
            let momentValue;
            // read timestamp data
            if (this.dateFormat === 'ISO' || sourceFormat === 'ISO') {
              momentValue = window.Px.moment(value);
            } else {
              momentValue = window.Px.moment.tz(value, sourceFormat, sourceTimezone);
            }
            // format for display
            if (momentValue) {
              if (this.displayFormat === 'ISO' || displayFormat === 'ISO') {
                result = momentValue.toISOString();
              } else {
                result = momentValue.tz(displayTimezone).format(displayFormat);
              }
            } else {
              console.warn('Unknown date value: "' + value + '"');
              result = '';
            }
          } else {
            result = '';
          }

          return result;
        }

        _getSourceTimezone(column) {
          if (column.dateFormat && column.dateFormat.timezone) {
            return column.dateFormat.timezone;
          } else {
            return 'UTC';
          }
        }

        _getDisplayTimezone(column) {
          if (column.rendererConfig && column.rendererConfig.timezone) {
            return column.rendererConfig.timezone;
          } else {
            return 'UTC';
          }
        }

        _getSourceFormat(column) {
          if (column.dateFormat && column.dateFormat.format) {
            return column.dateFormat.format;
          } else {
            return 'ISO';
          }
        }

        _getDateFormat(column) {
          if (column.rendererConfig && column.rendererConfig.displayFormat) {
            return column.rendererConfig.displayFormat;
          } else {
            return 'YYYY/MM/DD';
          }
        }

        _getDisplayFormat(column) {
          if (column.rendererConfig && column.rendererConfig.displayFormat) {
            return column.rendererConfig.displayFormat;
          } else {
            return 'YYYY/MM/DD HH:mm:ss';
          }
        }
      }

      customElements.define(DataGridFiltersPreviewElement.is, DataGridFiltersPreviewElement);

      /**
       * @namespace Predix
       */
      window.Predix = window.Predix || {};
      Predix.DataGridFiltersPreviewElement = DataGridFiltersPreviewElement;
    }
  </script>

</dom-module>