tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add readonly support to rating

pull/17925/head
Enis Necipoglu 3 years ago
parent
2e29d19489
commit
1c5789dd6a
No known key found for this signature in database GPG Key ID: 1EC55E13241E1680
4 changed files with 59 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
  2. 91
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
  3. 7
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs
  4. 3
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js

7
modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
View File

@ -48,7 +48,12 @@
<abp-column size-md="_6"> <abp-column size-md="_6">
@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>()) @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
{ {
@await Component.InvokeAsync(typeof(RatingViewComponent), new {entityType = "quote", entityId = "1"}) @await Component.InvokeAsync(typeof(RatingViewComponent), new
{
entityType = "quote",
entityId = "1",
isReadOnly = false
})
} }
</abp-column> </abp-column>
<abp-column size-md="_6"> <abp-column size-md="_6">

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

@ -6,58 +6,59 @@
@inject IHtmlLocalizer<CmsKitResource> L @inject IHtmlLocalizer<CmsKitResource> L
<div class="row row"> <div class="row row">
<div class="col"> <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}"> <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 (CurrentUser.IsAuthenticated)
{
@if (!Model.IsReadOnly && Model.CurrentRating != null)
{ {
@if (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 href="#" class="rating-undo-link text-decoration-none"> </a>
<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>
<a href="#" class="text-muted ms-1 text-decoration-none" data-bs-toggle="modal" data-bs-target="#ratingDetail"> </a>
<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="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5> <h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="row text-center"> <div class="row text-center">
@foreach (var rating in Model.Ratings) @foreach (var rating in Model.Ratings)
{ {
<div class="col"> <div class="col">
<label>@rating.StarCount @L["Star"]</label> <label>@rating.StarCount @L["Star"]</label>
<div class="bar-container"> <div class="bar-container">
<div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div> <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
</div>
<div><small class="text-muted">@rating.Count Rate(s)</small> </div>
</div> </div>
} <div><small class="text-muted">@rating.Count Rate(s)</small> </div>
</div> </div>
}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
} </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: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + " " : 0 + "")</small>
<span class="my-rating text-dark p-1" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)"> <span class="my-rating text-dark p-1" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)" data-readonly="@Model.IsReadOnly">
</span> </span>
} }
else else
{ {
<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="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> <span class="rating-login"></span>
} }
</div>
</div> </div>
</div> </div>
</div>

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

@ -31,7 +31,7 @@ public class RatingViewComponent : AbpViewComponent
CurrentUser = currentUser; CurrentUser = currentUser;
} }
public virtual async Task<IViewComponentResult> InvokeAsync(string entityType, string entityId) public virtual async Task<IViewComponentResult> InvokeAsync(string entityType, string entityId, bool isReadOnly = false)
{ {
var ratings = await RatingPublicAppService.GetGroupedStarCountsAsync(entityType, entityId); var ratings = await RatingPublicAppService.GetGroupedStarCountsAsync(entityType, entityId);
var totalRating = ratings.Sum(x => x.Count); var totalRating = ratings.Sum(x => x.Count);
@ -52,7 +52,8 @@ public class RatingViewComponent : AbpViewComponent
LoginUrl = loginUrl, LoginUrl = loginUrl,
Ratings = ratings, Ratings = ratings,
CurrentRating = currentUserRating, CurrentRating = currentUserRating,
TotalRating = totalRating TotalRating = totalRating,
IsReadOnly = isReadOnly
}; };
return View("~/Pages/CmsKit/Shared/Components/Rating/Default.cshtml", viewModel); return View("~/Pages/CmsKit/Shared/Components/Rating/Default.cshtml", viewModel);
@ -72,4 +73,6 @@ public class RatingViewModel
public short? CurrentRating { get; set; } public short? CurrentRating { get; set; }
public int TotalRating { get; set; } public int TotalRating { get; set; }
public bool IsReadOnly { get; set; }
} }

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

@ -15,6 +15,7 @@
function registerCreateOfNewRating() { function registerCreateOfNewRating() {
$widget.find(".my-rating").each(function () { $widget.find(".my-rating").each(function () {
var authenticated = $(this).attr("data-authenticated"); var authenticated = $(this).attr("data-authenticated");
var readonly = $(this).attr("data-readonly");
$(this).starRating({ $(this).starRating({
initialRating: 0, initialRating: 0,
@ -26,7 +27,7 @@
strokeWidth: 0, strokeWidth: 0,
disableAfterRate: true, disableAfterRate: true,
useFullStars: true, useFullStars: true,
readOnly: authenticated === "True", readOnly: authenticated === "True" || readonly === "True",
onHover: function (currentIndex, currentRating, $el) { onHover: function (currentIndex, currentRating, $el) {
$widget.find(".live-rating").text(currentIndex); $widget.find(".live-rating").text(currentIndex);
}, },

Write Preview
Loading…
Cancel
Save