Skip to content

Commit

Permalink
Changed book forms and book admin UI options
Browse files Browse the repository at this point in the history
  • Loading branch information
@sethpulsipher
sethpulsipher committed Nov 20, 2024
1 parent cb4d55e commit 1749f59
Show file tree
Hide file tree
Showing 11 changed files with 296 additions and 100 deletions.
6 changes: 3 additions & 3 deletions BookStoreApp.Blazor.Server.UI/Components/BackButton.razor
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<button type="button" @onclick="GoBack" class="btn">
<button type="button" @onclick="GoBack" class="btn absolute">
<span class="oi oi-arrow-left" aria-hidden="true"></span>
</button>

@code {
@inject NavigationManager navManager
[Inject] NavigationManager NavManager { get; set; }


[Parameter]
public string backLink {get; set;}

void GoBack()
{
navManager.NavigateTo(backLink);
NavManager.NavigateTo(backLink);
}
}
14 changes: 7 additions & 7 deletions BookStoreApp.Blazor.Server.UI/Components/SubmitButton.razor
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@

<MudButton Disabled="@loadingVar" OnClick="Loading" ButtonType="ButtonType.Submit" Variant="Variant.Filled" Class="bg-primary text-white">
@if (loadingVar)
<MudButton Disabled="@IsLoading" OnClick="Loading" ButtonType="ButtonType.Submit" Variant="Variant.Filled" Class="bg-primary text-white">
@if (IsLoading)
{
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
}
else
{
<MudText>@text</MudText>
<MudText>@Text</MudText>
}
</MudButton>

@code {
[Parameter]
public bool loadingVar { get; set; } = false;
public bool IsLoading { get; set; } = false;
[Parameter]
public string text { get; set; } = "Submit";
public string Text { get; set; } = "Submit";
[Parameter]
public Color buttonColor { get; set; } = Color.Primary;
public Color ButtonColor { get; set; } = Color.Primary;

void Loading()
{
loadingVar = true;
IsLoading = true;
}
}
130 changes: 80 additions & 50 deletions BookStoreApp.Blazor.Server.UI/Pages/Books/Create.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,99 @@

<PageTitle>New Book</PageTitle>

<div class="container">
<div class="row row-cols-auto">
<BackButton backLink="/books/"></BackButton>
<BackButton backLink="/books/"></BackButton>

<div class="container mt-4">
<div class="row mb-4 text-center">
<h3>Add New Book</h3>
</div>

<EditForm Model="BookModel" OnValidSubmit="BookCreateHandler">
<EditForm Model="BookModel" OnValidSubmit="BookCreateHandler" class="needs-validation">
<DataAnnotationsValidator />
<ValidationSummary />

<div class="row">
<label class="form-label" for="title">Title</label>
<InputText class="form-control" @bind-Value="BookModel.Title" id="title" />
<ValidationMessage For="@(() => BookModel.Title)" />
</div>
<div class="row g-4">
<!-- Image Upload Section -->
<div class="col-md-4 d-flex flex-column">
<!-- Image Placeholder -->
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
<label class="form-label border w-75 text-center" for="photo">
<img src="@img" class="img-thumbnail w-100 h-100" />
</label>
</div>

<div class="row">
<label class="form-label" for="isbn">ISBN</label>
<InputText class="form-control" @bind-Value="BookModel.Isbn" id="isbn" />
<ValidationMessage For="@(() => BookModel.Isbn)" />
</div>
<!-- File Input at the Bottom -->
<div class="mt-auto text-center">
<InputFile class="form-control w-auto d-inline-block" OnChange="FileSelectionHandler" id="photo" />
<p class="text-danger small mt-2">@UploadFileWarning</p>
</div>
</div>

<div class="row">
<label class="form-label" for="price">Price</label>
<InputNumber class="form-control" @bind-Value="BookModel.Price" id="price" />
<ValidationMessage For="@(() => BookModel.Price)" />
</div>
<!-- Form Fields Section -->
<div class="col-md-7">
<div class="row g-3">
<!-- Title -->
<div class="col-md-6">
<label class="form-label" for="title">Title</label>
<InputText class="form-control" @bind-Value="BookModel.Title" id="title" />
<ValidationMessage For="@(() => BookModel.Title)" />
</div>

<div class="row">
<label class="form-label" for="year">Year</label>
<InputNumber class="form-control" @bind-Value="BookModel.Year" id="year" />
<ValidationMessage For="@(() => BookModel.Year)" />
</div>
<!-- ISBN -->
<div class="col-md-6">
<label class="form-label" for="isbn">ISBN</label>
<InputText class="form-control" @bind-Value="BookModel.Isbn" id="isbn" />
<ValidationMessage For="@(() => BookModel.Isbn)" />
</div>

<div class="row">
<label class="form-label" for="summary">Summary</label>
<InputTextArea class="form-control" @bind-Value="BookModel.Summary" id="summary" />
<ValidationMessage For="@(() => BookModel.Summary)" />
</div>
<!-- Price -->
<div class="col-md-6">
<label class="form-label" for="price">Price</label>
<InputNumber class="form-control" @bind-Value="BookModel.Price" id="price" />
<ValidationMessage For="@(() => BookModel.Price)" />
</div>

<div class="row">
<label class="form-label" for="author">Author</label>
<InputSelect class="form-control" @bind-Value="BookModel.AuthorId" id="author">
<option value="">-- Select Author --</option>
@foreach (var author in Authors)
{
<option value="@author.Id">@author.FirstName @author.LastName</option>
}
</InputSelect>
<ValidationMessage For="@(() => BookModel.AuthorId)" />
</div>
<!-- Year -->
<div class="col-md-6">
<label class="form-label" for="year">Year</label>
<InputNumber class="form-control" @bind-Value="BookModel.Year" id="year" />
<ValidationMessage For="@(() => BookModel.Year)" />
</div>

<div class="row">
<label class="form-label" for="photo">Book Cover Photo</label>
<!-- Summary -->
<div class="col-12">
<label class="form-label" for="summary">Summary</label>
<InputTextArea class="form-control" @bind-Value="BookModel.Summary" id="summary" rows="3" />
<ValidationMessage For="@(() => BookModel.Summary)" />
</div>

<InputFile class="form-control" OnChange="FileSelectionHandler" id="photo" />
<img src="@img" width="100" heigth="100" class="img-thumbnail" />
<p class="text-danger">@UploadFileWarning</p>
<!-- Author -->
<div class="col-12">
<label class="form-label" for="author">Author</label>
<InputSelect class="form-control" @bind-Value="BookModel.AuthorId" id="author">
<option value="">-- Select Author --</option>
@foreach (var author in Authors)
{
<option value="@author.Id">
@author.FirstName
@author.LastName
</option>
}
</InputSelect>
<ValidationMessage For="@(() => BookModel.AuthorId)" />
</div>
</div>
<!-- Submit Button -->
<div class="row mt-5">
<div class="col text-center">
<button type="submit" class="btn btn-primary">
<span class="oi oi-plus me-1" aria-hidden="true"></span> Add Book
</button>
</div>
</div>
</div>
</div>

<button type="submit" class="btn btn-primary">
<span class="oi oi-plus" aria-hidden="true"></span> Add Book
</button>

</EditForm>
</div>


15 changes: 9 additions & 6 deletions BookStoreApp.Blazor.Server.UI/Pages/Books/Create.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
using BookStoreApp.Blazor.Server.UI.Services.Author;
using BookStoreApp.Blazor.Server.UI.Services.Base;
using BookStoreApp.Blazor.Server.UI.Services.Book;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

Expand All @@ -13,10 +12,11 @@ public partial class Create
[Inject] IAuthorService authorService { get; set; }
[Inject] NavigationManager navManager { get; set; }


private BookCreateDto BookModel = new();
private List<AuthorReadOnlyDto> Authors = new();

private string AcceptedFileFormats = "image/png,image/jpg,image/webp";

Check warning on line 18 in BookStoreApp.Blazor.Server.UI/Pages/Books/Create.razor.cs

View workflow job for this annotation

GitHub Actions / build 

The field 'Create.AcceptedFileFormats' is assigned but its value is never used

Check warning on line 18 in BookStoreApp.Blazor.Server.UI/Pages/Books/Create.razor.cs

View workflow job for this annotation

GitHub Actions / build 

The field 'Create.AcceptedFileFormats' is assigned but its value is never used

private string UploadFileWarning = string.Empty;
private string img = string.Empty;
private long maxFileSize = 1024 * 1024 * 5;
Expand All @@ -38,10 +38,9 @@ private async Task BookCreateHandler()
BackToList();
}
}

private async Task FileSelectionHandler(InputFileChangeEventArgs e)
private async Task FileSelectionHandler(InputFileChangeEventArgs eventArgs)
{
var file = e.File;
var file = eventArgs.File;
if (file != null)
{
if (file.Size > maxFileSize)
Expand All @@ -59,12 +58,16 @@ private async Task FileSelectionHandler(InputFileChangeEventArgs e)

var byteArray = new byte[file.Size];
await file.OpenReadStream().ReadAsync(byteArray);

string imageType = file.ContentType;
string base64string = Convert.ToBase64String(byteArray);

// Populate DTO
BookModel.ImageData = base64string;
BookModel.ImageName = file.Name;
img = $"data:{imageType}; base64, {base64string}";

// img preview
img = $"data:{imageType};base64,{base64string}";
}
}

Expand Down
74 changes: 73 additions & 1 deletion BookStoreApp.Blazor.Server.UI/Pages/Books/Details.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<PageTitle>Book Details</PageTitle>

<div class="container">
@*<div class="container">
<div class="row row-cols-auto">
<BackButton backLink="/books/"></BackButton>
Expand Down Expand Up @@ -58,6 +58,78 @@
</AuthorizeView>
</EditForm>
</div>*@
<BackButton backLink="/books/"></BackButton>

<div class="container mt-4">
<div class="row mb-4 text-center">
<h3>Details</h3>
</div>

<EditForm Model="BookModel">
<div class="row g-4">

<div class="col-md-4 d-flex flex-column">
<!-- Image Placeholder -->
<div class="flex-grow-1 d-flex justify-content-center align-items-center">
<label class="form-label border w-75 text-center" for="photo">
<img src="@BookModel.Image" class="img-thumbnail w-100 h-100" />
</label>
</div>
</div>

<!-- Form Fields Section -->
<div class="col-md-7">
<div class="row g-3">
<!-- Title -->
<div class="col-md-6">
<label class="form-label" for="title">Title</label>
<input class="form-control" placeholder="@BookModel.Title" id="title" disabled/>
</div>

<!-- ISBN -->
<div class="col-md-6">
<label class="form-label" for="isbn">ISBN</label>
<input class="form-control" placeholder="@BookModel.Isbn" id="isbn" disabled />
</div>

<!-- Price -->
<div class="col-md-6">
<label class="form-label" for="price">Price</label>
<input class="form-control" placeholder="@BookModel.Price" id="price" disabled/>
</div>

<!-- Year -->
<div class="col-md-6">
<label class="form-label" for="year">Year</label>
<input class="form-control" placeholder="@BookModel.Year" id="year" disabled />
</div>

<!-- Summary -->
<div class="col-12">
<label class="form-label" for="summary">Summary</label>
<textarea class="form-control" id="summary" rows="3" disabled>@BookModel.Summary</textarea>
</div>

<!-- Author -->
<div class="col-12">
<label class="form-label" for="author">Author</label>
<input class="form-control" placeholder="@BookModel.AuthorName" id="author" disabled />
</div>
</div>
<AuthorizeView Roles="Administrator" Context="bookContext">
<!-- Edit Button -->
<div class="row mt-4">
<div class="col text-center">
<button @onclick="GoToEdit" class="btn btn-warning">
<span class="oi oi-pencil" aria-hidden="true"></span> Edit Book
</button>
</div>
</div>
</AuthorizeView>
</div>
</div>
</EditForm>
</div>

Expand Down
Loading

0 comments on commit 1749f59

Please sign in to comment.