NeilBrommer/BlazorStart
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Move the containter list into it's own component

Browse source
This commit is contained in:
Neil Brommer 2021-12-16 21:26:53 -08:00
parent 93888369ce
commit ad1552e343
4 changed files with 112 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Start/Client/Components/BookmarkContainer.razor
View file

@ -7,7 +7,7 @@
@inject IDispatcher dispatch
@inject IState<RootState> state
<div class="activeBookmarkContainer">
<div class="activeBookmarkContainer" role="tabpanel">
@if (this.state.Value.CurrentContainerState.ErrorMessage != null)
{
<Alert Type="Alert.AlertType.Error">

77
Start/Client/Components/ContainerList.razor Normal file
View file

@ -0,0 +1,77 @@
@using Fluxor
@using Start.Client.Store.State
@using Start.Client.Store.Features.CurrentContainer
@using Start.Client.Store.Features.CreateContainer
@using Start.Client.Store.Features.DeleteContainer
@using Start.Client.Store.Features.Sidebar
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@inject Blazored.LocalStorage.ILocalStorageService localStorage
@inject IState<RootState> state
@inject IDispatcher dispatch
<div id="containerTabStrip" class="px-2">
<button id="menuButton" class="btn btn-link" @onclick="this.ShowSidebar">
<i class="icon icon-menu"></i>
</button>
<ul class="containerList tab" role="tablist">
@foreach (BookmarkContainerDto container in this.state.Value.ContainerListState.Containers)
{
string itemClasses = "tab-item";
if (container.BookmarkContainerId == this.state.Value.CurrentContainerState.Container?.BookmarkContainerId)
itemClasses += " active";
<li class="@itemClasses" role="tab">
<a @onclick="() => OnContainerClicked(container.BookmarkContainerId)">
@container.Title
</a>
@if (this.state.Value.EditMode)
{
<button class="btn btn-clear" aria-label="Delete"
@onclick="() => this.OnDeleteContainerClicked(container.BookmarkContainerId)">
</button>
}
</li>
}
@if (this.state.Value.EditMode)
{
<li class="tab-item tab-action">
<button @onclick="OnCreateContainerClicked" class="btn btn-link tooltip tooltip-left"
title="Create New Container" aria-label="Create New Container"
data-tooltip="Create Container">
+
</button>
</li>
}
</ul>
</div>
@code {
protected void ShowSidebar()
{
dispatch.Dispatch(new ShowSidebarAction());
}
protected void OnContainerClicked(int bookmarkContainerId) {
dispatch.Dispatch(new LoadCurrentContainerAction(bookmarkContainerId));
}
protected void OnCreateContainerClicked()
{
dispatch.Dispatch(new ShowCreateContainerFormAction());
}
protected void OnDeleteContainerClicked(int bookmarkContainerId)
{
BookmarkContainerDto? bookmarkContainerToDelete = this.state.Value.ContainerListState
.Containers
?.FirstOrDefault(bc => bc.BookmarkContainerId == bookmarkContainerId);
if (bookmarkContainerToDelete == null)
return;
this.dispatch.Dispatch(new ShowDeleteContainerFormAction(
bookmarkContainerToDelete.BookmarkContainerId, bookmarkContainerToDelete.Title));
}
}

80
Start/Client/Pages/Index.razor
View file

@ -1,18 +1,13 @@
@page "/"
@using Start.Client.Components
@using Start.Client.Store.State
@using Microsoft.AspNetCore.Authorization
@using Fluxor
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@using System.Linq
@using Start.Client.Components
@using Start.Client.Store.State
@using Start.Client.Store.Features.CurrentContainer
@using Start.Client.Store.Features.CreateContainer
@using Start.Client.Store.Features.DeleteContainer
@using Start.Client.Store.Features.Sidebar
@using Fluxor
@* Distinguish from Refit.Authorize *@
@attribute [Microsoft.AspNetCore.Authorization.Authorize]
@attribute [Authorize]
@inject Blazored.LocalStorage.ILocalStorageService localStorage
@inject IState<RootState> state
@ -37,42 +32,7 @@
else
{
<Sidebar>
<div id="containerTabStrip" class="px-2">
<button id="menuButton" class="btn btn-link" @onclick="this.ShowSidebar">
<i class="icon icon-menu"></i>
</button>
<ul class="containerList tab">
@foreach (BookmarkContainerDto container in this.state.Value.ContainerListState.Containers)
{
string itemClasses = "tab-item";
if (container.BookmarkContainerId == this.state.Value.CurrentContainerState.Container?.BookmarkContainerId)
itemClasses += " active";
<li class="@itemClasses">
<a @onclick="() => OnContainerSelected(container.BookmarkContainerId)">
@container.Title
@if (this.state.Value.EditMode)
{
<button class="btn btn-clear"
@onclick="() => this.OnDeleteContainerClicked(container.BookmarkContainerId)">
</button>
}
</a>
</li>
}
@if (this.state.Value.EditMode)
{
<li class="tab-item tab-action">
<button @onclick="OnCreateContainerClicked" class="btn btn-link tooltip tooltip-left"
title="Create New Container" aria-label="Create New Container"
data-tooltip="Create Container">
+
</button>
</li>
}
</ul>
</div>
<ContainerList />
<BookmarkContainer />
@* Data management forms *@
@ -90,31 +50,5 @@ else
@code
{
protected void ShowSidebar()
{
dispatch.Dispatch(new ShowSidebarAction());
}
protected void OnContainerSelected(int bookmarkContainerId)
{
dispatch.Dispatch(new LoadCurrentContainerAction(bookmarkContainerId));
}
protected void OnDeleteContainerClicked(int bookmarkContainerId)
{
BookmarkContainerDto? bookmarkContainerToDelete = this.state.Value.ContainerListState
.Containers
?.FirstOrDefault(bc => bc.BookmarkContainerId == bookmarkContainerId);
if (bookmarkContainerToDelete == null)
return;
this.dispatch.Dispatch(new ShowDeleteContainerFormAction(
bookmarkContainerToDelete.BookmarkContainerId, bookmarkContainerToDelete.Title));
}
protected void OnCreateContainerClicked()
{
dispatch.Dispatch(new ShowCreateContainerFormAction());
}
}

27
Start/Client/Sass/app.scss
View file

@ -41,6 +41,33 @@
}
.tab li.tab-item:not(.tab-action) {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 0.4rem;
a {
flex: 1;
margin-right: 0;
}
.btn-clear {
margin-top: 0;
margin-right: 0.4rem;
}
&.active {
border-bottom: solid 0.1rem $primary-color;
a {
border-bottom: none;
margin-right: 0;
}
}
}
/* Spectre's default is no padding */
.container {
padding: 0.4rem;