Added Admin-Buttons

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -1,6 +1,7 @@
 @page "/blogPost/{blogPostId}"
 @using LinkDotNet.Domain
 @using LinkDotNet.Infrastructure.Persistence
+@using LinkDotNet.Blog.Web.Shared.Admin
 @using Markdig
 @inject IRepository _repository
 @inject IJSRuntime _jsRuntime
@@ -15,20 +16,24 @@ else
     <Title Value="@BlogPost.Title"></Title>
     <OgData Title="@BlogPost.Title" AbsolutePreviewImageUrl="@BlogPost.PreviewImageUrl" Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"></OgData>
     <div class="blog-outer-box">
-    <div class="content blog-container">
-        <div class="blog-content">
-            <header>
-                <h1>@BlogPost.Title</h1></header>
-            <div class="blogpost-date">
-                @BlogPost.UpdatedDate
-            </div>
+        <div class="content blog-container">
+            <div class="blog-content">
+                <header>
+                    <h1>@BlogPost.Title</h1></header>
+                <div class="blogpost-date">
+                    @BlogPost.UpdatedDate
+                </div>
+
+                <div class="admin-action">
+                    <BlogPostAdminActions BlogPostId="@BlogPostId"></BlogPostAdminActions>
+                </div>
 
-            <div class="blogpost-content">
-                @(RenderMarkupString(BlogPost.Content))
+                <div class="blogpost-content">
+                    @(RenderMarkupString(BlogPost.Content))
+                </div>
             </div>
         </div>
     </div>
-</div>
 }
 
 @code {

LinkDotNet.Blog.Web/Shared/Admin/BlogPostAdminActions.razor

@@ -0,0 +1,36 @@
+@inject NavigationManager _navigationManager
+@inject IToastService _toastService
+
+<AuthorizeView>
+    <div class="blogpost-admin">
+        <button type="button" class="btn btn-primary" @onclick="EditBlogPost" aria-label="edit"><i class="fas fa-pen-square"></i> Edit 
+            Blogpost</button>
+        <button type="button" class="btn btn-danger" @onclick="ShowConfirmDialog" aria-label="delete"><i class="fas fa-trash"></i> Delete 
+            Blogpost</button>
+    </div>
+    <ConfirmDialog @ref="ConfirmDialog" Title="Delete Blog Post" Content="Do you want to delete the Blog Post?" OnYesPressed="@ShowMessage">
+    </ConfirmDialog>
+</AuthorizeView>
+
+@code {
+    [Parameter]
+    public string BlogPostId { get; set; }
+
+    private ConfirmDialog ConfirmDialog { get; set; }
+
+    private void ShowMessage()
+    {
+        _toastService.ShowInfo("Hey");
+    }
+
+    private void ShowConfirmDialog()
+    {
+        ConfirmDialog.Open();
+    }
+
+    private void EditBlogPost()
+    {
+        _navigationManager.NavigateTo($"update/{BlogPostId}");
+    }
+
+}

LinkDotNet.Blog.Web/Shared/ConfirmDialog.razor

@@ -0,0 +1,39 @@
+<ModalDialog @ref="ModalDialog" Title="@Title">
+    <h3>@Content</h3>
+    <div class="actions">
+        <button @onclick="OnYesButtonPressed" type="button" class="btn btn-primary">Ok</button> 
+        <button @onclick="OnNoButtonPressed" type="button" class="btn btn">Cancel</button> 
+    </div>
+</ModalDialog>
+
+@code {
+    [Parameter]
+    public string Title { get; set; }
+
+    [Parameter]
+    public string Content { get; set; }
+
+    [Parameter]
+    public EventCallback OnYesPressed { get; set; }
+
+    [Parameter]
+    public EventCallback OnNoPressed { get; set; }
+
+    private ModalDialog ModalDialog { get; set; }
+
+    private async Task OnYesButtonPressed()
+    {
+        ModalDialog.Close();
+        await OnYesPressed.InvokeAsync();
+    }
+
+    private void OnNoButtonPressed()
+    {
+        ModalDialog.Close();
+    }
+
+    public void Open()
+    {
+        ModalDialog.Open();
+    }
+}

LinkDotNet.Blog.Web/Shared/ConfirmDialog.razor.css

@@ -0,0 +1,7 @@
+.actions {
+    float:right;
+}
+
+.actions * {
+    padding-left: 5px;
+}

LinkDotNet.Blog.Web/Shared/ModalDialog.razor

@@ -0,0 +1,47 @@
+@using System.ComponentModel.DataAnnotations
+<div class="modal @_modalClass" tabindex="-1" role="dialog" style="display:@_modalDisplay; overflow-y: auto;">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">@Title</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
+                    <span aria-hidden="true"><i class="fas fa-times"></i></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                @ChildContent
+            </div>
+        </div>
+    </div>
+</div>
+
+@if (_showBackdrop)
+{
+    <div class="modal-backdrop fade show"></div>
+}
+
+@code {
+    [Parameter]
+    public string Title { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    private string _modalDisplay = "none;";
+    private string _modalClass = "";
+    private bool _showBackdrop = false;
+
+    public void Open()
+    {
+        _modalDisplay = "block;";
+        _modalClass = "show";
+        _showBackdrop = true;
+    }
+
+    public void Close()
+    {
+        _modalDisplay = "none";
+        _modalClass = "";
+        _showBackdrop = false;
+    }
+}

LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor

@@ -31,6 +31,7 @@
     </div>
   </div>
 </article>
+
 @code {
     [Parameter]
     public BlogPost BlogPost { get; set; }

LinkDotNet.Blog.Web/Shared/ShortBlogPost.razor.css

@@ -127,7 +127,7 @@
     border-radius: 3px;
 }
 .blog-card:hover .details {
-    left: 0%;
+    left: 0;
 }
 @media (min-width: 640px) {
     .blog-card {
@@ -163,4 +163,8 @@
     .blog-card.alt .details {
         padding-left: 25px;
     }
+}
+
+.admin-action {
+    padding-top: 10px;
 }