Started with Private List for 0.1.0-beta version

This commit is contained in:
2026-05-27 19:31:22 +02:00
parent 8e615c15f0
commit 226cc38bf7
4 changed files with 72 additions and 262 deletions
@@ -1,7 +1,6 @@
@page "/GlobalList"
@rendermode InteractiveServer
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@using CouchLog.Data
@using Microsoft.AspNetCore.Identity
@@ -11,17 +10,17 @@
@inject ApplicationDbContext CouchLogDb
@inject UserManager<ApplicationUser> UserManager
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject NavigationManager NavigationManager
@inject IDialogService DialogService
@inject ISnackbar Snackbar
@attribute [Authorize]
<PageTitle>GlobalList</PageTitle>
@*
TODO: Add Paging
TODO: Add only reload for the pages
TODO: Make Search work
*@
<MudContainer MaxWidth="MaxWidth.False">
@*Top of the Page*@
@@ -0,0 +1,10 @@
@using CouchLog.Data
<MudContainer>
<MudText Typo="Typo.h6">@PrivateEntity.GlobalEntity.Title</MudText>
</MudContainer>
@code
{
[Parameter] public PrivateEntity PrivateEntity { get; set; } = null!;
}
@@ -1,6 +1,7 @@
@page "/PrivateList"
@rendermode InteractiveServer
@using CouchLog.Components.Pages.PrivateList.Components
@using Microsoft.AspNetCore.Authorization
@using CouchLog.Data
@using Microsoft.AspNetCore.Identity
@@ -15,218 +16,79 @@
<PageTitle>Private List</PageTitle>
<div class="container-fluid mt-4 px-4">
<MudContainer MaxWidth="MaxWidth.False">
@*Top of the Page*@
<MudContainer>
<MudStack Row="true" AlignItems="AlignItems.Center">
@*Page Title*@
<MudText Typo="Typo.h3" Style="font-weight: bold;">Private List</MudText>
</MudStack>
</MudContainer>
<!-- Active Watching Section -->
@if (ActiveWatchingEntities.Any())
{
<div class="mb-5">
<h2 class="mb-4">Aktiv am Schauen</h2>
<div class="row g-4">
@foreach (var entity in ActiveWatchingEntities)
{
@RenderEntityCard(entity)
}
</div>
</div>
}
<br/>
<!-- Library / Completed Section -->
@if (LibraryEntities.Any())
{
<div class="mb-5">
<h2 class="mb-4">Bibliothek</h2>
<div class="row g-4">
@foreach (var entity in LibraryEntities)
{
@RenderEntityCard(entity)
}
</div>
</div>
}
<MudContainer>
<MudPaper Class="pa-2" Elevation="1">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
<MudTextField @bind-Value="_searchString"
Placeholder="Search..."
Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search"
Immediate="true"
Variant="Variant.Outlined"
Margin="Margin.Dense"
Style="max-width: 300px;"/>
</MudStack>
</MudPaper>
</MudContainer>
@if (!PrivateEntities.Any())
<br/>
<MudContainer MaxWidth="MaxWidth.False">
<MudGrid Spacing="6" Justify="Justify.Center">
@foreach (var privateEntity in ActiveWatchingEntities)
{
<div class="text-center text-muted py-5">
<p>Keine Einträge vorhanden.</p>
</div>
<EntityCard PrivateEntity="privateEntity" />
}
</div>
@foreach (var privateEntity in LibraryEntities)
{
<EntityCard PrivateEntity="privateEntity" />
}
</MudGrid>
</MudContainer>
</MudContainer>
@code
{
private List<PrivateEntity> PrivateEntities = new List<PrivateEntity>();
private List<UserWatchStatus> userWatchStatuses = new List<UserWatchStatus>();
ApplicationUser? AppUser = new();
//Search
private string _searchString;
private List<PrivateEntity> ActiveWatchingEntities => PrivateEntities.Where(x => x.UserWatchStatus?.Name == "Watching").ToList();
private List<PrivateEntity> LibraryEntities => PrivateEntities.Where(x => x.UserWatchStatus?.Name != "Watching").ToList();
//User
private ApplicationUser? _appUser;
//Entities
private List<PrivateEntity> _privateEntities = [];
private List<UserWatchStatus> _userWatchStatuses = [];
private List<PrivateEntity> ActiveWatchingEntities => _privateEntities.Where(x => x.UserWatchStatus?.Name == "Watching").ToList();
private List<PrivateEntity> LibraryEntities => _privateEntities.Where(x => x.UserWatchStatus?.Name != "Watching").ToList();
protected override async Task OnInitializedAsync()
{
var AuthState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
AppUser = await UserManager.GetUserAsync(AuthState.User);
var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
_appUser = await UserManager.GetUserAsync(authState.User);
if (AppUser != null)
if (_appUser != null)
{
PrivateEntities = await CouchLogDB.PrivateEntities
.Where(x => x.UserId == AppUser.Id)
_privateEntities = await CouchLogDB.PrivateEntities
.Where(x => x.UserId == _appUser.Id)
.Include(x => x.GlobalEntity)
.Include(x => x.UserWatchStatus)
.Include(x => x.GlobalEntity.MediaType)
.OrderByDescending(Entity => Entity.LastChange ?? Entity.CreationTime)
.OrderByDescending(entity => entity.LastChange ?? entity.CreationTime)
.ToListAsync();
userWatchStatuses = await CouchLogDB.UserWatchStatuses.OrderByDescending(Entity => Entity.Id).ToListAsync();
}
}
private RenderFragment RenderEntityCard(PrivateEntity Entity) => __builder =>
{
<div class="col-12 col-lg-6 col-xxl-4">
<div class="card shadow-sm border-0 overflow-hidden private-entity-card">
<div class="row g-0 h-100">
<div class="col-auto" style="flex: 0 0 auto; min-width: 120px; max-width: 150px;">
@if (!string.IsNullOrEmpty(Entity.GlobalEntity?.PicturePath))
{
<img src="/@Entity.GlobalEntity.PicturePath"
class="entity-img w-100 h-100"
style="object-fit: cover;"
alt="@Entity.GlobalEntity.Title">
}
else
{
<div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted small">
Kein Bild
</div>
}
</div>
<!-- Content -->
<div class="col" style="min-width: 0;">
<div class="card-body d-flex flex-column h-100 py-2 px-3">
<!-- Header -->
<div class="d-flex justify-content-between align-items-start mb-2">
<div style="min-width: 0; flex: 1;">
<h5 class="card-title fw-bold mb-0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
@Entity.GlobalEntity?.Title
</h5>
<small class="text-muted meta-text">
@Entity.CreationTime.ToShortDateString()
</small>
</div>
<div class="dropdown ms-2" style="flex-shrink: 0;">
<button class="btn btn-link menu-btn" type="button" data-bs-toggle="modal" data-bs-target="#modal-@Entity.Id">
&#8942;
</button>
</div>
</div>
<!-- Watch Status Dropdown -->
<select class="form-select"
value="@Entity.UserWatchStatusId"
@onchange="@(e => UpdateWatchStatus(Entity, e.Value))">
@foreach (var status in userWatchStatuses)
{
<option value="@status.Id">@status.Name</option>
}
</select>
@if (Entity.GlobalEntity?.MediaType.Name == "Series" || Entity.GlobalEntity?.MediaType.Name == "Anime")
{
<select class="form-select" value="@Entity.Season" @onchange="@(e => UpdateSeason(Entity, e.Value))">
@{
int currentSeason = Entity.Season ?? 1;
int startOffsetSeason = currentSeason > 1 ? -1 : 0;
}
@for (int i = startOffsetSeason; i <= 5; i++)
{
int season = currentSeason + i;
<option value="@season">Staffel @season</option>
}
</select>
<select class="form-select" value="@Entity.Episode" @onchange="@(e => UpdateEpisode(Entity, e.Value))">
@{
int currentEpisode = Entity.Episode ?? 1;
int startOffsetEpisode = currentEpisode > 1 ? -1 : 0;
}
@for (int i = startOffsetEpisode; i <= 5; i++)
{
int episode = currentEpisode + i;
<option value="@episode">Episode @episode</option>
}
</select>
}
<!-- Footer Button -->
<div class="mt-auto d-flex justify-content-end">
<button class="btn btn-outline-secondary btn-sm btn-details" type="button">Details</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal-@Entity.Id" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Optionen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" @onclick="@(e => RemoveEntityFromPrivateList(Entity))" data-bs-dismiss="modal">Aus PrivateList entfernen</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
</div>
</div>
</div>
</div>
</div>
};
private async Task RemoveEntityFromPrivateList(PrivateEntity entity)
{
//Delete DB
CouchLogDB.PrivateEntities.Remove(entity);
await CouchLogDB.SaveChangesAsync();
//Delete Memory List
PrivateEntities.Remove(entity);
}
private async Task UpdateWatchStatus(PrivateEntity entity, object? newValue)
{
if (int.TryParse(newValue?.ToString(), out int newId))
{
entity.UserWatchStatusId = newId;
entity.UserWatchStatus = userWatchStatuses.FirstOrDefault(s => s.Id == newId);
await CouchLogDB.SaveChangesAsync();
}
}
private async Task UpdateSeason(PrivateEntity entity, object? newSeasonValue)
{
if (int.TryParse(newSeasonValue?.ToString(), out int newSeason))
{
entity.Season = newSeason;
entity.Episode = 1;
await CouchLogDB.SaveChangesAsync();
}
}
private async Task UpdateEpisode(PrivateEntity entity, object? newEpisodeValue)
{
if (int.TryParse(newEpisodeValue?.ToString(), out int newEpisode))
{
entity.Episode = newEpisode;
await CouchLogDB.SaveChangesAsync();
_userWatchStatuses = await CouchLogDB.UserWatchStatuses.OrderByDescending(entity => entity.Id).ToListAsync();
}
}
}
@@ -1,61 +0,0 @@
/* PrivateList.razor.css */
.private-entity-card {
height: 220px;
background-color: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.private-entity-card:hover {
transform: translateY(-3px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
/*
NEU: Feste Breite für das Bild!
150px Breite bei 220px Höhe passt perfekt für Poster.
*/
.img-wrapper {
width: 150px;
background-color: #f0f2f5;
position: relative;
}
/* Bild füllt den Wrapper komplett aus */
.entity-img {
object-fit: cover;
width: 100%;
height: 100%;
/* Positioniert das Bild oben, falls das Format doch leicht abweicht (Köpfe/Titel sind meist oben) */
object-position: top center;
}
.text-truncate-multiline {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.2;
}
.meta-text {
font-size: 0.75rem;
white-space: nowrap;
}
.menu-btn {
color: #212529;
text-decoration: none;
font-size: 1.2rem;
line-height: 1;
padding: 0 0.25rem;
}
.menu-btn:hover {
color: #000;
}
.btn-details {
font-size: 0.7rem;
padding: 0.2rem 0.6rem;
}