Refactor widget sample

samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js

@@ -1,6 +1,10 @@
 abp.widgets = abp.widgets || {}; //TODO: Remove later
 (function () {
 
+    abp.WidgetManager = function(opts) {
+
+    };
+
     abp.DashboardManager = function (opts) {
 
         if (typeof opts === 'string') {
@@ -16,12 +20,19 @@
             $dashboardWrapper = opts.wrapper;
         }
 
-        var getFilters = function() {
+        var getFilters = function ($widgetWrapperDiv) {
-            if (!opts.filterCallback) {
+            var filters = {};
-                return {};
+
+            if (opts.filterCallback) {
+                filters = opts.filterCallback();
             }
 
-            return opts.filterCallback();
+            var widgetApi = $widgetWrapperDiv.data('abp-widget-api');
+            if (widgetApi && widgetApi.getFilters) {
+                filters = $.extend(filters, widgetApi.getFilters());
+            }
+
+            return filters;
         };
 
         var initWidget = function($widgetWrapperDiv) {
@@ -29,24 +40,17 @@
             var widgetApiClass = abp.widgets[widgetName];
             if (widgetApiClass) {
                 var widgetApi = new widgetApiClass($widgetWrapperDiv);
+                $widgetWrapperDiv.data('abp-widget-api', widgetApi);
                 if (widgetApi.init) {
-                    widgetApi.init(getFilters());
+                    widgetApi.init(getFilters($widgetWrapperDiv));
                 }
-
-                $widgetWrapperDiv.data('abp-widget-api', widgetApi);
             }
         };
-        
-        var init = function () {
-            $dashboardWrapper.find('.abp-widget-wrapper').each(function () {
-                initWidget($(this));
-            });
-        };
 
         var callRefreshWidgetApi = function ($widgetWrapperDiv) {
             var widgetApi = $widgetWrapperDiv.data('abp-widget-api');
             if (widgetApi && widgetApi.refresh) {
-                widgetApi.refresh(getFilters());
+                widgetApi.refresh(getFilters($widgetWrapperDiv));
             }
         }
 
@@ -58,8 +62,8 @@
                     type: 'GET',
                     dataType: 'html',
                     contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
-                    data: getFilters()
+                    data: getFilters($widgetWrapperDiv)
-                }).then(function(result) {
+                }).then(function (result) {
                     var $newWidgetWrapperDiv = $(result);
                     $widgetWrapperDiv.replaceWith($newWidgetWrapperDiv);
                     $widgetWrapperDiv = $newWidgetWrapperDiv;
@@ -70,6 +74,12 @@
             }
         };
 
+        var init = function () {
+            $dashboardWrapper.find('.abp-widget-wrapper').each(function () {
+                initWidget($(this));
+            });
+        };
+
         var refresh = function() {
             $dashboardWrapper.find('.abp-widget-wrapper').each(function() {
                 refreshWidget($(this));

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Shared/Components/NewUserStatisticWidget/Default.js

@@ -5,25 +5,29 @@
         var _latestFilters;
         var _chart;
 
-        var refresh = function(filters) {
+        var getFilters = function() {
-            _latestFilters = filters || _latestFilters;
+            return {
-            dashboardDemo.dashboard.getNewUserStatisticWidget({
-                startDate: _latestFilters.startDate,
-                endDate: _latestFilters.endDate,
                 frequency: $wrapper.find('.frequency-filter option:selected').val()
-            }).then(function(result) {
+            };
-                _chart.data = {
+        }
-                    labels: Object.keys(result.data),
+
-                    datasets: [
+        var refresh = function(filters) {
-                        {
+            _latestFilters = filters;
-                            label: 'User count',
+            dashboardDemo.dashboard
-                            data: Object.values(result.data),
+                .getNewUserStatisticWidget(_latestFilters)
-                            backgroundColor: 'rgba(255, 132, 132, 1)'
+                .then(function(result) {
-                        }
+                    _chart.data = {
-                    ]
+                        labels: Object.keys(result.data),
-                };
+                        datasets: [
-                _chart.update();
+                            {
-            });
+                                label: 'User count',
+                                data: Object.values(result.data),
+                                backgroundColor: 'rgba(255, 132, 132, 1)'
+                            }
+                        ]
+                    };
+                    _chart.update();
+                });
         };
 
         var init = function(filters) {
@@ -49,11 +53,12 @@
                 .find('.frequency-filter')
                 .on('change',
                     function() {
-                        refresh();
+                        refresh($.extend(_latestFilters, getFilters()));
                     });
         };
 
         return {
+            getFilters: getFilters,
             init: init,
             refresh: refresh
         };