Add frontend creation game (#13)

Reviewed-on: #13

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor

@@ -0,0 +1,69 @@
+@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Components.Slider
+@using GameIdeas.Shared.Dto
+
+<EditForm EditContext="EditContext" OnSubmit="HandleOnSubmit">
+    <div class="game-form">
+        <div class="container">
+            <div class="input-game">
+                <div id="first-label" class="label">@ResourcesKey.Title :</div>
+                <input type="text" class="title" @bind=GameDto.Title>
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.ReleaseDate :</div>
+                <input type="date" class="date" @bind=GameDto.ReleaseDate>
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.StorageSizeMo :</div>
+                <input type="number" class="storage" @bind=GameDto.StorageSpace>
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Developers :</div>
+                <MultipleSelectList TItem="DeveloperDto" Theme="SelectListTheme" @bind-Values=GameDto.Developers
+                                    Items="CategoriesDto?.Developers?.Select(d => new SelectElement<DeveloperDto>(d, d.Name))" />
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Publishers :</div>
+                <MultipleSelectList TItem="PublisherDto" Theme="SelectListTheme" @bind-Values=GameDto.Publishers
+                                    Items="CategoriesDto?.Publishers?.Select(p => new SelectElement<PublisherDto>(p, p.Name))" />
+            </div>
+        </div>
+        <div class="container">
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Interest :</div>
+                <div class="slider">
+                    <Slider Params="SliderParams" @bind-Value="GameDto.Interest" />
+                </div>
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Properties :</div>
+                <MultipleSelectList TItem="PropertyDto" Theme="SelectListTheme" @bind-Values=GameDto.Properties
+                                    Items="CategoriesDto?.Properties?.Select(p => new SelectElement<PropertyDto>(p, p.Label))" />
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Genres :</div>
+                <MultipleSelectList TItem="TagDto" Theme="SelectListTheme" @bind-Values=GameDto.Tags 
+                                    Items="CategoriesDto?.Tags?.Select(t => new SelectElement<TagDto>(t, t.Label))" />
+
+            </div>
+            <div class="input-game">
+                <div class="label">@ResourcesKey.Platforms :</div>
+                <MultipleSelectList TItem="PlatformDto" Theme="SelectListTheme" @bind-Values=GameDto.Platforms 
+                                    Items="CategoriesDto?.Platforms?.Select(p => new SelectElement<PlatformDto>(p, p.Label))" />
+            </div>
+        </div>
+    </div>
+    <div class="description-container">
+        <div id="label-description">@ResourcesKey.Description :</div>
+        <input type="text" class="description" @bind-value=GameDto.Description>
+    </div>
+    <div class="buttons">
+        <button type="reset" class="cancel" @onclick=HandleOnCancel>
+            @ResourcesKey.Reset
+        </button>
+        <button type="submit" class="submit">
+            @ResourcesKey.Save
+        </button>
+    </div>
+</EditForm>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs

@@ -0,0 +1,56 @@
+using GameIdeas.BlazorApp.Pages.Games.Gateways;
+using GameIdeas.BlazorApp.Shared.Components.Popup;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.Slider;
+using GameIdeas.Shared.Dto;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.JSInterop;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Components;
+
+public partial class GameCreationForm
+{
+    [Inject] private IJSRuntime Js { get; set; } = default!;
+    [Inject] private IGameGateway GameGateway { get; set; } = default!;
+    [CascadingParameter] private Popup? Popup { get; set; }
+
+    private GameDto GameDto = new();
+    private CategoriesDto CategoriesDto = new();
+    private EditContext? EditContext;
+    private readonly SelectListTheme SelectListTheme = SelectListTheme.Creation;
+    private readonly SliderParams SliderParams = new() { Gap = 1, Min = 1, Max = 5 };
+
+    protected override async Task OnInitializedAsync()
+    {
+        EditContext = new(GameDto);
+        CategoriesDto = await GameGateway.FetchCategories();
+
+        if (Popup != null)
+        {
+            Popup.StateChanged += async (_, isOpen) => await HandlePopupStateChanged();
+        }
+
+        await base.OnInitializedAsync();
+    }
+
+    private async Task HandlePopupStateChanged()
+    {
+        await Js.InvokeVoidAsync("resizeGameForm");
+    }
+
+    private void HandleOnCancel()
+    {
+        Popup?.Close();
+    }
+
+    private async Task HandleOnSubmit(EditContext args)
+    {
+        if (EditContext?.Validate() == false)
+        {
+            return;
+        }
+
+
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css

@@ -0,0 +1,68 @@
+.game-form {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.input-game {
+    display: grid;
+    grid-template-columns: auto 200px;
+    grid-gap: 8px;
+    height: 24px;
+}
+
+.label {
+    text-wrap: nowrap;
+    align-content: center;
+    font-weight: bold;
+    grid-column: 1;
+}
+
+input {
+    width: 100%;
+    background: var(--input-secondary);
+    border: solid 1px var(--input-selected);
+    outline: none;
+    border-radius: var(--small-radius);
+    grid-column: 2;
+    box-sizing: border-box;
+    color: var(--white);
+}
+
+    input[type="date"]::-webkit-calendar-picker-indicator {
+        filter: invert(1);
+        cursor: pointer;
+    }
+
+.description-container {
+    margin-top: 8px;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 8px;
+}
+
+.description {
+    min-height: 140px;
+}
+
+#label-description {
+    text-wrap: nowrap;
+    align-content: center;
+    font-weight: bold;
+    height: 24px;
+}
+
+.slider {
+    padding: 0 20px;
+    align-content: center;
+}
+
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js

@@ -0,0 +1,5 @@
+window.resizeGameForm = () => {
+    const label = document.getElementById('first-label');
+    const targetLabel = document.getElementById('label-description');
+    targetLabel.style.width = window.getComputedStyle(label).getPropertyValue("width");
+};

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor

@@ -5,46 +5,39 @@
 
     <div class="duplicate">
         <MultipleSelectList TItem="string"
-                            Items="Plateforms"
-                            @bind-Values=GameFilterParams!.Plateforms
+                            @bind-Values=GameFilterParams!.Platforms
                             Placeholder="@ResourcesKey.Platforms"
                             Theme="SelectListTheme.AdvancedFilter" />
 
         <MultipleSelectList TItem="string"
-                            Items="Genres"
                             Placeholder="@ResourcesKey.Genres"
-                            @bind-Values=GameFilterParams!.Genres
+                            @bind-Values=GameFilterParams!.Tags
                             Theme="SelectListTheme.AdvancedFilter" />
     </div>
 
 
     <MultipleSelectList TItem="string"
-                        Items="Publishers"
                         Placeholder="@ResourcesKey.Publishers"
                         @bind-Values=GameFilterParams!.Publishers
                         Theme="SelectListTheme.AdvancedFilter" />
 
     <MultipleSelectList TItem="string"
-                        Items="Developers"
                         Placeholder="@ResourcesKey.Developers"
                         @bind-Values=GameFilterParams!.Developers
                         Theme="SelectListTheme.AdvancedFilter" />
 
     <MultipleSelectList TItem="string"
-                        Items="StorageSizes"
-                        Placeholder="@ResourcesKey.StorageSizes"
+                        Placeholder="@ResourcesKey.StorageSize"
                         @bind-Values=GameFilterParams!.StorageSizes
                         Theme="SelectListTheme.AdvancedFilter" />
 
     <MultipleSelectList TItem="string"
-                        Items="LastModifiedDates"
                         Placeholder="@ResourcesKey.LastModification"
                         @bind-Values=GameFilterParams!.LastModification
                         Theme="SelectListTheme.AdvancedFilter" />
 
     <MultipleSelectList TItem="string"
-                        Items="ReleaseDates"
-                        Placeholder="@ResourcesKey.ReleaseDates"
+                        Placeholder="@ResourcesKey.ReleaseDate"
                         @bind-Values=GameFilterParams!.ReleaseDates
                         Theme="SelectListTheme.AdvancedFilter" />
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs

@@ -7,56 +7,4 @@ public partial class AdvancedGameFilter
 {
     [Parameter] public GameFilterParams? GameFilterParams { get; set; }
     [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
-
-
-    private readonly IEnumerable<SelectElement<string>> Plateforms = [
-        new() { Item = "Steam", Label = "Steam" },
-        new() { Item = "GOG", Label = "GOG" },
-        new() { Item = "Epic games", Label = "Epic games" },
-        new() { Item = "Ubisoft", Label = "Ubisoft" },
-    ];
-
-    private readonly IEnumerable<SelectElement<string>> Genres = [
-        new() { Item = "Rogue Like", Label = "Rogue Like" },
-        new() { Item = "Aventure", Label = "Aventure" },
-        new() { Item = "RPG", Label = "RPG" },
-        new() { Item = "Fast FPS", Label = "Fast FPS" },
-    ];
-
-    private readonly IEnumerable<SelectElement<string>> Publishers = [
-        new() { Item = "Electronic Arts", Label = "Electronic Arts" },
-        new() { Item = "Ubisoft", Label = "Ubisoft" },
-        new() { Item = "Activision Blizzard", Label = "Activision Blizzard" },
-        new() { Item = "Bethesda", Label = "Bethesda" }
-    ];
-
-    private readonly IEnumerable<SelectElement<string>> Developers = [
-        new() { Item = "CD Projekt Red", Label = "CD Projekt Red" },
-        new() { Item = "Naughty Dog", Label = "Naughty Dog" },
-        new() { Item = "Rockstar Games", Label = "Rockstar Games" },
-        new() { Item = "FromSoftware", Label = "FromSoftware" },
-    ];
-
-    private readonly IEnumerable<SelectElement<string>> StorageSizes = [
-        new() { Item = "1 Go", Label = "1 Go" },
-        new() { Item = "10 Go", Label = "10 Go" },
-        new() { Item = "50 Go", Label = "50 Go" },
-        new() { Item = "100 Go", Label = "100 Go" },
-    ];
-
-    private readonly IEnumerable<SelectElement<string>> LastModifiedDates = [
-        new() { Item = "2023-12-15", Label = "15 D<>cembre 2023" },
-        new() { Item = "2024-01-20", Label = "20 Janvier 2024" },
-        new() { Item = "2024-02-05", Label = "5 F<>vrier 2024" },
-        new() { Item = "2024-03-10", Label = "10 Mars 2024" },
-    ];
-
-    private readonly IEnumerable<SelectElement<string>> ReleaseDates = [
-        new() { Item = "2023-11-11", Label = "11 Novembre 2023" },
-        new() { Item = "2024-01-25", Label = "25 Janvier 2024" },
-        new() { Item = "2024-03-03", Label = "3 Mars 2024" },
-        new() { Item = "2024-04-15", Label = "15 Avril 2024" },
-    ];
-
-
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor

@@ -4,13 +4,13 @@
 @using GameIdeas.BlazorApp.Shared.Components.SliderRange
 @using GameIdeas.BlazorApp.Shared.Models
 @using GameIdeas.Shared.Dto
+@using GameIdeas.Shared.Enum
 
 <div class="form-filter">
-    <SelectList TItem="Func<GameDto, object>"
-                Headers="SortTypes"
-                Items="GameProperties"
-                @bind-Value=GameFilterParams!.SortProperty
-                HeaderChanged=HandleSortTypeChanged
+    <SelectList TItem="Func<GameDto, object>" Items="GameProperties" 
+                @bind-Value=GameFilterParams.SortProperty
+                THeader="SortType" Headers="SortTypes"
+                @bind-Header=GameFilterParams.SortType
                 Theme="SelectListTheme.Sort">
         <div class="square-button">
             <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -38,24 +38,22 @@
 
     <div class="select-container">
         <MultipleSelectList TItem="string"
-                            Items="Plateforms"
                             Placeholder="@ResourcesKey.Platforms"
-                            @bind-Values=GameFilterParams.Plateforms
+                            @bind-Values=GameFilterParams.Platforms
                             Theme="SelectListTheme.Filter" />
     </div>
 
     <div class="select-container">
         <MultipleSelectList TItem="string"
-                            Items="Genres"
                             Placeholder="@ResourcesKey.Genres"
-                            @bind-Values=GameFilterParams.Genres
+                            @bind-Values=GameFilterParams.Tags
                             Theme="SelectListTheme.Filter" />
     </div>
 
     <div class="slider-container">
         <SliderRange Params="SliderRangeParams"
-                        @bind-Max=GameFilterParams.MaxRating
-                        @bind-Min=GameFilterParams.MinRating />
+                     @bind-Max=GameFilterParams.MaxRating
+                     @bind-Min=GameFilterParams.MinRating />
     </div>
 </div>
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs

@@ -15,33 +15,19 @@ public partial class GameFilter
     [Parameter] public DisplayType DisplayType { get; set; }
     [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
 
-    private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> SortTypes = [
-        new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true },
-        new() { Item = _ => SortType.Descending, Label = "Descendant" }
+    private readonly IEnumerable<SelectElement<SortType>> SortTypes = [
+        new(SortType.Ascending, "Ascendant") { IsSelected = true },
+        new(SortType.Descending, "Descendant")
     ];
     
     private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> GameProperties = [
-        new() { Item = game => game?.Title, Label = "Nom", IsSelected = true },
-        new() { Item = game => game?.ReleaseDate, Label = "Date de parution" }
-    ];
-
-    private readonly IEnumerable<SelectElement<string>> Plateforms = [
-        new() { Item = "Steam", Label = "Steam" },
-        new() { Item = "GOG", Label = "GOG" },
-        new() { Item = "Epic games", Label = "Epic games" },
-        new() { Item = "Ubisoft", Label = "Ubisoft" },
-    ];
-
-    private readonly IEnumerable<SelectElement<string>> Genres = [
-        new() { Item = "Rogue Like", Label = "Rogue Like" },
-        new() { Item = "Aventure", Label = "Aventure" },
-        new() { Item = "RPG", Label = "RPG" },
-        new() { Item = "Fast FPS", Label = "Fast FPS" },
+        new(game => game?.Title, "Nom") { IsSelected = true },
+        new(game => game?.ReleaseDate, "Date de parution"),
     ];
 
     private EditContext? EditContext;
     private readonly SliderRangeParams SliderRangeParams =
-        new() { Min = 1, ValueMin = 1, ValueMax = 5, Max = 5 };
+        new() { Min = 1, Max = 5 };
 
     protected override void OnInitialized()
     {
@@ -52,11 +38,6 @@ public partial class GameFilter
         };
     }
 
-    private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
-    {
-        GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
-    }
-
     private async Task HandleDisplayClicked(DisplayType displayType)
     {
         DisplayType = displayType;

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs

@@ -5,16 +5,17 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public class GameFilterParams
 {
-    public SortType? SortType { get; set; }
+    public SortType SortType { get; set; } = SortType.Ascending;
     public Func<GameDto?, object?>? SortProperty { get; set; }
     public string? SearchName { get; set; }
-    public IEnumerable<string>? Plateforms { get; set; }
-    public IEnumerable<string>? Genres { get; set; }
+    public IEnumerable<string>? Platforms { get; set; }
+    public IEnumerable<string>? Properties { get; set; }
+    public IEnumerable<string>? Tags { get; set; }
     public IEnumerable<string>? Publishers { get; set; }
     public IEnumerable<string>? Developers { get; set; }
     public IEnumerable<string>? StorageSizes { get; set; }
     public IEnumerable<string>? LastModification { get; set; }
     public IEnumerable<string>? ReleaseDates { get; set; }
-    public int MaxRating { get; set; }
-    public int MinRating { get; set; }
+    public int MaxRating { get; set; } = 5;
+    public int MinRating { get; set; } = 1;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor

@@ -1,24 +1,28 @@
 @page "/Games"
 @using GameIdeas.BlazorApp.Layouts
+@using GameIdeas.BlazorApp.Pages.Games.Components
 @using GameIdeas.BlazorApp.Pages.Games.Filter
 @using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Shared.Components
+@using GameIdeas.BlazorApp.Shared.Components.Popup
 @using GameIdeas.Resources
 
 @layout MainLayout
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<GameHeader>
+<GameHeader AddTypeChanged="HandleAddClicked">
     <GameFilter @bind-DisplayType=DisplayType
                 @bind-GameFilterParams=GameFilterParams />
 </GameHeader>
 
 <div class="container">
     <div class="content">
-
     </div>
 
     <AdvancedGameFilter @bind-GameFilterParams=GameFilterParams />
 </div>
 
+<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
+    <GameCreationForm />
+</Popup>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs

@@ -1,4 +1,5 @@
 using GameIdeas.BlazorApp.Pages.Games.Filter;
+using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Models;
 
 namespace GameIdeas.BlazorApp.Pages.Games;
@@ -7,4 +8,22 @@ public partial class GameBase ()
 {
     private DisplayType DisplayType = DisplayType.List;
     private GameFilterParams GameFilterParams = new();
+    private Popup? ManualAddPopup;
+    private void HandleAddClicked(AddType addType)
+    {
+        switch (addType)
+        {
+            case AddType.Manual:
+                ManualAddPopup?.Open();
+                break;
+            case AddType.Auto:
+                break;
+            default:
+                break;
+        }
+    }
+    private void HandleBackdropManualAddClicked()
+    {
+        ManualAddPopup?.Close();
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs

@@ -0,0 +1,24 @@
+using GameIdeas.BlazorApp.Services;
+using GameIdeas.BlazorApp.Shared.Constants;
+using GameIdeas.BlazorApp.Shared.Exceptions;
+using GameIdeas.Resources;
+using GameIdeas.Shared.Dto;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Gateways;
+
+public class GameGateway(IHttpClientService httpClientService) : IGameGateway
+{
+    public async Task<CategoriesDto> FetchCategories()
+    {
+        try
+        {
+            var result = await httpClientService.FetchDataAsync<CategoriesDto>(Endpoints.Category.AllCategories);
+                
+            return result ?? throw new InvalidOperationException(ResourcesKey.ErrorFetchCategories);
+        }
+        catch (Exception)
+        {
+            throw new CategoryNotFoundException(ResourcesKey.ErrorFetchCategories);
+        }
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs

@@ -0,0 +1,8 @@
+using GameIdeas.Shared.Dto;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Gateways;
+
+public interface IGameGateway
+{
+    Task<CategoriesDto> FetchCategories();
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor

@@ -22,11 +22,9 @@
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <SelectList TItem="AddType"
-                            Items="SelectElements"
-                            ValueChanged=HandleAddTypeClickedAsync
-                            Theme="SelectListTheme.Navigation"
-                            AlignRight=true>
+                <SelectList @ref="SelectListAdd" TItem="AddType" Items="SelectElements"
+                            ValueChanged=HandleAddTypeClickedAsync THeader="object"
+                            Theme="SelectListTheme.Navigation" AlignRight=true>
                     <div class="second-button button">
                         <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                             <path d="M1 3H23L12 22" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs

@@ -1,4 +1,5 @@
 using GameIdeas.BlazorApp.Shared.Components.Account;
+using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Resources;
@@ -13,11 +14,12 @@ public partial class GameHeader : ComponentBase
 
 
     private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
-        new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd },
-        new SelectElement<AddType> { Item = AddType.Auto, Label = ResourcesKey.AutoAdd }
+        new SelectElement<AddType>(AddType.Manual, ResourcesKey.ManualAdd),
+        new SelectElement<AddType> (AddType.Auto, ResourcesKey.AutoAdd)
     ];
 
     private AccountSettings? AccountSettings;
+    private SelectList<AddType, object>? SelectListAdd;
 
     private void HandleIconClicked()
     {
@@ -26,6 +28,7 @@ public partial class GameHeader : ComponentBase
 
     private async Task HandleAddTypeClickedAsync(AddType value)
     {
+        SelectListAdd?.Close();
         await AddTypeChanged.InvokeAsync(value);
     }