strolch-wc-reports/strolch-wc-reports-table.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">

<link rel="import" href="../strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">

<link rel="import" href="strolch-wc-reports-behavior.html">

<dom-module id="strolch-wc-reports-table">
    <template>

        <!-- Style -->
        <style is="custom-style" include="strolch-wc-styles">
            :host {
                --column-count: 0;
                --column-min-width: 100px;
                --column-side-padding: 24px;

                display: block;
                min-width: 100%;

            }

            paper-material {
                min-width: 100%;
                display: inline-flex;
                background-color: white;
            }

            .table {
                min-width: 100%;
                display: flex;
                flex-direction: column;
            }

            .table-caption {
                display: table-caption;
                text-align: center;
                font-weight: bold;
                font-size: larger;
            }

            .table-row {
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                margin-top: -1px;
            }

            .table-row:not(:first-child) {
                border-top: 1px solid #e3e3e3;
                cursor: pointer;
            }

            .table-heading {
                font-weight: bold;
            }

            .table-heading,
            .table-cell {
                display: flex;
                padding: 0 var(--column-side-padding);
                overflow: hidden;
                align-items: center;
                flex-basis: var(--column-min-width);
                flex-grow: 1;
                flex-shrink: 0;
                justify-content: flex-start;
                min-height: 48px;
            }

            .selected {
                background: #e7e7e7;
            }

            .footer {
                padding: 10px;
            }

            .footer p {
                color: #b5b5b5;
            }

            .limitBtn {
                min-width: inherit;
            }

        </style>

        <!-- Requests -->
        <iron-ajax id="ajaxPostReport"
                   url="[[baseRestPath]]/strolch/reports/[[reportId]]"
                   content-type="application/json"
                   handle-as="json"
                   method="POST"
                   on-response="onPostReportResponse"
                   on-error="onAjaxError"></iron-ajax>

        <!-- Content -->
        <paper-material id="content">
            <div class="table">
                <div class="table-row">
                    <template is="dom-repeat" items="[[columns]]" as="column">
                        <div class="table-heading">[[localize(column.name)]]</div>
                    </template>
                </div>
                <template is="dom-repeat" items="[[rows]]" as="row">
                    <div class="table-row" on-tap="onRowTapped">
                        <template is="dom-repeat" items="[[columns]]" as="column">
                            <div class="table-cell">[[getCellProperty(row, column)]]</div>
                        </template>
                    </div>
                </template>
            </div>
        </paper-material>

        <template is="dom-if" if="[[arrayFilled(rows)]]">
            <div class="g-row footer">
                <div class="g-3">
                    <paper-button class="limitBtn" on-tap="setLimit">25</paper-button>
                    <paper-button class="limitBtn" on-tap="setLimit">50</paper-button>
                    <paper-button class="limitBtn" on-tap="setLimit">100</paper-button>
                </div>
                <div class="g-7">
                    <div class="g-center">
                        <paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
                        <paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
                        <span>[[data.offset]] to [[_getEnd(data)]] of [[data.size]]</span>
                        <paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
                        <paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
                    </div>
                </div>
                <div class="g-2">
                    <p>[[localize('duration')]] [[data.duration]]</p>
                </div>
            </div>
        </template>

    </template>

    <script>
        Polymer({

            /* Component */
            is: "strolch-wc-reports-table",
            behaviors: [
                StrolchLocalizeBehavior,
                StrolchReportsBehavior
            ],

            /* Properties */
            properties: {
                filtersReady: {
                    type: Boolean
                },
                data: {
                    type: Object,
                    value: null
                },
                columns: {
                    type: Array,
                    value: []
                },
                rows: {
                    type: Array,
                    value: []
                }
            },

            /* Computations */

            /* Observers */
            observers: [
                "queryReports(reportId, filter, offset, limit, fromDate, toDate, filtersReady)"
            ],

            _hasNext: function (data) {
                return data != null && data.nextOffset > data.offset;
            },
            _hasPrevious: function (data) {
                return data != null && data.previousOffset < data.offset;
            },

            _getEnd: function (data) {
                if (this._hasNext(data)) return data.nextOffset;
                return data == null ? 0 : data.size;
            },

            _toFirstPage: function () {
                this.offset = 0;
            },
            _toPreviousPage: function () {
                this.offset = this.data.previousOffset;
            },
            _toNextPage: function () {
                this.offset = this.data.nextOffset;
            },
            _toLastPage: function () {
                this.offset = this.data.lastOffset;
            },

            setLimit: function (evt) {
                this.limit = Number.parseInt(evt.target.textContent.trim());
            },

            queryReports: function (reportId, filter, offset, limit, fromDate, toDate, filtersReady) {
                if (!filtersReady)
                    return;

                var from = fromDate == null || Strolch.isEmptyString(fromDate) ? null : new Date(fromDate).toISOString();
                var to = toDate == null || Strolch.isEmptyString(toDate) ? null : new Date(toDate).toISOString();

                this.$.ajaxPostReport.body = {
                    filter: filter,
                    offset: offset,
                    limit: limit,
                    dateRange: {
                        from: from,
                        to: to
                    }
                };
                this.$.ajaxPostReport.generateRequest();
            },

            /* Listeners */
            listeners: {},
            onPostReportResponse: function (event) {
                if (this.selectedRow != null) {
                    this.selectedRow.classList.remove('selected');
                    this.selectedRow = null;
                }

                // get the response
                var response = event.detail.response;

                // sort the columns by index
                response.data.columns.sort(function (columnA, columnB) {
                    return columnA.index - columnB.index;
                });

                // set the table width according to the column count // TODO should be solved via CSS
                var columnCount = response.data.columns.length;
                this.$.content.style.width = "calc(148px * " + columnCount + ")";

                // directly set this as the columns and rows
                this.set("data", response.data);
                this.set("columns", response.data.columns);
                this.set("rows", response.data.rows);
            },

            /* Private */
            onRowTapped: function (evt) {
                if (this.selectedRow != null) {
                    this.selectedRow.classList.remove('selected');
                }
                this.selectedRow = evt.target.closest('.table-row');
                this.selectedRow.classList.add('selected');
            },

            /* Public */
            getCellProperty: function (row, column) {
                // TODO check the property type
                return row[column.id] ? row[column.id] : "";
            },
            refreshReports: function () {
                this.$.ajaxPostReport.generateRequest();
            }
        });
    </script>
</dom-module>