Add creating bookmark groups
This commit is contained in:
Neil Brommer
parent
d997655b59
commit
7841d1d1a8
28 changed files with 692 additions and 114 deletions
20
Start/Client/Components/Bookmark.razor
Normal file
20
Start/Client/Components/Bookmark.razor
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<li>
|
||||
@if (!String.IsNullOrEmpty(this.Model.Notes))
|
||||
{
|
||||
<details>
|
||||
<summary>
|
||||
<a href="@this.Model.Url" class="bookmarkLink">@this.Model.Title</a>
|
||||
</summary>
|
||||
@this.Model.Notes
|
||||
</details>
|
||||
}
|
||||
else
|
||||
{
|
||||
<a href="@this.Model.Url" class="bookmarkLink">@this.Model.Title</a>
|
||||
}
|
||||
</li>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public BookmarkDto Model { get; set; } = null!;
|
||||
}
|
||||
|
|
@ -1,5 +1,21 @@
|
|||
<div class="activeBookmarkContainer">
|
||||
@if (this.Container == null)
|
||||
@using Start.Client.Store.State
|
||||
@using Start.Client.Store.Features.CreateGroup
|
||||
@using Fluxor
|
||||
|
||||
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
|
||||
|
||||
@inject IDispatcher dispatch
|
||||
@inject IState<RootState> state
|
||||
|
||||
<div class="activeBookmarkContainer">
|
||||
@if (this.state.Value.CurrentContainerState.ErrorMessage != null)
|
||||
{
|
||||
<Alert Type="Alert.AlertType.Error">
|
||||
@this.state.Value.CurrentContainerState.ErrorMessage
|
||||
</Alert>
|
||||
}
|
||||
|
||||
@if (this.state.Value.CurrentContainerState.IsLoadingCurrentContainer)
|
||||
{
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
|
|
@ -7,27 +23,60 @@
|
|||
</div>
|
||||
<p class="empty-title h5">Loading Bookmarks</p>
|
||||
</div>
|
||||
<p class="text-center">Loading Bookmarks</p>
|
||||
}
|
||||
else if (!this.Container.BookmarkGroups?.Any() ?? true)
|
||||
else if (this.state.Value.CurrentContainerState.Container == null)
|
||||
{
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<i class="icon icon-3x icon-bookmark"></i>
|
||||
</div>
|
||||
<p class="empty-title h5">Failed To Load Container</p>
|
||||
</div>
|
||||
}
|
||||
else if (this.state.Value.CurrentContainerState.Container.BookmarkGroups == null
|
||||
|| (!(this.state.Value.CurrentContainerState.Container.BookmarkGroups?.Any()) ?? true))
|
||||
{
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<i class="icon icon-3x icon-bookmark"></i>
|
||||
</div>
|
||||
<p class="empty-title h5">No Bookmark Groups</p>
|
||||
<div class="empty-action">
|
||||
<button class="btn btn-primary" @onclick="this.ShowCreateGroupForm">
|
||||
<i class="icon icon-plus"></i> Create Group
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
foreach (BookmarkGroupDto group in this.Container.BookmarkGroups!)
|
||||
{
|
||||
<BookmarkGroup Group="group" />
|
||||
}
|
||||
<div id="bookmarkGroups">
|
||||
@* The compiler doesn't pick up that null has already been checked for,
|
||||
so the ! is needed *@
|
||||
@foreach (BookmarkGroupDto group in this.state.Value.CurrentContainerState.Container.BookmarkGroups!)
|
||||
{
|
||||
<BookmarkGroup Group="group" />
|
||||
}
|
||||
|
||||
<div class="addBookmarkGroupButton text-center">
|
||||
<button type="button" class="btn tooltip tooltip-bottom"
|
||||
@onclick="this.ShowCreateGroupForm"
|
||||
aria-label="Create Group" data-tooltip="Create Group">
|
||||
<i class="icon icon-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public BookmarkContainerDto? Container { get; set; }
|
||||
public void ShowCreateGroupForm()
|
||||
{
|
||||
if (this.state.Value.CurrentContainerState.Container == null)
|
||||
return;
|
||||
|
||||
dispatch.Dispatch(new ShowCreateGroupFormAction(
|
||||
this.state.Value.CurrentContainerState.Container.BookmarkContainerId,
|
||||
this.state.Value.CurrentContainerState.Container.Title));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,47 @@
|
|||
<h2 class="bookmarkGroupTitle" style="background-color: #@this.Group.Color">
|
||||
@this.Group.Title
|
||||
</h2>
|
||||
<ul class="bookmarkGroupList">
|
||||
@if (this.Group.Bookmarks == null || !this.Group.Bookmarks.Any())
|
||||
{
|
||||
<li class="bookmarkListItem noBookmarksItem"><i>No Bookmarks</i></li>
|
||||
}
|
||||
else
|
||||
{
|
||||
foreach (BookmarkDto bookmark in this.Group.Bookmarks!)
|
||||
{
|
||||
<li class="bookmarkListItem">
|
||||
<a href="@bookmark.Url" class="bookmarkLink">@bookmark.Title</a>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
<div class="card bookmarkGroup">
|
||||
<div class="card-header" style="background-color: @this.Group.Color">
|
||||
<h2 class="card-title h5 d-inline-block">@this.Group.Title</h2>
|
||||
<button type="button" class="addBookmarkButton btn btn-sm tooltip tooltip-left"
|
||||
aria-label="Create Bookmark" data-tooltip="Create Bookmark">
|
||||
<i class="icon icon-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="bookmarks">
|
||||
@if (this.Group.Bookmarks == null || !this.Group.Bookmarks.Any())
|
||||
{
|
||||
<li class="noBookmarksItem">
|
||||
<div class="empty">
|
||||
<div class="empty-icon">
|
||||
<i class="icon icon-bookmark"></i>
|
||||
</div>
|
||||
<p class="empty-title h5">No Bookmarks</p>
|
||||
<div class="empty-action">
|
||||
<button type="button" class="btn btn-primary">
|
||||
<i class="icon icon-plus"></i> Create Bookmark
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
else
|
||||
{
|
||||
foreach (BookmarkDto bookmark in this.Group.Bookmarks)
|
||||
{
|
||||
<Bookmark Model="bookmark" />
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter]
|
||||
public BookmarkGroupDto Group { get; set; } = null!; // [Required] is a .net 6 feature
|
||||
public BookmarkGroupDto Group { get; set; } = null!;
|
||||
|
||||
protected void OnCreateBookmarkClicked()
|
||||
{
|
||||
// Placeholder
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
@this.state.Value.CreateContainerErrorMessage
|
||||
</Alert>
|
||||
}
|
||||
|
||||
<div class="form-group">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
|
|
|||
82
Start/Client/Components/CreateGroup.razor
Normal file
82
Start/Client/Components/CreateGroup.razor
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
@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());
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
<div class="modal @(this.Active ? "active" : "")">
|
||||
@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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue