additional files

WatchIt.Website/WatchIt.Website/Components/MediaPage/CreatorRolesPanelComponent.razor

@@ -1,10 +1,30 @@
+@using WatchIt.Common.Model.Roles
+
+
+
 <div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
-    <div class="vstack gap-3">
+    @if (_loaded)
-        <span class="panel-text-title">Actors</span>
+    {
-        <RoleListComponent Id="@(Id)" 
+        <div class="vstack gap-3">
-                           TRole="WatchIt.Common.Model.Roles.ActorRoleResponse"
+            <span class="panel-text-title">Creators</span>
-                           TQuery="WatchIt.Common.Model.Roles.ActorRoleMediaQueryParameters"
+            <div class="d-flex justify-content-center">
-                           GetRolesAction="MediaWebAPIService.GetMediaAllActorRoles"
+                <RadioGroup TValue="short" Color="Color.Default" Buttons Size="Size.Small" CheckedValue="@(_query.TypeId!.Value)" CheckedValueChanged="CheckedTypeChanged">
-                           AdditionalTextSource="@(data => data.Name)"/>
+                    @foreach (RoleTypeResponse roleType in _roleTypes)
-    </div>
+                    {
+                        <Radio Value="@(roleType.Id)">@roleType.Name</Radio>
+                    }
+                </RadioGroup>
+            </div>
+            <RoleListComponent @ref=@(_roleListComponent) 
+                               Id="@(Id)"
+                               TRole="CreatorRoleResponse"
+                               TQuery="CreatorRoleMediaQueryParameters"
+                               GetRolesAction="MediaWebAPIService.GetMediaAllCreatorRoles"
+                               Query="@(_query)"/>
+        </div>
+    }
+    else
+    {
+        <LoadingComponent Color="white"/>
+    }
 </div>

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

@@ -1,13 +1,16 @@
 using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Roles;
 using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Roles;
 
 namespace WatchIt.Website.Components.MediaPage;
 
-public partial class ActorRolesPanelComponent : ComponentBase
+public partial class CreatorRolesPanelComponent : ComponentBase
 {
     #region SERVICES
     
     [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    [Inject] private IRolesWebAPIService RolesWebAPIService { get; set; } = default!;
     
     #endregion
     
@@ -19,4 +22,50 @@ public partial class ActorRolesPanelComponent : ComponentBase
     [Parameter] public required long Id { get; set; }
     
     #endregion
+
+
+
+    #region FIELDS
+
+    private RoleListComponent<CreatorRoleResponse, CreatorRoleMediaQueryParameters> _roleListComponent;
+
+    private bool _loaded;
+
+    private IEnumerable<RoleTypeResponse> _roleTypes;
+    private CreatorRoleMediaQueryParameters _query;
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                RolesWebAPIService.GetAllCreatorRoleTypes(successAction: data => _roleTypes = data)
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+            _query = new CreatorRoleMediaQueryParameters { TypeId = _roleTypes.First().Id };
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    private async Task CheckedTypeChanged(short value)
+    {
+        _query.TypeId = value;
+        await _roleListComponent.Refresh();
+    }
+
+    #endregion
 }

WatchIt.Website/WatchIt.Website/Components/MediaPage/RoleComponent.razor

@@ -19,17 +19,7 @@
                             <strong>@(_person.Name)</strong>@(Role is ActorRoleResponse actor ? $" as {actor.Name}" : string.Empty)
                         }
                     </span>
-                </div><!--
+                </div>
-                <div class="d-inline-flex gap-2">
-                    <span id="ratingStar">★</span>
-                    <div class="d-inline-flex flex-column justify-content-center">
-                        <span id="ratingValue">@(Rating.Count > 0 ? Rating.Average : "--")/10</span>
-                        @if (Rating.Count > 0)
-                        {
-                            <span id="ratingCount">@(Rating.Count)</span>
-                        }
-                    </div>
-                </div>-->
             </div>
         </div>
     </div>

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

@@ -3,29 +3,36 @@
 
 @if (_loaded)
 {
-    <div class="vstack">
+    if (_roles.Count > 0)
-        @for (int i = 0; i < _roles.Count; i++)
+    {
-        {
+        <div class="vstack">
-            if (i > 0)
+            @for (int i = 0; i < _roles.Count; i++)
             {
-                <hr/>
+                if (i > 0)
+                {
+                    <hr/>
+                }
+                <a class="text-reset text-decoration-none" href="/person/@(_roles[i].PersonId)">
+                    <RoleComponent TRole="TRole"
+                                   Role="@(_roles[i])"/>
+                </a>
             }
-            <a class="text-reset text-decoration-none" href="/person/@(_roles[i].PersonId)">
+            @if (!_allItemsLoaded)
-                <RoleComponent TRole="TRole"
+            {
-                               Role="@(_roles[i])"/>
+                <div class="d-flex justify-content-center">
-            </a>
+                    <button class="btn btn-secondary" @onclick="@(async () => await GetRoles())">
-        }
+                        <LoadingButtonContentComponent Content="Load more"
-        @if (!_allItemsLoaded)
+                                                       LoadingContent="Loading..."
-        {
+                                                       IsLoading="@(_rolesFetching)"/>
-            <div class="d-flex justify-content-center">
+                    </button>
-                <button class="btn btn-secondary" @onclick="@(async () => await GetRoles())">
+                </div>
-                    <LoadingButtonContentComponent Content="Load more"
+            }
-                                                   LoadingContent="Loading..."
+        </div>
-                                                   IsLoading="@(_rolesFetching)"/>
+    }
-                </button>
+    else
-            </div>
+    {
-        }
+        <span class="text-center">No roles found</span>
-    </div>
+    }
 }
 else
 {

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

@@ -1,3 +1,4 @@
+using System.ComponentModel;
 using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Model.Roles;
 using WatchIt.Common.Query;
@@ -31,6 +32,22 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
     
     
     
+    #region PUBLIC METHODS
+
+    public async Task Refresh()
+    {
+        _loaded = false;
+        _roles.Clear();
+        Query.After = null;
+        Query.First = _pageSize;
+        await GetRoles(true);
+        _loaded = true;
+    }
+    
+    #endregion
+    
+    
+    
     #region PRIVATE METHODS
 
     protected override async Task OnAfterRenderAsync(bool firstRender)

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

@@ -207,7 +207,9 @@ else
                                 </div>
                             </TabPanel>
                             <TabPanel Name="creators">
-                                Test2
+                                <div class="mt-default">
+                                    <CreatorRolesPanelComponent Id="@(Id)"/>
+                                </div>
                             </TabPanel>
                         </Content>
                     </Tabs>