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

106
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,63 +8,68 @@
@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">
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit"> <Header>
<DataAnnotationsValidator /> Create Bookmark
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@if (this.state.Value.CreateBookmarkErrorMessage != null) @if (this.state.Value.CreateBookmarkErrorMessage != null)
{ {
<Alert Type="Alert.AlertType.Error"> <Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateBookmarkErrorMessage @this.state.Value.CreateBookmarkErrorMessage
</Alert> </Alert>
} }
<ValidationSummary /> <ValidationSummary />
<div class="form-group"> <div class="form-group">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column col-12"> <div class="column col-12">
<label for="createBookmarkTitle">Title</label> <label for="createBookmarkTitle">Title</label>
<InputText id="createBookmarkTitle" name="createBookmarkTitle" <InputText id="createBookmarkTitle" name="createBookmarkTitle"
class="form-input" @bind-Value="this.Model.Title" /> class="form-input" @bind-Value="this.Model.Title" />
</div>
</div>
<div class="columns">
<div class="column col-12">
<label for="createBookmarkUrl">URL</label>
<input type="url" name="createBookmarkUrl" class="form-input"
@bind-value="this.Model.Url" />
</div>
</div>
<div class="columns">
<div class="column col-12">
<label for="createBookmarkNotes">Notes</label>
<InputTextArea name="createBookmarkNotes" class="form-input"
@bind-Value="this.Model.Notes" />
</div>
</div> </div>
</div> </div>
<div class="columns"> <div class="container">
<div class="column col-12"> <div class="columns">
<label for="createBookmarkUrl">URL</label> <div class="column col-12 text-right">
<input type="url" name="createBookmarkUrl" class="form-input" @if (this.state.Value.IsLoadingCreateBookmark)
@bind-value="this.Model.Url" /> {
</div> <button type="submit" disabled class="btn btn-primary loading">
</div> <i class="icon icon-plus"></i> Create
<div class="columns"> </button>
<div class="column col-12"> }
<label for="createBookmarkNotes">Notes</label> else
<InputTextArea name="createBookmarkNotes" class="form-input" {
@bind-Value="this.Model.Notes" /> <button type="submit" class="btn btn-primary">
<i class="icon icon-plus"></i> Create
</button>
}
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="container"> </EditForm>
<div class="columns"> </Body>
<div class="column col-12 text-right">
@if (this.state.Value.IsLoadingCreateBookmark)
{
<button type="submit" disabled class="btn btn-primary loading">
<i class="icon icon-plus"></i> Create
</button>
}
else
{
<button type="submit" class="btn btn-primary">
<i class="icon icon-plus"></i> Create
</button>
}
</div>
</div>
</div>
</div>
</EditForm>
</Dialog> </Dialog>
@code { @code {

88
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,53 +7,58 @@
@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">
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit"> <Header>
<DataAnnotationsValidator /> Create Container
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@if (this.state.Value.CreateContainerErrorMessage != null) @if (this.state.Value.CreateContainerErrorMessage != null)
{ {
<Alert Type="Alert.AlertType.Error"> <Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateContainerErrorMessage @this.state.Value.CreateContainerErrorMessage
</Alert> </Alert>
} }
<ValidationSummary /> <ValidationSummary />
<div class="form-group"> <div class="form-group">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column col-12"> <div class="column col-12">
<div> <div>
<label for="createBookmarkContainerTitle" class="form-label">Title</label> <label for="createBookmarkContainerTitle" class="form-label">Title</label>
<InputText id="createBookmarkContainerTitle" name="createBookmarkContainerTitle" <InputText id="createBookmarkContainerTitle" name="createBookmarkContainerTitle"
class="form-input" @bind-Value="this.Model.Title" /> class="form-input" @bind-Value="this.Model.Title" />
</div>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column col-12 text-right">
<div>
@if (this.state.Value.IsLoadingCreateContainer)
{
<button type="submit" disabled class="btn btn-primary loading">
<i class="icon icon-plus"></i> Create
</button>
}
else
{
<button type="submit" class="btn btn-primary">
<i class="icon icon-plus"></i> Create
</button>
}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container"> </EditForm>
<div class="columns"> </Body>
<div class="column col-12 text-right">
<div>
@if (this.state.Value.IsLoadingCreateContainer)
{
<button type="submit" disabled class="btn btn-primary loading">
<i class="icon icon-plus"></i> Create
</button>
}
else
{
<button type="submit" class="btn btn-primary">
<i class="icon icon-plus"></i> Create
</button>
}
</div>
</div>
</div>
</div>
</div>
</EditForm>
</Dialog> </Dialog>
@code { @code {

88
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,53 +8,58 @@
@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">
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit"> <Header>
<DataAnnotationsValidator /> Create Bookmark Group
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@if (this.state.Value.CreateGroupErrorMessage != null) @if (this.state.Value.CreateGroupErrorMessage != null)
{ {
<Alert Type="Alert.AlertType.Error"> <Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateGroupErrorMessage @this.state.Value.CreateGroupErrorMessage
</Alert> </Alert>
} }
<ValidationSummary /> <ValidationSummary />
<div class="form-group"> <div class="form-group">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column col-10"> <div class="column col-10">
<label for="createBookmarkGroupTitle">Title</label> <label for="createBookmarkGroupTitle">Title</label>
<InputText id="createBookmarkGroupTitle" name="createBookmarkGroupTitle" <InputText id="createBookmarkGroupTitle" name="createBookmarkGroupTitle"
class="form-input" @bind-Value="this.Model.Title" /> class="form-input" @bind-Value="this.Model.Title" />
</div>
<div class="column col-2">
<label for="createBookmarkGroupColor">Color</label>
<input type="color" name="createBookmarkGroupColor" @bind="this.Model.Color" />
</div>
</div> </div>
<div class="column col-2"> </div>
<label for="createBookmarkGroupColor">Color</label> <div class="container">
<input type="color" name="createBookmarkGroupColor" @bind="this.Model.Color" /> <div class="columns">
<div class="column col-12 text-right">
@if (this.state.Value.IsLoadingCreateGroup)
{
<button type="submit" disabled class="btn btn-primary loading">
<i class="icon icon-plus"></i> Create
</button>
}
else
{
<button type="submit" class="btn btn-primary">
<i class="icon icon-plus"></i> Create
</button>
}
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="container"> </EditForm>
<div class="columns"> </Body>
<div class="column col-12 text-right">
@if (this.state.Value.IsLoadingCreateGroup)
{
<button type="submit" disabled class="btn btn-primary loading">
<i class="icon icon-plus"></i> Create
</button>
}
else
{
<button type="submit" class="btn btn-primary">
<i class="icon icon-plus"></i> Create
</button>
}
</div>
</div>
</div>
</div>
</EditForm>
</Dialog> </Dialog>
@code { @code {

90
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,52 +7,55 @@
@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>
Delete Bookmark "@this.state.Value.BookmarkToDelete?.Title"
</Header>
<Body>
@if (this.state.Value.DeleteBookmarkErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.DeleteBookmarkErrorMessage
</Alert>
}
<Dialog Title="@title" Active="this.state.Value.ShowDeleteBookmarkForm" OnClose="this.OnClose"> @if (this.state.Value.BookmarkToDelete == null)
@if (this.state.Value.DeleteBookmarkErrorMessage != null) {
{ <Alert Type="Alert.AlertType.Error">
<Alert Type="Alert.AlertType.Error"> There is no bookmark to delete selected
@this.state.Value.DeleteBookmarkErrorMessage </Alert>
</Alert> }
} else
{
<p>Are you sure you want to delete this bookmark?</p>
<dl>
<dt>Title</dt>
<dd>@this.state.Value.BookmarkToDelete.Title</dd>
@if (this.state.Value.BookmarkToDelete == null) <dt>URL</dt>
{ <dd>@this.state.Value.BookmarkToDelete.Url</dd>
<Alert Type="Alert.AlertType.Error">
There is no bookmark to delete selected
</Alert>
}
else
{
<p>Are you sure you want to delete this bookmark?</p>
<dl>
<dt>Title</dt>
<dd>@this.state.Value.BookmarkToDelete.Title</dd>
<dt>URL</dt> @if (!string.IsNullOrWhiteSpace(this.state.Value.BookmarkToDelete.Notes))
<dd>@this.state.Value.BookmarkToDelete.Url</dd> {
<dt>Notes</dt>
<dd>@this.state.Value.BookmarkToDelete.Notes</dd>
}
</dl>
@if (!string.IsNullOrWhiteSpace(this.state.Value.BookmarkToDelete.Notes)) <div class="text-right">
{ @if (!this.state.Value.IsLoadingDeleteBookmark)
<dt>Notes</dt> {
<dd>@this.state.Value.BookmarkToDelete.Notes</dd> <button type="button" class="btn" @onclick="this.OnClose">Cancel</button>
} <button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
</dl> }
else
<div class="text-right"> {
@if (!this.state.Value.IsLoadingDeleteBookmark) <button type="button" disabled class="btn" @onclick="this.OnClose">Cancel</button>
{ <button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
<button type="button" class="btn" @onclick="this.OnClose">Cancel</button> }
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button> </div>
} }
else </Body>
{
<button type="button" disabled class="btn" @onclick="this.OnClose">Cancel</button>
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
}
</div>
}
</Dialog> </Dialog>
@code { @code {

54
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,32 +7,35 @@
@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"
@if (this.state.Value.DeleteContainerErrorMessage != null) </Header>
{ <Body>
<Alert Type="Alert.AlertType.Error"> @if (this.state.Value.DeleteContainerErrorMessage != null)
@this.state.Value.DeleteContainerErrorMessage
</Alert>
}
<p>
Are you sure you want to delete the bookmark container
"@this.state.Value.BookmarkContainerTitleToDelete"?
</p>
<div class="text-right">
@if (!this.state.Value.IsLoadingDeleteContainer)
{ {
<button type="button" class="btn" @onclick="this.OnDialogClose">Cancel</button> <Alert Type="Alert.AlertType.Error">
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button> @this.state.Value.DeleteContainerErrorMessage
</Alert>
} }
else
{ <p>
<button type="button" disabled class="btn" @onclick="this.OnDialogClose">Cancel</button> Are you sure you want to delete the bookmark container
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button> "@this.state.Value.BookmarkContainerTitleToDelete"?
} </p>
</div> <div class="text-right">
@if (!this.state.Value.IsLoadingDeleteContainer)
{
<button type="button" class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
}
else
{
<button type="button" disabled class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
}
</div>
</Body>
</Dialog> </Dialog>
@code { @code {

60
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,40 +7,45 @@
@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"
@if (this.state.Value.DeleteGroupErrorMessage != null) </Header>
{ <Body>
<Alert Type="Alert.AlertType.Error"> @if (this.state.Value.DeleteGroupErrorMessage != null)
@this.state.Value.DeleteGroupErrorMessage
</Alert>
}
<p>
Are you sure you want to delete the bookmark container
"@this.state.Value.BookmarkGroupTitleToDelete"?
</p>
<div class="text-right">
@if (!this.state.Value.IsLoadingDeleteGroup)
{ {
<button type="button" class="btn" @onclick="this.OnDialogClose">Cancel</button> <Alert Type="Alert.AlertType.Error">
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button> @this.state.Value.DeleteGroupErrorMessage
</Alert>
} }
else
{ <p>
<button type="button" disabled class="btn" @onclick="this.OnDialogClose">Cancel</button> Are you sure you want to delete the bookmark container
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button> "@this.state.Value.BookmarkGroupTitleToDelete"?
} </p>
</div> <div class="text-right">
@if (!this.state.Value.IsLoadingDeleteGroup)
{
<button type="button" class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
}
else
{
<button type="button" disabled class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button type="submit" disabled class="btn btn-error loading" @onclick="this.OnConfirmDelete">Delete</button>
}
</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>