Track Gallery front end

- For now uses a table but will replace with graphical media cards
2025-09-01 16:50:08 -04:00
parent 3d79df725c
commit f0d60190cc
9 changed files with 176 additions and 60 deletions
@@ -0,0 +1,40 @@
+@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>