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
|
||||
{
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span>Saving...</span>
|
||||
<span>Loading...</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -32,7 +32,13 @@
|
||||
}
|
||||
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>
|
||||
}
|
||||
</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="col">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user