controllets/multi-table-controllet/multi-table-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../../datalets/dynamic-datatable-datalet/dynamic-datatable-datalet.html" />
<dom-module id="multi-table-controllet">
    <template>
        <style is="custom-style">
            paper-tabs {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                font-weight: bold;
                --paper-tabs-selection-bar-color: #2196F3;
            }
            paper-tab {
                transition: all 1.0s;
            }
            paper-tab.iron-selected{
                background-color: #B6B6B6;
            }
            paper-tab:hover {
                color: #2196F3;
            }
            #multi_table_container {
                height: 100%;
                width: 100%;
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
            }
            #multi_table_tables {
                position: relative;
                height: calc(100% - 48px);
            }
        </style>
        <div id="multi_table_container">
            <paper-tabs selected="{{selected}}">
                <template id="dom-tabs" is="dom-repeat" items="{{_toArrayTabs(selectedFields)}}">
                    <paper-tab noink>{{item.name}}</paper-tab>
                </template>
            </paper-tabs>
            <div id="multi_table_tables">
                <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
                    <template id="dom_pages" is="dom-repeat" items="{{_toArrayPages(selectedFields)}}">
                        <neon-animatable>
                                <dynamic-datatable-datalet id="{{item.name}}" data-url={{dataUrl}} fields$='{{_getFields(item.value)}}' filters$='{{_getFilters(item.value)}}'></dynamic-datatable-datalet>
                        </neon-animatable>
                    </template>
                </neon-animated-pages>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is : 'multi-table-controllet',
            properties : {
                selected : {
                    type  : Number,
                    value : undefined
                },
                selectedFields : {
                    type  : Array,
                    value : undefined
                },
                dataUrl : {
                    type  : String,
                    value : undefined
                },
                toSelect : {
                    type  : Number,
                    value : undefined
                }
            },
            listeners: {
                'dom-change': '_onDomChange'
            },
            ready : function() {
                $(this.$.multi_table_tables).perfectScrollbar();
            },
            setSelectedFields : function(selectedFields) {
                this.toSelect = this._calculateSelected(this.selectedFields, selectedFields);
                this.selectedFields = this._copy(selectedFields);
            },
            _calculateSelected : function(preselectedFields, selectedFields) {
                if(!preselectedFields)
                    return 0;//new multi-table
                if(Object.keys(selectedFields).length == 0)
                    return 0;//no fields
                for(var key in selectedFields){
                    if(!preselectedFields[key])
                        return Object.keys(selectedFields).indexOf(key);//new field
                    if(JSON.stringify(selectedFields[key]) != JSON.stringify(preselectedFields[key]))
                        return Object.keys(selectedFields).indexOf(key);//modified field
                }
                //removed field
                if(this.selected == 0){
                    this.selected = 1;
                    return 0;
                }
                /******** optional ********/
                var removedIndex;
                for(var key in preselectedFields){
                    if(!selectedFields[key]){
//                        if(Object.keys(preselectedFields).indexOf(key) != 0)
                            removedIndex = Object.keys(preselectedFields).indexOf(key);//
                    }
                }
                //'select the selected' (index changed after remove)
                if(removedIndex <= this.selected){
                    return this.selected - 1;
                }
                else{
                    this.selected = this.selected + 1;
                    return this.selected -1;
                }
            },
            _copy : function(o) {
                var out, v, key;
                out = Array.isArray(o) ? [] : {};
                for (key in o) {
                    v = o[key];
                    out[key] = (typeof v === "object") ? this._copy(v) : v;
                }
                return out;
            },
            _onDomChange : function(e) {
                if (e.target.id == "dom_pages")
                    this.async(function () {this.selected = this.toSelect;}, 0);
            },
            _toArrayTabs : function(obj) {
                return Object.keys(obj).map(function(key) {
                    return {name: key.replace(/,/g, " / "), value: obj[key]};
                });
            },
            _toArrayPages : function(obj) {
                return Object.keys(obj).map(function(key) {
                    return {name: key, value: obj[key]};
                });
            },
            _getFields : function(value) {
                return value;
            },
            _getFilters : function(value) {
                return JSON.stringify(this.filters);
            }
        });
    </script>
</dom-module>