database page finished

WatchIt.Common/WatchIt.Common.Model/Media/MediaQueryParameters.cs

@@ -38,22 +38,22 @@ public class MediaQueryParameters : QueryParameters<MediaResponse>
     public short? LengthTo { get; set; }
 
     [FromQuery(Name = "rating_average")]
-    public double? RatingAverage { get; set; }
+    public decimal? RatingAverage { get; set; }
 
     [FromQuery(Name = "rating_average_from")]
-    public double? RatingAverageFrom { get; set; }
+    public decimal? RatingAverageFrom { get; set; }
 
     [FromQuery(Name = "rating_average_to")]
-    public double? RatingAverageTo { get; set; }
+    public decimal? RatingAverageTo { get; set; }
 
     [FromQuery(Name = "rating_count")]
-    public double? RatingCount { get; set; }
+    public long? RatingCount { get; set; }
 
     [FromQuery(Name = "rating_count_from")]
-    public double? RatingCountFrom { get; set; }
+    public long? RatingCountFrom { get; set; }
 
     [FromQuery(Name = "rating_count_to")]
-    public double? RatingCountTo { get; set; }
+    public long? RatingCountTo { get; set; }
 
     #endregion
     

WatchIt.Common/WatchIt.Common.Model/Movies/MovieQueryParameters.cs

@@ -44,22 +44,22 @@ public class MovieQueryParameters : QueryParameters<MovieResponse>
     public decimal? BudgetTo { get; set; }
 
     [FromQuery(Name = "rating_average")]
-    public double? RatingAverage { get; set; }
+    public decimal? RatingAverage { get; set; }
 
     [FromQuery(Name = "rating_average_from")]
-    public double? RatingAverageFrom { get; set; }
+    public decimal? RatingAverageFrom { get; set; }
 
     [FromQuery(Name = "rating_average_to")]
-    public double? RatingAverageTo { get; set; }
+    public decimal? RatingAverageTo { get; set; }
 
     [FromQuery(Name = "rating_count")]
-    public double? RatingCount { get; set; }
+    public long? RatingCount { get; set; }
 
     [FromQuery(Name = "rating_count_from")]
-    public double? RatingCountFrom { get; set; }
+    public long? RatingCountFrom { get; set; }
 
     [FromQuery(Name = "rating_count_to")]
-    public double? RatingCountTo { get; set; }
+    public long? RatingCountTo { get; set; }
 
     #endregion
     

WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs

@@ -9,7 +9,7 @@ public class RatingResponse
     #region PROPERTIES
     
     [JsonPropertyName("average")]
-    public required double Average { get; set; }
+    public required decimal Average { get; set; }
     
     [JsonPropertyName("count")]
     public required long Count { get; set; }
@@ -24,10 +24,10 @@ public class RatingResponse
     public RatingResponse() {}
 
     [SetsRequiredMembers]
-    public RatingResponse(IEnumerable<RatingMedia> ratingMedia) : this(ratingMedia.Any() ? ratingMedia.Average(x => x.Rating) : 0, ratingMedia.Count()) {}
+    public RatingResponse(IEnumerable<RatingMedia> ratingMedia) : this(ratingMedia.Any() ? (decimal)ratingMedia.Average(x => x.Rating) : 0, ratingMedia.Count()) {}
 
     [SetsRequiredMembers]
-    public RatingResponse(double ratingAverage, long ratingCount)
+    public RatingResponse(decimal ratingAverage, long ratingCount)
     {
         Average = ratingAverage;
         Count = ratingCount;

WatchIt.Common/WatchIt.Common.Model/Series/SeriesQueryParameters.cs

@@ -38,22 +38,22 @@ public class SeriesQueryParameters : QueryParameters<SeriesResponse>
     public bool? HasEnded { get; set; }
 
     [FromQuery(Name = "rating_average")]
-    public double? RatingAverage { get; set; }
+    public decimal? RatingAverage { get; set; }
 
     [FromQuery(Name = "rating_average_from")]
-    public double? RatingAverageFrom { get; set; }
+    public decimal? RatingAverageFrom { get; set; }
 
     [FromQuery(Name = "rating_average_to")]
-    public double? RatingAverageTo { get; set; }
+    public decimal? RatingAverageTo { get; set; }
 
     [FromQuery(Name = "rating_count")]
-    public double? RatingCount { get; set; }
+    public long? RatingCount { get; set; }
 
     [FromQuery(Name = "rating_count_from")]
-    public double? RatingCountFrom { get; set; }
+    public long? RatingCountFrom { get; set; }
 
     [FromQuery(Name = "rating_count_to")]
-    public double? RatingCountTo { get; set; }
+    public long? RatingCountTo { get; set; }
 
     #endregion
     

WatchIt.Common/WatchIt.Common.Query/QueryParameters.cs

@@ -1,4 +1,5 @@
-using System.Reflection;
+using System.Globalization;
+using System.Reflection;
 using System.Text;
 using System.Text.Json.Serialization;
 using System.Text.RegularExpressions;
@@ -38,7 +39,12 @@ public abstract class QueryParameters
             FromQueryAttribute? attribute = property.GetCustomAttributes<FromQueryAttribute>(true).FirstOrDefault();
             if (value is not null && attribute is not null)
             {
-                string query = $"{attribute.Name}={value}";
+                string valueString = (value switch
+                {
+                    decimal d => d.ToString(CultureInfo.InvariantCulture),
+                    _ => value.ToString()
+                })!;
+                string query = $"{attribute.Name}={valueString}";
                 queries.Add(query);
             }
         }
@@ -92,7 +98,7 @@ public abstract class QueryParameters
             (
                 property is not null
                 &&
-                property.CompareTo(from) > 0
+                property.CompareTo(from) >= 0
             )
         )
         &&

WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs

@@ -108,9 +108,7 @@ public class MediaControllerService(DatabaseContext database, IUserService userS
             return RequestResult.NotFound();
         }
         
-        double ratingAverage = item.RatingMedia.Any() ? item.RatingMedia.Average(x => x.Rating) : 0;
-        long ratingCount = item.RatingMedia.Count();
-        RatingResponse ratingResponse = new RatingResponse(ratingAverage, ratingCount);
+        RatingResponse ratingResponse = new RatingResponse(item.RatingMedia);
         
         return RequestResult.Ok(ratingResponse);
     }

WatchIt.Website/WatchIt.Website/App.razor

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="css/general.css?version=0.2.0.3"/>
     <link rel="stylesheet" href="css/main_button.css?version=0.2.0.0"/>
     <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.12"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     
     <!-- BOOTSTRAP -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor

@@ -0,0 +1,91 @@
+@typeparam TItem where TItem : WatchIt.Common.Query.IQueryOrderable<TItem>
+@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters<TItem>
+
+
+           
+<CascadingValue Value="this">
+    <div class="vstack gap-3">
+        <div class="rounded-3 panel panel-regular p-2 px-3 z-3">
+            <div class="container-grid">
+                <div class="row gx-3">
+                    <div class="col">
+                        <h2 class="m-0">@(Title)</h2>
+                    </div>
+                    <div class="col-auto align-self-center">
+                        <div class="input-group input-group-sm">
+                            <span class="input-group-text">Order by</span>
+                            <select class="form-select" @onchange="SortingOptionChanged">
+                                @foreach (KeyValuePair<string, string> sortingOption in SortingOptions)
+                                {
+                                    <option value="@(sortingOption.Key)">@(sortingOption.Value)</option>
+                                }
+                            </select>
+                            <input type="checkbox" class="btn-check" id="sortingAscending" autocomplete="off" @onchange="SortingAscendingChanged">
+                            <label class="btn btn-outline-secondary" for="sortingAscending">&#8595;&#xFE0E;</label>
+                        </div>
+                    </div>
+                    <div class="col-auto align-self-center">
+                        <div class="d-flex">
+                            <Dropdown RightAligned>
+                                <DropdownToggle Color="Color.Secondary" Size="Size.Small">
+                                    <i class="fa fa-filter"></i>
+                                </DropdownToggle>
+                                <DropdownMenu Class="p-2">
+                                    <DropdownHeader>Filters</DropdownHeader>
+                                    <DropdownDivider/>
+                                    @(ChildContent)
+                                    <DropdownDivider/>
+                                    <button class="btn btn-secondary btn-sm w-100" @onclick="FilterApplied">Apply</button>
+                                </DropdownMenu>
+                            </Dropdown>
+                        </div>
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+        @if (_loaded)
+        {
+            if (string.IsNullOrWhiteSpace(_error))
+            {
+                foreach (TItem item in _items)
+                {
+                    <div role="button" class="rounded-3 panel panel-regular p-2" @onclick="@(() => NavigationManager.NavigateTo(string.Format(UrlIdTemplate, IdSource(item))))">
+                        <ListItemComponent Id="@(IdSource(item))"
+                                           Name="@(NameSource(item))"
+                                           AdditionalNameInfo="@(AdditionalNameInfoSource(item))"
+                                           Rating="@(RatingSource(item))"
+                                           PictureDownloadingTask="@(PictureDownloadingTask)"/>
+                    </div>
+                }
+                if (!_allItemsLoaded)
+                {
+                    <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>Loading...</strong>
+                            }
+                        </div>
+                    </div>
+                }
+            }
+            else
+            {
+                <ErrorComponent ErrorMessage="@_error"/>
+            }
+        }
+        else
+        {
+            <div class="m-5">
+                <LoadingComponent/>
+            </div>
+        }
+    </div>
+</CascadingValue>
+           

WatchIt.Website/WatchIt.Website/Components/DatabasePage/DatabasePageComponent.razor.cs

@@ -0,0 +1,139 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
+using WatchIt.Common.Model.Movies;
+using WatchIt.Common.Model.Rating;
+using WatchIt.Common.Query;
+
+namespace WatchIt.Website.Components.DatabasePage;
+
+public partial class DatabasePageComponent<TItem, TQuery> : ComponentBase where TItem : IQueryOrderable<TItem> where TQuery : QueryParameters<TItem>
+{
+    #region SERVICES
+    
+    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required string Title { get; set; }
+    [Parameter] public required Func<TItem, long> IdSource { get; set; }
+    [Parameter] public required Func<TItem, string> NameSource { get; set; }
+    [Parameter] public Func<TItem, string?> AdditionalNameInfoSource { get; set; } = _ => null;
+    [Parameter] public required Func<TItem, RatingResponse> RatingSource { get; set; }
+    [Parameter] public required string UrlIdTemplate { get; set; }
+    [Parameter] public required Func<long, Action<Picture>, Task> PictureDownloadingTask { get; set; }
+    [Parameter] public required Func<TQuery, Action<IEnumerable<TItem>>, Task> ItemDownloadingTask { get; set; }
+    [Parameter] public required Dictionary<string, string> SortingOptions { get; set; }
+    [Parameter] public required RenderFragment ChildContent { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    private string? _error;
+
+    private List<TItem> _items = new List<TItem>();
+    private bool _allItemsLoaded;
+    private bool _itemsLoading;
+    
+    #endregion
+    
+    
+    
+    #region PROPERTIES
+    
+    public TQuery Query { get; set; } = Activator.CreateInstance<TQuery>()!;
+    
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // INIT
+            Query.OrderBy = SortingOptions.Keys.First();
+            Query.First = 100;
+
+            List<Task> endTasks = new List<Task>();
+
+            // STEP 0
+            endTasks.AddRange(
+            [
+                ItemDownloadingTask(Query, data =>
+                {
+                    _items.AddRange(data);
+                    if (data.Count() < 100)
+                    {
+                        _allItemsLoaded = true;
+                    }
+                    else
+                    {
+                        Query.After = 100;
+                    }
+                })
+            ]);
+
+            // END
+            await Task.WhenAll(endTasks);
+
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    private async Task DownloadItems()
+    {
+        _itemsLoading = true;
+        await ItemDownloadingTask(Query, AppendNewItems);
+    }
+    
+    private async Task SortingAscendingChanged(ChangeEventArgs args)
+    {
+        Query.Order = (bool)args.Value! ? "asc" : "desc";
+        await UpdateItems();
+    }
+    
+    private async Task SortingOptionChanged(ChangeEventArgs args)
+    {
+        Query.OrderBy = args.Value!.ToString();
+        await UpdateItems();
+    }
+
+    private async Task FilterApplied() => await UpdateItems();
+
+    private async Task UpdateItems()
+    {
+        _loaded = false;
+        Query.First = 100;
+        Query.After = null;
+        _items.Clear();
+        await ItemDownloadingTask(Query, AppendNewItems);
+        _loaded = true;
+    }
+
+    private void AppendNewItems(IEnumerable<TItem> items)
+    {
+        _items.AddRange(items);
+        if (items.Count() < 100)
+        {
+            _allItemsLoaded = true;
+        }
+        else
+        {
+            Query.After += 100;
+        }
+        _itemsLoading = false;
+    }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/DatabasePage/FilterFormComponent.cs

@@ -0,0 +1,22 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Query;
+
+namespace WatchIt.Website.Components.DatabasePage;
+
+public abstract class FilterFormComponent<TItem, TQuery> : ComponentBase where TItem : IQueryOrderable<TItem> where TQuery : QueryParameters<TItem>
+{
+    #region PARAMETERS
+    
+    [CascadingParameter]
+    protected DatabasePageComponent<TItem, TQuery> Parent { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+    
+    protected TQuery? Query => Parent?.Query;
+    
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/DatabasePage/MoviesFilterFormComponent.razor

@@ -0,0 +1,66 @@
+@inherits FilterFormComponent<WatchIt.Common.Model.Movies.MovieResponse, WatchIt.Common.Model.Movies.MovieQueryParameters>
+
+
+
+<EditForm Model="@(Query)">
+    <div class="container-grid">
+        <div class="row mb-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Title</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.Title)"></InputText>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Original title</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.OriginalTitle)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Description</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.Description)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Release date</span>
+                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateTo)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Length</span>
+                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthTo)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Budget</span>
+                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" @bind-Value="@(Query.BudgetFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" @bind-Value="@(Query.BudgetTo)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Rating (count)</span>
+                <NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.RatingCountFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.RatingCountTo)"/>
+            </div>
+        </div>
+        <div class="row mt-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Rating (average)</span>
+                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageTo)"/>
+            </div>
+        </div>
+    </div>
+</EditForm>

WatchIt.Website/WatchIt.Website/Components/DatabasePage/SeriesFilterFormComponent.razor

@@ -0,0 +1,69 @@
+@inherits FilterFormComponent<WatchIt.Common.Model.Series.SeriesResponse, WatchIt.Common.Model.Series.SeriesQueryParameters>
+
+<EditForm Model="@(Query)">
+    <div class="container-grid">
+        <div class="row mb-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Title</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.Title)"></InputText>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Original title</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.OriginalTitle)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Description</span>
+                <InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.Description)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Release date</span>
+                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.ReleaseDateTo)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Length</span>
+                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="short?" Class="col form-control" Min="0" @bind-Value="@(Query.LengthTo)"/>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Has ended</span>
+                <div class="btn-group col">
+                    <input type="radio" class="btn-check" name="has_ended" id="has_ended_yes" autocomplete="off" @onclick="() => Query.HasEnded = true">
+                    <label class="btn btn-outline-secondary btn-sm" for="has_ended_yes">Yes</label>
+                    <input type="radio" class="btn-check" name="has_ended" id="has_ended_no_choice" autocomplete="off" @onclick="() => Query.HasEnded = null" checked>
+                    <label class="btn btn-outline-secondary btn-sm" for="has_ended_no_choice">No choice</label>
+                    <input type="radio" class="btn-check" name="has_ended" id="has_ended_no" autocomplete="off" @onclick="() => Query.HasEnded = false">
+                    <label class="btn btn-outline-secondary btn-sm" for="has_ended_no">No</label>
+                </div>
+            </div>
+        </div>
+        <div class="row my-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Rating (count)</span>
+                <NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.RatingCountFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.RatingCountTo)"/>
+            </div>
+        </div>
+        <div class="row mt-1">
+            <div class="input-group input-group-sm">
+                <span class="col-3 input-group-text">Rating (average)</span>
+                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageFrom)"/>
+                <span class="col-auto input-group-text">-</span>
+                <NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageTo)"/>
+            </div>
+        </div>
+    </div>
+</EditForm>

WatchIt.Website/WatchIt.Website/Components/ListPage/ListComponent.razor.cs

@@ -1,7 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace WatchIt.Website.Components.ListPage;
-
-public partial class ListComponent : ComponentBase
-{
-}

WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor

@@ -33,10 +33,10 @@
                                         else
                                         {
                                             <Dropdown>
-                                                <DropdownToggle Color="Color.Default" Size="Size.Small" ToggleIconVisible="false">Lists</DropdownToggle>
+                                                <DropdownToggle Color="Color.Default" Size="Size.Small" ToggleIconVisible="false">Database</DropdownToggle>
                                                 <DropdownMenu>
-                                                    <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/lists/movies"))">Movies</DropdownItem>
-                                                    <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/lists/series"))">TV Series</DropdownItem>
+                                                    <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/database/movies"))">Movies</DropdownItem>
+                                                    <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/database/series"))">TV Series</DropdownItem>
                                                 </DropdownMenu>
                                             </Dropdown>
                                             <button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = true)">⌕</button>

WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor

@@ -89,9 +89,9 @@
                 }
                 <div class="btn-group w-100">
                     <input type="radio" class="btn-check" name="signtype" id="signin" autocomplete="off" checked="@(!_isSingUp)" @onclick="() => { _isSingUp = false; _formMessage = null; _formMessageIsSuccess = false; }">
-                    <label class="btn btn-outline-secondary" for="signin">Sign in</label>
+                    <label class="btn btn-outline-secondary btn-sm" for="signin">Sign in</label>
                     <input type="radio" class="btn-check" name="signtype" id="signup" autocomplete="off" checked="@(_isSingUp)" @onclick="() => { _isSingUp = true; _formMessage = null; _formMessageIsSuccess = false; }">
-                    <label class="btn btn-outline-secondary" for="signup">Sign up</label>
+                    <label class="btn btn-outline-secondary btn-sm" for="signup">Sign up</label>
                 </div>
             </div>
         </div>

WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor

@@ -0,0 +1,63 @@
+@using WatchIt.Common.Model.Movies
+@using WatchIt.Common.Model.Series
+@using WatchIt.Website.Components.DatabasePage
+
+@page "/database/{type?}"
+
+
+
+@if (_loaded)
+{
+    switch (Type)
+    {
+        case "movies":
+            <DatabasePageComponent TItem="MovieResponse" 
+                                   TQuery="MovieQueryParameters"
+                                   Title="Movies database"
+                                   IdSource="@(item => item.Id)"
+                                   NameSource="@(item => item.Title)"
+                                   AdditionalNameInfoSource="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+                                   RatingSource="@(item => item.Rating)"
+                                   UrlIdTemplate="/media/{0}"
+                                   PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                                   ItemDownloadingTask="@(MoviesWebAPIService.GetAllMovies)"
+                                   SortingOptions="@(new Dictionary<string, string>
+                                                   {
+                                                       { "rating.count", "Number of ratings" },
+                                                       { "rating.average", "Average rating" },
+                                                       { "title", "Title" },
+                                                       { "release_date", "Release date" },
+                                                   })">
+                <MoviesFilterFormComponent/>
+            </DatabasePageComponent>
+            break;
+        case "series":
+            <DatabasePageComponent TItem="SeriesResponse" 
+                                   TQuery="SeriesQueryParameters"
+                                   Title="TV series database"
+                                   IdSource="@(item => item.Id)"
+                                   NameSource="@(item => item.Title)"
+                                   AdditionalNameInfoSource="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
+                                   RatingSource="@(item => item.Rating)"
+                                   UrlIdTemplate="/media/{0}"
+                                   PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                                   ItemDownloadingTask="@(SeriesWebAPIService.GetAllSeries)"
+                                   SortingOptions="@(new Dictionary<string, string>
+                                                   {
+                                                       { "rating.count", "Number of ratings" },
+                                                       { "rating.average", "Average rating" },
+                                                       { "title", "Title" },
+                                                       { "release_date", "Release date" },
+                                                   })">
+                <SeriesFilterFormComponent/>
+            </DatabasePageComponent>
+            break;
+    }
+    
+}
+else
+{
+    <div class="m-5">
+        <LoadingComponent/>
+    </div>
+}

WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs

@@ -0,0 +1,58 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Components.DatabasePage;
+using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Movies;
+using WatchIt.Website.Services.WebAPI.Series;
+
+namespace WatchIt.Website.Pages;
+
+public partial class DatabasePage : ComponentBase
+{
+    #region SERVICES
+    
+    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
+    [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    [Inject] private IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!;
+    [Inject] private ISeriesWebAPIService SeriesWebAPIService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public string? Type { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private static IEnumerable<string> _databaseTypes = ["movies", "series"];
+
+    private bool _loaded;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // INIT
+            if (!_databaseTypes.Contains(Type))
+            {
+                NavigationManager.NavigateTo($"/database/{_databaseTypes.First()}");
+            }
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Pages/ListPage.razor

@@ -1,88 +0,0 @@
-@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>
-
-    

WatchIt.Website/WatchIt.Website/Pages/ListPage.razor.cs

@@ -1,96 +0,0 @@
-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
-}

WatchIt.Website/WatchIt.Website/_Imports.razor

@@ -16,3 +16,4 @@
 @using WatchIt.Website.Services.WebAPI.Accounts
 @using WatchIt.Website.Services.WebAPI.Media
 @using Blazorise
+@using Blazorise.Bootstrap5