ListPage version for movies added
This commit is contained in:
@@ -0,0 +1,7 @@
|
|||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
|
namespace WatchIt.Website.Components.ListPage;
|
||||||
|
|
||||||
|
public partial class ListComponent : ComponentBase
|
||||||
|
{
|
||||||
|
}
|
||||||
@@ -51,7 +51,7 @@
|
|||||||
else
|
else
|
||||||
{
|
{
|
||||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||||
<span>Saving...</span>
|
<span>Loading...</span>
|
||||||
}
|
}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -32,7 +32,13 @@
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<button type="button" class="btn btn-sm">Rankings</button>
|
<Dropdown>
|
||||||
|
<DropdownToggle Color="Color.Default" Size="Size.Small" ToggleIconVisible="false">Lists</DropdownToggle>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/lists/movies"))">Movies</DropdownItem>
|
||||||
|
<DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/lists/series"))">TV Series</DropdownItem>
|
||||||
|
</DropdownMenu>
|
||||||
|
</Dropdown>
|
||||||
<button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = true)">⌕</button>
|
<button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = true)">⌕</button>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
88
WatchIt.Website/WatchIt.Website/Pages/ListPage.razor
Normal file
88
WatchIt.Website/WatchIt.Website/Pages/ListPage.razor
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
@layout MainLayout
|
||||||
|
|
||||||
|
@page "/lists/movies"
|
||||||
|
@using WatchIt.Common.Model.Movies
|
||||||
|
|
||||||
|
<div class="container-grid">
|
||||||
|
@if (_loaded)
|
||||||
|
{
|
||||||
|
if (string.IsNullOrWhiteSpace(_error))
|
||||||
|
{
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="rounded-3 panel panel-regular p-2">
|
||||||
|
<div class="container-grid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<h3 class="m-0">Movies database</h3>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
foreach (MovieResponse item in _items)
|
||||||
|
{
|
||||||
|
<div class="row mt-3">
|
||||||
|
<div class="col">
|
||||||
|
<a class="text-reset text-decoration-none" href="/media/@(item.Id)">
|
||||||
|
<div class="rounded-3 panel panel-regular p-2">
|
||||||
|
<ListItemComponent Id="@(item.Id)"
|
||||||
|
Name="@(item.Title)"
|
||||||
|
AdditionalNameInfo="@(item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
|
||||||
|
Rating="@(item.Rating)"
|
||||||
|
PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
if (!_allItemsLoaded)
|
||||||
|
{
|
||||||
|
<div class="row mt-3">
|
||||||
|
<div class="col">
|
||||||
|
<div role="button" class="rounded-3 panel panel-regular p-3" @onclick="DownloadItems">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
@if (!_itemsLoading)
|
||||||
|
{
|
||||||
|
<strong>Load more</strong>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||||
|
<strong>Load more</strong>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<ErrorComponent ErrorMessage="@_error"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="m-5">
|
||||||
|
<LoadingComponent/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
96
WatchIt.Website/WatchIt.Website/Pages/ListPage.razor.cs
Normal file
96
WatchIt.Website/WatchIt.Website/Pages/ListPage.razor.cs
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using WatchIt.Common.Model.Movies;
|
||||||
|
using WatchIt.Website.Services.WebAPI.Media;
|
||||||
|
using WatchIt.Website.Services.WebAPI.Movies;
|
||||||
|
|
||||||
|
namespace WatchIt.Website.Pages;
|
||||||
|
|
||||||
|
public partial class ListPage : ComponentBase
|
||||||
|
{
|
||||||
|
#region SERVICES
|
||||||
|
|
||||||
|
[Inject] private IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!;
|
||||||
|
[Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#region PARAMETERS
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#region FIELDS
|
||||||
|
|
||||||
|
private bool _loaded;
|
||||||
|
private string? _error;
|
||||||
|
|
||||||
|
private MovieQueryParameters _query = new MovieQueryParameters { OrderBy = "rating.average" };
|
||||||
|
private List<MovieResponse> _items = new List<MovieResponse>();
|
||||||
|
private bool _allItemsLoaded;
|
||||||
|
private bool _itemsLoading;
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#region PUBLIC METHODS
|
||||||
|
|
||||||
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||||
|
{
|
||||||
|
if (firstRender)
|
||||||
|
{
|
||||||
|
// INIT
|
||||||
|
_query.First = 5;
|
||||||
|
|
||||||
|
List<Task> endTasks = new List<Task>();
|
||||||
|
|
||||||
|
// STEP 0
|
||||||
|
endTasks.AddRange(
|
||||||
|
[
|
||||||
|
MoviesWebAPIService.GetAllMovies(_query, data =>
|
||||||
|
{
|
||||||
|
_items.AddRange(data);
|
||||||
|
if (data.Count() < 5)
|
||||||
|
{
|
||||||
|
_allItemsLoaded = true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
_query.After = 5;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
|
||||||
|
// END
|
||||||
|
await Task.WhenAll(endTasks);
|
||||||
|
|
||||||
|
_loaded = true;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task DownloadItems()
|
||||||
|
{
|
||||||
|
_itemsLoading = true;
|
||||||
|
await MoviesWebAPIService.GetAllMovies(_query, data =>
|
||||||
|
{
|
||||||
|
_items.AddRange(data);
|
||||||
|
if (data.Count() < 5)
|
||||||
|
{
|
||||||
|
_allItemsLoaded = true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
_query.After += 5;
|
||||||
|
}
|
||||||
|
_itemsLoading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
}
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="rounded-3 panel panel-regular p-2">
|
<div class="rounded-3 panel panel-regular p-2">
|
||||||
<h2 class="m-0 mx-2 mb-1 p-0">@(_media is not null ? "Edit" : "Create new") @(_movieRequest is not null ? "movie" : "series")@(_media is not null ? $" \"{_media.Title}\"" : string.Empty)</h2>
|
<h3 class="m-0 mx-2 mb-1 p-0">@(_media is not null ? "Edit" : "Create new") @(_movieRequest is not null ? "movie" : "series")@(_media is not null ? $" \"{_media.Title}\"" : string.Empty)</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user