Add filtered tags to UI

modules/cms-kit/src/Volo.CmsKit.Public.Application.Contracts/Volo/CmsKit/Public/Blogs/IBlogPostPublicAppService.cs

@@ -17,5 +17,8 @@ public interface IBlogPostPublicAppService : IApplicationService
     Task<PagedResultDto<CmsUserDto>> GetAuthorsHasBlogPostsAsync(BlogPostFilteredPagedAndSortedResultRequestDto input);
 
     Task<CmsUserDto> GetAuthorHasBlogPostAsync(Guid id);
+
     Task DeleteAsync(Guid id);
+
+    Task<string> GetTagNameAsync([NotNull] Guid tagId);
 }

modules/cms-kit/src/Volo.CmsKit.Public.Application/Volo/CmsKit/Public/Blogs/BlogPostPublicAppService.cs

@@ -12,6 +12,7 @@ using Volo.CmsKit.Blogs;
 using Volo.CmsKit.Contents;
 using Volo.CmsKit.Features;
 using Volo.CmsKit.GlobalFeatures;
+using Volo.CmsKit.Tags;
 using Volo.CmsKit.Users;
 
 namespace Volo.CmsKit.Public.Blogs;
@@ -24,12 +25,16 @@ public class BlogPostPublicAppService : CmsKitPublicAppServiceBase, IBlogPostPub
 
     protected IBlogPostRepository BlogPostRepository { get; }
 
+    protected ITagRepository TagRepository { get; }
+
     public BlogPostPublicAppService(
         IBlogRepository blogRepository,
-        IBlogPostRepository blogPostRepository)
+        IBlogPostRepository blogPostRepository,
+        ITagRepository tagRepository)
     {
         BlogRepository = blogRepository;
         BlogPostRepository = blogPostRepository;
+        TagRepository = tagRepository;
     }
 
     public virtual async Task<BlogPostCommonDto> GetAsync(
@@ -85,4 +90,11 @@ public class BlogPostPublicAppService : CmsKitPublicAppServiceBase, IBlogPostPub
 
         await BlogPostRepository.DeleteAsync(id);
     }
+
+    public async Task<string> GetTagNameAsync([NotNull] Guid tagId)
+    {
+        var tag = await TagRepository.GetAsync(tagId);
+
+        return tag.Name;
+    }
 }

modules/cms-kit/src/Volo.CmsKit.Public.HttpApi/Volo/CmsKit/Public/Blogs/BlogPostPublicController.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Threading.Tasks;
+using JetBrains.Annotations;
 using Microsoft.AspNetCore.Mvc;
 using Volo.Abp;
 using Volo.Abp.Application.Dtos;
@@ -60,4 +61,11 @@ public class BlogPostPublicController : CmsKitPublicControllerBase, IBlogPostPub
     {
         return BlogPostPublicAppService.DeleteAsync(id);
     }
+
+    [HttpGet]
+    [Route("tags/{id}")]
+    public Task<string> GetTagNameAsync([NotNull] Guid tagId)
+    {
+        return BlogPostPublicAppService.GetTagNameAsync(tagId);
+    }
 }

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

@@ -10,14 +10,14 @@
             {
                 if (Model.UrlFormat.IsNullOrWhiteSpace())
                 {
-                    <span class="badge rounded-pill bg-light text-dark px-3 py-2 cmskit-tag font-weight-normal">
+                    <span class="badge rounded-pill text-bg-secondary cmskit-tag font-weight-normal">
                         @tag.Name
                     </span>
                 }
                 else
                 {
                     var formattedUrl = Model.UrlFormat.Replace("{TagId}", tag.Id.ToString()).Replace("{TagName}", tag.Name);
-                    <a href="@formattedUrl"><span class="badge rounded-pill bg-light text-dark px-3 py-2 cmskit-tag font-weight-normal">@tag.Name</span></a>
+                    <a href="@formattedUrl"><span class="badge rounded-pill text-bg-secondary cmskit-tag font-weight-normal">@tag.Name</span></a>
                 }
             }
         }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml

@@ -10,6 +10,7 @@
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
 @using Volo.CmsKit.Contents
+@using Volo.CmsKit.Web
 @using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents
 
 @inherits CmsKitPublicPageBase
@@ -62,7 +63,7 @@
                         <div class="col-lg-8 col-md-10 mx-auto pb-4">
                             <h1 class="mt-lg-4 mt-md-3">@Model.ViewModel.Title</h1>
                             <p class="mb-lg-5 mb-md-3">
-                                <a href="/blogs/@Model.BlogSlug?authorId=@Model.ViewModel.Author.Id">
+                            <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug?authorId=@Model.ViewModel.Author.Id">
                                     <span class="font-weight-bold">@@@Model.ViewModel.Author?.UserName</span>
                                 </a>
                                 <small style="opacity:.65;">@Model.ViewModel.CreationTime</small>
@@ -89,7 +90,7 @@
                                     {
                                         entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
                                         entityId = Model.ViewModel.Id.ToString(),
-                                        urlFormat = $"/blogs/{Model.BlogSlug}?tagId={{TagId}}"
+                                        urlFormat = $"/{CmsBlogsWebConsts.BlogsRoutePrefix}/{Model.BlogSlug}?tagId={{TagId}}"
                                     })
                                 }
                             }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml

@@ -2,18 +2,19 @@
 
 @using Volo.CmsKit.Public.Web.Pages
 @using Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs
+@using Volo.CmsKit.Web
 
 @inherits CmsKitPublicPageBase
 
 @model IndexModel
 
-@section styles{
+@section styles {
-    <abp-style src="/Pages/Public/CmsKit/Blogs/index.css"/>
+    <abp-style src="/Pages/Public/CmsKit/Blogs/index.css" />
 }
 
 @section scripts {
     <abp-script-bundle>
-        <abp-script src="/Pages/Public/CmsKit/Blogs/index.js"/>
+        <abp-script src="/Pages/Public/CmsKit/Blogs/index.js" />
     </abp-script-bundle>
 }
 
@@ -21,29 +22,43 @@
     const string dummyImageSource = "https://dummyimage.com/320x180/a3a3a3/fff.png";
 }
 
-<abp-row id="blogs-filter-area">
+@if (Model.AuthorId.HasValue)
-    <abp-column size="_4">
+{
-        <div class="mb-3">
+    <abp-row id="blogs-filter-area">
-            <label class="form-label" asp-for="@Model.SelectedAuthor"></label>
+        <abp-column size="_4">
+            <div class="mb-3">
+                <label class="form-label" asp-for="@Model.SelectedAuthor"></label>
 
-            <select id="AuthorSelect" asp-for="@Model.AuthorId"
+                <select id="AuthorSelect" asp-for="@Model.AuthorId"
-                class="auto-complete-select"
+                        class="auto-complete-select"
-                data-placeholder="@L["SelectAnAuthor"]"
+                        data-placeholder="@L["SelectAnAuthor"]"
-                data-allow-clear="true"
+                        data-allow-clear="true"
-                data-autocomplete-api-url="/api/cms-kit-public/blog-posts/authors"
+                        data-autocomplete-api-url="/api/cms-kit-public/blog-posts/authors"
-                data-autocomplete-display-property="userName"
+                        data-autocomplete-display-property="userName"
-                data-autocomplete-value-property="id"
+                        data-autocomplete-value-property="id"
-                data-autocomplete-items-property="items"
+                        data-autocomplete-items-property="items"
-                data-autocomplete-filter-param-name="filter">
+                        data-autocomplete-filter-param-name="filter">
+
+                    @if (Model.SelectedAuthor != null)
+                    {
+                        <option selected value="@Model.AuthorId" selected="selected">@Model.SelectedAuthor.UserName</option>
+                    }
+                </select>
+            </div>
+        </abp-column>
+    </abp-row>
+    <hr />
+}
+
+@if (Model.TagId.HasValue)
+{
+    <h2>@L["Tags"]</h2>
+        <span class="badge rounded-pill text-bg-secondary">@Model.FilteredTagName
+            <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug" class="text-bg-secondary"><i class="fa fa-close ms-1"></i></a>
+        </span>
+    <hr />
+}
 
-                @if(Model.SelectedAuthor != null)
-                {   
-                    <option selected value="@Model.AuthorId" selected="selected">@Model.SelectedAuthor.UserName</option>
-                }
-            </select>
-        </div>
-    </abp-column>
-</abp-row>
 <abp-row id="blogs-container">
     @foreach (var blog in Model.Blogs.Items)
     {
@@ -51,11 +66,11 @@
             <abp-card>
                 @if (blog.CoverImageMediaId != null)
                 {
-                    <img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'"/>
+                    <img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
                 }
                 else
                 {
-                    <img src="@(dummyImageSource)?text=@blog.Title" class="card-img-top"/>
+                    <img src="@(dummyImageSource)?text=@blog.Title" class="card-img-top" />
                 }
                 <abp-card-body class="p-4">
                     <h5>@blog.Title</h5>
@@ -65,7 +80,7 @@
                     </p>
                     <p style="min-height: 60px;">@blog.ShortDescription</p>
                     <div class="d-grid gap-2">
-                        <a href="/blogs/@Model.BlogSlug/@blog.Slug" class="btn btn-light">
+                        <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug/@blog.Slug" class="btn btn-light">
                             @L["Read"]
                         </a>
                     </div>
@@ -76,6 +91,6 @@
 </abp-row>
 <abp-row>
     <abp-column>
-        <abp-paginator model="Model.PagerModel"/>
+        <abp-paginator model="Model.PagerModel" />
     </abp-column>
 </abp-row>

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml.cs

@@ -31,6 +31,8 @@ public class IndexModel : CmsKitPublicPageModelBase
 
     public CmsUserDto SelectedAuthor { get; protected set; }
 
+    public string FilteredTagName { get; protected set; }
+
     protected IBlogPostPublicAppService BlogPostPublicAppService { get; }
 
     public IndexModel(IBlogPostPublicAppService blogPostPublicAppService)
@@ -54,7 +56,12 @@ public class IndexModel : CmsKitPublicPageModelBase
         {
             SelectedAuthor = await BlogPostPublicAppService.GetAuthorHasBlogPostAsync(AuthorId.Value);
         }
-        
+
+        if (TagId is not null)
+        {
+            FilteredTagName = await BlogPostPublicAppService.GetTagNameAsync(TagId.Value);
+        }
+
         return Page();
     }
 }