daniel-c-harvey
53 lines
2.0 KiB
Plaintext
53 lines
2.0 KiB
Plaintext
@using DeepDrftModels.DTOs
|
|
|
|
@if (IsLoading)
|
|
{
|
|
<MudProgressCircular Indeterminate="true" Class="mt-4" />
|
|
}
|
|
else if (Genres.Count == 0)
|
|
{
|
|
<MudText Typo="Typo.body1" Class="mt-4">No genres found.</MudText>
|
|
}
|
|
else
|
|
{
|
|
<MudGrid Spacing="3" Class="mt-2">
|
|
@foreach (var genre in Genres)
|
|
{
|
|
var isExpanded = ExpandedGenre == genre.Genre;
|
|
<MudItem xs="12" sm="6" md="4">
|
|
<MudCard Elevation="@(isExpanded ? 4 : 1)"
|
|
Style="cursor: pointer;"
|
|
@onclick="@(() => ToggleGenre(genre.Genre))">
|
|
<div class="@SwatchClass(isExpanded)"></div>
|
|
<MudCardContent>
|
|
<MudText Typo="Typo.h6">@genre.Genre</MudText>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">@genre.TrackCount track(s)</MudText>
|
|
</MudCardContent>
|
|
</MudCard>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
|
|
@if (ExpandedGenre is not null)
|
|
{
|
|
<MudDivider Class="my-4" />
|
|
<MudText Typo="Typo.h6" Class="mb-2">@ExpandedGenre</MudText>
|
|
<CmsTrackGrid @key="ExpandedGenre" GenreFilter="@ExpandedGenre" ShowAddButton="false" />
|
|
}
|
|
}
|
|
|
|
@code {
|
|
[Parameter] public IReadOnlyList<GenreSummaryDto> Genres { get; set; } = Array.Empty<GenreSummaryDto>();
|
|
[Parameter] public bool IsLoading { get; set; }
|
|
[Parameter] public string? ExpandedGenre { get; set; }
|
|
[Parameter] public EventCallback<string?> OnExpandedGenreChanged { get; set; }
|
|
|
|
// The view model owns the toggle (selecting the open genre collapses it), so we pass the raw
|
|
// clicked genre rather than pre-computing the next state here — keeps the toggle logic single-sourced.
|
|
private async Task ToggleGenre(string genre) =>
|
|
await OnExpandedGenreChanged.InvokeAsync(genre);
|
|
|
|
private static string SwatchClass(bool isExpanded) =>
|
|
isExpanded ? "cms-genre-swatch cms-genre-swatch--active" : "cms-genre-swatch";
|
|
}
|