controllets/select-data-controllet/select-data-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="../tree-view-controllet/tree-view-controllet.html" />
<link rel="import" href="../multi-table-controllet/multi-table-controllet.html" />
<link rel="import" href="../filters-controllet/filters-controllet.html" />
<dom-module id="select-data-controllet">
    <style is="custom-style">
        .div_container {
            display: flex;
            flex-direction: row;
        }
        #material_tree_view {
            position: relative;
            width: 25%;
            min-width: 200px;
            height: 100vh;
        }
        #material_multi_table_filters {
            position: relative;
            width: 75%;
            margin-left: 64px;
            margin-top: 8px;
        }
        #div_multi_table {
            height: 70%;
            width: 100%;
            position: relative;
        }
        #div_filters {
            height: 30%;
            width: 100%;
            position: relative;
        }
    </style>
    <template>
        <div class="div_container">
            <paper-material id="material_tree_view" elevation="5">
                <tree-view-controllet id="tree_view" root-name={{rootName}} opened-path={{openedPath}} preselected-fields={{preselectedFields}}></tree-view-controllet>
            </paper-material>
            <paper-material id="material_multi_table_filters" elevation="5">
                <div id="div_multi_table">
                    <multi-table-controllet id="multi_table" data-url={{dataUrl}}></multi-table-controllet>
                </div>
                <div id="div_filters">
                    <filters-controllet id="filters"></filters-controllet>
                </div>
            </paper-material>
        </div>
    </template>
    <script>
        Polymer({
            is : 'select-data-controllet',
            properties : {
                rootName : {
                    type  : String,
                    value : "root"
                },
                preselectedFields : {
                    type : Array,
                    value : []
                },
                openedPath : {
                    type : String,
                    value : undefined
                },
                dataUrl : {
                    type  : String,
                    value : undefined,
                    observer : '_init'
                },
                filters : {
                    type : Array,
                    value : undefined
                },
            },
            listeners: {
                'tree-view-controllet_selected-fields': '_updateSelectedFields',
                'filters-controllet_filters': '_updateFilters'
            },
            ready : function() {
                $(this.$.material_tree_view).perfectScrollbar();
                if(this.filters == undefined){
                    if(this.dataletPreset && this.dataletPreset["filters"] != undefined)
                        this.filters = JSON.parse(this.dataletPreset["filters"]);
                    else
                        this.filters = [];
                }
                this.$.filters.filters = this.filters;
                this.$.multi_table.filters = this.filters;
                this._refreshTables();
            },
            attached : function(){
                this._resize();
                var that = this;
                window.addEventListener("resize", function() { that._resize(); });
            },
            getFilters : function() {
                return this.$.filters.getFilters();
            },
            getFields : function() {
                return this.$.tree_view.getFields();
            },
            getFlatFields : function() {
                return this.$.tree_view.getFlatFields();
            },
            _init : function() {
                var that = this;
                $.ajax({
                    url: this.dataUrl,
                    dataType: "json",
                    success: function(data){
                        that.rootName = "data";
                        var data = that._filterJson(data);
                        that.$.tree_view.setAttribute("json-data", JSON.stringify(data));
                        that.$.tree_view.selectedFields = [];
                        that._updateSelectedFields();
                        that.$.tree_view.ready();
                        that.filters = [];
                        that.$.filters.filters = [];
                        that.$.multi_table.filters = [];
                    }
                });
                this.$.multi_table.ready();
            },
            _filterJson : function(data){
                //ckan
                if(data.result != undefined && data.result.resource_id != undefined) {
                    this.rootName = "result,records"
                    return data.result.records;
                }
                //openDataSoft
                else if(data.parameters != undefined && data.parameters.dataset != undefined) {
                    this.rootName = "records,fields";
                    return data.records[0].fields;
                }
                else{
                    return data;
                }
            },
            _updateSelectedFields : function() {
                var fields = this.$.tree_view.getFields();
                this.$.multi_table.setSelectedFields(fields);
                var flatFields = this.$.tree_view.getFlatFields();
                this.$.filters.setFields(flatFields);
            },
            _updateFilters : function(e) {
                this.filters = e.detail.filters;
                this.$.multi_table.filters = e.detail.filters;
                this._refreshTables();
            },
            _refreshTables : function() {
                this.$.multi_table.setSelectedFields([]);
                this.async(function () {
                    var fields = this.$.tree_view.getFields();
                    this.$.multi_table.setSelectedFields(fields);
                }, 0);
            },
            _resize : function(){
                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                h = h - 64; //height with page scroller
                $("#material_tree_view").height(h);
                $("#material_multi_table_filters").height(h-8);
            }
        });
    </script>
</dom-module>