oe-data-table-column-chooser.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-input/paper-input.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.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-chooser">

  <template>
    <style>
      .column-list {
        @apply(--layout);
        @apply(--layout-horizontal);
      }

      paper-menu {
        min-width: 150px;
        height: calc(100% - 64px);
      }

      .swap-icon {
        @apply(--layout);
        @apply(--layout-self-center);
      }

    </style>

    <paper-dialog id="dialog">
      <h2>Select Columns</h2>
      <paper-dialog-scrollable>
        <div class="column-list">
          <div>
            <h4> Visible Columns </h4>
            <paper-menu on-dragover="handleDragOver" on-drop="handleDrop">
              <template is="dom-repeat" items="[[columns]]" as="column" filter="_getVisibleColumns" observe="hidden">
                <paper-item draggable=true on-dragstart="handleDragStart"> [[column.label]] </paper-item>
              </template>
            </paper-menu>
          </div>
          <iron-icon class="swap-icon" icon="icons:swap-horiz"> </iron-icon>
          <div>
            <h4> Hidden Columns </h4>
            <paper-menu on-dragover="handleDragOver" on-drop="handleDrop" hidden-columns>
              <template is="dom-repeat" items="[[columns]]" as="column" filter="_getHiddenColumns" observe="hidden">
                <paper-item draggable=true on-dragstart="handleDragStart"> [[column.label]] </paper-item>
              </template>
            </paper-menu>
          </div>
        </div>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button raised dialog-dismiss>Close</paper-button>
        <!--<paper-button dialog-confirm>Accept</paper-button>-->
      </div>
    </paper-dialog>
  </template>

</dom-module>

<script>
  (function () {
    Polymer({
      is: 'oe-data-table-column-chooser',

      properties: {
        columns: {
          type: Array,
          notify: true
        }
      },

      open: function () {
        this.$.dialog.open();
      },

      close: function () {
        this.$.dialog.close();
      },

      _getHiddenColumns: function (column) {
        return column.hidden;
      },

      _getVisibleColumns: function (column) {
        return !column.hidden;
      },

      handleDragStart: function (event) {
        this.set('_itemBeingDragged', event.model.column);
      },

      handleDragOver: function (event) {
        event.preventDefault();
      },

      handleDrop: function (event) {
        var index = this.columns.indexOf(this._itemBeingDragged);
        this.set('columns.' + index + '.hidden', event.currentTarget.hasAttribute('hidden-columns'));
      }

    });

  })();

</script>