Merge pull request #24195 from abpframework/issue-#23615

Display average rating and total ratings in UI

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

@@ -5,32 +5,37 @@
 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
 @inject IHtmlLocalizer<CmsKitResource> L
 
+@{
+    var modalId = "ratingDetail_" + Model.EntityType + "_" + Model.EntityId;
+    modalId = modalId.Replace(".", "-").Replace(":", "-").Replace("/", "-").Replace(" ", "-");
+    var modalLabelId = modalId + "_label";
+}
+
 <div class="row row">
     <div class="col">
         <div class="cms-rating-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
       
             @if (CurrentUser.IsAuthenticated)
             {
-                @if (!Model.IsReadOnly && Model.CurrentRating != null)
+                @if (Model.Ratings != 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)
-                {
-                    <a href="#" class="text-muted ms-1 text-decoration-none" data-bs-toggle="modal" data-bs-target="#ratingDetail">
+                    <a href="#" class="text-muted ms-1 text-decoration-none" data-bs-toggle="modal" data-bs-target="#@modalId">
                         <i class="far fa-question-circle"></i>
                     </a>
 
-                    <div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
+                    <div class="modal fade" id="@modalId" tabindex="-1" role="dialog" aria-labelledby="@modalLabelId" aria-hidden="true">
                         <div class="modal-dialog modal-dialog-centered" role="document">
                             <div class="modal-content">
                                 <div class="modal-header">
-                                    <h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
+                                    <h5 class="modal-title" id="@modalLabelId">Rating Detail</h5>
                                     <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 +54,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 {