Responsive pagination, music album, edit form

.github/workflows/pkg.yaml

@@ -28,7 +28,7 @@ jobs:
     permissions:
       id-token: write
       contents: read
-    uses: devpro/github-workflow-parts/.github/workflows/reusable-container-publication.yml@62dbf6e833e49230ab34ef3c44093ebb727a095f
+    uses: devpro/github-workflow-parts/.github/workflows/reusable-container-publication.yml@4f3152777635eb3bcf1ee21db103d70f790ff1cb
     with:
       create-latest: ${{ github.ref_name == 'main' }}
       image-definition: ${{ matrix.image-definition }}

Directory.Packages.props

@@ -4,25 +4,25 @@
     <CentralPackageTransitivePinningEnabled>true</CentralPackageTransitivePinningEnabled>
   </PropertyGroup>
   <ItemGroup>
-    <PackageVersion Include="AutoMapper" Version="16.1.0" />
+    <PackageVersion Include="AutoMapper" Version="16.1.1" />
     <PackageVersion Include="AwesomeAssertions" Version="9.4.0" />
     <PackageVersion Include="BCrypt.Net-Next" Version="4.1.0" />
     <PackageVersion Include="Bogus" Version="35.6.5" />
     <PackageVersion Include="FirebaseAdmin" Version="3.4.0" />
-    <PackageVersion Include="Microsoft.AspNetCore.Authentication.Google" Version="10.0.3" />
-    <PackageVersion Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.3" />
-    <PackageVersion Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="10.0.3" />
-    <PackageVersion Include="Microsoft.AspNetCore.Mvc.Testing" Version="10.0.3" />
-    <PackageVersion Include="Microsoft.AspNetCore.OpenApi" Version="10.0.3" />
-    <PackageVersion Include="Microsoft.Bcl.AsyncInterfaces" Version="10.0.3" />
-    <PackageVersion Include="Microsoft.Extensions.Logging.Abstractions" Version="10.0.3" />
+    <PackageVersion Include="Microsoft.AspNetCore.Authentication.Google" Version="10.0.5" />
+    <PackageVersion Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="10.0.5" />
+    <PackageVersion Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="10.0.5" />
+    <PackageVersion Include="Microsoft.AspNetCore.Mvc.Testing" Version="10.0.5" />
+    <PackageVersion Include="Microsoft.AspNetCore.OpenApi" Version="10.0.5" />
+    <PackageVersion Include="Microsoft.Bcl.AsyncInterfaces" Version="10.0.5" />
+    <PackageVersion Include="Microsoft.Extensions.Logging.Abstractions" Version="10.0.5" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="18.3.0" />
     <PackageVersion Include="Microsoft.Testing.Extensions.CodeCoverage" Version="18.5.2" />
     <PackageVersion Include="Microsoft.Testing.Extensions.TrxReport" Version="2.1.0" />
     <PackageVersion Include="MongoDB.Bson" Version="3.7.0" />
     <PackageVersion Include="MongoDB.Driver" Version="3.7.0" />
     <PackageVersion Include="Moq" Version="4.20.72" />
-    <PackageVersion Include="Scalar.AspNetCore" Version="2.13.1" />
+    <PackageVersion Include="Scalar.AspNetCore" Version="2.13.8" />
     <PackageVersion Include="SharpCompress" Version="0.44.5" />
     <PackageVersion Include="System.CodeDom" Version="10.0.3" />
     <PackageVersion Include="System.Management" Version="10.0.3" />

README.md

@@ -5,6 +5,7 @@
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=devpro_keeptrack&metric=alert_status)](https://sonarcloud.io/dashboard?id=devpro_keeptrack)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=devpro_keeptrack&metric=coverage)](https://sonarcloud.io/dashboard?id=devpro_keeptrack)
 [![Docker Image Version](https://img.shields.io/docker/v/devprofr/keeptrack-blazorapp?label=Image&logo=docker)](https://hub.docker.com/r/devprofr/keeptrack-blazorapp)
+
 [![FOSSA Status](https://app.fossa.com/api/projects/custom%2B60068%2Fgithub.com%2Fdevpro%2Fkeeptrack.svg?type=shield&issueType=license)](https://app.fossa.com/projects/custom%2B60068%2Fgithub.com%2Fdevpro%2Fkeeptrack?ref=badge_shield&issueType=license)
 [![FOSSA Status](https://app.fossa.com/api/projects/custom%2B60068%2Fgithub.com%2Fdevpro%2Fkeeptrack.svg?type=shield&issueType=security)](https://app.fossa.com/projects/custom%2B60068%2Fgithub.com%2Fdevpro%2Fkeeptrack?ref=badge_shield&issueType=security)
 

src/BlazorApp/Components/Inventory/Clients/MoviesApiClient.cs → src/BlazorApp/Components/Inventory/Clients/MovieApiClient.cs

@@ -2,7 +2,7 @@
 
 namespace Keeptrack.BlazorApp.Components.Inventory.Clients;
 
-public sealed class MoviesApiClient(HttpClient http)
+public sealed class MovieApiClient(HttpClient http)
     : InventoryApiClientBase<MovieDto>(http)
 {
     protected override string ApiResourceName => "/api/movies";

src/BlazorApp/Components/Inventory/Clients/MusicAlbumApiClient.cs

@@ -0,0 +1,9 @@
+using Keeptrack.WebApi.Contracts.Dto;
+
+namespace Keeptrack.BlazorApp.Components.Inventory.Clients;
+
+public sealed class MusicAlbumApiClient(HttpClient http)
+    : InventoryApiClientBase<MusicAlbumDto>(http)
+{
+    protected override string ApiResourceName => "/api/movies";
+}

src/BlazorApp/Components/Inventory/Pages/Books.razor

@@ -31,24 +31,51 @@
         <th>Title</th>
         <th>Author</th>
         <th>Series</th>
+        <th>Rating</th>
         <th>Finished at</th>
     </HeaderTemplate>
     <RowTemplate Context="book">
         <td>@book.Title</td>
         <td>@book.Author</td>
         <td>@book.Series</td>
-        <td>@book.FinishedAt?.ToString("yyyy-MM-dd")</td>
+        <td><span class="kt-stars"><StarRating Rating="book.Rating" /></span></td>
+        <td>@book.FirstReadAt?.ToString("yyyy-MM-dd")</td>
     </RowTemplate>
     <FormTemplate Context="book">
         <input class="form-control" placeholder="Title" @bind="book.Title" />
         <input class="form-control" placeholder="Author" @bind="book.Author" />
         <input class="form-control" placeholder="Series" @bind="book.Series" />
-        <input class="form-control" type="date" placeholder="Finished at" @bind="book.FinishedAt" @bind:format="yyyy-MM-dd" />
+        <input class="form-control" @bind="book.Rating" type="number" min="0" max="5" step="0.1" />
+        <input class="form-control" placeholder="Finished at" @bind="book.FirstReadAt" @bind:format="yyyy-MM-dd" type="date" />
     </FormTemplate>
-    <InlineEditTemplate Context="book">
-        <td><input class="form-control form-control-sm" @bind="book.Title" /></td>
-        <td><input class="form-control form-control-sm" @bind="book.Author" /></td>
-        <td><input class="form-control form-control-sm" @bind="book.Series" /></td>
-        <td><input class="form-control" type="date" @bind="book.FinishedAt" @bind:format="yyyy-MM-dd" /></td>
-    </InlineEditTemplate>
+    <EditModalTemplate Context="book">
+        <div class="col-12">
+            <label class="form-label">Title</label>
+            <input class="form-control" @bind="book.Title" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Author</label>
+            <input class="form-control" @bind="book.Author" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Series</label>
+            <input class="form-control" @bind="book.Series" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Genre</label>
+            <input class="form-control" @bind="book.Genre" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Rating</label>
+            <input class="form-control" @bind="book.Rating" type="number" min="0" max="5" step="0.1" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Notes</label>
+            <textarea class="form-control" @bind="book.Notes" rows="4"></textarea>
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">First read at</label>
+            <input class="form-control" type="date" @bind="book.FirstReadAt" @bind:format="yyyy-MM-dd" />
+        </div>
+    </EditModalTemplate>
 </InventoryList>

src/BlazorApp/Components/Inventory/Pages/Books.razor.cs

@@ -14,7 +14,10 @@ public partial class Books : InventoryPageBase<BookDto>
         Id = item.Id,
         Title = item.Title,
         Author = item.Author,
-        FinishedAt = item.FinishedAt,
-        Series = item.Series
+        Series = item.Series,
+        Genre = item.Genre,
+        Rating = item.Rating,
+        Notes = item.Notes,
+        FirstReadAt = item.FirstReadAt
     };
 }

src/BlazorApp/Components/Inventory/Pages/Movies.razor

@@ -30,54 +30,46 @@
     <HeaderTemplate>
         <th>Title</th>
         <th>Year</th>
-        <th>Genre</th>
         <th>Rating</th>
-        <th>Notes</th>
+        <td>First seen</td>
     </HeaderTemplate>
     <RowTemplate Context="movie">
         <td style="font-weight:500">@movie.Title</td>
-        <td style="color:var(--kt-text-muted)">@(movie.Year > 0 ? movie.Year : "—")</td>
-        <td style="color:var(--kt-text-muted)">@(string.IsNullOrEmpty(movie.Genre) ? "—" : movie.Genre)</td>
-        <td>
-            @if (movie.Rating > 0)
-            {
-                <span class="kt-stars">
-                    @(new string('★', movie.Rating ?? 0))<span class="empty">@(new string('★', 5 - (movie.Rating ?? 0)))</span>
-                </span>
-            }
-            else
-            {
-                <span style="color:var(--kt-text-subtle)">—</span>
-            }
-        </td>
-        <td style="color:var(--kt-text-muted); font-size:0.85rem">@(string.IsNullOrEmpty(movie.Notes) ? "—" : movie.Notes)</td>
+        <td style="color:var(--kt-text-muted)">@(movie.Year > 0 ? movie.Year : "")</td>
+        <td><span class="kt-stars"><StarRating Rating="movie.Rating" /></span></td>
+        <td>@movie.FirstSeenAt?.ToString("yyyy-MM-dd")</td>
     </RowTemplate>
     <FormTemplate Context="movie">
         <input class="form-control" placeholder="Title" @bind="movie.Title"/>
-        <input class="form-control" placeholder="Year" type="number" @bind="movie.Year"/>
+        <input class="form-control" @bind="movie.Year" type="number" min="1970" max="2100" />
         <input class="form-control" placeholder="Genre" @bind="movie.Genre"/>
-        <select class="form-select" @bind="movie.Rating">
-            <option value="0">—</option>
-            @for (var i = 1; i <= 5; i++)
-            {
-                <option value="@i">@(new string('★', i))</option>
-            }
-        </select>
-        <input class="form-control" placeholder="Notes" @bind="movie.Notes"/>
+        <input class="form-control" placeholder="Rating" @bind="movie.Rating" type="number" />
+        <textarea class="form-control" rows="4" @bind="movie.Notes"></textarea>
     </FormTemplate>
-    <InlineEditTemplate Context="movie">
-        <td><input class="form-control form-control-sm" @bind="movie.Title"/></td>
-        <td><input class="form-control form-control-sm" type="number" @bind="movie.Year" style="width:80px"/></td>
-        <td><input class="form-control form-control-sm" @bind="movie.Genre"/></td>
-        <td>
-            <select class="form-select form-select-sm" @bind="movie.Rating" style="width:80px">
-                <option value="0">—</option>
-                @for (var i = 1; i <= 5; i++)
-                {
-                    <option value="@i">@(new string('★', i))</option>
-                }
-            </select>
-        </td>
-        <td><input class="form-control form-control-sm" @bind="movie.Notes"/></td>
-    </InlineEditTemplate>
+    <EditModalTemplate Context="movie">
+        <div class="col-12">
+            <label class="form-label">Title</label>
+            <input class="form-control" @bind="movie.Title" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Year</label>
+            <input class="form-control" @bind="movie.Year" type="number" min="1970" max="2100" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Genre</label>
+            <input class="form-control" @bind="movie.Genre" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Rating</label>
+            <input class="form-control" @bind="movie.Rating" type="number" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Notes</label>
+            <textarea class="form-control" rows="4" @bind="movie.Notes"></textarea>
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">First seen at</label>
+            <input class="form-control" type="date" @bind="movie.FirstSeenAt" @bind:format="yyyy-MM-dd" />
+        </div>
+    </EditModalTemplate>
 </InventoryList>

src/BlazorApp/Components/Inventory/Pages/Movies.razor.cs

@@ -5,7 +5,7 @@ namespace Keeptrack.BlazorApp.Components.Inventory.Pages;
 
 public partial class Movies : InventoryPageBase<MovieDto>
 {
-    [Inject] private MoviesApiClient MovieApi { get; set; } = null!;
+    [Inject] private MovieApiClient MovieApi { get; set; } = null!;
 
     protected override InventoryApiClientBase<MovieDto> Api => MovieApi;
 
@@ -16,6 +16,9 @@ public partial class Movies : InventoryPageBase<MovieDto>
         Year = item.Year,
         Genre = item.Genre,
         Rating = item.Rating,
-        Notes = item.Notes
+        Notes = item.Notes,
+        FirstSeenAt = item.FirstSeenAt,
+        AllocineId = item.AllocineId,
+        ImdbPageId = item.ImdbPageId
     };
 }

src/BlazorApp/Components/Inventory/Pages/MusicAlbums.razor

@@ -0,0 +1,67 @@
+@page "/music-albums"
+@inherits InventoryPageBase<MusicAlbumDto>
+@rendermode InteractiveServer
+@attribute [Authorize]
+
+<InventoryList TDto="MusicAlbumDto"
+               Title="Music Albums"
+               Items="@_items"
+               Loading="@_loading"
+               Error="@_error"
+               Search="@_search"
+               Page="@_page"
+               TotalPages="@TotalPages"
+               TotalCount="@_totalCount"
+               ShowForm="@_showForm"
+               EditingInline="@_editingInline"
+               Form="@_form"
+               InlineForm="@_inlineForm"
+               OnSearchKeyUp="@OnSearchKeyUp"
+               OnClearSearch="@ClearSearch"
+               OnGoToPage="@GoToPage"
+               OnShowAddForm="@ShowAddForm"
+               OnCancelForm="@CancelForm"
+               OnSave="@SaveAsync"
+               OnStartInlineEdit="@StartInlineEdit"
+               OnCancelInline="@CancelInline"
+               OnSaveInline="@SaveInlineAsync"
+               OnDelete="@DeleteAsync"
+               OnSearchChanged="@OnSearchChanged">
+    <HeaderTemplate>
+        <th>Title</th>
+        <th>Artist</th>
+        <th>Rating</th>
+    </HeaderTemplate>
+    <RowTemplate Context="album">
+        <td>@album.Title</td>
+        <td>@album.Artist</td>
+        <td><span class="kt-stars"><StarRating Rating="album.Rating" /></span></td>
+    </RowTemplate>
+    <FormTemplate Context="album">
+        <input class="form-control" placeholder="Title" @bind="album.Title" />
+        <input class="form-control" placeholder="Author" @bind="album.Artist" />
+        <input class="form-control" placeholder="Rating" @bind="album.Rating" type="number" />
+    </FormTemplate>
+    <EditModalTemplate Context="album">
+        <div class="col-12">
+            <label class="form-label">Title</label>
+            <input class="form-control" @bind="album.Title" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Artist</label>
+            <input class="form-control" @bind="album.Artist" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Year</label>
+            <input class="form-control" @bind="album.Year" type="number" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Genre</label>
+            <input class="form-control" @bind="album.Genre" />
+        </div>
+        <div class="col-md-6">
+            <label class="form-label">Rating</label>
+            <input class="form-control" @bind="album.Rating" type="number" />
+        </div>
+    </EditModalTemplate>
+</InventoryList>

src/BlazorApp/Components/Inventory/Pages/MusicAlbums.razor.cs

@@ -0,0 +1,21 @@
+using Keeptrack.WebApi.Contracts.Dto;
+using Microsoft.AspNetCore.Components;
+
+namespace Keeptrack.BlazorApp.Components.Inventory.Pages;
+
+public partial class MusicAlbums : InventoryPageBase<MusicAlbumDto>
+{
+    [Inject] private MusicAlbumApiClient MusicAlbumApi { get; set; } = null!;
+
+    protected override InventoryApiClientBase<MusicAlbumDto> Api => MusicAlbumApi;
+
+    protected override MusicAlbumDto CloneItem(MusicAlbumDto item) => new()
+    {
+        Id = item.Id,
+        Title = item.Title,
+        Artist = item.Artist,
+        Genre = item.Genre,
+        Year = item.Year,
+        Rating = item.Rating
+    };
+}