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 CommentingViewComponent

pull/17925/head
Enis Necipoglu 3 years ago
parent
1c5789dd6a
commit
0289e15a8f
No known key found for this signature in database GPG Key ID: 1EC55E13241E1680
3 changed files with 103 additions and 87 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. 8
      modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
  2. 6
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/CommentingViewComponent.cs
  3. 176
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml

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

@ -65,7 +65,13 @@
<abp-column size-md="_12"> <abp-column size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>()) @if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
{ {
@await Component.InvokeAsync(typeof(CommentingViewComponent), new {entityType = "quote", entityId = "1", referralLinks = new [] {"nofollow"}}) @await Component.InvokeAsync(typeof(CommentingViewComponent), new
{
entityType = "quote",
entityId = "1",
isReadOnly = false,
referralLinks = new [] {"nofollow"}
})
} }
</abp-column> </abp-column>
</abp-row> </abp-row>

6
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/CommentingViewComponent.cs
View File

@ -60,6 +60,7 @@ public class CommentingViewComponent : AbpViewComponent
public virtual async Task<IViewComponentResult> InvokeAsync( public virtual async Task<IViewComponentResult> InvokeAsync(
string entityType, string entityType,
string entityId, string entityId,
bool isReadOnly,
IEnumerable<string> referralLinks = null) IEnumerable<string> referralLinks = null)
{ {
referralLinks ??= Enumerable.Empty<string>(); referralLinks ??= Enumerable.Empty<string>();
@ -74,7 +75,8 @@ public class CommentingViewComponent : AbpViewComponent
EntityType = entityType, EntityType = entityType,
ReferralLinks = referralLinks, ReferralLinks = referralLinks,
LoginUrl = loginUrl, LoginUrl = loginUrl,
Comments = comments.OrderByDescending(i => i.CreationTime).ToList() IsReadOnly = isReadOnly,
Comments = comments.OrderByDescending(i => i.CreationTime).ToList(),
}; };
await ConvertMarkdownTextsToHtml(viewModel); await ConvertMarkdownTextsToHtml(viewModel);
@ -144,6 +146,8 @@ public class CommentingViewComponent : AbpViewComponent
public string Captcha { get; set; } public string Captcha { get; set; }
public string CaptchaImageBase64 { get; set; } public string CaptchaImageBase64 { get; set; }
public bool IsReadOnly { get; set; }
} }
} }

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

@ -20,16 +20,16 @@
@<span> @<span>
<i class="far fa-comment-alt me-2"></i> <i class="far fa-comment-alt me-2"></i>
@((string.IsNullOrWhiteSpace(author.Name) @((string.IsNullOrWhiteSpace(author.Name)
? author.UserName ? author.UserName
: author.Name + " " + author.Surname).Trim()) : author.Name + " " + author.Surname).Trim())
<small class="text-muted float-end" style="opacity: .5; font-size: 14px">@creationTime.ToString()</small> <small class="text-muted float-end" style="opacity: .5; font-size: 14px">@creationTime.ToString()</small>
</span>; </span>;
} }
@{ @{
Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) => Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) =>
@<div class="cms-comment-form-area bg-light card p-3 mx-0 @(repliedCommentId.HasValue ? "my-3" : "mt-3")" @<div class="cms-comment-form-area bg-light card p-3 mx-0 @(repliedCommentId.HasValue ? "my-3" : "mt-3")"
data-reply-id="@(repliedCommentId?.ToString() ?? "")" data-reply-id="@(repliedCommentId?.ToString() ?? "")"
style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")"> style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
<form class="cms-comment-form"> <form class="cms-comment-form">
<input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId" /> <input hidden value="@(repliedCommentId?.ToString() ?? "")" name="repliedCommentId" />
<div class="row"> <div class="row">
@ -43,31 +43,31 @@
</div> </div>
@if (CmsKitCommentOptions.Value.IsRecaptchaEnabled) @if (CmsKitCommentOptions.Value.IsRecaptchaEnabled)
{ {
<div class="volo-captcha"> <div class="volo-captcha">
<label class="form-label" for="Input_Captcha">@L["CaptchaCode"]</label> <label class="form-label" for="Input_Captcha">@L["CaptchaCode"]</label>
<div class="d-flex"> <div class="d-flex">
<div class="bd-highlight"> <div class="bd-highlight">
<img src="@Model.Input.CaptchaImageBase64" /> <img src="@Model.Input.CaptchaImageBase64" />
</div> </div>
<div class="flex-grow-1 bd-highlight"> <div class="flex-grow-1 bd-highlight">
<abp-input type="number" asp-for="@Model.Input.Captcha" suppress-label="true" class="d-inline-block" autocomplete="off" /> <abp-input type="number" asp-for="@Model.Input.Captcha" suppress-label="true" class="d-inline-block" autocomplete="off" />
</div>
<abp-input asp-for="@Model.CaptchaId" value="@Model.CaptchaOutput.Id" />
</div> </div>
<abp-input asp-for="@Model.CaptchaId" value="@Model.CaptchaOutput.Id" />
</div> </div>
} </div>
}
<div class="col-auto"> <div class="col-auto">
<div class="text-end"> <div class="text-end">
<abp-button id="submit-button" type="submit" button-type="Primary"> <abp-button id="submit-button" type="submit" button-type="Primary">
<i class="fa fa-comment-alt me-1"></i> @L["Send"] <i class="fa fa-comment-alt me-1"></i> @L["Send"]
</abp-button> </abp-button>
@if (cancelButton) @if (cancelButton)
{ {
<abp-button type="button" button-type="Light" class="reply-cancel-button" data-reply-id="@(repliedCommentId?.ToString() ?? "")"> <abp-button type="button" button-type="Light" class="reply-cancel-button" data-reply-id="@(repliedCommentId?.ToString() ?? "")">
<i class="fa fa-times me-1"></i> @L["Cancel"] <i class="fa fa-times me-1"></i> @L["Cancel"]
</abp-button> </abp-button>
} }
</div> </div>
</div> </div>
</div> </div>
@ -86,32 +86,32 @@
Func<dynamic, IHtmlContent> GetCommentActionArea(Guid id, Guid authorId, bool isReply) => Func<dynamic, IHtmlContent> GetCommentActionArea(Guid id, Guid authorId, bool isReply) =>
@<div class="inner-comment-buttons text-start"> @<div class="inner-comment-buttons text-start">
@if (!isReply) @if (!isReply)
{ {
@if (CurrentUser.IsAuthenticated) @if (CurrentUser.IsAuthenticated)
{ {
<a href="#" class="comment-links comment-reply-link btn btn-sm shadow-sm btn-primary" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.Input.EntityType}_{Model.Input.EntityId}_{id}_link")"> <a href="#" class="comment-links comment-reply-link btn btn-sm shadow-sm btn-primary" data-reply-id="@id.ToString()" id="@($"cms-comment_{Model.Input.EntityType}_{Model.Input.EntityId}_{id}_link")">
<i class="fa fa-reply mr -1"></i> @L["Reply"] <i class="fa fa-reply mr -1"></i> @L["Reply"]
</a> </a>
<a href="#" class="comment-links comment-delete-link btn btn-sm shadow-sm btn-link text-muted bg-white " data-author-id="@authorId.ToString()" data-id="@id.ToString()">
<i class="fa fa-trash mr -1"></i> @L["Delete"]
</a>
}
else
{
<a href="@(Model.Input.LoginUrl + "_" + id)" class="btn btn-sm btn-light shadow-sm">
@L["LoginToReply"]
</a>
}
}
<a href="#" class="comment-links comment-delete-link btn btn-sm shadow-sm btn-link text-muted bg-white " data-author-id="@authorId.ToString()" data-id="@id.ToString()">
<i class="fa fa-trash mr -1"></i> @L["Delete"]
</a>
}
else
{
<a href="@(Model.Input.LoginUrl + "_" + id)" class="btn btn-sm btn-light shadow-sm">
@L["LoginToReply"]
</a>
}
}
@if (authorId == CurrentUser.Id) @if (authorId == CurrentUser.Id)
{ {
<a href="#" class="comment-links comment-edit-link btn btn-sm shadow-sm btn-link text-muted bg-white" data-id="@id.ToString()"> <a href="#" class="comment-links comment-edit-link btn btn-sm shadow-sm btn-link text-muted bg-white" data-id="@id.ToString()">
<i class="fa fa-pencil mr -1 "></i> @L["Edit"] <i class="fa fa-pencil mr -1 "></i> @L["Edit"]
</a> </a>
} }
</div>; </div>;
} }
@{ @{
@ -128,26 +128,26 @@
</div> </div>
</div> </div>
<div class="mt-0"> <div class="mt-0">
<small class="text-muted float-end" >@L["MarkdownSupported"]</small> <small class="text-muted float-end">@L["MarkdownSupported"]</small>
</div> </div>
@if (CmsKitCommentOptions.Value.IsRecaptchaEnabled) @if (CmsKitCommentOptions.Value.IsRecaptchaEnabled)
{ {
var output = await Model.GenerateCaptchaAsync(); var output = await Model.GenerateCaptchaAsync();
<div class="volo-captcha"> <div class="volo-captcha">
<label class="form-label" for="Input_Captcha_@output.Id">@L["CaptchaCode"]</label> <label class="form-label" for="Input_Captcha_@output.Id">@L["CaptchaCode"]</label>
<div class="d-flex"> <div class="d-flex">
<div class="bd-highlight"> <div class="bd-highlight">
<img src="@Model.GetCaptchaImageBase64(output.ImageBytes)"/> <img src="@Model.GetCaptchaImageBase64(output.ImageBytes)" />
</div> </div>
<div class="flex-grow-1 bd-highlight"> <div class="flex-grow-1 bd-highlight">
<abp-input id="Input_Captcha_@output.Id" type="number" asp-for="@Model.Input.Captcha" suppress-label="true" class="d-inline-block" autocomplete="off"/> <abp-input id="Input_Captcha_@output.Id" type="number" asp-for="@Model.Input.Captcha" suppress-label="true" class="d-inline-block" autocomplete="off" />
</div>
<abp-input asp-for="@Model.CaptchaId" value="@output.Id"/>
</div> </div>
<abp-input asp-for="@Model.CaptchaId" value="@output.Id" />
</div> </div>
} </div>
}
<div class="col-auto"> <div class="col-auto">
<div class="text-end"> <div class="text-end">
<abp-button type="submit" button-type="Primary" size="Block"> @L["Update"] </abp-button> <abp-button type="submit" button-type="Primary" size="Block"> @L["Update"] </abp-button>
@ -183,22 +183,25 @@
@GetCommentContentArea(comment.Id, comment.Text).Invoke(null) @GetCommentContentArea(comment.Id, comment.Text).Invoke(null)
<div class="row mt-2"> @if (!Model.Input.IsReadOnly)
<div class="col"> {
<div class="my-2 "> <div class="row mt-2">
@GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null) <div class="col">
<div class="my-2 ">
@GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
</div>
</div> </div>
</div> <div class="col-auto">
<div class="col-auto"> <div class="reaction-in-comment">
<div class="reaction-in-comment"> @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>()) {
{ @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() })
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() }) }
} </div>
</div> </div>
</div> </div>
</div> @GetEditArea(comment.Id, Model.Input.RawCommentTexts[comment.Id], comment.ConcurrencyStamp).Invoke(null)
@GetEditArea(comment.Id, Model.Input.RawCommentTexts[comment.Id], comment.ConcurrencyStamp).Invoke(null) }
@if (comment.Replies.Any()) @if (comment.Replies.Any())
{ {
@ -212,23 +215,26 @@
@GetCommentContentArea(reply.Id, reply.Text).Invoke(null) @GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
<div class="row mt-2"> @if (!Model.Input.IsReadOnly)
<div class="col"> {
<div class="my-2 "> <div class="row mt-2">
@GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null) <div class="col">
<div class="my-2 ">
@GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
</div>
</div> </div>
</div> <div class="col-auto">
<div class="col-auto"> <div class="reaction-in-comment">
<div class="reaction-in-comment"> @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
@if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>()) {
{ @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = reply.Id.ToString() })
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = reply.Id.ToString() }) }
} </div>
</div> </div>
</div> </div>
</div>
@GetEditArea(reply.Id, Model.Input.RawCommentTexts[reply.Id], reply.ConcurrencyStamp).Invoke(null) @GetEditArea(reply.Id, Model.Input.RawCommentTexts[reply.Id], reply.ConcurrencyStamp).Invoke(null)
}
</div> </div>
</div> </div>
} }

Write Preview
Loading…
Cancel
Save