Fix unread notification counter and make it visible (#17325)

OrchardCMS · Jan 9, 2025 · a2f45e5 · a2f45e5
1 parent 2d71ad4
commit a2f45e5
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 7 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/Assets/js/notification-manager.js b/src/OrchardCore.Modules/OrchardCore.Notifications/Assets/js/notification-manager.js
@@ -12,7 +12,7 @@ notificationManager = function () {
         return false;
     }
 
-    const initialize = (readUrl, wrapperSelector) => {
+    const initialize = (readUrl, unreadBadgeSelector, wrapperSelector) => {
 
         if (!readUrl) {
             console.log('No readUrl was provided.');
@@ -21,6 +21,16 @@ notificationManager = function () {
         }
 
         const reading = [];
+        let totalUnread = 0;
+        let unreadElement = null;
+
+        if (unreadBadgeSelector) {
+            unreadElement = document.querySelector(unreadBadgeSelector);
+
+            if (unreadElement) {
+                totalUnread = parseInt(unreadElement.innerText)
+            }
+        }
 
         var elements = document.getElementsByClassName('mark-notification-as-read');
 
@@ -55,6 +65,15 @@ notificationManager = function () {
                     }).then(response => response.json())
                         .then(result => {
                             if (result.updated) {
+
+                                if (unreadElement) {
+                                    if (totalUnread > 1) {
+                                        unreadElement.innerText = --totalUnread;
+                                    } else {
+                                        unreadElement.style.display = 'none';
+                                    }
+                                }
+
                                 if (wrapperSelector) {
                                     var wrapper = e.target.closest(wrapperSelector);
                                     if (wrapper) {

diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/Drivers/NotificationNavbarDisplayDriver.cs b/src/OrchardCore.Modules/OrchardCore.Notifications/Drivers/NotificationNavbarDisplayDriver.cs
@@ -42,14 +42,17 @@ public override async Task<IDisplayResult> DisplayAsync(Navbar model, BuildDispl
             .Processing<UserNotificationNavbarViewModel>(async model =>
             {
                 var userId = _httpContextAccessor.HttpContext.User.FindFirstValue(ClaimTypes.NameIdentifier);
+
                 var notifications = (await _session.Query<Notification, NotificationIndex>(x => x.UserId == userId && !x.IsRead, collection: NotificationConstants.NotificationCollection)
                     .OrderByDescending(x => x.CreatedAtUtc)
-                    .Take(_notificationOptions.TotalUnreadNotifications + 1)
+                    .Take(_notificationOptions.TotalUnreadNotifications)
                     .ListAsync()).ToList();
 
                 model.Notifications = notifications;
                 model.MaxVisibleNotifications = _notificationOptions.TotalUnreadNotifications;
-                model.TotalUnread = notifications.Count;
+                model.TotalUnread = notifications.Count < _notificationOptions.TotalUnreadNotifications
+                ? notifications.Count
+                : await _session.QueryIndex<NotificationIndex>(x => x.UserId == userId && !x.IsRead, collection: NotificationConstants.NotificationCollection).CountAsync();
 
             }).Location("Detail", "Content:9")
             .Location("DetailAdmin", "Content:9");

diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml b/src/OrchardCore.Modules/OrchardCore.Notifications/Views/UserNotificationNavbar.cshtml
@@ -26,6 +26,8 @@
                 }
 
                 <i class="fa-solid fa-bell" aria-hidden="true" data-bs-toggle="tooltip" data-bs-original-title="@title"></i>
+
+                <span class="position-absolute start-50 translate-middle badge rounded-pill text-bg-danger" id="UnreadNotificationBadge">@Model.TotalUnread</span>
             }
             else
             {
@@ -70,11 +72,15 @@
 
 <script at="Foot" asp-name="notification-manager-initializes" depends-on="notification-manager">
     (function () {
-        notificationManager.initializeContainer('@Url.RouteUrl(MarkAsReadEndpoints.RouteName, new { area = NotificationConstants.Features.Notifications }))')
+        notificationManager.initializeContainer('@Url.RouteUrl(MarkAsReadEndpoints.RouteName, new { area = NotificationConstants.Features.Notifications }))', '#UnreadNotificationBadge')
     })();
 </script>
 
 <style at="Head">
+    #UnreadNotificationBadge {
+        top: 5px;
+    }
+
     .notification-navbar {
         max-width: 20rem;
     }

diff --git a/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.js b/src/OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.js
@@ -12,12 +12,20 @@ notificationManager = function () {
     }
     return false;
   };
-  var initialize = function initialize(readUrl, wrapperSelector) {
+  var initialize = function initialize(readUrl, unreadBadgeSelector, wrapperSelector) {
     if (!readUrl) {
       console.log('No readUrl was provided.');
       return;
     }
     var reading = [];
+    var totalUnread = 0;
+    var unreadElement = null;
+    if (unreadBadgeSelector) {
+      unreadElement = document.querySelector(unreadBadgeSelector);
+      if (unreadElement) {
+        totalUnread = parseInt(unreadElement.innerText);
+      }
+    }
     var elements = document.getElementsByClassName('mark-notification-as-read');
     var _loop = function _loop(i) {
       ['click', 'mouseover'].forEach(function (evt) {
@@ -46,6 +54,13 @@ notificationManager = function () {
             return response.json();
           }).then(function (result) {
             if (result.updated) {
+              if (unreadElement) {
+                if (totalUnread > 1) {
+                  unreadElement.innerText = --totalUnread;
+                } else {
+                  unreadElement.style.display = 'none';
+                }
+              }
               if (wrapperSelector) {
                 var wrapper = e.target.closest(wrapperSelector);
                 if (wrapper) {

diff --git a/...OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.min.js b/...OrchardCore.Modules/OrchardCore.Notifications/wwwroot/Scripts/notification-manager.min.js
diff --git a/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml b/src/OrchardCore.Themes/TheTheme/Views/UserNotificationNavbar.cshtml
@@ -28,6 +28,8 @@
             }
 
             <i class="fa-solid fa-bell" aria-hidden="true" data-bs-toggle="tooltip" data-bs-original-title="@title"></i>
+
+            <span class="position-absolute start-50 translate-middle badge rounded-pill text-bg-danger" id="UnreadNotificationBadge">@Model.TotalUnread</span>
         }
         else
         {
@@ -70,11 +72,14 @@
 
 <script at="Foot" asp-name="notification-manager-initializes" depends-on="notification-manager">
     (function () {
-        notificationManager.initializeContainer('@Url.RouteUrl(MarkAsReadEndpoints.RouteName, new { area = NotificationConstants.Features.Notifications }))')
+        notificationManager.initializeContainer('@Url.RouteUrl(MarkAsReadEndpoints.RouteName, new { area = NotificationConstants.Features.Notifications }))', '#UnreadNotificationBadge')
     })();
 </script>
 
 <style at="Head">
+    #UnreadNotificationBadge {
+        top:5px;
+    }
     .notification-navbar {
         max-width: 20rem;
     }