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-side-padding: 24px;

                display: block;
            }

            .content {
                display: block;
                overflow: auto;
                background-color: white;
                height: calc(100vh - 190px);
            }

            .content-row {
                display: flex;
                flex-direction: row;
                margin-top: -1px;
                flex-grow: 0;
                flex-shrink: 0;
                flex-basis: 1000px;
            }

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

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

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

            .data:nth-child(even) {
                background: #f1eeee;
            }

            .selected {
                background: rgba(0, 0, 0, 0.26) !important;
            }

        </style>

        <!-- Content -->
        <paper-material class="content">
            <div class="content-row" style$="width: [[tableWidth]]px">
                <template is="dom-repeat" items="[[columns]]" as="column">
                    <div class="content-heading" style$="flex-basis: [[column.width]]px">[[localize(column.name)]]
                    </div>
                </template>
            </div>
            <template is="dom-repeat" items="[[rows]]" as="row">
                <div class="content-row data" style$="width: [[tableWidth]]px" on-tap="onRowTapped">
                    <template is="dom-repeat" items="[[columns]]" as="column">
                        <div class="content-cell" style$="flex-basis: [[column.width]]px">
                            [[getCellProperty(row, column)]]
                        </div>
                    </template>
                </div>
            </template>
        </paper-material>

    </template>

    <script>
        Polymer({

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

            /* Properties */
            properties: {
                data: {
                    type: Object,
                    observer: "dataChanged"
                },
                columns: {
                    type: Array
                },
                rows: {
                    type: Array
                },
                tableWidth: {
                    type: Number,
                    value: 0
                }
            },

            /* Computations */

            /* Observers */
            observers: [],

            /* Listeners */
            listeners: {},

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

            dataChanged: function (newValue) {
                if (this.selectedRow != null)
                    this.selectedRow.classList.remove('selected');

                if (newValue == null) {
                    this.rows = null;
                    this.columns = null;
                    return;
                }

                var localize = this.localize;
                newValue.rows.forEach(function (row) {
                    if (row == null)
                        return;
                    newValue.columns.forEach(function (col) {
                        if (col.name == null || col.name.length === 0 || col.id == null || row[col.id] == null)
                            return;
                        if (col.width == null)
                            col.width = localize == null ? 100 : localize(col.name).length * 8;

                        var width = row[col.id].length * 8;
                        col.width = Math.min(250, Math.max(col.width, width));
                    }.bind(this));
                });

                var tableWidth = 0;
                newValue.columns.forEach(function (col) {
                    tableWidth += col.width + 48;
                });

                console.log("dataChanged");
                this.tableWidth = tableWidth;
                this.columns = newValue.columns;
                this.rows = newValue.rows;
            },

            /* Public */
            getCellProperty: function (row, column) {
                if (row == null || column == null)
                    return "";
                return row[column.id] ? row[column.id] : "";
            }
        });
    </script>
</dom-module>