Merge pull request #28 from EasyAbp/dismiss

Notification dismissing
EasyAbp · Jul 8, 2024 · 7b83f62 · 7b83f62
2 parents c081800 + da8be18
commit 7b83f62
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 7 deletions.
diff --git a/src/EasyAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/en.json b/src/EasyAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/en.json
@@ -5,6 +5,7 @@
     "Menu:ProcessManagement": "Process management",
     "More": "More",
     "Notifications": "Notifications",
+    "ClearAllNotifications": "Clear all",
     "Permission:Manage": "Manage",
     "Permission:Process": "Process",
     "Permission:ProcessManagement": "Process management",

diff --git a/...syAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/zh-Hans.json b/...syAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/zh-Hans.json
@@ -5,6 +5,7 @@
     "Menu:ProcessManagement": "流程管理",
     "More": "更多",
     "Notifications": "通知",
+    "ClearAllNotifications": "清空通知",
     "Permission:Manage": "管理",
     "Permission:Process": "流程",
     "Permission:ProcessManagement": "流程管理",

diff --git a/...syAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/zh-Hant.json b/...syAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/zh-Hant.json
@@ -5,6 +5,7 @@
     "Menu:ProcessManagement": "流程管理",
     "More": "更多",
     "Notifications": "通知",
+    "ClearAllNotifications": "清空通知",
     "Permission:Manage": "管理",
     "Permission:Process": "流程",
     "Permission:ProcessManagement": "流程管理",

diff --git a/src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.cshtml b/src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.cshtml
@@ -8,6 +8,15 @@
 </script>
 
 <style>
+    .clear-all-area {
+        height: 40px;
+    }
+    .clear-all-btn {
+        float: right;
+        padding: 0;
+        text-decoration: none;
+        color: var(--bs-offcanvas-color);
+    }
     .svg-icon {
         width: 24px;
         height: 24px;
@@ -46,7 +55,10 @@
         <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 class="offcanvas-body" style="padding-top: 0">
+        <div class="clear-all-area">
+            <button type="button" id="notification-offcanvas-clear-all-btn" class="clear-all-btn btn btn-link"><small>@L["ClearAllNotifications"]</small></button>
+        </div>
         <div id="alert-placeholder"></div>
     </div>
 </div>
diff --git a/src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.js b/src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.js
@@ -2,6 +2,8 @@
 
     abp.widgets.NotificationsOffcanvasWidget = function ($widget) {
 
+        var intervalId;
+
         function fetchAndShowAlerts() {
             easyAbp.processManagement.notifications.notification.getList({
                 fromCreationTime: new Date(abp.clock.now() - notificationLifetimeMilliseconds),
@@ -14,14 +16,23 @@
 
                 var existingAlertIds = new Map();
                 existingAlerts.each(function () {
-                    var id = $(this).data('id');
+                    var id = $(this).attr('id');
                     existingAlertIds.set(id, $(this));
                 });
 
                 res.items.forEach(function (item) {
                     if (!existingAlertIds.has(item.id)) {
                         var newAlert = createAlert(item);
-                        alertPlaceholder.append(newAlert);
+                        alertPlaceholder.append(newAlert)
+                        var newAlertNode = document.getElementById(item.id);
+                        newAlertNode.addEventListener('close.bs.alert', function () {
+                            tryClearInterval();
+                            easyAbp.processManagement.notifications.notification.dismiss({
+                                notificationIds: [$(this).attr('id')]
+                            }).always(function () {
+                                tryCreateInterval();
+                            });
+                        });
                     }
                 });
 
@@ -71,20 +82,52 @@
                     </div>
                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                 </div>
-            `).data('id', item.id);
+            `).attr('id', item.id);
         }
 
+        function tryCreateInterval() {
+            intervalId = setInterval(fetchAndShowAlerts, 5000);
+        }
+
+        function tryClearInterval() {
+            if (intervalId) clearInterval(intervalId);
+        }
+
         function init() {
             var offcanvasElement = document.getElementById('notificationsOffcanvas');
-            var intervalId;
 
             offcanvasElement.addEventListener('show.bs.offcanvas', function () {
                 fetchAndShowAlerts();
-                intervalId = setInterval(fetchAndShowAlerts, 5000);
+                tryCreateInterval();
             });
 
             offcanvasElement.addEventListener('hide.bs.offcanvas', function () {
-                if (intervalId) clearInterval(intervalId);
+                tryClearInterval();
+            });
+
+            var clearAllBtn = document.getElementById('notification-offcanvas-clear-all-btn');
+
+            clearAllBtn.addEventListener('click', function() {
+                tryClearInterval();
+                var alertPlaceholder = $('#alert-placeholder');
+                var existingAlerts = alertPlaceholder.find('.alert');
+
+                var existingAlertIds = new Map();
+                existingAlerts.each(function () {
+                    var id = $(this).attr('id');
+                    existingAlertIds.set(id, $(this));
+                });
+
+                easyAbp.processManagement.notifications.notification.dismiss({
+                    notificationIds: existingAlertIds.keys().toArray()
+                }).then(function () {
+                    existingAlertIds.forEach(function (alert, id) {
+                        alert.addClass('fade-out').one('animationend', function () {
+                            $(this).remove();
+                        });
+                    });
+                    tryCreateInterval();
+                });
             });
         }