From aae61ad6d66ebf6191dd4dcfb4e23d30bd680a4e Mon Sep 17 00:00:00 2001
From: Enis Necipoglu <iletisim@enisnecipoglu.com>
Date: Tue, 28 Mar 2023 16:43:49 +0300
Subject: [PATCH] Convert Create/Edit modals to page

---
 .../Acme.BookStore.Blazor/Pages/Books.razor   | 88 +++----------------
 .../Pages/CreateBook.razor                    | 77 ++++++++++++++++
 .../Pages/CreateBook.razor.cs                 | 55 ++++++++++++
 .../Pages/EditBook.razor                      | 76 ++++++++++++++++
 .../Pages/EditBook.razor.cs                   | 69 +++++++++++++++
 5 files changed, 290 insertions(+), 75 deletions(-)
 create mode 100644 BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/CreateBook.razor
 create mode 100644 BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/CreateBook.razor.cs
 create mode 100644 BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/EditBook.razor
 create mode 100644 BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/EditBook.razor.cs

diff --git a/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/Books.razor b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/Books.razor
index 82152dc884..a4190fdf78 100644
--- a/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/Books.razor
+++ b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/Books.razor
@@ -10,6 +10,7 @@
 @using Volo.Abp.AspNetCore.Components.Web
 @inject IStringLocalizer<BookStoreResource> L
 @inject AbpBlazorMessageLocalizerHelper<BookStoreResource> LH
+@inject NavigationManager NavigationManager
 @inherits AbpCrudPageBase<IBookAppService, BookDto, Guid, PagedAndSortedResultRequestDto, CreateUpdateBookDto>
 
 <Card>
@@ -21,8 +22,8 @@
             <Column ColumnSize="ColumnSize.IsAuto">
                 @if (HasCreatePermission)
                 {
-                    <Button Color="Color.Primary"
-                            Clicked="OpenCreateModalAsync">
+                    <Button Color="Color.Primary" Type="ButtonType.Link"
+                        To="books/new">
                         @L["NewBook"]
                     </Button>
                 }
@@ -43,8 +44,8 @@
                         <EntityActions TItem="BookDto" EntityActionsColumn="@EntityActionsColumn">
                             <EntityAction TItem="BookDto"
                                           Text="@L["Edit"]"
-                                          Visible=HasUpdatePermission   
-                                          Clicked="() => OpenEditModalAsync(context)" />
+                                          Visible=HasUpdatePermission
+                                          Clicked="() => GoToEditPage(context)" />
                             <EntityAction TItem="BookDto"
                                           Text="@L["Delete"]"
                                           Visible=HasDeletePermission
@@ -89,74 +90,6 @@
     </CardBody>
 </Card>
 
-<Modal @ref="@CreateModal">
-    <ModalBackdrop />
-    <ModalContent IsCentered="true">
-        <Form>
-            <ModalHeader>
-                <ModalTitle>@L["NewBook"]</ModalTitle>
-                <CloseButton Clicked="CloseCreateModalAsync" />
-            </ModalHeader>
-            <ModalBody>
-                <Validations @ref="@CreateValidationsRef" Model="@NewEntity" ValidateOnLoad="false">
-                    <Validation MessageLocalizer="@LH.Localize">
-                        <Field>
-                            <FieldLabel>@L["Author"]</FieldLabel>
-                            <Select TValue="Guid" @bind-SelectedValue="@NewEntity.AuthorId">
-                                @foreach (var author in authorList)
-                                {
-                                    <SelectItem TValue="Guid" Value="@author.Id">
-                                        @author.Name
-                                    </SelectItem>
-                                }
-                            </Select>
-                        </Field>
-                        <Field>
-                            <FieldLabel>@L["Name"]</FieldLabel>
-                            <TextEdit @bind-Text="@NewEntity.Name">
-                                <Feedback>
-                                    <ValidationError />
-                                </Feedback>
-                            </TextEdit>
-                        </Field>
-                    </Validation>
-                    <Field>
-                        <FieldLabel>@L["Type"]</FieldLabel>
-                        <Select TValue="BookType" @bind-SelectedValue="@NewEntity.Type">
-                            @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
-                            {
-                                <SelectItem TValue="BookType" Value="@((BookType) bookTypeValue)">
-                                    @L[$"Enum:BookType.{bookTypeValue}"]
-                                </SelectItem>
-                            }
-                        </Select>
-                    </Field>
-                    <Field>
-                        <FieldLabel>@L["PublishDate"]</FieldLabel>
-                        <DateEdit TValue="DateTime" @bind-Date="NewEntity.PublishDate" />
-                    </Field>
-                    <Field>
-                        <FieldLabel>@L["Price"]</FieldLabel>
-                        <NumericEdit TValue="float" @bind-Value="NewEntity.Price" />
-                    </Field>
-                </Validations>
-            </ModalBody>
-            <ModalFooter>
-                <Button Color="Color.Secondary"
-                        Clicked="CloseCreateModalAsync">
-                    @L["Cancel"]
-                </Button>
-                <Button Color="Color.Primary"
-                        Type="@ButtonType.Submit"
-                        PreventDefaultOnSubmit="true"
-                        Clicked="CreateEntityAsync">
-                    @L["Save"]
-                </Button>
-            </ModalFooter>
-        </Form>
-    </ModalContent>
-</Modal>
-
 <Modal @ref="@EditModal">
     <ModalBackdrop />
     <ModalContent IsCentered="true">
@@ -243,15 +176,20 @@
         await base.OnInitializedAsync();
         authorList = (await AppService.GetAuthorLookupAsync()).Items;
     }
-    
+
     protected override async Task OpenCreateModalAsync()
     {
         if (!authorList.Any())
         {
             throw new UserFriendlyException(message: L["AnAuthorIsRequiredForCreatingBook"]);
         }
-        
+
         await base.OpenCreateModalAsync();
         NewEntity.AuthorId = authorList.First().Id;
     }
-}
+
+    protected void GoToEditPage(BookDto book)
+    {
+        NavigationManager.NavigateTo($"books/{book.Id}");
+    }
+}
\ No newline at end of file
diff --git a/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/CreateBook.razor b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/CreateBook.razor
new file mode 100644
index 0000000000..910c486924
--- /dev/null
+++ b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/CreateBook.razor
@@ -0,0 +1,77 @@
+@page "/books/new"
+@attribute [Authorize(BookStorePermissions.Books.Create)]
+@inherits BookStoreComponentBase
+
+@using Acme.BookStore.Books;
+@using Acme.BookStore.Localization;
+@using Acme.BookStore.Permissions;
+@using Microsoft.Extensions.Localization;
+@using Volo.Abp.AspNetCore.Components.Web;
+
+@inject IStringLocalizer<BookStoreResource> L
+@inject AbpBlazorMessageLocalizerHelper<BookStoreResource> LH
+@inject IBookAppService AppService
+@inject NavigationManager NavigationManager
+
+<Card>
+    <CardHeader>
+        <HeadContent>
+            <ModalTitle>@L["NewBook"]</ModalTitle>
+        </HeadContent>
+    </CardHeader>
+    <CardBody>
+        <Validations @ref="@CreateValidationsRef" Model="@NewEntity" ValidateOnLoad="false">
+            <Validation MessageLocalizer="@LH.Localize">
+                <Field>
+                    <FieldLabel>@L["Author"]</FieldLabel>
+                    <Select TValue="Guid" @bind-SelectedValue="@NewEntity.AuthorId">
+                        @foreach (var author in authorList)
+                        {
+                            <SelectItem TValue="Guid" Value="@author.Id">
+                                @author.Name
+                            </SelectItem>
+                        }
+                    </Select>
+                </Field>
+                <Field>
+                    <FieldLabel>@L["Name"]</FieldLabel>
+                    <TextEdit @bind-Text="@NewEntity.Name">
+                        <Feedback>
+                            <ValidationError />
+                        </Feedback>
+                    </TextEdit>
+                </Field>
+            </Validation>
+            <Field>
+                <FieldLabel>@L["Type"]</FieldLabel>
+                <Select TValue="BookType" @bind-SelectedValue="@NewEntity.Type">
+                    @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <SelectItem TValue="BookType" Value="@((BookType) bookTypeValue)">
+                            @L[$"Enum:BookType.{bookTypeValue}"]
+                        </SelectItem>
+                    }
+                </Select>
+            </Field>
+            <Field>
+                <FieldLabel>@L["PublishDate"]</FieldLabel>
+                <DateEdit TValue="DateTime" @bind-Date="NewEntity.PublishDate" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Price"]</FieldLabel>
+                <NumericEdit TValue="float" @bind-Value="NewEntity.Price" />
+            </Field>
+        </Validations>
+    </CardBody>
+    <CardFooter>
+        <Button Color="Color.Secondary" Type="ButtonType.Link" To="books">
+            @L["Cancel"]
+        </Button>
+        <Button Color="Color.Primary"
+                Type="@ButtonType.Submit"
+                PreventDefaultOnSubmit="true"
+                Clicked="CreateEntityAsync">
+            @L["Save"]
+        </Button>
+    </CardFooter>
+</Card>
\ No newline at end of file
diff --git a/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/CreateBook.razor.cs b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/CreateBook.razor.cs
new file mode 100644
index 0000000000..d108a5a2b5
--- /dev/null
+++ b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/CreateBook.razor.cs
@@ -0,0 +1,55 @@
+using Acme.BookStore.Books;
+using Blazorise;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Volo.Abp;
+
+namespace Acme.BookStore.Blazor.Pages;
+
+public partial class CreateBook
+{
+    protected Validations CreateValidationsRef;
+    protected CreateUpdateBookDto NewEntity = new();
+    IReadOnlyList<AuthorLookupDto> authorList = Array.Empty<AuthorLookupDto>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        authorList = (await AppService.GetAuthorLookupAsync()).Items;
+
+        if (!authorList.Any())
+        {
+            throw new UserFriendlyException(message: L["AnAuthorIsRequiredForCreatingBook"]);
+        }
+
+        NewEntity.AuthorId = authorList.First().Id;
+
+        if (CreateValidationsRef != null)
+        {
+            await CreateValidationsRef.ClearAll();
+        }
+    }
+
+    protected virtual async Task CreateEntityAsync()
+    {
+        try
+        {
+            var validate = true;
+            if (CreateValidationsRef != null)
+            {
+                validate = await CreateValidationsRef.ValidateAll();
+            }
+            if (validate)
+            {
+                await AppService.CreateAsync(NewEntity);
+                NavigationManager.NavigateTo("books");
+            }
+        }
+        catch (Exception ex)
+        {
+            await HandleErrorAsync(ex);
+        }
+    }
+}
diff --git a/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/EditBook.razor b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/EditBook.razor
new file mode 100644
index 0000000000..6028c0c45e
--- /dev/null
+++ b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/EditBook.razor
@@ -0,0 +1,76 @@
+@page "/books/{Id}"
+@attribute [Authorize(BookStorePermissions.Books.Edit)]
+@inherits BookStoreComponentBase
+@using Acme.BookStore.Books;
+@using Acme.BookStore.Localization;
+@using Acme.BookStore.Permissions;
+@using Microsoft.Extensions.Localization;
+@using Volo.Abp.AspNetCore.Components.Web;
+
+@inject IStringLocalizer<BookStoreResource> L
+@inject AbpBlazorMessageLocalizerHelper<BookStoreResource> LH
+@inject IBookAppService AppService
+@inject NavigationManager NavigationManager
+
+<Card>
+    <CardHeader>
+        <HeadContent>
+            <ModalTitle>@EditingEntity.Name</ModalTitle>
+        </HeadContent>
+    </CardHeader>
+    <CardBody>
+        <Validations @ref="@EditValidationsRef" Model="@EditingEntity" ValidateOnLoad="false">
+            <Validation MessageLocalizer="@LH.Localize">
+                <Field>
+                    <FieldLabel>@L["Author"]</FieldLabel>
+                    <Select TValue="Guid" @bind-SelectedValue="@EditingEntity.AuthorId">
+                        @foreach (var author in authorList)
+                        {
+                            <SelectItem TValue="Guid" Value="@author.Id">
+                                @author.Name
+                            </SelectItem>
+                        }
+                    </Select>
+                </Field>
+                <Field>
+                    <FieldLabel>@L["Name"]</FieldLabel>
+                    <TextEdit @bind-Text="@EditingEntity.Name">
+                        <Feedback>
+                            <ValidationError />
+                        </Feedback>
+                    </TextEdit>
+                </Field>
+            </Validation>
+            <Field>
+                <FieldLabel>@L["Type"]</FieldLabel>
+                <Select TValue="BookType" @bind-SelectedValue="@EditingEntity.Type">
+                    @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
+                    {
+                        <SelectItem TValue="BookType" Value="@((BookType) bookTypeValue)">
+                            @L[$"Enum:BookType.{bookTypeValue}"]
+                        </SelectItem>
+                    }
+                </Select>
+            </Field>
+            <Field>
+                <FieldLabel>@L["PublishDate"]</FieldLabel>
+                <DateEdit TValue="DateTime" @bind-Date="EditingEntity.PublishDate" />
+            </Field>
+            <Field>
+                <FieldLabel>@L["Price"]</FieldLabel>
+                <NumericEdit TValue="float" @bind-Value="EditingEntity.Price" />
+            </Field>
+        </Validations>
+    </CardBody>
+    <CardFooter>
+        <Button Color="Color.Secondary" Type="ButtonType.Link" To="books">
+            @L["Cancel"]
+        </Button>
+        <Button Color="Color.Primary"
+                Type="@ButtonType.Submit"
+                PreventDefaultOnSubmit="true"
+                Clicked="UpdateEntityAsync">
+            @L["Save"]
+        </Button>
+    </CardFooter>
+</Card>
\ No newline at end of file
diff --git a/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/EditBook.razor.cs b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/EditBook.razor.cs
new file mode 100644
index 0000000000..69ab654480
--- /dev/null
+++ b/BookStore-Blazor-EfCore/src/Acme.BookStore.Blazor/Pages/EditBook.razor.cs
@@ -0,0 +1,69 @@
+using Acme.BookStore.Books;
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Volo.Abp;
+
+namespace Acme.BookStore.Blazor.Pages;
+
+public partial class EditBook
+{
+    protected CreateUpdateBookDto EditingEntity = new();
+    protected Validations EditValidationsRef;
+    IReadOnlyList<AuthorLookupDto> authorList = Array.Empty<AuthorLookupDto>();
+
+    [Parameter]
+    public string Id { get; set; }
+
+    public Guid EditingEntityId { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        // Blazor can't parse Guid as route constraint currently.
+        // See https://github.com/dotnet/aspnetcore/issues/19008
+        EditingEntityId = Guid.Parse(Id);
+
+        authorList = (await AppService.GetAuthorLookupAsync()).Items;
+
+        if (!authorList.Any())
+        {
+            throw new UserFriendlyException(message: L["AnAuthorIsRequiredForCreatingBook"]);
+        }
+
+        var entityDto = await AppService.GetAsync(EditingEntityId);
+
+        EditingEntity = ObjectMapper.Map<BookDto,CreateUpdateBookDto>(entityDto);
+
+        if (EditValidationsRef != null)
+        {
+            await EditValidationsRef.ClearAll();
+        }
+    }
+
+    protected virtual async Task UpdateEntityAsync()
+    {
+        try
+        {
+            var validate = true;
+            if (EditValidationsRef != null)
+            {
+                validate = await EditValidationsRef.ValidateAll();
+            }
+            if (validate)
+            {
+                await AppService.UpdateAsync(EditingEntityId, EditingEntity);
+
+                NavigationManager.NavigateTo("books");
+            }
+        }
+        catch (Exception ex)
+        {
+            await HandleErrorAsync(ex);
+        }
+    }
+}