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 Start.Client.Store.Features.CreateGroup
@using Fluxor @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 @using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent @inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -7,7 +8,11 @@
@inject IDispatcher dispatch @inject IDispatcher dispatch
@inject IState<CreateBookmarkState> state @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"> <EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator /> <DataAnnotationsValidator />
@ -64,6 +69,7 @@
</div> </div>
</div> </div>
</EditForm> </EditForm>
</Body>
</Dialog> </Dialog>
@code { @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 @using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent @inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,7 +7,11 @@
@inject IDispatcher dispatch @inject IDispatcher dispatch
@inject IState<CreateContainerState> state @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"> <EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator /> <DataAnnotationsValidator />
@ -53,6 +58,7 @@
</div> </div>
</div> </div>
</EditForm> </EditForm>
</Body>
</Dialog> </Dialog>
@code { @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 @using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent @inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -7,7 +8,11 @@
@inject IDispatcher dispatch @inject IDispatcher dispatch
@inject IState<CreateGroupState> state @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"> <EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator /> <DataAnnotationsValidator />
@ -54,6 +59,7 @@
</div> </div>
</div> </div>
</EditForm> </EditForm>
</Body>
</Dialog> </Dialog>
@code { @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 @using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent @inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,9 +7,11 @@
@inject IDispatcher dispatch @inject IDispatcher dispatch
@inject IState<DeleteBookmarkState> state @inject IState<DeleteBookmarkState> state
@{ string title = $"Delete Bookmark \"{this.state.Value.BookmarkToDelete?.Title}\""; } <Dialog Active="this.state.Value.ShowDeleteBookmarkForm" OnClose="this.OnClose">
<Header>
<Dialog Title="@title" Active="this.state.Value.ShowDeleteBookmarkForm" OnClose="this.OnClose"> Delete Bookmark "@this.state.Value.BookmarkToDelete?.Title"
</Header>
<Body>
@if (this.state.Value.DeleteBookmarkErrorMessage != null) @if (this.state.Value.DeleteBookmarkErrorMessage != null)
{ {
<Alert Type="Alert.AlertType.Error"> <Alert Type="Alert.AlertType.Error">
@ -52,6 +55,7 @@
} }
</div> </div>
} }
</Body>
</Dialog> </Dialog>
@code { @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 @using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent @inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,9 +7,11 @@
@inject IDispatcher dispatch @inject IDispatcher dispatch
@inject IState<DeleteContainerState> state @inject IState<DeleteContainerState> state
@{ string title = $"Delete Container \"{this.state.Value.BookmarkContainerTitleToDelete}\""; } <Dialog Active="this.state.Value.ShowDeleteContainerForm" OnClose="this.OnDialogClose">
<Header>
<Dialog Title="@title" Active="this.state.Value.ShowDeleteContainerForm" OnClose="this.OnDialogClose"> Delete Container "@this.state.Value.BookmarkContainerTitleToDelete"
</Header>
<Body>
@if (this.state.Value.DeleteContainerErrorMessage != null) @if (this.state.Value.DeleteContainerErrorMessage != null)
{ {
<Alert Type="Alert.AlertType.Error"> <Alert Type="Alert.AlertType.Error">
@ -32,6 +35,7 @@
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button> <button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
} }
</div> </div>
</Body>
</Dialog> </Dialog>
@code { @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 @using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent @inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,9 +7,11 @@
@inject IDispatcher dispatch @inject IDispatcher dispatch
@inject IState<DeleteGroupState> state @inject IState<DeleteGroupState> state
@{ string title = $"Delete Group \"{this.state.Value.BookmarkGroupTitleToDelete}\""; } <Dialog Active="this.state.Value.ShowDeleteGroupForm" OnClose="this.OnDialogClose">
<Header>
<Dialog Title="@title" Active="this.state.Value.ShowDeleteGroupForm" OnClose="this.OnDialogClose"> Delete Group "@this.state.Value.BookmarkGroupTitleToDelete"
</Header>
<Body>
@if (this.state.Value.DeleteGroupErrorMessage != null) @if (this.state.Value.DeleteGroupErrorMessage != null)
{ {
<Alert Type="Alert.AlertType.Error"> <Alert Type="Alert.AlertType.Error">
@ -32,14 +35,17 @@
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button> <button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
} }
</div> </div>
</Body>
</Dialog> </Dialog>
@code { @code {
public void OnDialogClose() { public void OnDialogClose()
{
this.dispatch.Dispatch(new HideDeleteGroupFormAction()); this.dispatch.Dispatch(new HideDeleteGroupFormAction());
} }
public void OnConfirmDelete() { public void OnConfirmDelete()
{
this.dispatch.Dispatch(new SubmitDeleteGroupFormAction( this.dispatch.Dispatch(new SubmitDeleteGroupFormAction(
this.state.Value.BookmarkGroupIdToDelete)); 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 @ChildContent
</div> </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 "/" @page "/"
@using Start.Client.Components @using Start.Client.Components
@using Start.Client.Components.Shared
@using Start.Client.Store.State @using Start.Client.Store.State
@using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Authorization
@using Fluxor @using Fluxor

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

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