controllets/select-data-controllet/select-data-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../select-fields-controllet/select-fields-controllet.html" />
<link rel="import" href="../data-table-controllet/data-table-controllet.html" />
<link rel="import" href="../filters-controllet/filters-controllet.html" />
<link rel="import" href="../providers-utility-controllet/providers-utility-controllet.html" />
<script type="text/javascript" src="../../alasql-utility/alasql.min.js"></script>
<script type="text/javascript" src="../../alasql-utility/alasql-utility.js"></script>
<script type="text/javascript" src="../../bower_components/JSDataChecker/jsdatachecker.min.js"></script>
<dom-module id="select-data-controllet">
    <style is="custom-style">
        #select_data_controllet_container {
            display: flex;
            flex-direction: row;
            margin-top: 8px;
        }
        #select_data_controllet_container * {
            font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 16px;
            line-height: 24px;
        }
        #select_data_controllet_container #fields_container {
            height: 100%;
            width: 20%;
            min-width: 192px;
        }
        #select_data_controllet_container #right_container {
            height: 100%;
            width: calc(80% - 24px);
            margin-left: 24px;
        }
        #select_data_controllet_container #table_container {
            height: calc(100% - 72px);
            width: 100%;
        }
        #select_data_controllet_container #filters_container {
            height: 48px;
            width: 100%;
            margin-top: 24px;
        }
    </style>
    <template>
        <providers-utility-controllet></providers-utility-controllet>
        <div id="select_data_controllet_container">
            <div id="fields_container">
                <select-fields-controllet id="select_fields"></select-fields-controllet>
            </div>
            <div id="right_container">
                <div id="table_container">
                    <data-table-controllet id="data_table"></data-table-controllet>
                </div>
                <div id="filters_container">
                    <filters-controllet id="filters"></filters-controllet>
                </div>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is : 'select-data-controllet',
            properties : {
                dataUrl : {
                    type  : String,
                    value : undefined
//                    observer : '_init'
                },
                data : {
                    type  : Object,
                    value : undefined
                },
                filters : {
                    type  : Array,
                    value : []
//                    value : [{logicalOperator: "OR"}, {field: "annee", operation: "=", value: "2014"}, {field: "annee", operation: "=", value: "2015"}]
                },
                selectedFields : {
                    type : Array,
                    value : []
//                    value : [0,2,4]
                }
            },
            listeners: {
                'filters-controllet_show': '_resizeFilters',
                'select-fields-controllet_selected-fields': '_updateFields',
                'filters-controllet_filters': '_updateFilters'
            },
            ready : function() {
                this.showFilter = false;
            },
            attached : function(){
                this._resize();
                var that = this;
                window.addEventListener("resize", function() { that._resize(); });
            },
            getSelectedFields : function() {
                return utility_getSelectedFields(this.fields, this.selectedFields);;
            },
            getFilters : function() {
                return this.filters;
            },
            getData : function() {
                return this.data;
            },
            setSelectedFields : function(selectedFields) {
                this.async(function() {
                    var selectedIndices = utility_getSelectedIndices(this.fields, selectedFields);
                    console.log(selectedIndices);
                    this.$.select_fields.setSelectFields(selectedIndices);
                }, 0);
            },
            setFilters : function(filters) {
                this.async(function() {
                    this.$.filters.setFilters(filters);
                }, 0);
            },
            _resizeFilters : function() {
                if(!this.showFilter) {
                    this.$.table_container.style.height = "calc(50% - 12px)";
                    this.$.filters_container.style.height = "calc(50% - 12px)";
                }
                else {
                    this.$.table_container.style.height = "calc(100% - 72px)";
                    this.$.filters_container.style.height = "48px";
                }
                this.$.data_table._resize();
                this.showFilter = !this.showFilter;
            },
            _updateFields : function(e) {
                this.selectedFields = e.detail.selectedFields;
                var fields = utility_getSelectedFields(this.fields, this.selectedFields);
                var data = alasql_selectData(this.data, fields, this.filters);
                this.$.data_table.setData(data);
            },
            _updateFilters : function(e) {
                this.filters = e.detail.filters;
                var fields = utility_getSelectedFields(this.fields, this.selectedFields);
                var data = alasql_selectData(this.data, fields, this.filters);
                this.$.data_table.setData(data);
            },
            init : function() {
                if(this.dataUrl) {
                    var that = this;
                    $.ajax({
                        url: this.dataUrl,
                        dataType: "json",
                        success: function(data){
                            that.reset();
                            var f = Object.create(providerFactory);
                            var provider = f.getProvider(that.dataUrl);
                            data = provider.selectData(data);
                            var converter = new DataTypeConverter();
                            var result = converter.inferJsonDataType(data, ["*"]);
                            result = converter.cast(result);
                            that.fields = utility_getFields(result.types);
                            data = result.dataset;
                            that.data = alasql_selectData(data, that.fields);
                            that.$.select_fields.setFields(that.fields);
                            that.$.filters.setFields(that.fields);
                            that.fire('data-ready');
                        }
                    });
                }
                else {
                    this.reset();
                    var converter = new DataTypeConverter();
                    var result = converter.inferJsonDataType(this.data, ["*"]);
                    result = converter.cast(result);
                    this.fields = utility_getFields(result.types);
                    data = result.dataset;
                    this.data = alasql_selectData(data, this.fields);
                    this.$.select_fields.setFields(this.fields);
                    this.$.filters.setFields(this.fields);
                }
            },
            reset : function() {
                this.filters = [];
                this.selectedFields = [];
                this.$.select_fields.reset();
                this.$.data_table.reset();
                this.$.filters.reset();
            },
            _resize : function(){
                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
                h = h - 64 - 8; //height with page scroller + margin-top
                $("#select_data_controllet_container").height(h);
            }
        });
    </script>
</dom-module>