ActorRolesPanelComponent added, other fixes

WatchIt.Common/WatchIt.Common.Model/Roles/ActorRoleResponse.cs

@@ -4,7 +4,7 @@ using WatchIt.Common.Query;
 
 namespace WatchIt.Common.Model.Roles;
 
-public class ActorRoleResponse : ActorRole, IQueryOrderable<ActorRoleResponse>
+public class ActorRoleResponse : ActorRole, IQueryOrderable<ActorRoleResponse>, IRoleResponse
 {
     #region PROPERTIES
 

WatchIt.Common/WatchIt.Common.Model/Roles/CreatorRoleResponse.cs

@@ -4,7 +4,7 @@ using WatchIt.Common.Query;
 
 namespace WatchIt.Common.Model.Roles;
 
-public class CreatorRoleResponse : CreatorRole, IQueryOrderable<CreatorRoleResponse>
+public class CreatorRoleResponse : CreatorRole, IQueryOrderable<CreatorRoleResponse>, IRoleResponse
 {
     #region PROPERTIES
 

WatchIt.Common/WatchIt.Common.Model/Roles/IRoleResponse.cs

@@ -0,0 +1,9 @@
+namespace WatchIt.Common.Model.Roles;
+
+public interface IRoleResponse
+{
+    Guid Id { get; set; }
+    long MediaId { get; set; }
+    long PersonId { get; set; }
+    short TypeId { get; set; }
+}

WatchIt.WebAPI/WatchIt.WebAPI/Program.cs

@@ -42,7 +42,14 @@ public static class Program
 
         using (IServiceScope scope = app.Services.CreateScope())
         {
-            scope.ServiceProvider.GetService<DatabaseContext>().Database.Migrate();
+            DatabaseContext dbContext = scope.ServiceProvider.GetRequiredService<DatabaseContext>();
+
+            while (!dbContext.Database.CanConnect())
+            {
+                Thread.Sleep(1000);
+            }
+            
+            dbContext.Database.Migrate();
         }
         
         if (app.Environment.IsDevelopment())

WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.Utility/WatchIt.Website.Services.Utility.Configuration/Model/ConfigurationData.cs

@@ -5,5 +5,6 @@ public class ConfigurationData
     public Logging Logging { get; set; }
     public string AllowedHosts { get; set; }
     public StorageKeys StorageKeys { get; set; }
+    public Style Style { get; set; }
     public Endpoints Endpoints { get; set; }
 }

WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.Utility/WatchIt.Website.Services.Utility.Configuration/Model/Style.cs

@@ -0,0 +1,6 @@
+namespace WatchIt.Website.Services.Utility.Configuration.Model;
+
+public class Style
+{
+    public int DefaultPanelPadding { get; set; }
+}

WatchIt.Website/WatchIt.Website/App.razor

@@ -9,8 +9,10 @@
     <link rel="icon" type="image/png" href="favicon.png"/>
     
     <!-- CSS -->
-    <link rel="stylesheet" href="css/general.css?version=0.3.0.1"/>
+    <link rel="stylesheet" href="css/general.css?version=0.3.0.2"/>
+    <link rel="stylesheet" href="css/panel.css?version=0.3.0.2"/>
     <link rel="stylesheet" href="css/main_button.css?version=0.3.0.0"/>
+    <link rel="stylesheet" href="css/gaps.css?version=0.3.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">
     

WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor

@@ -0,0 +1,14 @@
+@using WatchIt.Common.Model.Roles
+<div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
+    <div class="vstack">
+        <span class="panel-text-title">Actors</span>
+        @if (_loaded)
+        {
+            <RoleListComponent TRole="ActorRoleResponse"/>
+        }
+        else
+        {
+            <LoadingComponent/>
+        }
+    </div>
+</div>

WatchIt.Website/WatchIt.Website/Components/MediaPage/ActorRolesPanelComponent.razor.cs

@@ -0,0 +1,57 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Roles;
+using WatchIt.Website.Services.Utility.Configuration;
+using WatchIt.Website.Services.WebAPI.Media;
+
+namespace WatchIt.Website.Components.MediaPage;
+
+public partial class ActorRolesPanelComponent : ComponentBase
+{
+    #region SERVICES
+    
+    [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public string Class { get; set; } = string.Empty;
+    [Parameter] public required long Id { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+
+    private IEnumerable<ActorRoleResponse> _roles = [];
+
+    #endregion
+
+    
+    
+    #region PUBLIC METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        List<Task> endTasks = new List<Task>();
+        
+        // STEP 0
+        endTasks.AddRange(
+        [
+            MediaWebAPIService.GetMediaAllActorRoles(Id, successAction: data => _roles = data)
+        ]);
+        
+        // END
+        await Task.WhenAll(endTasks);
+        
+        _loaded = true;
+        StateHasChanged();
+    }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor

@@ -0,0 +1,5 @@
+@typeparam TRole where TRole : WatchIt.Common.Model.Roles.IRoleResponse
+
+<div class="">
+    
+</div>

WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleListComponent.razor.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Roles;
+
+namespace WatchIt.Website.Components.MediaPage;
+
+public partial class RoleListComponent<TRole> : ComponentBase where TRole : IRoleResponse
+{
+    #region PROPERTIES
+    
+    [Parameter] public required IEnumerable<TRole> Role { get; set; }
+    
+    #endregion
+}

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

@@ -12,7 +12,7 @@
         <div class="container-xl">
             <div class="row sticky-top top-3 mb-2rem">
                 <div class="col">
-                    <div class="panel panel-header rounded-3 px-3">
+                    <div class="panel panel-header">
                         <div class="container-grid">
                             <div class="row align-items-center">
                                 <div class="col">

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

@@ -190,6 +190,29 @@ else
                     </div>
                 </div>
             </div>
+            <div class="row mt-over-panel-menu">
+                <div class="col">
+                    <Tabs Pills
+                          RenderMode="TabsRenderMode.LazyLoad"
+                          SelectedTab="actors"
+                          Class="panel panel-menu panel-background-menu">
+                        <Items>
+                            <Tab Name="actors">Actors</Tab>
+                            <Tab Name="creators">Creators</Tab>
+                        </Items>
+                        <Content>
+                            <TabPanel Name="actors">
+                                <div class="mt-default">
+                                    <ActorRolesPanelComponent Id="@(Id)"/>
+                                </div>
+                            </TabPanel>
+                            <TabPanel Name="creators">
+                                Test2
+                            </TabPanel>
+                        </Content>
+                    </Tabs>
+                </div>
+            </div>
         }
         else
         {

WatchIt.Website/WatchIt.Website/_Imports.razor

@@ -11,6 +11,7 @@
 @using WatchIt.Website.Components
 @using WatchIt.Website.Components.PersonEditPage
 @using WatchIt.Website.Components.MediaEditPage
+@using WatchIt.Website.Components.MediaPage
 @using WatchIt.Common.Model.Accounts
 @using WatchIt.Common.Model.Media
 @using WatchIt.Website.Services.Utility.Tokens

WatchIt.Website/WatchIt.Website/appsettings.json

@@ -10,6 +10,9 @@
     "AccessToken": "access_token",
     "RefreshToken": "refresh_token"
   },
+  "Style": {
+    "DefaultPanelPadding": 4
+  },
   "Endpoints": {
     "Base": "https://localhost:7160",
     "Accounts": {

WatchIt.Website/WatchIt.Website/wwwroot/css/gaps.css

@@ -0,0 +1,17 @@
+/* DEFAULT */
+
+.mt-default {
+    margin-top: 1rem !important;
+}
+
+.gx-default {
+    --bs-gutter-x: 1rem !important;
+}
+
+
+
+/* OTHERS */
+
+.mt-over-panel-menu {
+    margin-top: 3rem !important;
+}

WatchIt.Website/WatchIt.Website/wwwroot/css/general.css

@@ -25,6 +25,8 @@ body, html {
     font-family: "PT Sans";
 }
 
+
+
 /* CLASSES */
 
 .container-grid {
@@ -53,6 +55,8 @@ body, html {
 
 
 
+
+
 .top-3 {
     top: 1rem !important;
 }
@@ -69,22 +73,16 @@ body, html {
     margin-top: 9rem !important;
 }
 
-.panel-header {
-    background-color: rgba(0, 0, 0, 0.8);
-}
 
 .panel-regular {
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: rgba(0, 0, 0, 0.6) !important;
 }
 
 .panel-yellow {
-    background-color: rgba(255, 184, 58, 0.6);
+    background-color: rgba(255, 184, 58, 0.6) !important;
 }
 
-.panel {
+
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(25px);
-}
 
 
 

WatchIt.Website/WatchIt.Website/wwwroot/css/panel.css

@@ -0,0 +1,68 @@
+/* MAIN */
+
+.panel {
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(25px);
+
+    background-color: rgba(0, 0, 0, 0.6);
+
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+}
+
+
+
+/* HEADER */
+
+.panel-header {
+    padding: 0 1rem !important;
+    
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+
+
+/* MENU */
+
+.panel-menu {
+    gap: 1rem;
+    padding: 1rem 1.5rem !important;
+    
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.panel-menu > li > a {
+    --bs-nav-pills-link-active-bg: transparent;
+    --bs-nav-link-hover-color: white;
+    --bs-nav-link-color: #a6a6a6;
+
+    --bs-nav-pills-border-radius: 1.25rem;
+    
+    padding: 0.25rem 0.5rem;
+    
+    border-style: solid;
+    border-width: 2px;
+    border-color: transparent;
+}
+
+.panel-menu > li > a.active {
+    --bs-nav-link-color: white;
+    border-color: white;
+}
+
+
+
+/* BACKGROUNDS */
+
+.panel-background-gold {
+    background-color: rgba(255, 184, 58, 0.6);
+}
+
+
+
+/* OTHERS */
+
+.panel-text-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+}