px-data-grid-number-renderer.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-tooltip/px-tooltip.html">
<link rel="import" href="../px-number-formatter/px-number-formatter-no-display.html">
<link rel="import" href="px-data-grid-renderer-mixin.html">
<link rel="import" href="px-data-grid-theme.html">
<link rel="import" href="css/px-data-grid-number-renderer-styles.html">

<!--

### Styling
The following custom properties are available for styling of the number-renderer content.

Custom property | Description
'--px-data-grid-cell-number-column-overflow' | controls the overflow behavior, visible, hidden
'--px-data-grid-cell-number-column-white-space' | controls how white-spaces are handled, normal, nowrap
'--px-data-grid-cell-number-column-word-wrap' | controls how word-wrapping is handled normal, break-word
'--px-data-grid-cell-number-column-text-overflow' | controls how text-overflow is handled, clip, ellipsis
'--px-data-grid-cell-number-column-editor-align-items | control editor alignment when in edit mode, center, flex-end, flex-start'

Examples:
Make number-renderer columns wrap the content:
--px-data-grid-cell-number-column-overflow: hidden;
--px-data-grid-cell-number-column-word-wrap: break-word;

Make number-renderer columns use ellipsis overflow:
--px-data-grid-cell-number-column-text-overflow: ellipsis;
--px-data-grid-cell-number-column-white-space: nowrap;
--px-data-grid-cell-number-column-overflow: hidden;

-->

<dom-module id="px-data-grid-number-renderer">
  <template>
    <style include="px-data-grid-number-renderer-styles"></style>
    <px-number-formatter-no-display
        value="[[value]]"
        format="[[_getDisplayFormat(displayFormat)]]"
        currency="[[displayIsCurrency]]"
        culture="[[displayCulture]]"
        zero-format="[[displayZeroFormat]]"
        formatted-value="{{_formattedValue}}">
    </px-number-formatter-no-display>
    <template is="dom-if" if="[[!_editing]]">[[_formattedValue]]</template>
    <template is="dom-if" if="[[_editing]]" restamp>
      <div id="editingTemplate" class="input-container">

        <!-- In IE11 input[type=number] does not work properly. -->
        <input id="editingTemplateInput" class$="{{getClasses(validationResult)}}" type$="[[_getInputFieldType(_ie)]]"  value="[[value]]" on-input="_onInputChange">

        <px-tooltip
          for="editingTemplateInput"
          orientation="top"
          tooltip-message="[[validationResult.message]]"
          opened="[[_showValidationError]]"
          ignore-target-events>
      </div>
    </template>
  </template>
  <script>
    {
      /**
       * A `<px-data-grid-number-renderer>` is standard renderer for number cell content.
       * This element shows how to implement custom renderer in order to display uncommon data.
       * Each renderer that is needed for displaying content should have element with id="value",
       * which is rendered in non-editable state of the cell.
       * You may also provide element with id="editingTemplate", which will display when the cell is editing.
       *
       * @memberof Predix
       * @extends Polymer.Element
       * @mixes Predix.DataGridRendererMixin
       */
      class DataGridNumberRenderer extends Predix.DataGridRendererMixin(Polymer.Element) {
        static get is() {
          return 'px-data-grid-number-renderer';
        }

        static get properties() {
          return {
            /**
             * Format used to display the number in the cell. Use a valid
             * [numbro.js format string](http://numbrojs.com/format.html),
             * or set to `null` to display the number exactly as it was passed
             * by casing it to string.
             */
            displayFormat: {
              type: String,
              value: null
            },

            /**
             * Changes how the number is displayed during localization.
             * For valid formats and features, see: http://numbrojs.com/languages.html
             */
            displayCulture: {
              type: String
            },

            /**
             * Set to `true` if the number should be formatted as currency.
             * Will use the `displayFormat` put parse the number as currency.
             */
            displayIsCurrency: {
              type: String
            },

            /**
             * Defines how to display 0 values.
             * For valid formats and features, see: http://numbrojs.com/format.html
             */
            displayZeroFormat: {
              type: String
            },

            _formattedValue: String,

            value: {
              type: Number
            },

            initialValue: {
              type: Number
            },

            _ie: {
              type: Boolean,
              value: !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/))
            }
          };
        }

        static get observers() {
          return [
            '_valueObserver(value)',
            '_rendererConfigChanged(column.rendererConfig, column.rendererConfig.*)'
          ];
        }

        validate() {
          let isValid = true;
          let message = '';

          if (this.column.required && this.value.toString().length == 0) {
            isValid = false;
            message = this.localize('Value is required');
          } else if (this.value && isNaN(Number(this.value))) {
            isValid = false;
            message = this.localize('Invalid number');
          }

          return {
            valid: isValid,
            message: message
          };
        }

        _getInputFieldType(ie) {
          if (ie) {
            return 'text';
          } else {
            return 'number';
          }
        }

        _valueObserver(value) {
          if (isNaN(Number(value))) {
            // Can't be parsed to number, throw an error
            console.error(`
[px-data-grid-number-renderer]
Expected a value that could be parsed to a number, but received a value that cannot be parsed.
Column path: ${this.column.path}
Unexpected value: ${value}
            `.trim());
            return;
          }
          if (typeof value === 'string' && value.length > 0) {
            this.value = Number(value);
          }
        }

        _onInputChange(e) {
          this.value = e.target.value;
        }

        _rendererConfigChanged(rendererConfig) {
          if (rendererConfig) {
            const updates = {};

            if (rendererConfig.hasOwnProperty('displayFormat') && this.displayFormat !== rendererConfig.displayFormat) {
              updates.displayFormat = rendererConfig.displayFormat;
            }

            if (rendererConfig.hasOwnProperty('displayCurrency') && this.displayCurrency !== rendererConfig.displayCurrency) {
              updates.displayCurrency = rendererConfig.displayCurrency;
            }

            if (rendererConfig.hasOwnProperty('displayCulture') && this.displayCulture !== rendererConfig.displayCulture) {
              updates.displayCulture = rendererConfig.displayCulture;
            }

            if (rendererConfig.hasOwnProperty('displayZeroFormat') && this.displayZeroFormat !== rendererConfig.displayZeroFormat) {
              updates.displayZeroFormat = rendererConfig.displayZeroFormat;
            }

            if (Object.keys(updates).length) {
              this.setProperties(updates);
            }
          }
        }

        _getDisplayFormat(format) {
          return format === null ? 'NONE' : format;
        }

        getClasses(result) {
          return !result || result.valid ? 'text-input' : 'text-input validation-error';
        }
      }

      customElements.define(DataGridNumberRenderer.is, DataGridNumberRenderer);

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