From 617c4ae2c511489128cad57ef0004322fad10ded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= <hi_kalkan@yahoo.com>
Date: Sun, 21 Jul 2019 19:06:20 +0300
Subject: [PATCH] Refresh the counters widget by AJAX

---
 .../CountersWidgetInputDto.cs                 | 11 ++++++++
 .../CountersWidgetResultDto.cs                | 10 +++++++
 .../IDashboardAppService.cs                   | 20 +-------------
 .../CountersWidgetViewComponent.cs            |  3 ++-
 .../Components/CountersWidget/Default.cshtml  |  8 +++---
 .../Components/CountersWidget/Default.js      | 25 ++++++++++++++++++
 .../Pages/MyDashboard.cshtml                  | 18 +++++++++----
 .../DashboardDemo.Web/Pages/MyDashboard.js    | 26 +++++++++++++++++++
 8 files changed, 92 insertions(+), 29 deletions(-)
 create mode 100644 samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs
 create mode 100644 samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetResultDto.cs
 create mode 100644 samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.js
 create mode 100644 samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js

diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs
new file mode 100644
index 0000000000..8296a58556
--- /dev/null
+++ b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs
@@ -0,0 +1,11 @@
+using System;
+
+namespace DashboardDemo
+{
+    public class CountersWidgetInputDto
+    {
+        public DateTime StartDate { get; set; }
+
+        public DateTime EndDate { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetResultDto.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetResultDto.cs
new file mode 100644
index 0000000000..a2be2291b7
--- /dev/null
+++ b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetResultDto.cs
@@ -0,0 +1,10 @@
+namespace DashboardDemo
+{
+    public class CountersWidgetResultDto
+    {
+        public int NewUsers { get; set; }
+        public int ActiveUsers { get; set; }
+        public double TotalIncome { get; set; }
+        public double TotalProfit { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs
index b1957d10b3..aa4bde7db7 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs
+++ b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs
@@ -1,7 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Text;
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using Volo.Abp.Application.Services;
 
 namespace DashboardDemo
@@ -10,19 +7,4 @@ namespace DashboardDemo
     {
         Task<CountersWidgetResultDto> GetCountersWidgetAsync(CountersWidgetInputDto input);
     }
-
-    public class CountersWidgetInputDto
-    {
-        public DateTime StartDate { get; set; }
-
-        public DateTime EndDate { get; set; }
-    }
-
-    public class CountersWidgetResultDto
-    {
-        public int NewUsers { get; set; }
-        public int ActiveUsers { get; set; }
-        public double TotalIncome { get; set; }
-        public double TotalProfit { get; set; }
-    }
 }
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/CountersWidgetViewComponent.cs b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/CountersWidgetViewComponent.cs
index 885b040f48..3a89871628 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/CountersWidgetViewComponent.cs
+++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/CountersWidgetViewComponent.cs
@@ -7,7 +7,8 @@ using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 namespace DashboardDemo.Web.Pages.Components.CountersWidget
 {
     [Widget(
-        StyleFiles = new[] { "/Pages/Components/CountersWidget/Default.css" }
+        StyleFiles = new[] { "/Pages/Components/CountersWidget/Default.css" },
+        ScriptFiles = new[] { "/Pages/Components/CountersWidget/Default.js" }
         )]
     public class CountersWidgetViewComponent : AbpViewComponent
     {
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.cshtml b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.cshtml
index 0c020a6b33..05f7d6efb6 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.cshtml
+++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.cshtml
@@ -3,25 +3,25 @@
     <abp-row>
         <abp-column size-md="_3">
             <div class="counters-widget-item">
-                <div class="counters-widget-count">@Model.NewUsers</div>
+                <div class="counters-widget-count"><span class="new-user-count">@Model.NewUsers</span></div>
                 <div class="counters-widget-count-name">New Users</div>
             </div>
         </abp-column>
         <abp-column size-md="_3">
             <div class="counters-widget-item">
-                <div class="counters-widget-count">@Model.ActiveUsers</div>
+                <div class="counters-widget-count"><span class="active-user-count">@Model.ActiveUsers</span></div>
                 <div class="counters-widget-count-name">Active Users</div>
             </div>
         </abp-column>
         <abp-column size-md="_3">
             <div class="counters-widget-item">
-                <div class="counters-widget-count">@Model.TotalIncome.ToString("C")</div>
+                <div class="counters-widget-count"><span class="total-income">$@Model.TotalIncome.ToString("0.00")</span></div>
                 <div class="counters-widget-count-name">Total Income</div>
             </div>
         </abp-column>
         <abp-column size-md="_3">
             <div class="counters-widget-item">
-                <div class="counters-widget-count">@Model.TotalProfit.ToString("C")</div>
+                <div class="counters-widget-count"><span class="total-profit">$@Model.TotalProfit.ToString("0.00")</span></div>
                 <div class="counters-widget-count-name">Total Profit</div>
             </div>
         </abp-column>
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.js b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.js
new file mode 100644
index 0000000000..49796473d4
--- /dev/null
+++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.js
@@ -0,0 +1,25 @@
+(function() {
+
+    function refresh(args) {
+        var mainContainer = args.container;
+        var globalFilters = args.filters;
+
+        mainContainer
+            .find('.counters-widget')
+            .each(function () {
+                var $this = $(this);
+                dashboardDemo.dashboard
+                    .getCountersWidget({
+                        startDate: globalFilters.startDate,
+                        endDate: globalFilters.endDate
+                    }).then(function (result) {
+                        $this.find('.new-user-count').text(result.newUsers);
+                        $this.find('.active-user-count').text(result.activeUsers);
+                        $this.find('.total-income').text('$' + result.totalIncome.toFixed(2));
+                        $this.find('.total-profit').text('$' + result.totalProfit.toFixed(2));
+                    });
+            });
+    }
+
+    abp.event.on('refresh-widgets', refresh);
+})();
\ No newline at end of file
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml
index b96595ce9a..b8e3527873 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml
+++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml
@@ -1,6 +1,10 @@
 @page
 @model DashboardDemo.Web.Pages.MyDashboardModel
 
+@section scripts {
+    <abp-script src="/Pages/MyDashboard.js" />
+}
+
 @section styles {
     <abp-style src="/Pages/MyDashboard.css" />
 }
@@ -19,8 +23,12 @@
     </abp-row>
 </form>
 
-@await Component.InvokeAsync("CountersWidget", new
-{
-    startDate = @Model.StartDate,
-    endDate = @Model.EndDate
-})
\ No newline at end of file
+<div id="MyDashboardWidgetsArea">
+
+    @await Component.InvokeAsync("CountersWidget", new
+    {
+        startDate = @Model.StartDate,
+        endDate = @Model.EndDate
+    })
+
+</div>
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js
new file mode 100644
index 0000000000..0b2fff4c81
--- /dev/null
+++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.js
@@ -0,0 +1,26 @@
+(function () {
+
+    function triggerWidgets(eventName) {
+        abp.event.trigger(
+            eventName,
+            {
+                container: $('#MyDashboardWidgetsArea'),
+                filters: {
+                    startDate: $('#StartDate').val(),
+                    endDate: $('#EndDate').val()
+                }
+            }
+        );
+    }
+
+    $(function () {
+
+        $('#MyDashboardFilterForm').submit(function(e) {
+            e.preventDefault();
+
+            triggerWidgets('refresh-widgets');
+        });
+
+        triggerWidgets('init-widgets');
+    });
+})();
\ No newline at end of file