oe-data-table-column-customizer.html

<!-- 
  ©2016-2017 EdgeVerve Systems Limited (a fully owned Infosys subsidiary),
  Bangalore, India. All Rights Reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../oe-input/oe-input.html">
<link rel="import" href="../oe-input/oe-decimal.html">
<link rel="import" href="../oe-combo/oe-combo.html">
<!--
### oe-data-table-column-chooser

`<oe-data-table-column-chooser>` is used in `oe-data-table` component for displayig a column data.

-->
<dom-module id="oe-data-table-column-customizer">
  <template>
    <style>
      .header {
        height: 64px;
        padding: 0 24px;

        @apply(--layout-flex);
        @apply(--layout-horizontal);
        @apply(--layout-justified);
        @apply(--layout-center);
      }

      .sub-header {
        padding: 8px 0;

        @apply(--layout-flex);
        @apply(--layout-horizontal);
        @apply(--layout-justified);
        @apply(--layout-center);
      }

      .title {
        font-size: 20px;
        font-weight: 400;
        font-style: normal;
        color: var(--primary-text-color, rgba(0, 0, 0, 0.87));
      }

      .column-chooser {
        background: #f5f5f5;
        padding: 0 24px;
      }

      .main-label {
        font-weight: 500;
        font-size: 16px;
      }

      .sub-label {
        font-size: 12px;
        margin: 6px 0;
      }

      .reset-btn {
        color: var(--primary-color);
      }

      .apply-btn {
        color: #fff;
        background: var(--primary-color);
      }

      .column-list {
        overflow-y: hidden;
        overflow-x: auto;

        @apply(--layout-flex);
        @apply(--layout-horizontal);
      }

      .column-item {
        padding: 24px 16px;
        background-color: #fff;
        cursor: move;

        @apply(--layout-vertical);
        @apply(--layout-center);
      }

      .column-item + .column-item {
        margin-left: 1px;
      }

      .column-label {
        font-size: 14px;
        padding: 12px 0;
      }

      .column-item.hide-column-item {
        color: var(--disabled-text-color);
      }

      .column-item.hide-column-item paper-checkbox {
        --paper-checkbox-label-color: var(--disabled-text-color);
      }

    </style>
    <div class="header"><span class="title">{{title}}</span>
      <paper-icon-button icon="close" class="close-icon" on-tap="closeColumnCustomizer"></paper-icon-button>
    </div>
    <div class="column-chooser">
      <div class="sub-header">
        <div>
          <div class="main-label">Customize View</div>
          <div class="sub-label">Customize to hide/unhide, rearrange columns for ease of comparing stuff</div>
        </div>
        <div>
          <paper-button class="reset-btn" on-tap="resetView">RESET</paper-button>
          <paper-button class="apply-btn" on-tap="customizeView">APPLY</paper-button>
        </div>
      </div>
      <sortable-js class="column-list" draggable=".column-item">
        <template is="dom-repeat" items={{customColumns}}>
          <div class$="column-item {{computeClass(item.hidden)}}">
            <paper-checkbox checked="{{!item.hidden}}">Show</paper-checkbox>
            <div class="column-label">{{item.label}}</div>
            <oe-combo label="Type" value={{item.type}} listdata={{dataTypes}}></oe-combo>
            <oe-combo label="Aggregator" value={{item.aggregator}} displayproperty="key" valueproperty="value" listdata={{aggregators}}></oe-combo>
            <oe-input label="Label" value={{item.label}}></oe-input>
            <oe-decimal label="Width (in px)" value={{item.width}}></oe-decimal>
            <oe-decimal label="Min Width (in px)" value={{item.minWidth}}></oe-decimal>
          </div>
        </template>
      </sortable-js>
    </div>
  </template>
</dom-module>
<script>
  (function () {
    Polymer({
      is: 'oe-data-table-column-customizer',
      properties: {
        columns: {
          type: Array,
          notify: true,
          observer: 'columnsChanged'
        },
        dataTypes: {
          type: Array,
          value: function () {
            return ['number', 'string', 'data', 'timestamp', 'combo', 'typeahead'];
          }
        },
        aggregators: {
          type: Array,
          value: function () {
            return [{
                key: 'None',
                value: undefined
              },
              {
                key: 'Sum',
                value: 'sum'
              },
              {
                key: 'Average',
                value: 'average'
              },
              {
                key: 'Count',
                value: 'count'
              }
            ]
          }
        }
      },
      columnsChanged: function () {
        var customColumns = this.columns.map(function (obj) {
          if (!obj.hidden) obj.hidden = false;
          return Object.assign({}, obj);
        });
        this.set('customColumns', customColumns);
      },
      computeClass: function (hidden) {
        if (hidden) {
          return 'hide-column-item';
        } else {
          return;
        }
      },
      resetView: function () {
        this.columnsChanged();
      },
      closeColumnCustomizer: function () {
        this.fire('close-column-customizer');
      },
      customizeView: function () {
        this.fire('customize-view', this.customColumns);
      }
    });
  })();

</script>