WebCompDev / COMPONENTS

<link rel="import" href="../../bower_components/polymer/polymer.html" />

<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">

<script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script>

<dom-module id="data-table-controllet">

    <template>

        <style is="custom-style">

            paper-input {
                max-width: 288px;
                --paper-input-container-focus-color: #2196F3;
            }

            paper-icon-button{
                height: 48px;
                width: 48px;
                padding: 0px;
                --paper-icon-button-ink-color: #FFFFFF;
            }

            paper-icon-button:hover{
                color: #2196F3;
            }

            paper-icon-button.clear {
                width: 24px;
                height: 24px;
                padding: 0px 4px;
                color: #F44336;
                --paper-icon-button-ink-color: #FFFFFF;
            }

            paper-icon-button.order {
                height: 24px;
                width: 24px;
                cursor: pointer;
            }

            paper-icon-button.order:hover {
               color: #FFFFFF;
            }

            paper-tooltip {
                --paper-tooltip-background: black;
            }

            iron-icon.icon {
                color: #2196F3;
            }

            #data_table_container {
                height: 100%;
                width: 100%;
            }

            #data_table_container * {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 24px;
            }

            #data_table_container #header {
                background: #B6B6B6;
                height: 24px;
                padding: 12px;
                text-align: center;
                font-weight: 700;
                cursor: help;
            }

            #data_table_container table {
                height: calc(100% - 96px);
                width: 100%;

                border-spacing: 0px;
            }

            #data_table_container tbody {
                width: 100%;
                display: block;
                position: relative;
            }

            #data_table_container tr:nth-child(odd) {
                background: #E0E0E0;
            }

            #data_table_container th,
            #data_table_container td{
                height: 24px;
                padding: 12px;
                text-align: center;
                max-width: 224px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 1%;
            }

            #data_table_container th {
                background: #2196F3;
                color: #FFFFFF;
                font-weight: 700;
                cursor: help;
            }

            #data_table_container td {
                font-size: 14px;
                padding: 4px;
            }

            #data_table_container tfoot td {
                height: 48px;
                padding: 0px;
                font-size: 16px;
                background: #B6B6B6;
            }

            #data_table_container #footer {
                width: 100%;
                height: 48px;
                background: #B6B6B6;

                display: flex;
                flex-direction: row;
            }

            #data_table_container .footer_block {
                height: 24px;
                padding: 12px 8px;
                text-align: right;
            }

            #data_table_container .footer_block:nth-child(1) {
                width: 30%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            #data_table_container .footer_block:nth-child(2) {
                width: 40%;
                height: 48px;
                padding: 0px 8px;
                text-align: center;
            }

            #data_table_container .footer_block:nth-child(3) {
                width: 30%;
                height: 40px;
                padding: 4px 8px;
                text-align: left;
            }

            #data_table_container br {
                display: block;
                margin-top: 8px;
                content: " ";
            }

            #data_table_container p {
                margin: 0;
                padding: 0;
            }

            #data_table_container p .type{
                font-weight: 700;
            }

            #data_table_container p .warning{
                font-weight: 700;
                color: #F44336;
            }

        </style>

        <paper-material id="data_table_container" elevation="5">

            <div id="header"><span id="selected_data"></span></div>

            <paper-tooltip id="tooltip_wornings" for="header" offset="56">
                <template is="dom-repeat" items="{{fields}}">
                    <template is="dom-if" if={{item.errorsDescription.length}}>
                        <p>
                            <span class="warning">{{_warning()}}:</span> {{item.errorsDescription}}
                        </p>
                    </template>
                </template>
            </paper-tooltip>

            <table>
                <tbody id="tbody">
                    <tr>
                        <template is="dom-repeat" items="{{fields}}">
                            <th id="id_{{index}}">
                                {{item.name}}
                                <paper-icon-button id="{{index}}" class="order" on-click="_order" icon="unfold-more"></paper-icon-button>
                            </th>
                        </template>
                    </tr>
                    <template is="dom-repeat" items="{{shownData}}">
                        <tr>
                            <template is="dom-repeat" items="{{_toArray(item)}}">
                                <template is="dom-if" if={{!_isObject(item)}}>
                                    <td title="{{item.value}}">{{item.value}}</td>
                                </template>
                                <template is="dom-if" if={{_isObject(item)}}>
                                    <template is="dom-if" if={{_isGEOJSON(item)}}>
                                        <td title="GEOJSON"><iron-icon icon="maps:map" class="icon"></iron-icon></td>
                                    </template>
                                    <template is="dom-if" if={{!_isGEOJSON(item)}}>
                                        <td title="OBJECT"><iron-icon icon=":help-outline" class="icon"></iron-icon></td>
                                    </template>
                                </template>
                            </template>
                        </tr>
                    </template>
                </tbody>
            </table>

            <template is="dom-repeat" items="{{fields}}">
                <paper-tooltip for="{{_fieldId(index)}}" offset="8">
                    <p>
                        <span class="type">{{_type()}}:</span> {{item.type}}
                        <template is="dom-if" if={{item.subtype}}>
                            ({{item.subtype}})
                        </template>
                        <template is="dom-if" if={{item.errorsDescription.length}}>
                            <br/>
                            <span class="warning">{{_warning()}}:</span> {{item.errorsDescription}}
                        </template>
                    </p>
                </paper-tooltip>
            </template>

            <div id="footer">
                <div class="footer_block">
                    <span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="rows"></span>
                </div>
                <div class="footer_block">
                    <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
                    <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
                </div>
                <div class="footer_block">
                    <paper-input id="filter" value={{filter}} no-label-float>
                        <iron-icon class="search" icon="search" prefix></iron-icon>
                        <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear"></paper-icon-button>
                    </paper-input>
                </div>
            </div>

        </paper-material>

    </template>

    <script>

        Polymer({

            is : 'data-table-controllet',

            properties : {

                data : {
                    type  : Array,
                    value : []
                },

                filter : {
                    type  : String,
                    value : "",
                    observer : '_filter'
                }

            },

            ready : function() {
                this.step = 100;
            },

            attached : function(){
                $(this.$.tbody).perfectScrollbar();

                this._resize();
                var that = this;
                window.addEventListener("resize", function() { that._resize(); });

                this._translate();

                if(this.data.length > 0)
                    this.setData(this.data);
            },

            _translate : function(){
                this.$.selected_data.innerHTML = ln["selectedData_" + ln["localization"]];

                this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
                this.$.to.innerHTML = ln["to_" + ln["localization"]];
                this.$.of.innerHTML = ln["of_" + ln["localization"]];
                this.$.rows.innerHTML = ln["rows_" + ln["localization"]];

                this.$.filter.setAttribute("label", ln["search_" + ln["localization"]]);
            },

            _type : function() {return ln["type_" + ln["localization"]];},
            _warning : function() {return ln["warning_" + ln["localization"]];},

            setData : function(data) {
                var converter = new DataTypeConverter();
                var result = converter.inferJsonDataType(data, ["*"]);
                result = converter.cast(result);
                this.fields = ArrayUtils.toFieldsArray(result.types);
//                console.log(this.fields);
                this.data = result.dataset;

                this.filter = "";
                $(".order").attr("icon", "unfold-more");

                this.prev = 1;
                this.next = this.step;
                this.length = this.data.length;

                this.shownPrev = Math.min(this.prev, this.length);
                this.shownNext = Math.min(this.next, this.length);
                this.shownData = this.data.slice(this.prev-1, this.next);

                this._resize();

                this.async(function() {
                    this.$.tooltip_wornings.show();
                }, 100);
            },

            reset : function(){
                this.setData([]);
                $(this.$.tbody).animate({ scrollTop: 0}, 0);
            },

            _onPrevClick : function(){
                if(this.prev != 1) {
                    this.prev -= this.step;
                    this.next -= this.step;

                    this.shownPrev = Math.min(this.prev, this.length);
                    this.shownNext = Math.min(this.next, this.length);
                    this.shownData = this.data.slice(this.prev - 1, this.next);
                }
                $(this.$.tbody).animate({ scrollTop: 0}, 0);
            },

            _onNextClick : function(){
                if(this.next < this.length) {
                    this.prev += this.step;
                    this.next += this.step;

                    this.shownPrev = Math.min(this.prev, this.length);
                    this.shownNext = Math.min(this.next, this.length);
                    this.shownData = this.data.slice(this.prev - 1, this.next);
                }
                $(this.$.tbody).animate({ scrollTop: 0}, 0);
            },

            _filter : function() {
                this.debounce('_filter', function () {
                    if(this.data.length) {
                        var filter = this.filter.toLowerCase();

                        if(filter == "")
                            this.shownData = this.data
                        else {
                            var keys = Object.keys(this.data[0]);
                            this.shownData = this.data.filter(function (el) {
                                var values = keys.map(function (key) {
                                    return el[key];
                                });
                                for (var i in values)
                                    if (values[i] && String(values[i]).toLowerCase().indexOf(filter) > -1)
                                        return true;
                                return false;
                            });
                        }

                        this.prev = 1;
                        this.next = this.step;
                        this.length = this.shownData.length;

                        this.shownPrev = Math.min(this.prev, this.length);
                        this.shownNext = Math.min(this.next, this.length);
                        this.shownData = this.shownData.slice(this.prev - 1, this.next);

                        $(this.$.tbody).animate({ scrollTop: 0}, 0);
                    }
                }, 300);
            },

            _clearInput : function() {
                this.$.filter.value = "";
            },

            _order : function(e) {
                t = $(e.target).parents("paper-icon-button")[0];

                var icon = t.getAttribute("icon");
                var id = t.getAttribute("id");
                var field = this.fields[id];
                var reverse = false;

                if(icon.indexOf("unfold-more") > -1){
                    t.setAttribute("icon", "arrow-drop-up");
                }
                else if(icon.indexOf("arrow-drop-up") > -1){
                    t.setAttribute("icon", "arrow-drop-down");
                    reverse = true;
                }
                else if(icon.indexOf("arrow-drop-down") > -1){
                    t.setAttribute("icon", "arrow-drop-up");
                }


                if(field.type == "NUMBER")
//                    this.data = this.data.sort(this._sort_by(field.name, reverse, parseInt));
                    this.data = this.data.sort(this._sort_by(field.name, reverse, function(a){return (isNaN(a) ? -Number.MAX_VALUE : a)}));
                else
                    this.data = this.data.sort(this._sort_by(field.name, reverse, function(a){return (a ? a.toLowerCase() : "")}));
                this._filter();
            },

            _sort_by : function(field, reverse, primer){

                var key = primer ?
                        function(x) {return primer(x[field])} :
                        function(x) {return x[field]};

                reverse = !reverse ? 1 : -1;

                return function (a, b) {
                    return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
                }
            },

            _toArray: function(obj) {
                return Object.keys(obj).map(function(key) {
                    return {
                        key: key,
                        value: obj[key]
                    };
                });
            },

            _fieldId: function(index) {
                return "id_" + index;
            },

            _isObject: function(item) {
                if(item.value instanceof Array)
                    return false;
                if(item.value instanceof Object)
                    return true;
                return false;
            },

            _isGEOJSON: function(item) {
                var dt = new DataTypeConverter();
                return (dt.inferDataSubTypeOfValue(item.value) && dt.inferDataSubTypeOfValue(item.value).name == DataTypeConverter.SUBTYPES.GEOJSON.name);
            },

            _resize : function(){
                this.async(function() {
                    var h = $(this.$.data_table_container).height() - 96;
                    var w = $(this.$.data_table_container).width();
                    $(this.$.tbody).width(w).height(h);
                    $(this.$.tbody).perfectScrollbar('update');
                }, 0);
            }

        });

    </script>

</dom-module>