px-data-grid-column.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="../vaadin-grid/vaadin-grid-column.html">
<link rel="import" href="../px-icon-set/px-icon-set-utility.html">
<link rel="import" href="px-data-grid-header-cell.html">

<dom-module id="px-data-grid-column">
  <script>
    {
      /**
       * A `<px-data-grid-column>` is used to configure how a column in `<px-data-grid>`
       * should look like by using HTML templates.
       * A column can have a template for each of the three table sections: header, body and footer.
       *
       * The `class` attribute is used to differentiate header and footer templates from the body template.
       *
       * #### Example:
       * ```html
       * <px-data-grid-column>
       *   <template class="header">I'm in the header</template>
       *   <template>I'm in the body</template>
       *   <template class="footer">I'm in the footer</template>
       * </px-data-grid-column>
       * ```
       *
       * @memberof Predix
       * @extends Vaadin.GridColumnElement
       */
      class DataGridColumnElement extends Vaadin.GridColumnElement {
        static get is() {
          return 'px-data-grid-column';
        }

        static get properties() {
          return {

            /**
             * Name of column is used on table action menu to offer hide/show functionality. As headers are fully optional
             * and might not even contain the name of column, this separate value is required if you use table action menu.
             */
            name: {
              type: String
            },

            /**
             * Path of column is used for the 'Group by column' functionality.
             */
            path: {
              type: String
            },

            /**
             * Just a trick to map generated column instance to matching data object.
             * Can be also used to update object when properties change.
             */
            mappedObject: {
              type: Object,
              observer: '_mappedObjectChanged'
            },

            _headerCellContentWrapper: {
              type: Element
            },

            /**
             * Type of the column. Can be string, number or date.
             */
            type: {
              type: String,
              value: 'string',
              observer: '_typeChanged'
            },

            _permittedTypes: {
              type: Array,
              value: ['string', 'number', 'date']
            },

            /**
             * Just to help to identify columns with data
             */
            isDataColumn: {
              type: Boolean,
              value: false
            },

            /**
             * If false, 'Group by Column' will be disallowed (e.g. in cases of remote data provider or expandable rows)
             */
            groupByColumnAllowed: {
              type: Boolean,
              observer: '_updateGroupByColumnAllowed'
            },

            localize: Function
          };
        }

        static get observers() {
          return [
            '_updateI18n(localize, _headerCellContentWrapper)',
            '_columnHiddenChanged(hidden)',
            '_columnFrozenChanged(frozen)'
          ];
        }

        _stampHeaderTemplate(headerTemplate, headerCell) {
          if (!headerTemplate || !headerCell || headerCell._instance) {
            return;
          }

          const inst = headerTemplate.templatizer.createInstance();

          const headerCellContentWrapper = document.createElement('px-data-grid-header-cell');
          headerCellContentWrapper.appendChild(inst.root);
          headerCellContentWrapper.groupByColumnAllowed = this.groupByColumnAllowed;
          headerCellContentWrapper._column = this;

          headerCell._content.appendChild(headerCellContentWrapper);
          headerCell._instance = inst;
          headerCell.parentElement.hidden = false;

          this._headerCellContentWrapper = headerCellContentWrapper;
        }

        /*
         * If `groupByColumnAllowed` is updated after the `_headerCellContentWrapper`
         * element is created, update the wrapper element.
         */
        _updateGroupByColumnAllowed(newVal) {
          if (typeof newVal === 'boolean'
                && this._headerCellContentWrapper instanceof HTMLElement
                && this._headerCellContentWrapper.groupByColumnAllowed !== newVal) {
            this._headerCellContentWrapper.groupByColumnAllowed = newVal;
          }
        }

        _updateI18n(localize, _headerCellContentWrapper) {
          if (!_headerCellContentWrapper) {
            return;
          }

          _headerCellContentWrapper.localize = localize;
        }

        _typeChanged(type) {
          if (type && this._permittedTypes.indexOf(type.toLowerCase()) == -1) {
            console.warn(`${type} is unsupported type for px-data-grid-column.`);
          }
        }

        _mappedObjectChanged(obj) {
          if (obj) {
            Object.defineProperty(obj, '_element', {
              value: this,
              configurable: true,
              enumerable: false
            });
          }
        }

        _checkIfValueChanged(value, propertyName) {
          if (this.mappedObject) {
            if (this.mappedObject[propertyName] != value) {
              this.mappedObject[propertyName] = value;
              this._fireStatusChange(this.mappedObject, propertyName, value, true);
            } else {
              this._fireStatusChange(this.mappedObject, propertyName, value, false);
            }
          }
        }

        _columnHiddenChanged(hidden) {
          this._checkIfValueChanged(hidden, 'hidden');
        }

        _columnFrozenChanged(frozen) {
          this._checkIfValueChanged(frozen, 'frozen');
        }

        _fireStatusChange(mappedObject, propertyName, value, updatedModel) {
          this._renderDebouncer = Polymer.Debouncer.debounce(
            this._renderDebouncer,
            Polymer.Async.timeOut.after(this.timeout), () => {
              this.dispatchEvent(new CustomEvent('column-change', {
                detail: {
                  column: mappedObject,
                  type: propertyName,
                  value: value,
                  updatedModel: updatedModel
                },
                bubbles: true
              }));
            });
        }
      }

      customElements.define(DataGridColumnElement.is, DataGridColumnElement);

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