WebCompDev / COMPONENTS

<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="../expert-query-controllet/expert-query-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 #expert_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="expert_container">
                    <expert-query-controllet id="expert"></expert-query-controllet>
                </div>
            </div>
        </div>


    </template>

    <script>
        Polymer({

            is : 'select-data-controllet',

            properties : {

                dataUrl : {
                    type  : String,
                    value : undefined
                },

                data : {
                    type  : Object,
                    value : undefined
                },

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

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

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

            },

            listeners: {
                'expert-controllet_show': '_resizeExpertWindow',
                'select-fields-controllet_selected-fields': '_updateFields',
                'filters-controllet_filters': '_updateFilters',
                'aggregators-controllet_aggregators': '_updateAggregators'
            },

            ready : function() {
            },

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

            getFields : function() {
                if(this.aggregators && this.aggregators.length) {
                    var selectedFields = [];
                    for (var i = 0; i < this.aggregators.length; i++) {
                        if(this.aggregators[i]["operation"] == "GROUP BY")
                            selectedFields.push(this.aggregators[i]["field"]);
                        else
                            selectedFields.push(this.aggregators[i]["operation"] + "(" + this.aggregators[i]["field"] + ")");
                    }
                    return selectedFields;
                }
                return this.selectedFields;
            },

            getSelectedFields : function() {
                return this.selectedFields;
            },

            getFilters : function() {
                return this.filters;
            },

            getAggregators : function() {
                return this.aggregators;
            },

            getData : function() {
                var converter = new DataTypeConverter();

                var data = alasql_QUERY(this.data, this.selectedFields, this.filters, null, null);
                var result = converter.inferJsonDataType(data, ["*"]);
                result = converter.cast(result);
                data = result.dataset;

                if(this.aggregators && this.aggregators.length) {
                    data = alasql_QUERY(data, this.selectedFields, null, this.aggregators, null);
                    result = converter.inferJsonDataType(data, ["*"]);
                    result = converter.cast(result);
                    data = result.dataset;
                }

                return data;
            },

            setSelectedFields : function(selectedFields) {
                this.async(function() {
                    var selectedIndices = utility_getSelectedIndices(this.fields, selectedFields);
                    this.$.select_fields.setSelectFields(selectedIndices);
                }, 0);
            },

            setFilters : function(filters) {
                this.$.expert.setFilters(filters);
            },

            setAggregators : function(aggregators) {
                this.$.expert.setAggregators(aggregators);
            },

            _resizeExpertWindow : function(e) {
                if(e.detail.show) {
                    this.$.table_container.style.height = "calc(50% - 12px)";
                    this.$.expert_container.style.height = "calc(50% - 12px)";
                }
                else {
                    this.$.table_container.style.height = "calc(100% - 72px)";
                    this.$.expert_container.style.height = "48px";
                }

                this.$.data_table._resize();
            },

            _updateFields : function(e) {
                var selectedFields = e.detail.selectedFields;
                this.selectedFields = utility_getSelectedFields(this.fields, selectedFields);
                this.$.data_table.setData(this.getData());

                this.$.expert.setSelectedFields(this.selectedFields);
            },

            _updateFilters : function(e) {
                this.filters = e.detail.filters;
                this.$.data_table.setData(this.getData());
            },

            _updateAggregators : function(e) {
                this.aggregators = e.detail.aggregators;
                this.$.data_table.setData(this.getData());
            },

            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_QUERY(data, that.fields, null, null, null);

                            that.$.select_fields.setFields(that.fields);
                            that.$.expert.setFields(that.fields);
//                            that.$.expert.setSelectedFields(that.selectedFields);

                            that.fire('data-ready', {ready : true});
                        },
                        error: function(){
                            that.fire('data-ready', {ready : false});
                        }
                    });
                }

                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_QUERY(data, this.fields, null, null, null);

                    this.$.select_fields.setFields(this.fields);
                    this.$.expert.setFields(this.fields);
//                    this.$.expert.setSelectedFields(this.selectedFields);
                }
            },

            reset : function() {
                this.filters = [];
                this.aggregators = [];
                this.selectedFields = [];
                this.$.select_fields.reset();
                this.$.data_table.reset();
                this.$.expert.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>