Introduce abp.DashboardManager

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Widgets/Volo/Abp/AspNetCore/Mvc/UI/Widgets/AbpViewComponentHelper.cs

@@ -79,7 +79,11 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Widgets
             }
 
             PageWidgetManager.TryAdd(widget);
-            return await DefaultViewComponentHelper.InvokeAsync(widget.ViewComponentType, arguments);
+
+            return new HtmlContentBuilder()
+                .AppendHtml($"<div class=\"abp-widget-wrapper\" data-widget-name=\"{widget.Name}\">")
+                .AppendHtml(await DefaultViewComponentHelper.InvokeAsync(widget.ViewComponentType, arguments))
+                .AppendHtml("</div>");
         }
     }
 }

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.cshtml

@@ -1,20 +1,18 @@
-<div class="newUserStatistic-widget">
+<abp-card background="Light">
-    <abp-card background="Light">
+    <abp-card-header background="Secondary" class="text-white">
-        <abp-card-header background="Secondary" class="text-white">
+        User Statistics
-            User Statistics
+    </abp-card-header>
-        </abp-card-header>
+    <abp-card-body>
-        <abp-card-body>
+        <div>
-            <div>
+            <div class="form-group frequency-filter">
-                <div class="form-group frequency-filter">
+                <select class="form-control">
-                    <select class="form-control">
+                    <option value="Daily">Daily</option>
-                        <option value="Daily">Daily</option>
+                    <option value="Monthly">Monthly</option>
-                        <option value="Monthly">Monthly</option>
+                </select>
-                    </select>
-                </div>
             </div>
-            <div class="row mt-5">
+        </div>
-                <canvas class="NewUserStatisticChart"></canvas>
+        <div class="row mt-5">
-            </div>
+            <canvas class="NewUserStatisticChart"></canvas>
-        </abp-card-body>
+        </div>
-    </abp-card>
+    </abp-card-body>
-</div>
+</abp-card>

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

@@ -1,29 +1,35 @@
-(function () {
+abp.widgets = abp.widgets || {}; //TODO: Remove later
-    var serviceMethod = dashboardDemo.dashboard.getNewUserStatisticWidget;
+(function () {
-
+    abp.widgets.NewUserStatisticWidget = function ($wrapper) {
-    function ChartManager($wrapper) {
 
         var _latestFilters;
         var _chart;
 
-        var getFrequencyVal = function () {
+        var refresh = function (filters) {
-            return $wrapper.find('.frequency-filter option:selected').val();
+            _latestFilters = filters || _latestFilters;
+            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: [
+                        {
+                            label: 'User count',
+                            data: Object.values(result.data),
+                            backgroundColor: 'rgba(255, 132, 132, 1)'
+                        }
+                    ]
+                };
+                _chart.update();
+            });
         };
 
-        var createChart = function (statistic) {
+        var init = function (filters) {
             _chart = new Chart($wrapper.find('.NewUserStatisticChart'),
                 {
                     type: 'bar',
-                    data: {
-                        labels: Object.keys(statistic.data),
-                        datasets: [
-                            {
-                                label: 'User count',
-                                data: Object.values(statistic.data),
-                                backgroundColor: 'rgba(255, 132, 132, 1)'
-                            }
-                        ]
-                    },
                     options: {
                         scales: {
                             yAxes: [{
@@ -34,73 +40,19 @@
                         }
                     }
                 });
-        };
 
-        var refreshChart = function (statistic) {
+            refresh(filters);
-            _chart.data = {
-                labels: Object.keys(statistic.data),
-                datasets: [
-                    {
-                        label: 'User count',
-                        data: Object.values(statistic.data),
-                        backgroundColor: 'rgba(255, 132, 132, 1)'
-                    }
-                ]
-            };
-            _chart.update();
-        };
 
-        var render = function (args, callback) {
+            $wrapper
-            serviceMethod({
+                .find('.frequency-filter')
-                    startDate: _latestFilters.startDate,
+                .on('change', function () {
-                    endDate: _latestFilters.endDate,
+                    refresh();
-                    frequency: getFrequencyVal()
-                })
-                .then(function (result) {
-                    callback(result);
                 });
         };
 
-        var init = function (filters) {
-            _latestFilters = filters;
-            render(filters, createChart);
-        };
-
-        var refresh = function (filters) {
-            _latestFilters = filters;
-            render(filters, refreshChart);
-        };
-
-        $wrapper.find('.frequency-filter').on('change',
-            function () {
-                refresh(_latestFilters);
-            });
-
         return {
             init: init,
             refresh: refresh
         };
     }
-
-    abp.event.on('init-widgets', function (args) {
-        args.container
-            .find('.newUserStatistic-widget')
-            .each(function () {
-                var $this = $(this);
-                var chartManager = new ChartManager($this);
-                chartManager.init(args.filters);
-                $this.data('chart-manager', chartManager);
-            });
-
-    });
-
-    abp.event.on('refresh-widgets', function (args) {
-        args.container
-            .find('.newUserStatistic-widget')
-            .each(function () {
-                var $this = $(this);
-                var chartManager = $this.data('chart-manager');
-                chartManager.refresh(args.filters);
-            });
-    });
 })();

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

@@ -1,26 +1,73 @@
-(function () {
+abp.widgets = abp.widgets || {}; //TODO: Remove later
-
+(function () {
-    function triggerWidgets(eventName) {
+
-        abp.event.trigger(
+    abp.DashboardManager = function (opts) {
-            eventName,
+
-            {
+        if (typeof opts === 'string') {
-                container: $('#MyDashboardWidgetsArea'),
+            opts = {
-                filters: {
+                wrapper: opts
-                    startDate: $('#StartDate').val(),
+            };
-                    endDate: $('#EndDate').val()
+        }
-                }
+
+        var $dashboardWrapper;
+        if (typeof opts.wrapper === 'string') {
+            $dashboardWrapper = $(opts.wrapper);
+        } else {
+            $dashboardWrapper = opts.wrapper;
+        }
+
+        var getFilters = function() {
+            if (!opts.filterCallback) {
+                return {};
             }
-        );
-    }
 
-    $(function () {
+            return opts.filterCallback();
+        }
+        
+        var init = function () {
+            $dashboardWrapper.find('.abp-widget-wrapper').each(function () {
+                var $widgetWrapperDiv = $(this);
+                var widgetName = $widgetWrapperDiv.attr('data-widget-name');
+                var widgetApiClass = abp.widgets[widgetName];
+                if (widgetApiClass) {
+                    var widgetApi = new widgetApiClass($widgetWrapperDiv);
+                    if (widgetApi.init) {
+                        widgetApi.init(getFilters());
+                    }
+                    $widgetWrapperDiv.data('abp-widget-api', widgetApi);
+                }
+            });
+        };
+
+        var refresh = function() {
+            $dashboardWrapper.find('.abp-widget-wrapper').each(function () {
+                var $widgetWrapperDiv = $(this);
+                var widgetApi = $widgetWrapperDiv.data('abp-widget-api');
+                if (widgetApi && widgetApi.refresh) {
+                    widgetApi.refresh(getFilters());
+                }
+            });
+        }
+        
+        return {
+            init: init,
+            refresh: refresh
+        };
+    };
 
-        $('#MyDashboardFilterForm').submit(function(e) {
+    var filterForm = $('#MyDashboardFilterForm');
-            e.preventDefault();
+
+    var myDashboard = new abp.DashboardManager({
+        wrapper: '#MyDashboardWidgetsArea',
+        filterCallback: function() {
+            return filterForm.serializeFormToObject();
+        }
+    });
 
-            triggerWidgets('refresh-widgets');
+    myDashboard.init();
-        });
 
-        triggerWidgets('init-widgets');
+    filterForm.submit(function(e) {
+        e.preventDefault();
+        myDashboard.refresh();
     });
 })();