BlazorStart/Start/Client/Components/CreateGroup.razor
2021-12-05 15:50:48 -08:00

83 lines
2.8 KiB
Plaintext

@using Start.Client.Store.Features.CreateGroup
@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@inject IActionSubscriber actionSubscriber
@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 />
@if (this.state.Value.CreateGroupErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">
@this.state.Value.CreateGroupErrorMessage
</Alert>
}
<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>
<div class="column col-2">
<label for="createBookmarkGroupColor">Color</label>
<input type="color" name="createBookmarkGroupColor" @bind="this.Model.Color" />
</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>
</Dialog>
@code {
private BookmarkGroupDto Model { get; set; } = new("", "", 0);
protected override void OnInitialized()
{
base.OnInitialized();
this.Model = new BookmarkGroupDto("", "", state.Value.ContainerId);
// Keep the model's container ID up to date
actionSubscriber.SubscribeToAction<ShowCreateGroupFormAction>(this,
(a) => this.Model.BookmarkContainerId = a.ContainerId);
}
protected void OnSubmit()
{
dispatch.Dispatch(new SubmitCreateGroupAction(this.Model));
}
protected void OnDialogClose()
{
dispatch.Dispatch(new HideCreateGroupFormAction());
}
}