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

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
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -7,63 +8,68 @@
@inject IDispatcher dispatch
@inject IState<CreateBookmarkState> state
<Dialog Title="Create Bookmark" Active="this.state.Value.ShowCreateBookmarkForm" OnClose="this.OnDialogClose">
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
<Dialog Active="this.state.Value.ShowCreateBookmarkForm" OnClose="this.OnDialogClose">
<Header>
Create Bookmark
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@if (this.state.Value.CreateBookmarkErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateBookmarkErrorMessage
</Alert>
}
@if (this.state.Value.CreateBookmarkErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateBookmarkErrorMessage
</Alert>
}
<ValidationSummary />
<ValidationSummary />
<div class="form-group">
<div class="container">
<div class="columns">
<div class="column col-12">
<label for="createBookmarkTitle">Title</label>
<InputText id="createBookmarkTitle" name="createBookmarkTitle"
class="form-input" @bind-Value="this.Model.Title" />
<div class="form-group">
<div class="container">
<div class="columns">
<div class="column col-12">
<label for="createBookmarkTitle">Title</label>
<InputText id="createBookmarkTitle" name="createBookmarkTitle"
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 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 class="container">
<div class="columns">
<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>
<div class="container">
<div class="columns">
<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>
</EditForm>
</Body>
</Dialog>
@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
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,53 +7,58 @@
@inject IDispatcher dispatch
@inject IState<CreateContainerState> state
<Dialog Title="Create Container" Active="this.state.Value.ShowCreateContainerForm" OnClose="this.OnDialogClose">
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
<Dialog Active="this.state.Value.ShowCreateContainerForm" OnClose="this.OnDialogClose">
<Header>
Create Container
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@if (this.state.Value.CreateContainerErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateContainerErrorMessage
</Alert>
}
@if (this.state.Value.CreateContainerErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateContainerErrorMessage
</Alert>
}
<ValidationSummary />
<ValidationSummary />
<div class="form-group">
<div class="container">
<div class="columns">
<div class="column col-12">
<div>
<label for="createBookmarkContainerTitle" class="form-label">Title</label>
<InputText id="createBookmarkContainerTitle" name="createBookmarkContainerTitle"
class="form-input" @bind-Value="this.Model.Title" />
<div class="form-group">
<div class="container">
<div class="columns">
<div class="column col-12">
<div>
<label for="createBookmarkContainerTitle" class="form-label">Title</label>
<InputText id="createBookmarkContainerTitle" name="createBookmarkContainerTitle"
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 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>
</EditForm>
</EditForm>
</Body>
</Dialog>
@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
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -7,53 +8,58 @@
@inject IDispatcher dispatch
@inject IState<CreateGroupState> state
<Dialog Title="Create Bookmark Group" Active="this.state.Value.ShowCreateGroupForm" OnClose="this.OnDialogClose">
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
<Dialog Active="this.state.Value.ShowCreateGroupForm" OnClose="this.OnDialogClose">
<Header>
Create Bookmark Group
</Header>
<Body>
<EditForm Model="this.Model" OnValidSubmit="this.OnSubmit">
<DataAnnotationsValidator />
@if (this.state.Value.CreateGroupErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateGroupErrorMessage
</Alert>
}
@if (this.state.Value.CreateGroupErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateGroupErrorMessage
</Alert>
}
<ValidationSummary />
<ValidationSummary />
<div class="form-group">
<div class="container">
<div class="columns">
<div class="column col-10">
<label for="createBookmarkGroupTitle">Title</label>
<InputText id="createBookmarkGroupTitle" name="createBookmarkGroupTitle"
class="form-input" @bind-Value="this.Model.Title" />
<div class="form-group">
<div class="container">
<div class="columns">
<div class="column col-10">
<label for="createBookmarkGroupTitle">Title</label>
<InputText id="createBookmarkGroupTitle" name="createBookmarkGroupTitle"
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 class="column col-2">
<label for="createBookmarkGroupColor">Color</label>
<input type="color" name="createBookmarkGroupColor" @bind="this.Model.Color" />
</div>
<div class="container">
<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 class="container">
<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>
</EditForm>
</EditForm>
</Body>
</Dialog>
@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
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,52 +7,55 @@
@inject IDispatcher dispatch
@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.DeleteBookmarkErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.DeleteBookmarkErrorMessage
</Alert>
}
@if (this.state.Value.BookmarkToDelete == null)
{
<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>
@if (this.state.Value.BookmarkToDelete == null)
{
<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>
<dd>@this.state.Value.BookmarkToDelete.Url</dd>
<dt>URL</dt>
<dd>@this.state.Value.BookmarkToDelete.Url</dd>
@if (!string.IsNullOrWhiteSpace(this.state.Value.BookmarkToDelete.Notes))
{
<dt>Notes</dt>
<dd>@this.state.Value.BookmarkToDelete.Notes</dd>
}
</dl>
@if (!string.IsNullOrWhiteSpace(this.state.Value.BookmarkToDelete.Notes))
{
<dt>Notes</dt>
<dd>@this.state.Value.BookmarkToDelete.Notes</dd>
}
</dl>
<div class="text-right">
@if (!this.state.Value.IsLoadingDeleteBookmark)
{
<button type="button" class="btn" @onclick="this.OnClose">Cancel</button>
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
}
else
{
<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>
}
<div class="text-right">
@if (!this.state.Value.IsLoadingDeleteBookmark)
{
<button type="button" class="btn" @onclick="this.OnClose">Cancel</button>
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
}
else
{
<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>
}
</Body>
</Dialog>
@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
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,32 +7,35 @@
@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">
@if (this.state.Value.DeleteContainerErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@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)
<Dialog Active="this.state.Value.ShowDeleteContainerForm" OnClose="this.OnDialogClose">
<Header>
Delete Container "@this.state.Value.BookmarkContainerTitleToDelete"
</Header>
<Body>
@if (this.state.Value.DeleteContainerErrorMessage != null)
{
<button type="button" class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
<Alert Type="Alert.AlertType.Error">
@this.state.Value.DeleteContainerErrorMessage
</Alert>
}
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>
<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>
<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>
@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
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@ -6,40 +7,45 @@
@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">
@if (this.state.Value.DeleteGroupErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@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)
<Dialog Active="this.state.Value.ShowDeleteGroupForm" OnClose="this.OnDialogClose">
<Header>
Delete Group "@this.state.Value.BookmarkGroupTitleToDelete"
</Header>
<Body>
@if (this.state.Value.DeleteGroupErrorMessage != null)
{
<button type="button" class="btn" @onclick="this.OnDialogClose">Cancel</button>
<button type="submit" class="btn btn-error" @onclick="this.OnConfirmDelete">Delete</button>
<Alert Type="Alert.AlertType.Error">
@this.state.Value.DeleteGroupErrorMessage
</Alert>
}
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>
<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>
<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>
@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>