LoadingComponent improvement, SearchResultComponent added, some fixes

WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Movies/MoviesControllerService.cs

@@ -38,7 +38,8 @@ public class MoviesControllerService : IMoviesControllerService
 
     public async Task<RequestResult> GetAllMovies(MovieQueryParameters query)
     {
-        IEnumerable<MovieResponse> data = await _database.MediaMovies.Select(x => new MovieResponse(x)).ToListAsync();
+        IEnumerable<MediaMovie> rawData = await _database.MediaMovies.ToListAsync();
+        IEnumerable<MovieResponse> data = rawData.Select(x => new MovieResponse(x));
         data = query.PrepareData(data);
         return RequestResult.Ok(data);
     }

WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Series/SeriesControllerService.cs

@@ -38,7 +38,8 @@ public class SeriesControllerService : ISeriesControllerService
     
     public async Task<RequestResult> GetAllSeries(SeriesQueryParameters query)
     {
-        IEnumerable<SeriesResponse> data = await _database.MediaSeries.Select(x => new SeriesResponse(x)).ToListAsync();
+        IEnumerable<MediaSeries> rawData = await _database.MediaSeries.ToListAsync();
+        IEnumerable<SeriesResponse> data = rawData.Select(x => new SeriesResponse(x));
         data = query.PrepareData(data);
         return RequestResult.Ok(data);
     }

WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor

@@ -1,8 +1,8 @@
-<div class="d-flex flex-column m-5">
+<div class="d-flex flex-column">
     <div class="d-flex justify-content-center">
-        <div id="spinner" class="spinner-border text-dark"></div>
+        <div id="spinner" class="spinner-border text-@(Color)"></div>
     </div>
     <div class="d-flex justify-content-center">
-        <p id="text" class="text-dark">Loading...</p>
+        <p id="text" class="text-@(Color)" m-0>Loading...</p>
     </div>
 </div>

WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace WatchIt.Website.Components;
+
+public partial class LoadingComponent : ComponentBase
+{
+    #region PARAMETERS
+
+    [Parameter] public string Color { get; set; } = "dark";
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor

@@ -0,0 +1,55 @@
+@typeparam TItem
+@using Microsoft.IdentityModel.Tokens
+@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters
+
+
+
+<div class="rounded-3 panel panel-regular p-4">
+    <div class="container-fluid p-0 m-0">
+        <div class="row mb-4">
+            <div class="col">
+                <h4 class="m-0"><strong>@(Title)</strong></h4>
+            </div>
+        </div>
+        @if (_loaded)
+        {
+            if (!_items.IsNullOrEmpty())
+            {
+                for (int i = 0; i < _items.Count; i++)
+                {
+                    if (i > 0)
+                    {
+                        <div class="row">
+                            <div class="col">
+                                <hr/>
+                            </div>
+                        </div>
+                    }
+                    <div class="row">
+                        <div class="col">
+                            test
+                        </div>
+                    </div>
+                }
+            }
+            else
+            {
+                <div class="row">
+                    <div class="col">
+                        <div class="d-flex justify-content-center">
+                            No items found
+                        </div>
+                    </div>
+                </div>
+            }
+        }
+        else
+        {
+            <div class="row">
+                <div class="col">
+                    <LoadingComponent Color="light"/>
+                </div>
+            </div>
+        }
+    </div>
+</div>

WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs

@@ -0,0 +1,56 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Query;
+
+namespace WatchIt.Website.Components.SearchPage;
+
+public partial class SearchResultComponent<TItem, TQuery> : ComponentBase where TQuery : QueryParameters
+{
+    #region PARAMETERS
+
+    [Parameter] public required string Title { get; set; }
+    [Parameter] public required TQuery Query { get; set; }
+    [Parameter] public Func<TQuery, Action<IEnumerable<TItem>>, Task> DownloadingTask { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private List<TItem> _items = [];
+    private bool _allItemsLoaded;
+    
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // INIT
+            Query.First = 5;
+            
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                DownloadingTask(Query, data => _items.AddRange(data))
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor

@@ -37,8 +37,10 @@
     {
         <div class="row">
             <div class="col">
+                <div class="m-5">
                     <LoadingComponent/>
                 </div>
             </div>
+        </div>
     }
 </div>

WatchIt.Website/WatchIt.Website/Pages/HomePage.razor

@@ -1,5 +1,4 @@
 @page "/"
-@using WatchIt.Common.Model.Movies
 
 <PageTitle>WatchIt</PageTitle>
 
@@ -98,8 +97,10 @@
     {
         <div class="row">
             <div class="col">
+                <div class="m-5">
                     <LoadingComponent/>
                 </div>
             </div>
+        </div>
     }
 </div>

WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor

@@ -382,8 +382,10 @@
     {
         <div class="row">
             <div class="col">
+                <div class="m-5">
                     <LoadingComponent/>
                 </div>
             </div>
+        </div>
     }
 </div>

WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor

@@ -204,8 +204,10 @@ else
     {
         <div class="row">
             <div class="col">
+                <div class="m-5">
                     <LoadingComponent/>
                 </div>
             </div>
+        </div>
     }
 </div>

WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor

@@ -1,5 +1,67 @@
-@page "/search"
+@using WatchIt.Common.Model.Movies
+@using WatchIt.Common.Model.Series
+@using WatchIt.Common.Query
+@using WatchIt.Website.Components.SearchPage
+@using WatchIt.Website.Services.WebAPI.Movies
+
+@layout MainLayout
+
+@page "/search/{query}"
+
+<PageTitle>WatchIt - Searching "@(Query)"</PageTitle>
 
 
 
-<h3>SearchPage</h3>
+<div class="container-fluid">
+    @if (_loaded)
+    {
+        if (string.IsNullOrWhiteSpace(_error))
+        {
+            <div class="row">
+                <div class="col">
+                    <div class="rounded-3 panel panel-regular p-3">
+                        <div class="d-flex justify-content-center">
+                            <h3 class="m-0">
+                                <strong>Search results for phrase:</strong> "@(DecodedQuery)"
+                            </h3>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mt-3">
+                <div class="col">
+                    <SearchResultComponent TItem="MovieResponse"
+                                           TQuery="MovieQueryParameters"
+                                           Title="Movies"
+                                           Query="@(new MovieQueryParameters { Title = DecodedQuery })"
+                                           DownloadingTask="MoviesWebAPIService.GetAllMovies"/>
+                </div>
+            </div>
+            <div class="row mt-3">
+                <div class="col">
+                    <SearchResultComponent TItem="SeriesResponse" 
+                                           TQuery="SeriesQueryParameters"
+                                           Title="TV series"
+                                           Query="@(new SeriesQueryParameters { Title = DecodedQuery })"
+                                           DownloadingTask="SeriesWebAPIService.GetAllSeries"/>
+                </div>
+            </div>
+        }
+        else
+        {
+            <div class="row">
+                <div class="col">
+                    <ErrorComponent ErrorMessage="@(_error)"/>
+                </div>
+            </div>
+        }
+    }
+    else
+    {
+        <div class="row">
+            <div class="col">
+                <LoadingComponent/>
+            </div>
+        </div>
+    }
+</div>

WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs

@@ -1,7 +1,59 @@
+using System.Net;
 using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Layout;
+using WatchIt.Website.Services.WebAPI.Movies;
+using WatchIt.Website.Services.WebAPI.Series;
 
 namespace WatchIt.Website.Pages;
 
 public partial class SearchPage : ComponentBase
 {
+    #region SERVICES
+
+    [Inject] private IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!;
+    [Inject] private ISeriesWebAPIService SeriesWebAPIService { get; set; } = default!;
+    
+    #endregion
+
+
+    
+    #region FIELDS
+
+    private bool _loaded;
+    private string? _error;
+
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public string Query { get; set; }
+    
+    [CascadingParameter] public MainLayout Layout { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region PROPERTIES
+    
+    public string DecodedQuery => WebUtility.UrlDecode(Query);
+    
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    #endregion
 }