Add filtered tags to UI

3 years ago · 1f2e5e74cf
7 changed files with 80 additions and 34 deletions
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Application.Contracts/Volo/CmsKit/Public/Blogs/IBlogPostPublicAppService.cs
+++ b/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);
 }
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Application/Volo/CmsKit/Public/Blogs/BlogPostPublicAppService.cs
+++ b/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;
+    }
 }
--- a/modules/cms-kit/src/Volo.CmsKit.Public.HttpApi/Volo/CmsKit/Public/Blogs/BlogPostPublicController.cs
+++ b/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);
+    }
 }
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
+++ b/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>
                }
            }
        }
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
+++ b/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}}"
                                    })
                                }
                            }
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
+++ b/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{
-    <abp-style src="/Pages/Public/CmsKit/Blogs/index.css"/>
+@section styles {
+    <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">
-    <abp-column size="_4">
-        <div class="mb-3">
-            <label class="form-label" asp-for="@Model.SelectedAuthor"></label>
+@if (Model.AuthorId.HasValue)
+{
+    <abp-row id="blogs-filter-area">
+        <abp-column size="_4">
+            <div class="mb-3">
+                <label class="form-label" asp-for="@Model.SelectedAuthor"></label>

-            <select id="AuthorSelect" asp-for="@Model.AuthorId"
-                class="auto-complete-select"
-                data-placeholder="@L["SelectAnAuthor"]"
-                data-allow-clear="true"
-                data-autocomplete-api-url="/api/cms-kit-public/blog-posts/authors"
-                data-autocomplete-display-property="userName"
-                data-autocomplete-value-property="id"
-                data-autocomplete-items-property="items"
-                data-autocomplete-filter-param-name="filter">
+                <select id="AuthorSelect" asp-for="@Model.AuthorId"
+                        class="auto-complete-select"
+                        data-placeholder="@L["SelectAnAuthor"]"
+                        data-allow-clear="true"
+                        data-autocomplete-api-url="/api/cms-kit-public/blog-posts/authors"
+                        data-autocomplete-display-property="userName"
+                        data-autocomplete-value-property="id"
+                        data-autocomplete-items-property="items"
+                        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>
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml.cs
+++ b/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();
    }
 }