controllets/dataset-table-controllet/dataset-table-controllet.html

<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/paper-tooltip/paper-tooltip.html">
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../data-table-controllet/data-table-controllet.html">
<script type="text/javascript" src="../../bower_components/jsdatachecker/jsdatachecker.min.js"></script>
<dom-module id="dataset-table-controllet">
    <template>
        <style is="custom-style">
            paper-checkbox {
                height: 24px;
                /*margin-top: 8px*/
                --paper-checkbox-checked-color: #2196F3;
                --paper-checkbox-checked-ink-color: #FFFFFF;
                --paper-checkbox-unchecked-color: #000000;
                --paper-checkbox-unchecked-ink-color: #FFFFFF;
                --paper-checkbox-label-color: #000000;
            }
            paper-input {
                max-width: 288px;
                --paper-input-container-focus-color: #2196F3;
            }
            paper-icon-button.preview-close
            {
                height: 28px;
                width: 28px;
            }
            paper-icon-button{
                height: 48px;
                width: 48px;
                padding: 0px;
                --paper-icon-button-ink-color: #FFFFFF;
            }
            paper-icon-button.tools
            {
                height: 24px;
                width: 24px;
                padding: 0px;
                --paper-icon-button-ink-color: #2196F3;
            }
            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;
            }
            #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;
            }
            #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 .even-row{
            }
            #data_table_container .odd-row{
                background: #E0E0E0;
            }
            /*#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%;
                vertical-align: middle;
            }
            #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;
            }
            paper-dialog {
                /*position: fixed;*/
                min-height: 80%;
                min-width: 85%;
                height: 80%;
                width: 85%;
            }
            paper-dialog > *
            {
                padding: 0;
                margin: 0;
            }
            .buttons_position
            {
                position: absolute;
                top: 10px;
                right: 10px;
            }
        </style>
        <paper-material id="data_table_container" elevation="5">
            <div id="header">
                <span id="selected_data"></span>
                <div style="float: right; right: 10px">
                    <paper-checkbox checked on-change="showAll"><span id="suggested_datasets">{{_tr("last_version")}}</span></paper-checkbox>
                </div>
            </div>
            <table>
                <tbody id="tbody">
                <tr>
                    <template is="dom-repeat" items="{{fields}}">
                        <th id="id_{{index}}">
                            {{_tr(item.name)}}
                            <paper-icon-button id="{{index}}" class="order" on-click="_order" icon="unfold-more"></paper-icon-button>
                        </th>
                    </template>
                    <th>
                        {{_tr("TOOLS")}}
                    </th>
                </tr>
                <template is="dom-repeat" items="{{shownData}}">
                    <tr class$="{{item.cssClass}}">
                        <template is="dom-repeat" items="{{_toArray(item)}}" as="elem">
                            <template is="dom-if" if="{{!elem.isLink}}">
                                <td title="{{elem.value}}">{{elem.value}}</td>
                            </template>
                            <template is="dom-if" if="{{elem.isLink}}">
                                <td>
                                    <template is="dom-repeat" items="{{elem.value}}" as="user" >
                                        <div class="ow_avatar">
                                            <a href="{{user.href}}">
                                                <img alt="" src="{{user.src}}" style="max-width: 100%;">
                                            </a>
                                        </div>
                                    </template>
                                </td>
                            </template>
                        </template>
                        <td>
                            <paper-icon-button title='{{_tr("open")}}'          room_id$="{{item.ID}}" version$="{{item.VER}}" class="tools" icon="open-in-new" on-click="_onOpenDatasetClick"></paper-icon-button>
                            <paper-icon-button title='{{_tr("download_csv")}}'  room_id$="{{item.ID}}" version$="{{item.VER}}" class="tools" icon="file-download" on-click="_onDownloadDatasetClick"></paper-icon-button>
                            <paper-icon-button title='{{_tr("copy_link")}}'     room_id$="{{item.ID}}" version$="{{item.VER}}" class="tools" icon="content-copy" on-click="_onCopyDatasetClick"></paper-icon-button>
                            <paper-icon-button title='{{_tr("download_docs")}}' room_id$="{{item.ID}}" version$="{{item.VER}}" class="tools" icon="description" on-click="_onDownloadInfoClick"></paper-icon-button>
                        </td>
                    </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.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>
        <paper-dialog modal id="paper_dialog">
            <data-table-controllet id="data_table_controllet"></data-table-controllet>
            <div class="buttons buttons_position">
                <paper-icon-button dialog-confirm icon="close" class="preview-close"></paper-icon-button>
            </div>
        </paper-dialog>
    </template>
    <script>
        Polymer({
            is : 'dataset-table-controllet',
            properties : {
                data : {
                    type  : Array,
                    value : []
                },
                filter : {
                    type  : String,
                    value : undefined,
                    observer : '_filter'
                },
                localization : {
                    type : String,
                    value : "en"
                }
            },
            ready : function() {
                this.step = 10;
                ln["localization"] = this.attributes["localization"].value;
            },
            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"]]);
            },
            _tr: function(key) {
                return ln[key +"_"+ this.attributes["localization"].value];
            },
            _type : function() {return ln["type_" + ln["localization"]];},
            _warning : function() {return ln["warning_" + ln["localization"]];},
            _onDownloadInfoClick: function(e){
                $.ajax({
                    url: ODE.ajax_coocreation_get_dataset_docs,
                    data: {room_id : e.target.parentElement.attributes["room_id"].value, version : e.target.parentElement.attributes["version"].value},
                    dataType: "text",
                    success: function(e){
                        var fileName = "dataset";
                        var uri = 'data:text/html;charset=utf-8,' + encodeURI(e);
                        var link = document.createElement("a");
                        link.href = uri;
                        link.style = "visibility:hidden";
                        link.download = fileName + ".html";
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                });
            },
            _onCopyDatasetClick: function(e) {
                var base_url = window.location.origin;
                window.prompt("Copy to clipboard: Ctrl+C, Enter", base_url + '/cocreation/ajax/get-dataset-by-room-id-and-version/?room_id=' + e.target.parentElement.room_id + '&version=' + e.target.parentElement.version);
            },
            _onDownloadDatasetClick: function(e) {
                $.ajax({
                    url: ODE.ajax_coocreation_get_dataset,
                    data: {room_id : e.target.parentElement.attributes["room_id"].value, version : e.target.parentElement.attributes["version"].value},
                    dataType: "json",
                    success: function(e){
                        var arrData = e;
                        var row = "";
                        var CSV = "";
                        for (var index in arrData[0]) {
                            row += index + ',';
                        }
                        row = row.slice(0, -1);
                        //append Label row with line break
                        CSV += row + '\r\n';
                        for (var i = 0; i < arrData.length; i++) {
                            var row = "";
                            //2nd loop will extract each column and convert it in string comma-seprated
                            for (var index in arrData[i]) {
                                row += '`' + arrData[i][index] + '`,';
                            }
                            row.slice(0, row.length - 1);
                            //add a line break after each row
                            CSV += row + '\r\n';
                        }
                        if (CSV == '') {
                            alert("Invalid data");
                            return;
                        }
                        //Generate a file name
                        var fileName = "dataset";
                        //Initialize file format you want csv or xls
                        var uri = 'data:text/csv;charset=utf-8,' + encodeURI(CSV);
                        //this trick will generate a temp <a /> tag
                        var link = document.createElement("a");
                        link.href = uri;
                        link.style = "visibility:hidden";
                        link.download = fileName + ".csv";
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                });
            },
            _onOpenDatasetClick : function(e) {
                var t = this;
                $.ajax({
                    url: ODE.ajax_coocreation_get_dataset,
                    data: {room_id : e.target.parentElement.attributes["room_id"].value, version : e.target.parentElement.attributes["version"].value},
                    dataType: "json",
                    success: function(e){
                        t.$.data_table_controllet.setData(e);
                        t.$.paper_dialog.open();
                        t.$.data_table_controllet._resize();
                    }
                });
            },
            setData : function(data) {
                var converter = new DataTypeConverter();
                var result = converter.inferJsonDataType(data, ["*"]);
                result = converter.cast(result);
                delete result.types.ID;
                this.fields = ArrayUtils.toFieldsArray(result.types);
                this.originalData = result.dataset;
                this.uniqueData = [];
                var uniqueId = {};
                var cssClass = ["even-row", "odd-row"];
                var j = 0;
                for(var i=0; i<result.dataset.length; i++) {
                    if (!uniqueId[result.dataset[i].ID.toString()]) {
                        uniqueId[result.dataset[i].ID.toString()] = result.dataset[i].ID.toString();
                        result.dataset[i]["cssClass"] = cssClass[j%2];
                        this.uniqueData.push(result.dataset[i]);
                        j++;
                    }
                    result.dataset[i]["cssClass"] = cssClass[j%2];
                }
                this.data = this.uniqueData;
                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();
            },
            reset : function(){
                this.setData([]);
                $(this.$.tbody).animate({ scrollTop: 0}, 0);
//                this.filter = "";
            },
            showAll : function (e) {
                if(!e.target.checked) {
                    this.data = this.originalData;
                }else{
                    this.data = this.uniqueData;
                }
                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);
            },
            _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(a, b) {
                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) {
                //var regExp  = new RegExp(/(https?:\/\/[^\s]+)/g);
                return Object.keys(obj).map(function(key) {
                    if(key != "ID" && key != "cssClass") {
                        //var test = regExp.test(obj[key]);
                        var isLink = (obj[key].constructor === Array);
                        return {
                            key: key,
                            value: obj[key], //test ? obj[key].split(",") : obj[key],
                            isLink: isLink
                        }
                    }
                });
            },
            _fieldId: function(index) {
                return "id_" + index;
            },
            _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');
                }, 1);
            }
        });
    </script>
</dom-module>