fix hot load, typeparam, split UI into components

FNZCM/FNZCM.BlazorWasm/FNZCM.BlazorWasm.csproj

@@ -44,14 +44,20 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Compile Update="UI\KeudellCoding.Select2\Select2.razor.cs">
-      <DependentUpon>UI\KeudellCoding.Select2\Select2.razor</DependentUpon>
+    <Compile Update="UI\Components\TrackSetTable.razor.cs">
+      <DependentUpon>U\ComponentsI\TrackSetTable.razor</DependentUpon>
     </Compile>
   </ItemGroup>
 
   <ItemGroup>
-    <Compile Update="UI\KeudellCoding.Select2\Select2Enum.razor.cs">
-      <DependentUpon>UI\KeudellCoding.Select2\Select2Enum.razor</DependentUpon>
+    <Compile Update="UI\Components\KeudellCoding.Select2\Select2.razor.cs">
+      <DependentUpon>U\ComponentsI\KeudellCoding.Select2\Select2.razor</DependentUpon>
+    </Compile>
+  </ItemGroup>
+
+  <ItemGroup>
+    <Compile Update="UI\Components\KeudellCoding.Select2\Select2Enum.razor.cs">
+      <DependentUpon>UI\Components\KeudellCoding.Select2\Select2Enum.razor</DependentUpon>
     </Compile>
   </ItemGroup>
 

FNZCM/FNZCM.BlazorWasm/UI/App.razor

@@ -20,7 +20,7 @@
     }
     else
     {
-        <ul class="nav nav-tabs justify-content-center nav-fill" id="RootTab" role="tablist">
+       <ul class="nav nav-tabs justify-content-center nav-fill" id="RootTab" role="tablist">
             <li class="nav-item" role="presentation">
                 <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                     Browse
@@ -40,21 +40,7 @@
         <div class="tab-content" id="RootTabContent">
             <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                 <div class="row justify-content-evenly mt-2">
-                    <div class="d-flex flex-row bd-highlight mt-2">
-                        <div style="padding-right:5px;">
-                            Lobrary (@Libraries.Count) :
-                        </div>
-                        <Select2 class="flex-fill" TItem="KeyValuePair<string,Library>"
-                             TSource="IReadOnlyCollection<KeyValuePair<string,Library>>"
-                             IdSelector="c => c.Key"
-                             TextSelector="c =>c.Value.Name+' '+'('+c.Value.Discs.Count+')'"
-                             FilterFunction="FilterLibrary"
-                             GetElementById="async (items, id, token) => items.FirstOrDefault(q=>q.Key==id)"
-                             Datasource="Libraries.OrderBy(p=>p.Key).ToArray()"
-                             Value="@SelectedLibs"
-                             Multiselect="false"
-                             OnValueChanged="SelectedLibraryChanged" />
-                    </div>
+                    <LibSelector Libraries="@Libraries" SelectedLibs="@SelectedLibs" OnValueChanged="SelectedLibraryChanged"></LibSelector>
                     <div class="row mt-2">
                         <div class="col-12">
                             @if (CurrentLibrary != null)
@@ -63,6 +49,7 @@
                                     @foreach (var d in CurrentLibrary.Discs.OrderByDescending(p => p.Key))
                                     {
                                         <div class="col-md-3">
+                                            @*TODO: Card Component*@
                                             <div class="card mb-3 shadow-sm" @onclick="()=>SelectDisc(d.Key)">
                                                 <img class="card-img-top" src="@ApiClient.ImageUrl(CurrentLibraryKey,d.Key)">
                                                 <div class="card-body">
@@ -92,6 +79,7 @@
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                             </div>
                             <div class="modal-body">
+                                @*TODO: Disc Modal*@
                                 <div class="container-fluid">
                                     <div class="row">
                                         @if (CurrentDisc != null)
@@ -115,59 +103,20 @@
                                                 </ul>
                                                 <div class="tab-content" id="ModalDiscTabContent">
                                                     <div class="tab-pane fade show active" id="tracks-main" role="tabpanel" aria-labelledby="home-tab">
-                                                        <a href="@ApiClient.GetListPageUrl(CurrentLibraryKey,CurrentDiscKey)" target="_fnz_play">Playlist page</a>
-                                                        <table class="table">
-                                                            <thead>
-                                                                <tr>
-                                                                    <th scope="col">Name</th>
-                                                                    <th scope="col"></th>
-                                                                    <th scope="col">Duration</th>
-                                                                    <th scope="col">Size</th>
-                                                                </tr>
-                                                            </thead>
-                                                            <tbody>
-                                                                @foreach (var t in CurrentDisc.MainTracks.OrderBy(p => p.Key))
-                                                                {
-                                                                    <tr>
-                                                                        <th scope="row">
-                                                                            <a href="@ApiClient.GetMediaUrl(CurrentLibraryKey,CurrentDiscKey,t.Key)" target="_fnz_play">@t.Value</a>
-                                                                        </th>
-                                                                        <td></td>
-                                                                        <td>TODO</td>
-                                                                        <td>TODO</td>
-                                                                    </tr>
-                                                                }
-                                                            </tbody>
-                                                        </table>
+                                                        <TrackSetTable
+                                                            LibraryKey="@CurrentLibraryKey"
+                                                            DiscKey="@CurrentDiscKey"
+                                                            TrackSetKey="null"
+                                                            Tracks="@CurrentDisc?.MainTracks"></TrackSetTable>
                                                     </div>
                                                     @foreach (var subSet in CurrentDisc.SubTracks.OrderBy(p => p.Key).WithIndex())
                                                     {
                                                         <div class="tab-pane fade show" id="tracks-@subSet.index" role="tabpanel" aria-labelledby="home-tab">
-                                                            <a href="@ApiClient.GetListPageUrl(CurrentLibraryKey,CurrentDiscKey,subSet.item.Key)" target="_fnz_play">Playlist page</a>
-                                                            <table class="table">
-                                                                <thead>
-                                                                    <tr>
-                                                                        <th scope="col">Name</th>
-                                                                        <th scope="col"></th>
-                                                                        <th scope="col">Duration</th>
-                                                                        <th scope="col">Size</th>
-                                                                    </tr>
-                                                                </thead>
-                                                                <tbody>
-                                                                    @foreach (var t in subSet.item.Value.Tracks.OrderBy(p => p.Key))
-                                                                    {
-                                                                        <tr>
-                                                                            <th scope="row">
-                                                                                <a href="@ApiClient.GetMediaUrl(CurrentLibraryKey,CurrentDiscKey,t.Key,subSet.item.Key)" target="_fnz_play">@t.Value</a>
-                                                                            </th>
-                                                                            <td></td>
-                                                                            <td>TODO</td>
-                                                                            <td>TODO</td>
-                                                                        </tr>
-                                                                    }
-                                                                </tbody>
-                                                            </table>
-                                                        </div>
+                                                            <TrackSetTable LibraryKey="@CurrentLibraryKey"
+                                                               DiscKey="@CurrentDiscKey"
+                                                               TrackSetKey="@subSet.item.Key"
+                                                               Tracks="@subSet.item.Value.Tracks"></TrackSetTable>
+                                                    </div>
                                                     }
                                                 </div>
                                             </div>
@@ -180,7 +129,7 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                </div> 
             </div>
             <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                 <div class="container">
@@ -193,6 +142,9 @@
                 </div>
             </div>
         </div>
-    }
+   }
+
 </div>
 
+
+          

FNZCM/FNZCM.BlazorWasm/UI/App.razor.cs

@@ -2,7 +2,6 @@
 using FNZCM.Shared.MetadataModels;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
-using System.Net.Http.Headers;
 
 namespace FNZCM.BlazorWasm.UI
 {
@@ -81,19 +80,9 @@ namespace FNZCM.BlazorWasm.UI
                 : $"{Math.Floor(ts.TotalMinutes):00}:{ts.Seconds:00}";
         }
 
-        private async Task<List<KeyValuePair<string, Library>>> FilterLibrary(IReadOnlyCollection<KeyValuePair<string, Library>> source, string input, CancellationToken ct)
-        {
-            var result = new List<KeyValuePair<string, Library>>();
-
-            foreach (var item in source.Where(p => p.Value.Name.StartsWith(input, StringComparison.OrdinalIgnoreCase))) result.Add(item);
-            foreach (var item in source.Where(p => !p.Value.Name.StartsWith(input, StringComparison.OrdinalIgnoreCase) && p.Value.Name.Contains(input, StringComparison.OrdinalIgnoreCase))) result.Add(item);
-
-            return result;
-        }
-
         public void SelectedLibraryChanged()
         {
-            if(SelectedLibs.Count>0)
+            if (SelectedLibs.Count > 0)
             {
                 var f = SelectedLibs.First();
                 CurrentLibraryKey = f.Key;

FNZCM/FNZCM.BlazorWasm/UI/Components/LibSelector.razor

@@ -0,0 +1,35 @@
+<div class="d-flex flex-row bd-highlight mt-2">
+    <div style="padding-right:5px;">
+        Lobrary (@Libraries.Count) :
+    </div>
+    <Select2 class="flex-fill" TItem="KeyValuePair<string,Library>"
+             TSource="IReadOnlyCollection<KeyValuePair<string,Library>>"
+             IdSelector="c => c.Key"
+             TextSelector="@(c =>c.Value.Name+" | Disc: ("+c.Value.Discs.Count+")")"
+             FilterFunction="FilterLibrary"
+             GetElementById="async (items, id, token) => items.FirstOrDefault(q=>q.Key==id)"
+             Datasource="Libraries.OrderBy(p=>p.Key).ToArray()"
+             Value="@SelectedLibs"
+             Multiselect="false"
+             OnValueChanged="OnValueChanged" />
+</div>
+
+@code {
+    [Parameter,Required]
+    public IDictionary<string, Library> Libraries{ get; set; }
+
+    [Parameter, Required]
+    public List<KeyValuePair<string, Library>> SelectedLibs { get; set; } = new();
+
+    [Parameter] public EventCallback OnValueChanged { get; set; } = EventCallback.Empty;
+
+    private async Task<List<KeyValuePair<string, Library>>> FilterLibrary(IReadOnlyCollection<KeyValuePair<string, Library>> source, string input, CancellationToken ct)
+    {
+        var result = new List<KeyValuePair<string, Library>>();
+
+        foreach (var item in source.Where(p => p.Value.Name.StartsWith(input, StringComparison.OrdinalIgnoreCase))) result.Add(item);
+        foreach (var item in source.Where(p => !p.Value.Name.StartsWith(input, StringComparison.OrdinalIgnoreCase) && p.Value.Name.Contains(input, StringComparison.OrdinalIgnoreCase))) result.Add(item);
+
+        return result;
+    }
+}

FNZCM/FNZCM.BlazorWasm/UI/Components/TrackSetTable.razor

@@ -0,0 +1,26 @@
+
+<table class="table">
+    <thead>
+        <tr>
+            <th scope="col">
+                <a href="@ApiClient.GetListPageUrl(LibraryKey,DiscKey,TrackSetKey)" target="_fnz_play">Play all</a>
+            </th>
+            <th scope="col">Duration</th>
+            <th scope="col">Size</th>
+        </tr>
+    </thead>
+    <tbody>
+        @foreach (var t in Tracks.OrderBy(p => p.Key))
+        {
+            <tr>
+                <th scope="row">
+                    <a href="@ApiClient.GetMediaUrl(LibraryKey,DiscKey,t.Key,TrackSetKey)" target="_fnz_play">@t.Value</a>
+                </th>
+                <td>TODO</td>
+                <td>TODO</td>
+            </tr>
+        }
+    </tbody>
+</table>
+
+ 

FNZCM/FNZCM.BlazorWasm/UI/Components/TrackSetTable.razor.cs

@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Components;
+using System.ComponentModel.DataAnnotations;
+
+namespace FNZCM.BlazorWasm.UI.Components
+{
+    public partial class TrackSetTable : ComponentBase
+    {
+        [Parameter, Required] public string LibraryKey { get; set; }
+        [Parameter, Required] public string DiscKey { get; set; }
+        [Parameter, Required] public string TrackSetKey { get; set; }
+
+        [Parameter, Required] public IReadOnlyCollection<KeyValuePair<string, string>> Tracks { get; set; }
+    }
+}

FNZCM/FNZCM.BlazorWasm/UI/_Imports.razor

@@ -1,9 +1,11 @@
 @using FNZCM.BlazorWasm
 @using FNZCM.BlazorWasm.UI
+@using FNZCM.BlazorWasm.UI.Components
 
 @using FNZCM.Shared
 @using FNZCM.Shared.MediaModels
 
+@using Microsoft.AspNetCore.Components;
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web
@@ -13,7 +15,7 @@
 
 @using KeudellCoding.Blazor.AdvancedBlazorSelect2
 
+@using System.ComponentModel.DataAnnotations;
 @using System.Net.Http
 @using System.Net.Http.Json
 @using System.Threading
-

FNZCM/FNZCM.sln

@@ -16,7 +16,7 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FNZCM.LyricTools", "FNZCM.L
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FNZCM.BlazorWasm", "FNZCM.BlazorWasm\FNZCM.BlazorWasm.csproj", "{CE63EFD6-E86F-43F3-AF70-3A4066AFC37D}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FNZCM.Shared", "FNZCM.Shared\FNZCM.Shared.csproj", "{1E0B8152-0310-4EA1-8271-211F1E41C778}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FNZCM.Shared", "FNZCM.Shared\FNZCM.Shared.csproj", "{1E0B8152-0310-4EA1-8271-211F1E41C778}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution