lib selector fieldset

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/BrowseView.razor

@@ -3,36 +3,17 @@
 <LibSelector CurrentLibrary="@CurrentLibrary" OnValueChanged="SelectedLibraryChanged"></LibSelector>
 
 <div class="row mt-2">
-    <div class="col-12">
-        <ul class="nav justify-content-start align-items-center">
-            <li class="nav-item mb-1">
-                <span>
-                    Play all track (@(CurrentLibrary?.Discs.Sum(p => p.TrackSets.First().Tracks.Length).ToString() ?? "..."))
-                </span>
-            </li>
-
-            @foreach (var cat in (CurrentLibrary?.Catalogs).KeepNoEmpty())
-            {
-                <li class="nav-item mb-1 mx-2">
-                    <a class="btn btn-link p-2 py-1" href="@cat?.PlaylistPath" target="@FnzConst.PlaylistPageTarget" onclick="return BlockDownloadAndOpenHtmlPage(this)">
-                        <small class="font-monospace">@cat?.TotalDuration.SecondToDur() @cat?.TotalBytes.BytesToFileSize()</small>
-                        @cat?.Name
-                    </a>
-                </li>
-            }
-        </ul>
+    <div class="row">
+        <div class="col">
+            <LibTrackSet CurrentLibrary="@CurrentLibrary"></LibTrackSet>
+        </div>
     </div>
 </div>
 
 <div class="row">
     <div class="col-12">
         <div class="row">
-            @foreach (var disc in (CurrentLibrary?.Discs).KeepNoEmpty())
-            {
-                <div class="col-md-3 d-flex align-items-stretch">
-                    <DiscCard Disc="disc" OnClick="SelectDisc"></DiscCard>
-                </div>
-            }
+            <DiscCard Discs="CurrentLibrary?.Discs" OnClick="SelectDisc"></DiscCard>
         </div>
     </div>
 </div>

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/LibSelector.razor

@@ -4,43 +4,57 @@
     [Parameter] public EventCallback<FeLibrary> OnValueChanged { get; set; }
 }
 
-<div class="row justify-content-evenly mt-2">
-    <div class="col d-flex flex-row align-items-center">
-        <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
-        <button class="btn btn-primary p-1" type="button" @onclick="ShowLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
-    </div>
-</div>
-<div class="collapse mt-1" id="LibSelectorList">
-    <div class="d-flex">
-        <div class="">
-            Filter:
-        </div>
-        <div class="col flex-fill">
-            <InputText @ref="SearchInput" class="w-100" Value="@SearchValue" ValueExpression="@(()=>SearchValue)" @oninput="SearchChanged" @onkeydown="SearchKeydown"></InputText>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col">
-            @foreach (var lib in (ListDataSource).KeepNoEmpty())
-            {
-                if (lib == null)
-                {
-                    <button class="btn btn-secondary p-1 m-1" type="button" disabled>No result</button>
-                }
-                else
-                {
-                    <button class="btn btn-secondary p-1 m-1" type="button" @onclick="()=>SelectLib(lib)">@($"{lib?.Name} ({lib?.Discs.Length})")</button>
-                }
-            }
+<div class="row mt-2">
+    <div class="col">
+
+        <div class="row">
+            <div class="col collapse show" id="LibSelectorListCollapsed">
+                <div class="d-flex flex-row align-items-center">
+                    <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
+                    <button class="btn btn-primary p-1" type="button" @onclick="ShowLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
+                </div>
+            </div>
+
+            <div class="row collapse" id="LibSelectorList">
+                <div class="col">
+                    <fieldset class="border rounded-3 p-2">
+                        <legend class="float-none w-auto px-2 d-flex flex-row align-items-center">
+                            <span>Library (@FnzDataSet.AllLibrary.Length):&nbsp;</span>
+                            <button class="btn btn-primary p-1" type="button" @onclick="HideLibraryList">@($"{CurrentLibrary?.Name} ({CurrentLibrary?.Discs.Length})")</button>
+                        </legend>
+                        <div class="mt-0">
+                            <div class="d-flex">
+                                <div class="">
+                                    Filter:&nbsp;
+                                </div>
+                                <div class="col flex-fill">
+                                    <InputText @ref="SearchInput" class="w-100" Value="@SearchValue" ValueExpression="@(()=>SearchValue)" @oninput="SearchChanged" @onkeydown="SearchKeydown"></InputText>
+                                </div>
+                            </div>
+                        </div>
+                        @foreach (var lib in (ListDataSource).KeepNoEmpty())
+                        {
+                            if (lib == null)
+                            {
+                                <button class="btn btn-secondary p-1 m-1" type="button" disabled>No result</button>
+                            }
+                            else
+                            {
+                                <button class="btn btn-secondary p-1 m-1" type="button" @onclick="()=>SelectLib(lib)">@($"{lib?.Name} ({lib?.Discs.Length})")</button>
+                            }
+                        }
+                    </fieldset>
+                </div>
+            </div>
         </div>
     </div>
 </div>
 
 @code {
 
-    private ValueTask<object> ExpandLibraryList() => js.InvokeAsync<object>("ShowLibSelectorList", true);
-    private ValueTask<object> CollapseLibraryList() => js.InvokeAsync<object>("ShowLibSelectorList", false);
-    private ValueTask<object> ToggleLibraryList() => js.InvokeAsync<object>("ShowLibSelectorList");
+    private ValueTask ExpandLibraryList() => js.InvokeVoidAsync("ShowLibSelectorList", true);
+    private ValueTask CollapseLibraryList() => js.InvokeVoidAsync("ShowLibSelectorList", false);
+    private ValueTask ToggleLibraryList() => js.InvokeVoidAsync("ShowLibSelectorList");
 
 
     private InputText SearchInput { get; set; }
@@ -49,10 +63,15 @@
 
     private async Task ShowLibraryList()
     {
-        await ToggleLibraryList();
+        await ExpandLibraryList();
         await SearchInput.Element.Value.FocusAsync();
     }
 
+    private async Task HideLibraryList()
+    {
+        await CollapseLibraryList();
+    }
+
     private void SearchChanged(ChangeEventArgs e)
     {
         SearchValue = e.Value.ToString();

FNZCM/FNZCM.BlazorWasm/UI/Views/Browse/LibTrackSet.razor

@@ -0,0 +1,21 @@
+@code {
+    [Parameter, Required] public FeLibrary CurrentLibrary { get; set; }
+}
+
+<ul class="nav justify-content-start align-items-center">
+    <li class="nav-item mb-1">
+        <span>
+            Play all track (@(CurrentLibrary?.Discs.Sum(p => p.TrackSets.First().Tracks.Length).ToString() ?? "..."))
+        </span>
+    </li>
+
+    @foreach (var cat in (CurrentLibrary?.Catalogs).KeepNoEmpty())
+    {
+        <li class="nav-item mb-1 mx-2">
+            <a class="btn btn-link p-2 py-1" href="@cat?.PlaylistPath" target="@FnzConst.PlaylistPageTarget" onclick="return BlockDownloadAndOpenHtmlPage(this)">
+                <small class="font-monospace">@cat?.TotalDuration.SecondToDur() @cat?.TotalBytes.BytesToFileSize()</small>
+                @cat?.Name
+            </a>
+        </li>
+    }
+</ul>

FNZCM/FNZCM.BlazorWasm/wwwroot/fnz.js

@@ -11,13 +11,27 @@ var CollapseLibSelectorList;
 
 function ShowLibSelectorList(s) {
     if (CollapseLibSelectorList == null) {
-        var elememt = document.querySelector("#LibSelectorList");
-        CollapseLibSelectorList = new bootstrap.Collapse(elememt, { toggle: false });
+        var e0 = document.querySelector("#LibSelectorListCollapsed");
+        var e1 = document.querySelector("#LibSelectorList");
+
+        var c0 = new bootstrap.Collapse(e0, { toggle: true });
+        var c1 = new bootstrap.Collapse(e1, { toggle: false });
+
+        e0.addEventListener('hidden.bs.collapse', function () { c1.show() });
+        e1.addEventListener('hidden.bs.collapse', function () { c0.show() });
+
+        CollapseLibSelectorList = [c0, c1];
     }
 
-    if (s === true) CollapseLibSelectorList.show();
-    else if (s === false) CollapseLibSelectorList.hide();
-    else CollapseLibSelectorList.toggle();
+    if (s === true) {
+        CollapseLibSelectorList[0].hide();
+    }
+    else if (s === false) {
+        CollapseLibSelectorList[1].hide();
+    }
+    else {
+        CollapseLibSelectorList[0].toggle();
+    }
 }
 
 // Modal