NeilBrommer/BlazorStart
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve the Dialog component

Browse source
This commit is contained in:
Neil Brommer 2021-12-16 22:06:41 -08:00
parent ad1552e343
commit eda134c471
12 changed files with 311 additions and 264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Start/Client/Components/BookmarkContainer.razor
View file

@ -1,4 +1,5 @@
@using Start.Client.Store.State
@using Start.Client.Components.Shared
@using Start.Client.Store.State
@using Start.Client.Store.Features.CreateGroup
@using Fluxor

10
Start/Client/Components/CreateBookmark.razor
View file

@ -1,4 +1,5 @@
@using Start.Client.Store.Features.CreateBookmark
@using Start.Client.Components.Shared
@using Start.Client.Store.Features.CreateBookmark
@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -7,7 +8,11 @@
@inject IDispatcher dispatch
@inject IState<CreateBookmarkState> state
<Dialog Title="Create Bookmark" Active="this.state.Value.ShowCreateBookmarkForm" OnClose="this.OnDialogClose">
<Dialog Active="this.state.Value.ShowCreateBookmarkForm" OnClose="this.OnDialogClose">
<Header>
Create Bookmark
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@ -64,6 +69,7 @@
</div>
</div>
</EditForm>
</Body>
</Dialog>
@code {

10
Start/Client/Components/CreateContainer.razor
View file

@ -1,4 +1,5 @@
@using Start.Client.Store.Features.CreateContainer
@using Start.Client.Components.Shared
@using Start.Client.Store.Features.CreateContainer
@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,7 +7,11 @@
@inject IDispatcher dispatch
@inject IState<CreateContainerState> state
<Dialog Title="Create Container" Active="this.state.Value.ShowCreateContainerForm" OnClose="this.OnDialogClose">
<Dialog Active="this.state.Value.ShowCreateContainerForm" OnClose="this.OnDialogClose">
<Header>
Create Container
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@ -53,6 +58,7 @@
</div>
</div>
</EditForm>
</Body>
</Dialog>
@code {

10
Start/Client/Components/CreateGroup.razor
View file

@ -1,4 +1,5 @@
@using Start.Client.Store.Features.CreateGroup
@using Start.Client.Components.Shared
@using Start.Client.Store.Features.CreateGroup
@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -7,7 +8,11 @@
@inject IDispatcher dispatch
@inject IState<CreateGroupState> state
<Dialog Title="Create Bookmark Group" Active="this.state.Value.ShowCreateGroupForm" OnClose="this.OnDialogClose">
<Dialog Active="this.state.Value.ShowCreateGroupForm" OnClose="this.OnDialogClose">
<Header>
Create Bookmark Group
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@ -54,6 +59,7 @@
</div>
</div>
</EditForm>
</Body>
</Dialog>
@code {

12
Start/Client/Components/DeleteBookmark.razor
View file

@ -1,4 +1,5 @@
@using Start.Client.Store.Features.DeleteBookmark
@using Start.Client.Components.Shared
@using Start.Client.Store.Features.DeleteBookmark
@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,9 +7,11 @@
@inject IDispatcher dispatch
@inject IState<DeleteBookmarkState> state
@{ string title = $"Delete Bookmark \"{this.state.Value.BookmarkToDelete?.Title}\""; }
<Dialog Title="@title" Active="this.state.Value.ShowDeleteBookmarkForm" OnClose="this.OnClose">
<Dialog Active="this.state.Value.ShowDeleteBookmarkForm" OnClose="this.OnClose">
<Header>
Delete Bookmark "@this.state.Value.BookmarkToDelete?.Title"
</Header>
<Body>
@if (this.state.Value.DeleteBookmarkErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@ -52,6 +55,7 @@
}
</div>
}
</Body>
</Dialog>
@code {

12
Start/Client/Components/DeleteContainer.razor
View file

@ -1,4 +1,5 @@
@using Start.Client.Store.Features.DeleteContainer
@using Start.Client.Components.Shared
@using Start.Client.Store.Features.DeleteContainer
@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,9 +7,11 @@
@inject IDispatcher dispatch
@inject IState<DeleteContainerState> state
@{ string title = $"Delete Container \"{this.state.Value.BookmarkContainerTitleToDelete}\""; }
<Dialog Title="@title" Active="this.state.Value.ShowDeleteContainerForm" OnClose="this.OnDialogClose">
<Dialog Active="this.state.Value.ShowDeleteContainerForm" OnClose="this.OnDialogClose">
<Header>
Delete Container "@this.state.Value.BookmarkContainerTitleToDelete"
</Header>
<Body>
@if (this.state.Value.DeleteContainerErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@ -32,6 +35,7 @@
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
}
</div>
</Body>
</Dialog>
@code {

18
Start/Client/Components/DeleteGroup.razor
View file

@ -1,4 +1,5 @@
@using Start.Client.Store.Features.DeleteGroup
@using Start.Client.Components.Shared
@using Start.Client.Store.Features.DeleteGroup
@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,9 +7,11 @@
@inject IDispatcher dispatch
@inject IState<DeleteGroupState> state
@{ string title = $"Delete Group \"{this.state.Value.BookmarkGroupTitleToDelete}\""; }
<Dialog Title="@title" Active="this.state.Value.ShowDeleteGroupForm" OnClose="this.OnDialogClose">
<Dialog Active="this.state.Value.ShowDeleteGroupForm" OnClose="this.OnDialogClose">
<Header>
Delete Group "@this.state.Value.BookmarkGroupTitleToDelete"
</Header>
<Body>
@if (this.state.Value.DeleteGroupErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@ -32,14 +35,17 @@
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
}
</div>
</Body>
</Dialog>
@code {
public void OnDialogClose() {
public void OnDialogClose()
{
this.dispatch.Dispatch(new HideDeleteGroupFormAction());
}
public void OnConfirmDelete() {
public void OnConfirmDelete()
{
this.dispatch.Dispatch(new SubmitDeleteGroupFormAction(
this.state.Value.BookmarkGroupIdToDelete));
}

35
Start/Client/Components/Dialog.razor
View file

@ -1,35 +0,0 @@
@using Microsoft.Extensions.Logging
@inject ILogger<Dialog> logger
<div class="modal @(this.Active ? "active" : "")">
<a class="modal-overlay" @onclick="this.OnDialogClose" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<a class="btn btn-clear float-right" @onclick="this.OnClose" aria-label="Close"></a>
<div class="modal-title h5">@this.Title</div>
</div>
<div class="modal-body">
<div class="content">
@this.ChildContent
</div>
</div>
</div>
</div>
@code {
[Parameter]
public string Title { get; set; } = null!;
[Parameter]
public RenderFragment ChildContent { get; set; } = null!;
[Parameter]
public bool Active { get; set; }
[Parameter]
public EventCallback OnClose { get; set; }
public void OnDialogClose()
{
this.Active = false;
this.OnClose.InvokeAsync();
}
}

2
Start/Client/Components/Alert.razor → Start/Client/Components/Shared/Alert.razor
View file

@ -1,4 +1,4 @@
<div class="toast @AlertTypeToClass(this.Type)">
<div class="toast @AlertTypeToClass(this.Type)" role="alert">
@ChildContent
</div>

46
Start/Client/Components/Shared/Dialog.razor Normal file
View file

@ -0,0 +1,46 @@
<div class="modal @(this.Active ? "active" : "")" role="dialog">
<a class="modal-overlay" @onclick="this.OnDialogClose" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<a class="btn btn-clear float-right" @onclick="this.OnDialogClose" aria-label="Close"></a>
<div class="modal-title h5">@this.Header</div>
</div>
<div class="modal-body">
<div class="content">
@this.Body
</div>
</div>
@if (this.Footer != null)
{
<div class="modal-footer">
@this.Footer
</div>
}
</div>
</div>
@code {
[Parameter]
public RenderFragment Header { get; set; } = null!;
[Parameter]
public RenderFragment Body { get; set; } = null!;
[Parameter]
public RenderFragment? Footer { get; set; } = null;
[Parameter]
public bool Active { get; set; }
[Parameter]
public EventCallback OnClose { get; set; }
public void OnDialogClose()
{
if (this.OnClose.HasDelegate)
{
this.OnClose.InvokeAsync();
}
else
{
this.Active = false;
}
}
}

1
Start/Client/Pages/Index.razor
View file

@ -1,6 +1,7 @@
@page "/"
@using Start.Client.Components
@using Start.Client.Components.Shared
@using Start.Client.Store.State
@using Microsoft.AspNetCore.Authorization
@using Fluxor

2
Start/Client/Start.Client.csproj
View file

@ -132,6 +132,7 @@
<None Remove="Store\Features\DeleteGroup\" />
<None Remove="Store\Features\CreateBookmark\" />
<None Remove="Store\Features\DeleteBookmark\" />
<None Remove="Components\Shared\" />
</ItemGroup>
<ItemGroup>
<Content Remove="wwwroot\css\Spectre\" />
@ -151,5 +152,6 @@
<Folder Include="Store\Features\DeleteGroup\" />
<Folder Include="Store\Features\CreateBookmark\" />
<Folder Include="Store\Features\DeleteBookmark\" />
<Folder Include="Components\Shared\" />
</ItemGroup>
</Project>