BlazorStart/Start/Client/Components/BookmarkGroup.razor

@using System.Drawing
@using Fluxor
@using Start.Client.Store.State
@using Start.Client.Store.Features.DeleteGroup
@using Start.Client.Store.Features.CreateBookmark

@inherits Fluxor.Blazor.Web.Components.FluxorComponent

@inject IState<RootState> state
@inject IDispatcher dispatch

<div class="card bookmarkGroup">
    <div class="card-header" style="background-color: @this.Group.Color">
        <h2 class="card-title h6 d-inline-block @this.ForegroundTitleColorClass">
            @this.Group.Title
        </h2>

        @if (this.state.Value.EditMode)
        {
            <button class="btn btn-error tooltip tooltip-left float-right"
                    data-tooltip="Delete Group" @onclick="this.OnDeleteGroupClicked">
                <i class="icon icon-delete"></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 h6">No Bookmarks</p>
                        <div class="empty-action">
                            <button type="button" class="btn btn-primary" @onclick="this.OnCreateBookmarkClicked">
                                <i class="icon icon-plus"></i> Create Bookmark
                            </button>
                        </div>
                    </div>
                </li>
            }
            else
            {
                foreach (BookmarkDto bookmark in this.Group.Bookmarks)
                {
                    <Bookmark Model="bookmark" />
                }

                @if (this.state.Value.EditMode)
                {
                    <li class="addBookmarkItem">
                        <button type="button" class="addBookmarkButton btn" @onclick="this.OnCreateBookmarkClicked">
                            <i class="icon icon-plus"></i>
                            Create Bookmark
                        </button>
                    </li>
                }
            }
        </ul>
    </div>
</div>

@code
{
    [Parameter]
    public BookmarkGroupDto Group { get; set; } = null!;

    protected string ForegroundTitleColorClass
    {
        get
        {
            const int threshold = 105;
            Color bgColor = ColorTranslator.FromHtml(this.Group.Color);

            double val = Math.Floor((bgColor.R * .299) + (bgColor.G * 0.587) + (bgColor.B * 0.114));

            if ((255 - val) < threshold)
                return "text-dark";
            return "text-light";
        }
    }

    protected void OnDeleteGroupClicked()
    {
        dispatch.Dispatch(new ShowDeleteGroupFormAction(
            this.Group.BookmarkGroupId, this.Group.Title));
    }

    protected void OnCreateBookmarkClicked()
    {
        dispatch.Dispatch(new ShowCreateBookmarkFormAction(this.Group.BookmarkGroupId,
            this.Group.Title));
    }
}