Display average rating and total ratings in UI

Added 'Average Rating' and 'Total Ratings' labels to localization and updated the rating component to show average rating and total ratings in the modal and main view. Calculated average rating in the view component and passed it to the view model. Removed undo rating functionality and related UI/JS code for a simplified rating experience.

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json

@@ -3,6 +3,7 @@
   "texts": {
     "AddSubMenuItem": "Add Sub Menu Item",
     "AreYouSure": "Are You Sure?",
+    "AverageRating": "Average Rating",
     "BlogDeletionConfirmationMessage": "The blog '{0}' will be deleted. Are you sure?",
     "BlogFeatureNotAvailable": "This feature is not available now. Enable with 'GlobalFeatureManager' to use it.",
     "BlogId": "Blog",
@@ -168,6 +169,7 @@
     "Text": "Text",
     "ThankYou": "Thank you",
     "Title": "Title",
+    "TotalRatings": "Total Ratings",
     "Undo": "Undo",
     "Update": "Update",
     "UpdatePreferenceSuccessMessage": "Your preferences have been saved.",

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml

@@ -11,13 +11,7 @@
       
             @if (CurrentUser.IsAuthenticated)
             {
-                @if (!Model.IsReadOnly && Model.CurrentRating != null)
-                {
-                    <a href="#" class="rating-undo-link text-decoration-none">
-                        <small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
-                    </a>
-                }
-                if (Model.Ratings != null)
+                @if (Model.Ratings != null)
                 {
                     <a href="#" class="text-muted ms-1 text-decoration-none" data-bs-toggle="modal" data-bs-target="#ratingDetail">
                         <i class="far fa-question-circle"></i>
@@ -31,6 +25,11 @@
                                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                 </div>
                                 <div class="modal-body">
+                                    <div class="text-center mb-3">
+                                        <h4>@L["AverageRating"]: @Model.AverageRating.ToString("F1")</h4>
+                                        <small class="text-muted">(@Model.TotalRating @L["TotalRatings"])</small>
+                                    </div>
+                                    <hr />
                                     <div class="row text-center">
                                         @foreach (var rating in Model.Ratings)
                                         {
@@ -49,13 +48,14 @@
                     </div>
                 }
 
-                <small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + "  " : 0 + "")</small>
+                <small class="live-rating text-center d-inline-block" style="width: 32px">@Model.AverageRating.ToString("F1")</small>
 
-                <span class="my-rating text-dark p-1" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)" data-readonly="@Model.IsReadOnly">
+                <span class="my-rating text-dark p-1" data-rating="@(Model.CurrentRating ?? 0)" data-readonly="@Model.IsReadOnly">
                 </span>
             }
             else
             {
+                <small class="live-rating text-center d-inline-block" style="width: 32px">@Model.AverageRating.ToString("F1")</small>
                 <span class="my-rating text-dark p-1" data-authenticated="True" data-bs-toggle="popover" data-bs-placement="right" data-html="true" data-content="<div class='text-center'><div class='d-grid gap-2'><a href='@Model.LoginUrl' class='btn btn-primary'>@L["LoginToRate"]</a></div></div>"></span>
                 <span class="rating-login"></span>
             }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs

@@ -35,6 +35,7 @@ public class RatingViewComponent : AbpViewComponent
     {
         var ratings = await RatingPublicAppService.GetGroupedStarCountsAsync(entityType, entityId);
         var totalRating = ratings.Sum(x => x.Count);
+        var averageRating = totalRating > 0 ? (double)ratings.Sum(x => x.StarCount * x.Count) / totalRating : 0;
 
         short? currentUserRating = null;
         if (CurrentUser.IsAuthenticated)
@@ -53,6 +54,7 @@ public class RatingViewComponent : AbpViewComponent
             Ratings = ratings,
             CurrentRating = currentUserRating,
             TotalRating = totalRating,
+            AverageRating = averageRating,
             IsReadOnly = isReadOnly
         };
 
@@ -74,5 +76,7 @@ public class RatingViewModel
 
     public int TotalRating { get; set; }
 
+    public double AverageRating { get; set; }
+
     public bool IsReadOnly { get; set; }
 }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js

@@ -16,24 +16,22 @@
             $widget.find(".my-rating").each(function () {
                     var authenticated = $(this).attr("data-authenticated");
                     var readonly = $(this).attr("data-readonly");
+                    var currentRating = parseInt($(this).attr("data-rating")) || 0;
+                    var $liveRating = $widget.find(".live-rating");
+                    var averageRating = $liveRating.text();
 
                     $(this).starRating({
-                        initialRating: 0,
+                        initialRating: currentRating,
                         starSize: 16,
                         emptyColor: '#eee',
                         hoverColor: '#ffc107',
                         activeColor: '#ffc107',
                         useGradient: false,
                         strokeWidth: 0,
-                        disableAfterRate: true,
+                        disableAfterRate: false,
                         useFullStars: true,
                         readOnly: authenticated === "True" || readonly === "True",
-                        onHover: function (currentIndex, currentRating, $el) {
-                            $widget.find(".live-rating").text(currentIndex);
-                        },
-                        onLeave: function (currentIndex, currentRating, $el) {
-                            $widget.find(".live-rating").text(currentRating);
-                        },
+
                         callback: function (currentRating, $el) {
                             volo.cmsKit.public.ratings.ratingPublic.create(
                                 $ratingArea.attr("data-entity-type"),
@@ -50,28 +48,8 @@
             );
         }
 
-        function registerUndoLink() {
-            $widget.find(".rating-undo-link").each(function () {
-                $(this).on('click', '', function (e) {
-                    e.preventDefault();
-
-                    abp.message.confirm(l("RatingUndoMessage"), function (ok) {
-                        if (ok) {
-                            volo.cmsKit.public.ratings.ratingPublic.delete(
-                                $ratingArea.attr("data-entity-type"),
-                                $ratingArea.attr("data-entity-id")
-                            ).then(function () {
-                                widgetManager.refresh($widget);
-                            });
-                        }
-                    })
-                });
-            });
-        }
-
         function init() {
             registerCreateOfNewRating();
-            registerUndoLink();
         }
 
         return {