refs #57 added possibility to place a widget multiple times (in case you want to see the same wdget with different visualizations and/or different parameters like different filters to make it easier comparable), removed some controls and save parameter changes in dashboard

1 files changed, 38 insertions, 16 deletions

diff --git a/plugins/Insights/javascripts/insightsDataTable.js b/plugins/Insights/javascripts/insightsDataTable.js
index 400e50022e..3e39b669ef 100644
--- a/plugins/Insights/javascripts/insightsDataTable.js
+++ b/plugins/Insights/javascripts/insightsDataTable.js
@@ -11,6 +11,11 @@
         DataTable = exports.DataTable,
         dataTablePrototype = DataTable.prototype;
 
+     function getValueFromEvent(event)
+     {
+         return event.target.value ? event.target.value : $(event.target).attr('value');
+     }
+
     /**
      * UI control that handles extra functionality for Actions datatables.
      * 
@@ -38,62 +43,79 @@
             this.initFilterBy(domElem);
         },
 
+        _changeParameter: function (params) {
+
+            var widgetParams = {};
+
+            for (var index in params) {
+                if (params.hasOwnProperty(index)) {
+                    this.param[index]   = params[index];
+                    widgetParams[index] = params[index];
+                }
+            }
+
+            this.notifyWidgetParametersChange(this.$element, widgetParams);
+        },
+
+        _changeParameterAndReload: function (params) {
+            this._changeParameter(params);
+            this.reloadAjaxDataTable(true);
+        },
+
         initShowIncreaseOrDecrease: function (domElem) {
             var self = this;
             $('[name=showIncreaseOrDecrease]', domElem).bind('change', function (event) {
-                var value = event.target.value;
+                var value = getValueFromEvent(event);
 
-                self.param.limit_increaser = (value == 'both' || value == 'increase') ? '5' : '0';
-                self.param.limit_decreaser = (value == 'both' || value == 'decrease') ? '5' : '0';
-                self.reloadAjaxDataTable(true);
+                self._changeParameterAndReload({
+                    limit_increaser: (value == 'both' || value == 'increase') ? '5' : '0',
+                    limit_decreaser: (value == 'both' || value == 'decrease') ? '5' : '0'
+                });
             });
         },
 
         initMinGrowthPercentage: function (domElem) {
             var self = this;
             $('[name=minGrowthPercent]', domElem).bind('change', function (event) {
-                self.param.min_growth_percent = event.target.value;
-                self.reloadAjaxDataTable(true);
+                self._changeParameterAndReload({min_growth_percent: getValueFromEvent(event)});
             });
         },
 
         initOrderBy: function (domElem) {
             var self = this;
             $('[name=orderBy]', domElem).bind('change', function (event) {
-                self.param.order_by = event.target.value;
-                self.reloadAjaxDataTable(true);
+                self._changeParameterAndReload({order_by: getValueFromEvent(event)});
+            });
+            $('th[name=orderBy]', domElem).bind('click', function (event) {
+                self._changeParameterAndReload({order_by: getValueFromEvent(event)});
             });
         },
 
         initMinVisitsPercent: function (domElem) {
             var self = this;
             $('[name=minVisitsPercent]', domElem).bind('change', function (event) {
-                self.param.min_visits_percent = event.target.value;
-                self.reloadAjaxDataTable(true);
+                self._changeParameterAndReload({min_visits_percent: getValueFromEvent(event)});
             });
         },
 
         initBasedOnTotalMetric: function (domElem) {
             var self = this;
             $('[name=basedOnTotalMetric]', domElem).bind('change', function (event) {
-                self.param.based_on_total_metric = event.target.value;
-                self.reloadAjaxDataTable(true);
+                self._changeParameterAndReload({based_on_total_metric: getValueFromEvent(event)});
             });
         },
 
         initComparedToXPeriodsAgo: function (domElem) {
             var self = this;
             $('[name=comparedToXPeriodsAgo]', domElem).bind('change', function (event) {
-                self.param.compared_to_x_periods_ago = event.target.value;
-                self.reloadAjaxDataTable(true);
+                self._changeParameterAndReload({compared_to_x_periods_ago: getValueFromEvent(event)});
             });
         },
 
         initFilterBy: function (domElem) {
             var self = this;
             $('[name=filterBy]', domElem).bind('change', function (event) {
-                self.param.filter_by = event.target.value;
-                self.reloadAjaxDataTable(true);
+                self._changeParameterAndReload({filter_by: getValueFromEvent(event)});
             });
         }
     });