Merge pull request #25 from EasyAbp/offcanvas

Notifications offcanvas and real-time updates

src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.cshtml

@@ -0,0 +1,52 @@
+@using EasyAbp.ProcessManagement.Localization
+@using Microsoft.AspNetCore.Mvc.Localization
+@inject IHtmlLocalizer<ProcessManagementResource> L
+@model EasyAbp.ProcessManagement.Web.Components.NotificationsOffcanvasWidget.NotificationsOffcanvasWidgetViewModel
+
+<script>
+    const notificationLifetimeMilliseconds = @Model.Options.NotificationLifetime.TotalMilliseconds;
+</script>
+
+<style>
+    .svg-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+    }
+    .state-update-time {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        padding: .8rem 1rem;
+        text-align: right !important;
+    }
+    .alert-purple {
+        background-color: #cf9ce6;
+        color: #212529;
+    }
+    .fade-in {
+        animation: fadeIn 0.5s;
+    }
+    .fade-out {
+        animation: fadeOut 0.5s;
+    }
+    @@keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    @@keyframes fadeOut {
+        from { opacity: 1; }
+        to { opacity: 0; }
+    }
+</style>
+
+<div class="offcanvas offcanvas-end" tabindex="-1" id="notificationsOffcanvas"
+     aria-labelledby="notificationsOffcanvasLabel">
+    <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="notificationsOffcanvasLabel">@L["Notifications"]</h5>
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+        <div id="alert-placeholder"></div>
+    </div>
+</div>

src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.js

@@ -0,0 +1,95 @@
+(function ($) {
+
+    abp.widgets.NotificationsOffcanvasWidget = function ($widget) {
+
+        function fetchAndShowAlerts() {
+            easyAbp.processManagement.notifications.notification.getList({
+                fromCreationTime: new Date(abp.clock.now() - notificationLifetimeMilliseconds),
+                userId: abp.currentUser.id,
+                dismissed: false,
+                maxResultCount: 10
+            }).then(function (res) {
+                var alertPlaceholder = $('#alert-placeholder');
+                var existingAlerts = alertPlaceholder.find('.alert');
+
+                var existingAlertIds = new Map();
+                existingAlerts.each(function () {
+                    var id = $(this).data('id');
+                    existingAlertIds.set(id, $(this));
+                });
+
+                res.items.forEach(function (item) {
+                    if (!existingAlertIds.has(item.id)) {
+                        var newAlert = createAlert(item);
+                        alertPlaceholder.append(newAlert);
+                    }
+                });
+
+                existingAlertIds.forEach(function (alert, id) {
+                    if (!res.items.some(item => item.id === id)) {
+                        alert.addClass('fade-out').one('animationend', function () {
+                            $(this).remove();
+                        });
+                    }
+                });
+            });
+        }
+
+        function getAlertColorClassName(stateFlag) {
+            switch (stateFlag) {
+                case 1:
+                    return "alert-dark";
+                case 2:
+                    return "alert-success";
+                case 3:
+                    return "alert-danger";
+                case 4:
+                    return "alert-primary";
+                case 5:
+                    return "alert-purple";
+                case 6:
+                    return "alert-warning";
+                default:
+                    break;
+            }
+        }
+
+        function createAlert(item) {
+            return $(`
+                <div class="alert ${getAlertColorClassName(item.stateFlag)} alert-dismissible fade-in" role="alert">
+                    <div class="d-flex">
+                        <img src="/images/process-management/icons/${item.stateFlag}.svg" class="svg-icon" alt=""/>
+                        <div>
+                            <strong>${item.actionName ? item.actionName : item.stateDisplayName}</strong>
+                            <p class="small mb-4">
+                                ${item.stateSummaryText}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="state-update-time">
+                        <span class="small"><time class="timeago" datetime="${item.creationTime}">${item.creationTime}</time></span>
+                    </div>
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+            `).data('id', item.id);
+        }
+
+        function init() {
+            var offcanvasElement = document.getElementById('notificationsOffcanvas');
+            var intervalId;
+
+            offcanvasElement.addEventListener('show.bs.offcanvas', function () {
+                fetchAndShowAlerts();
+                intervalId = setInterval(fetchAndShowAlerts, 5000);
+            });
+
+            offcanvasElement.addEventListener('hide.bs.offcanvas', function () {
+                if (intervalId) clearInterval(intervalId);
+            });
+        }
+
+        return {
+            init: init
+        };
+    };
+})(jQuery);

src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/NotificationsOffcanvasWidgetViewComponent.cs

@@ -0,0 +1,29 @@
+using System.Threading.Tasks;
+using EasyAbp.ProcessManagement.Web.Options;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Options;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace EasyAbp.ProcessManagement.Web.Components.NotificationsOffcanvasWidget;
+
+[Widget(
+    AutoInitialize = true,
+    RefreshUrl = "/Widgets/ProcessManagement/NotificationsOffcanvas",
+    ScriptFiles = ["/Components/NotificationsOffcanvasWidget/Default.js"]
+)]
+public class NotificationsOffcanvasWidgetViewComponent : AbpViewComponent
+{
+    protected ProcessManagementWebOptions Options =>
+        LazyServiceProvider.LazyGetRequiredService<IOptions<ProcessManagementWebOptions>>().Value;
+
+    public NotificationsOffcanvasWidgetViewComponent()
+    {
+    }
+
+    public virtual async Task<IViewComponentResult> InvokeAsync()
+    {
+        return View("~/Components/NotificationsOffcanvasWidget/Default.cshtml",
+            new NotificationsOffcanvasWidgetViewModel(Options));
+    }
+}

src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/NotificationsOffcanvasWidgetViewModel.cs

@@ -0,0 +1,13 @@
+using EasyAbp.ProcessManagement.Web.Options;
+
+namespace EasyAbp.ProcessManagement.Web.Components.NotificationsOffcanvasWidget;
+
+public class NotificationsOffcanvasWidgetViewModel
+{
+    public ProcessManagementWebOptions Options { get; }
+
+    public NotificationsOffcanvasWidgetViewModel(ProcessManagementWebOptions options)
+    {
+        Options = options;
+    }
+}

src/EasyAbp.ProcessManagement.Web/Components/NotificationsToolbarItemWidget/Default.cshtml

@@ -0,0 +1,10 @@
+@using EasyAbp.ProcessManagement.Localization
+@using Microsoft.AspNetCore.Mvc.Localization
+@inject IHtmlLocalizer<ProcessManagementResource> L
+@model EasyAbp.ProcessManagement.Web.Components.NotificationsToolbarItemWidget.NotificationsToolbarItemWidgetViewModel
+
+<div class="dropdown">
+    <a class="nav-link notifications-toolbar-item" data-bs-toggle="offcanvas" href="#notificationsOffcanvas" role="button" aria-controls="notificationsOffcanvas">
+        <i class="fas fa-bell"></i> @Model.UnreadCount
+    </a>
+</div>

src/EasyAbp.ProcessManagement.Web/Components/NotificationsWidget/NotificationsWidgetViewComponent.cs → src/EasyAbp.ProcessManagement.Web/Components/NotificationsToolbarItemWidget/NotificationsToolbarItemWidgetViewComponent.cs

@@ -4,18 +4,17 @@
 using Volo.Abp.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 
-namespace EasyAbp.ProcessManagement.Web.Components.NotificationsWidget;
+namespace EasyAbp.ProcessManagement.Web.Components.NotificationsToolbarItemWidget;
 
 [Widget(
     AutoInitialize = true,
-    RefreshUrl = "/Widgets/ProcessManagement/Notifications",
-    ScriptFiles = ["/Components/NotificationsWidget/Default.js"]
+    RefreshUrl = "/Widgets/ProcessManagement/NotificationsToolbarItem"
 )]
-public class NotificationsWidgetViewComponent : AbpViewComponent
+public class NotificationsToolbarItemWidgetViewComponent : AbpViewComponent
 {
     private readonly NotificationCountCache _notificationCountCache;
 
-    public NotificationsWidgetViewComponent(NotificationCountCache notificationCountCache)
+    public NotificationsToolbarItemWidgetViewComponent(NotificationCountCache notificationCountCache)
     {
         _notificationCountCache = notificationCountCache;
     }
@@ -24,7 +23,7 @@ public virtual async Task<IViewComponentResult> InvokeAsync()
     {
         var notificationCount = await _notificationCountCache.GetOrAddAsync();
 
-        return View("~/Components/NotificationsWidget/Default.cshtml",
-            new NotificationsWidgetViewModel(notificationCount));
+        return View("~/Components/NotificationsToolbarItemWidget/Default.cshtml",
+            new NotificationsToolbarItemWidgetViewModel(notificationCount));
     }
 }

src/EasyAbp.ProcessManagement.Web/Components/NotificationsWidget/NotificationsWidgetViewModel.cs → src/EasyAbp.ProcessManagement.Web/Components/NotificationsToolbarItemWidget/NotificationsToolbarItemWidgetViewModel.cs

@@ -1,17 +1,17 @@
-namespace EasyAbp.ProcessManagement.Web.Components.NotificationsWidget;
+namespace EasyAbp.ProcessManagement.Web.Components.NotificationsToolbarItemWidget;
 
-public class NotificationsWidgetViewModel
+public class NotificationsToolbarItemWidgetViewModel
 {
     /// <summary>
     /// 0~99 unread notifications.
     /// </summary>
     public int UnreadCount { get; set; }
 
-    public NotificationsWidgetViewModel()
+    public NotificationsToolbarItemWidgetViewModel()
     {
     }
 
-    public NotificationsWidgetViewModel(int unreadCount)
+    public NotificationsToolbarItemWidgetViewModel(int unreadCount)
     {
         UnreadCount = unreadCount;
     }

src/EasyAbp.ProcessManagement.Web/Components/Toolbar/Notifications/Default.cshtml

@@ -1,3 +1,12 @@
 <div id="ToolbarNotificationsWidgetArea">
-    @await Component.InvokeAsync("NotificationsWidget")
-</div>
+    @await Component.InvokeAsync("NotificationsToolbarItemWidget")
+</div>
+
+<script>
+    setInterval(function () {
+        let widgetManager = new abp.WidgetManager({
+            wrapper: '#ToolbarNotificationsWidgetArea'
+        });
+        widgetManager.refresh();
+    }, 5000);
+</script>

src/EasyAbp.ProcessManagement.Web/Controllers/ProcessManagementWidgetsController.cs

@@ -7,9 +7,9 @@ namespace EasyAbp.ProcessManagement.Web.Controllers;
 public class ProcessManagementWidgetsController : AbpController
 {
     [HttpGet]
-    [Route("Notifications")]
-    public IActionResult Notifications()
+    [Route("NotificationsToolbarItem")]
+    public IActionResult NotificationsToolbarItem()
     {
-        return ViewComponent("NotificationsWidget");
+        return ViewComponent("NotificationsToolbarItemWidget");
     }
 }