Front End Track Gallery Controls

- Theming adjustments (still needs a lot of work)
2025-09-04 14:18:35 -04:00
parent 5050074f4f
commit 27522c1e1c
11 changed files with 224 additions and 77 deletions
@@ -1,40 +0,0 @@
-@page "/tracks"
-@using DeepDrftModels.DTOs
-@using DeepDrftModels.Entities
-
-<h3>Track Gallery</h3>
-
-<MudContainer>
-    
-@if (ViewModel.Page != null)
-{
-    <MudTable T="TrackEntity" Items="@ViewModel.Page.Items" Hover="true" Breakpoint="Breakpoint.Sm">
-        <HeaderContent>
-            <MudTh>Name</MudTh>
-            <MudTh>Artist</MudTh>
-            <MudTh>Album</MudTh>
-            <MudTh>Genre</MudTh>
-            <MudTh>Released</MudTh>
-            <MudTh>Actions</MudTh>
-        </HeaderContent>
-        <RowTemplate>
-            <MudTd DataLabel="Name">@context.TrackName</MudTd>
-            <MudTd DataLabel="Artist">@context.Artist</MudTd>
-            <MudTd DataLabel="Album">@context.Album</MudTd>
-            <MudTd DataLabel="Genre">@context.Genre</MudTd>
-            <MudTd DataLabel="Released">@context.ReleaseDate</MudTd>
-            <MudTd DataLabel="Actions">
-                <MudButton Variant="Variant.Text" Color="Color.Primary">View</MudButton>
-            </MudTd>
-        </RowTemplate>
-    </MudTable>
-
-    <MudPagination Count="@ViewModel.Page.TotalPages" Selected="@ViewModel.Page.Page" SelectedChanged="i => SetPage(i)" BoundaryCount="2" MiddleCount="3"/>
-}
-else
-{
-    <MudSkeleton Height="650px" Class="pa-2 ma-2"/>
-    <MudSkeleton Height="80px"/>
-    <MudSpacer />
-}
-</MudContainer>
@@ -0,0 +1,46 @@
+@page "/tracks"
+@using DeepDrftModels.DTOs
+@using DeepDrftModels.Entities
+@using DeepDrftWeb.Client.Controls
+
+<h3>Track Gallery</h3>
+    
+@if (ViewModel.Page != null)
+{
+    @* <MudTable T="TrackEntity" Items="@ViewModel.Page.Items" Hover="true" Breakpoint="Breakpoint.Sm"> *@
+    @*     <HeaderContent> *@
+    @*         <MudTh>Name</MudTh> *@
+    @*         <MudTh>Artist</MudTh> *@
+    @*         <MudTh>Album</MudTh> *@
+    @*         <MudTh>Genre</MudTh> *@
+    @*         <MudTh>Released</MudTh> *@
+    @*         <MudTh>Actions</MudTh> *@
+    @*     </HeaderContent> *@
+    @*     <RowTemplate> *@
+    @*         <MudTd DataLabel="Name">@context.TrackName</MudTd> *@
+    @*         <MudTd DataLabel="Artist">@context.Artist</MudTd> *@
+    @*         <MudTd DataLabel="Album">@context.Album</MudTd> *@
+    @*         <MudTd DataLabel="Genre">@context.Genre</MudTd> *@
+    @*         <MudTd DataLabel="Released">@context.ReleaseDate</MudTd> *@
+    @*         <MudTd DataLabel="Actions"> *@
+    @*             <MudButton Variant="Variant.Text" Color="Color.Primary">View</MudButton> *@
+    @*         </MudTd> *@
+    @*     </RowTemplate> *@
+    @* </MudTable> *@
+    
+    <TracksGallery Tracks="@ViewModel.Page.Items" />
+    
+    <MudContainer Class="d-flex justify-center my-4 py-4">
+        <MudPagination Count="@ViewModel.Page.TotalPages" 
+                       Selected="@ViewModel.Page.Page" 
+                       SelectedChanged="i => SetPage(i)" 
+                       BoundaryCount="2" 
+                       MiddleCount="3"/>
+    </MudContainer>
+}
+else
+{
+    <MudSkeleton Height="650px" Class="pa-2 ma-2"/>
+    <MudSkeleton Height="80px"/>
+    <MudSpacer />
+}
@@ -5,10 +5,10 @@ using Microsoft.AspNetCore.Components;

 namespace DeepDrftWeb.Client.Pages;

-public partial class TrackGallery : ComponentBase
+public partial class TracksView : ComponentBase
 {
    [Inject]
-    public required TrackGalleryViewModel ViewModel { get; set; }
+    public required TracksViewModel ViewModel { get; set; }


    protected override async Task OnInitializedAsync()