From 63af58f5bbde680d76a457347564a67090e85efb Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Mon, 14 Apr 2025 14:40:41 +0200
Subject: [PATCH 1/8] Add items in search celect

---
 .../Games/Components/GameCreationForm.razor   | 25 ++++++----
 .../Pages/Games/Filter/GameFilter.razor.cs    |  4 +-
 .../Pages/Games/Header/GameHeader.razor       |  3 +-
 .../Pages/Games/Header/GameHeader.razor.cs    |  1 +
 .../BackdropFilter/BackdropFilter.razor.css   |  6 ++-
 .../Shared/Components/Popup/Popup.razor.css   |  8 +---
 .../Components/Select/Models/SelectParams.cs  |  5 +-
 .../Shared/Components/Select/Select.razor     | 17 +++++--
 .../Shared/Components/Select/Select.razor.cs  | 48 ++++++++++++++-----
 .../Shared/Components/Select/Select.razor.css | 26 ++++++++++
 .../SelectSearch/SelectSearch.razor           |  2 +-
 .../SelectSearch/SelectSearch.razor.cs        |  6 ++-
 .../CreateStaticResourceKey.cs                |  2 +
 .../Constants/GlobalConstants.cs              |  3 +-
 .../GameIdeas.WebAPI/Files/GameIdeas.fr.json  |  3 +-
 15 files changed, 115 insertions(+), 44 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
index c223842..02ae4db 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
@@ -19,13 +19,15 @@
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Developers :</div>
-                <SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)" 
-                              Items="Categories?.Developers" @bind-Values=GameDto.Developers />
+                <SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
+                              Items="Categories?.Developers" @bind-Values=GameDto.Developers 
+                              AddItem="@(str => new DeveloperDto() { Name = str })" />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Publishers :</div>
-                <SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)"
-                              Items="Categories?.Publishers" @bind-Values=GameDto.Publishers />
+                <SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
+                              Items="Categories?.Publishers" @bind-Values=GameDto.Publishers
+                              AddItem="@(str => new PublisherDto() { Name = str })" />
             </div>
         </div>
         <div class="container">
@@ -37,19 +39,22 @@
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Properties :</div>
-                <SelectSearch TItem="PropertyDto" Theme="Theme" GetLabel="@(i => i.Label)"
-                              Items="Categories?.Properties" @bind-Values=GameDto.Properties />
+                <SelectSearch TItem="PropertyDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
+                              Items="Categories?.Properties" @bind-Values=GameDto.Properties
+                              AddItem="@(str => new PropertyDto() { Label = str })" />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Tags :</div>
-                <SelectSearch TItem="TagDto" Theme="Theme" GetLabel="@(i => i.Label)"
-                              Items="Categories?.Tags" @bind-Values=GameDto.Tags />
+                <SelectSearch TItem="TagDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
+                              Items="Categories?.Tags" @bind-Values=GameDto.Tags
+                              AddItem="@(str => new TagDto() { Label = str })" />
 
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Platforms :</div>
-                <SelectSearch TItem="PlatformDto" Theme="Theme" GetLabel="@(i => i.Label)"
-                              Items="Categories?.Platforms" @bind-Values=GameDto.Platforms />
+                <SelectSearch TItem="PlatformDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
+                              Items="Categories?.Platforms" @bind-Values=GameDto.Platforms
+                              AddItem="@(str => new PlatformDto() { Label = str })" />
             </div>
         </div>
     </div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
index b116719..c5f2c1e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
@@ -36,10 +36,10 @@ public partial class GameFilter
         {
             Headers = SortTypes,
             GetHeaderLabel = header => header.Label,
-            DefaultHeader = SortTypes.FirstOrDefault(h => h.SortType == SortType.Ascending),
+            DefaultHeaders = SortTypes.Where(h => h.SortType == SortType.Ascending).ToList(),
             Items = GameProperties,
             GetItemLabel = item => item.Label,
-            DefaultItem = GameProperties.FirstOrDefault(p => p.Label == "Titre")
+            DefaultItems = GameProperties.Where(p => p.Label == "Titre").ToList()
         };
     }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
index dd57a3a..2e55110 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
@@ -23,8 +23,7 @@
                     </svg>
                 </div>
                 <Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object" 
-                        ValuesChanged=HandleAddTypeClicked Params=SelectParams
-                        Theme="SelectTheme.Navigation">
+                        ValuesChanged=HandleAddTypeClicked Params=SelectParams Theme="SelectTheme.Navigation">
                     <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" />
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
index d45734a..c742eaa 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
@@ -28,6 +28,7 @@ public partial class GameHeader : ComponentBase
         {
             Items = AddTypes.ToList(),
             GetItemLabel = item => item.Value,
+            DefaultItems = []
         };
 
         base.OnInitialized();
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
index cb99b96..cc30289 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
@@ -1,5 +1,9 @@
 .backdrop-filter {
-    position: fixed;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     inset: 0;
     z-index: var(--index-backdrop);
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
index 754be81..3983fc4 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
@@ -1,16 +1,12 @@
 .popup-wrapper {
     display: none;
-    justify-content: center;
-    align-items: center;
+    justify-self: anchor-center;
+    align-self: anchor-center;
     position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     z-index: var(--index-popup);
 }
 
 .popup-content {
-    position: relative;
     background-color: var(--dropdown-content);
     padding: 10px;
     border-radius: var(--big-radius);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectParams.cs
index f904beb..2fea69c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectParams.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectParams.cs
@@ -3,10 +3,11 @@
 public class SelectParams<TItem, THeader>
 {
     public List<TItem> Items { get; set; } = [];
-    public TItem? DefaultItem { get; set; }
+    public List<TItem> DefaultItems { get; set; } = [];
     public Func<TItem, string> GetItemLabel { get; set; } = _ => string.Empty;
     public List<THeader> Headers { get; set; } = [];
-    public THeader? DefaultHeader { get; set; }
+    public List<THeader> DefaultHeaders { get; set; } = [];
     public Func<THeader, string> GetHeaderLabel { get; set; } = _ => string.Empty;
+    public Func<string, TItem>? AddItem { get; set; }
 
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor
index 77b416d..04bf62a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor
@@ -14,9 +14,20 @@
         @if (IsContentOpen)
         {
             <div class="content">
+                @if (QuickAdd)
+                {
+                    <div class="add-item">
+                        <EditForm EditContext="QuickAddEditContext" OnSubmit="HandleSubmitAdd">
+                            <input type="text" placeholder="@ResourcesKey.PlaceholderAdd" @bind=AddLabel>
+                        </EditForm>
+                    </div>
+
+                    <span class="line"></span>
+                }
+
                 @if (Params.Headers != null)
                 {
-                    @foreach (var header in Params.Headers)
+                    @foreach (var header in Params.Headers.Union(HeaderValues ?? []))
                     {
                         <SelectRow IsSelected=HeaderValues?.Contains(header)
                                    Label="@Params.GetHeaderLabel(header)" Theme=Theme
@@ -24,14 +35,14 @@
                     }
                 }
 
-                @if (Params.Headers?.Any() == true)
+                @if (Params.Headers?.Count != 0)
                 {
                     <span class="line"></span>
                 }
 
                 @if (Params.Items != null)
                 {
-                    @foreach (var item in Params.Items)
+                    @foreach (var item in Params.Items.Union(Values ?? []))
                     {
                         <SelectRow IsSelected=Values?.Contains(item)
                                    Label="@Params.GetItemLabel(item)" Theme=Theme
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
index fe4bc56..c04c27d 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
@@ -1,5 +1,9 @@
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.Resources;
+using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using System.Text.RegularExpressions;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Select;
 
@@ -14,8 +18,11 @@ public partial class Select<TItem, THeader>
     [Parameter] public SelectTheme Theme { get; set; }
     [Parameter] public SelectType Type { get; set; } = SelectType.Single;
     [Parameter] public bool DisableClicked { get; set; } = false;
+    [Parameter] public bool QuickAdd { get; set; } = false;
 
     private bool IsContentOpen = false;
+    private string AddLabel = string.Empty;
+    private EditContext? QuickAddEditContext;
 
     public void Close() =>
         IsContentOpen = false;
@@ -23,6 +30,21 @@ public partial class Select<TItem, THeader>
     public void Open() =>
         IsContentOpen = true;
 
+    protected override void OnInitialized()
+    {
+        QuickAddEditContext = new EditContext(AddLabel);
+
+        if (Params.DefaultItems.Count != 0)
+        {
+            Values.AddRange(Params.DefaultItems);
+        }
+
+        if (Params.DefaultHeaders.Count != 0)
+        {
+            HeaderValues.AddRange(Params.DefaultHeaders);
+        }
+    }
+
     private void HandleButtonClicked()
     {
         if (!DisableClicked)
@@ -32,19 +54,6 @@ public partial class Select<TItem, THeader>
     private void HandleContentClosed() =>
         IsContentOpen = false;
 
-    protected override void OnInitialized()
-    {
-        if (Params.DefaultItem != null)
-        {
-            Values.Add(Params.DefaultItem);
-        }
-
-        if (Params.DefaultHeader != null)
-        {
-            HeaderValues.Add(Params.DefaultHeader);
-        }
-    }
-
     private async Task HandleValueClicked(TItem value)
     {
         if (Type != SelectType.Multiple || Values == null)
@@ -82,4 +91,17 @@ public partial class Select<TItem, THeader>
 
         await HeaderValuesChanged.InvokeAsync(HeaderValues);
     }
+    private async Task HandleSubmitAdd()
+    {
+        if (Regex.IsMatch(AddLabel, GlobalConstants.RegexSelectRow) &&
+            Params.AddItem != null)
+        {
+            Values ??= [];
+            Values.Add(Params.AddItem(AddLabel));
+
+            AddLabel = string.Empty;
+
+            await ValuesChanged.InvokeAsync(Values);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
index 7dce1f0..2f564c1 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
@@ -29,6 +29,20 @@
     display: none;
 }
 
+.add-item {
+    align-content: center;
+    height: 24px;
+    padding: 0 10px;
+}
+
+.add-item input {
+    width: 100%;
+    color: var(--white);
+    border: none;
+    outline: none;
+    background: transparent;
+}
+
 .dropdown::-webkit-scrollbar {
     width: 10px;
 }
@@ -72,4 +86,16 @@
         border-bottom: 2px solid var(--input-selected);
     }
 
+/***** Sort Theme *****/
+.creation .content {
+    border-radius: var(--small-radius);
+    box-sizing: border-box;
+    border: solid 1px var(--violet);
+}
+
+.creation .content .line {
+    display: block;
+    margin: 2px 6px;
+    border-bottom: 2px solid var(--input-selected);
+}
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
index e169a80..a9e74bb 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
@@ -6,7 +6,7 @@
 @typeparam TItem
 
 <Select @ref=Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType.Multiple" DisableClicked=true
-        Params="SelectParams" Values=Values ValuesChanged="HandleValuesChanged">
+        Params="SelectParams" Values=Values ValuesChanged="HandleValuesChanged" QuickAdd=QuickAdd>
 
     <div class="@SelectHelper.GetClassFromTheme(Theme)">
         <SearchInput @ref=SearchInput Icon="SearchInputIcon.Dropdown" Placeholder="@Placeholder" 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
index a9d03d7..029f89d 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
@@ -13,16 +13,20 @@ public partial class SelectSearch<TItem>
     [Parameter] public List<TItem> Values { get; set; } = [];
     [Parameter] public EventCallback<List<TItem>> ValuesChanged { get; set; }
     [Parameter] public string Placeholder { get; set; } = string.Empty;
+    [Parameter] public bool QuickAdd { get; set; } = false;
+    [Parameter] public Func<string, TItem>? AddItem { get; set; }
 
     private SelectParams<TItem, string> SelectParams = new();
     private SearchInput? SearchInput;
     private Select<TItem, string>? Select;
+
     protected override void OnParametersSet()
     {
         SelectParams = new()
         {
             Items = Items,
-            GetItemLabel = GetLabel
+            GetItemLabel = GetLabel,
+            AddItem = AddItem
         };
 
         base.OnParametersSet();
diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
index 8f90fac..99316ec 100644
--- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
+++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
@@ -34,6 +34,7 @@ public class Translations (TranslationService translationService)
     public string ErrorWhenFetchingData => translationService.Translate(nameof(ErrorWhenFetchingData));
     public string RequestFailedStatusFormat => translationService.Translate(nameof(RequestFailedStatusFormat));
     public string ErrorFetchCategories => translationService.Translate(nameof(ErrorFetchCategories));
+    public string PlaceholderAdd => translationService.Translate(nameof(PlaceholderAdd));
 }
 
 public static class ResourcesKey
@@ -76,4 +77,5 @@ public static class ResourcesKey
     public static string ErrorWhenFetchingData => _instance?.ErrorWhenFetchingData ?? throw new InvalidOperationException("ResourcesKey.ErrorWhenFetchingData is not initialized.");
     public static string RequestFailedStatusFormat => _instance?.RequestFailedStatusFormat ?? throw new InvalidOperationException("ResourcesKey.RequestFailedStatusFormat is not initialized.");
     public static string ErrorFetchCategories => _instance?.ErrorFetchCategories ?? throw new InvalidOperationException("ResourcesKey.ErrorFetchCategories is not initialized.");
+    public static string PlaceholderAdd => _instance?.PlaceholderAdd ?? throw new InvalidOperationException("ResourcesKey.PlaceholderAdd is not initialized.");
 }
\ No newline at end of file
diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
index 21d357b..517dbba 100644
--- a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
+++ b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
@@ -2,6 +2,5 @@
 
 public class GlobalConstants
 {
-    public const string EnterKeyCode = "Enter";
-    public const string PadEnterKeyCode = "NumpadEnter";
+    public const string RegexSelectRow = @"[a-zA-Z_ \-]*";
 }
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
index a3ec135..ccdf7c5 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
@@ -29,5 +29,6 @@
     "ErrorWhenDeletingData": "Erreur lors de la requête DELETE",
     "ErrorWhenFetchingData": "Erreur lors de la requête GET",
     "RequestFailedStatusFormat": "Erreur lors de la réponse, code {0}",
-    "ErrorFetchCategories": "Erreur lors de la récupération des catégories"
+    "ErrorFetchCategories": "Erreur lors de la récupération des catégories",
+    "PlaceholderAdd": "Ajouter un nouveau"
 }
\ No newline at end of file
-- 
2.39.5


From b16d997417c8858618ebd4221f718e64a20aeaba Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Mon, 14 Apr 2025 14:58:23 +0200
Subject: [PATCH 2/8] Add url for platforms

---
 .../Pages/Games/Components/GameCreationForm.razor         | 8 ++++++++
 .../Shared/Components/Search/SearchInput.razor.cs         | 2 --
 .../Shared/Components/SelectSearch/SelectSearch.razor.cs  | 5 +++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
index 02ae4db..f257949 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
@@ -56,6 +56,14 @@
                               Items="Categories?.Platforms" @bind-Values=GameDto.Platforms
                               AddItem="@(str => new PlatformDto() { Label = str })" />
             </div>
+
+            @foreach (var platform in GameDto.Platforms ?? [])
+            {
+                <div class="input-game">
+                    <div class="label">@platform.Label :</div>
+                    <input type="text" class="url" @bind=platform.Url>
+                </div>
+            }
         </div>
     </div>
     <div class="description-container">
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
index 3ee67df..2d151d5 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -39,9 +39,7 @@ public partial class SearchInput
     }
     private async Task HandleSearchClicked()
     {
-        await TextChanged.InvokeAsync(Text);
         await SearchClicked.InvokeAsync();
-        await InputText.FocusAsync();
     }
     private async Task HandleFocusIn()
     {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
index 029f89d..bc2ac8e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs
@@ -35,12 +35,13 @@ public partial class SelectSearch<TItem>
     {
         Values = values.ToList();
         SearchInput?.SetText(string.Join(", ", Values.Select(GetLabel)));
-        await ValuesChanged.InvokeAsync(values.ToList());
+        await ValuesChanged.InvokeAsync(Values.ToList());
     }
 
-    private void HandleClearClicked()
+    private async Task HandleClearClicked()
     {
         Values = [];
+        await ValuesChanged.InvokeAsync(Values.ToList());
     }
 
     private void HandleFocusIn()
-- 
2.39.5


From 3447fa6eb1ce5834505f1bb19ecc69e3a330ef4c Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Mon, 14 Apr 2025 16:23:45 +0200
Subject: [PATCH 3/8] Add validation and gateway creation

---
 .../Games/Components/GameCreationForm.razor   | 14 ++--
 .../Components/GameCreationForm.razor.cs      |  4 +-
 .../Components/GameCreationForm.razor.css     |  9 ++-
 .../Pages/Games/Components/GameValidation.cs  | 25 +++++++
 .../Pages/Games/Gateways/GameGateway.cs       | 14 ++++
 .../Pages/Games/Gateways/IGameGateway.cs      |  1 +
 .../Shared/Components/Popup/Popup.razor       |  2 +-
 .../Shared/Components/Select/Select.razor.cs  |  2 +-
 .../Shared/Constants/Endpoints.cs             |  2 +-
 .../Exceptions/GameCreationException.cs       |  3 +
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  4 --
 .../CreateStaticResourceKey.cs                |  2 +
 .../Constants/GlobalConstants.cs              |  2 +-
 .../GameIdeas.WebAPI/Files/GameIdeas.fr.json  | 66 ++++++++++---------
 14 files changed, 101 insertions(+), 49 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameValidation.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Exceptions/GameCreationException.cs

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
index f257949..bfe8e8e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
@@ -1,21 +1,23 @@
-@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
+@using Blazored.FluentValidation
+@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
 @using GameIdeas.BlazorApp.Shared.Components.Slider
 @using GameIdeas.Shared.Dto
 
 <EditForm EditContext="EditContext" OnSubmit="HandleOnSubmit">
+    <FluentValidationValidator/>
     <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>
+                <InputText class="title" @bind-Value=GameDto.Title />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.ReleaseDate :</div>
-                <input type="date" class="date" @bind=GameDto.ReleaseDate>
+                <InputDate TValue="DateTime?" class="date" @bind-Value=GameDto.ReleaseDate />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.StorageSizeMo :</div>
-                <input type="number" class="storage" @bind=GameDto.StorageSpace>
+                <InputNumber TValue="double?" class="storage" @bind-Value=GameDto.StorageSpace />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Developers :</div>
@@ -61,14 +63,14 @@
             {
                 <div class="input-game">
                     <div class="label">@platform.Label :</div>
-                    <input type="text" class="url" @bind=platform.Url>
+                    <InputText class="url" @bind-Value=platform.Url />
                 </div>
             }
         </div>
     </div>
     <div class="description-container">
         <div id="label-description">@ResourcesKey.Description :</div>
-        <input type="text" class="description" @bind-value=GameDto.Description>
+        <InputTextArea class="description" @bind-Value=GameDto.Description />
     </div>
     <div class="buttons">
         <button type="reset" class="cancel" @onclick=HandleOnCancel>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
index dc6ef66..d9384cb 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
@@ -1,3 +1,4 @@
+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;
@@ -11,6 +12,7 @@ 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; }
     [Parameter] public CategoriesDto? Categories { get; set; }
 
@@ -48,6 +50,6 @@ public partial class GameCreationForm
             return;
         }
 
-
+        await GameGateway.CreateGame(GameDto);
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
index b28e0a8..9a7779e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
@@ -24,7 +24,7 @@
     grid-column: 1;
 }
 
-input {
+::deep input, ::deep textarea {
     width: 100%;
     background: var(--input-secondary);
     border: solid 1px var(--input-selected);
@@ -35,11 +35,16 @@ input {
     color: var(--white);
 }
 
-    input[type="date"]::-webkit-calendar-picker-indicator {
+    ::deep input[type="date"]::-webkit-calendar-picker-indicator {
         filter: invert(1);
         cursor: pointer;
     }
 
+::deep textarea {
+    resize: vertical;
+    min-height: 140px;
+}
+
 .description-container {
     margin-top: 8px;
     display: grid;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameValidation.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameValidation.cs
new file mode 100644
index 0000000..69ce686
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameValidation.cs
@@ -0,0 +1,25 @@
+using FluentValidation;
+using GameIdeas.Shared.Constants;
+using GameIdeas.Shared.Dto;
+
+namespace GameIdeas.BlazorApp.Pages.Games.Components;
+
+public class GameValidation : AbstractValidator<GameDto>
+{
+    public GameValidation()
+    {
+        RuleFor(g => g.Title)
+            .NotEmpty()
+            .NotNull()
+            .Matches(GlobalConstants.RegexName);
+
+        RuleFor(g => g.ReleaseDate)
+            .NotEmpty()
+            .NotNull();
+
+        RuleFor(g => g.Interest)
+            .NotNull()
+            .GreaterThanOrEqualTo(1)
+            .LessThanOrEqualTo(5);
+    }
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs
index 92af68b..1876b5c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs
@@ -8,6 +8,20 @@ namespace GameIdeas.BlazorApp.Pages.Games.Gateways;
 
 public class GameGateway(IHttpClientService httpClientService) : IGameGateway
 {
+    public async Task<GameDto> CreateGame(GameDto game)
+    {
+        try
+        {
+            var result = await httpClientService.PostAsync<GameDto>(Endpoints.Game.Create, game);
+
+            return result ?? throw new InvalidOperationException(ResourcesKey.ErrorCreateGame);
+        }
+        catch (Exception)
+        {
+            throw new GameCreationException(ResourcesKey.ErrorCreateGame);
+        }
+    }
+
     public async Task<CategoriesDto> FetchCategories()
     {
         try
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs
index 7d71440..6b941af 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs
@@ -5,4 +5,5 @@ namespace GameIdeas.BlazorApp.Pages.Games.Gateways;
 public interface IGameGateway
 {
     Task<CategoriesDto> FetchCategories();
+    Task<GameDto> CreateGame(GameDto game);
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
index 794bb5e..237fac8 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
@@ -15,4 +15,4 @@
 
 
 <BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClicked" CloseOnClick="@Closable"
-                AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />
\ No newline at end of file
+                AllowBodyScroll="true" Color="BackdropFilterColor.Overlay" />
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
index c04c27d..336911a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
@@ -93,7 +93,7 @@ public partial class Select<TItem, THeader>
     }
     private async Task HandleSubmitAdd()
     {
-        if (Regex.IsMatch(AddLabel, GlobalConstants.RegexSelectRow) &&
+        if (Regex.IsMatch(AddLabel, GlobalConstants.RegexName) &&
             Params.AddItem != null)
         {
             Values ??= [];
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Endpoints.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Endpoints.cs
index f07b369..e4cad7a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Endpoints.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Endpoints.cs
@@ -4,7 +4,7 @@ public static class Endpoints
 {
     public static class Game
     {
-
+        public static readonly string Create = "api/Game/Create";
     }
 
     public static class Category
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Exceptions/GameCreationException.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Exceptions/GameCreationException.cs
new file mode 100644
index 0000000..256ee9b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Exceptions/GameCreationException.cs
@@ -0,0 +1,3 @@
+namespace GameIdeas.BlazorApp.Shared.Exceptions;
+
+public class GameCreationException(string message) : Exception(message);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index 7580dab..e49cff2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -41,10 +41,6 @@ html, body, #app {
     height: 100%;
 }
 
-.valid.modified:not([type=checkbox]) {
-    border: 2px solid var(--green);
-}
-
 .invalid {
     border: 2px solid var(--red) !important;
 }
diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
index 99316ec..879572e 100644
--- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
+++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
@@ -35,6 +35,7 @@ public class Translations (TranslationService translationService)
     public string RequestFailedStatusFormat => translationService.Translate(nameof(RequestFailedStatusFormat));
     public string ErrorFetchCategories => translationService.Translate(nameof(ErrorFetchCategories));
     public string PlaceholderAdd => translationService.Translate(nameof(PlaceholderAdd));
+    public string ErrorCreateGame => translationService.Translate(nameof(ErrorCreateGame));
 }
 
 public static class ResourcesKey
@@ -78,4 +79,5 @@ public static class ResourcesKey
     public static string RequestFailedStatusFormat => _instance?.RequestFailedStatusFormat ?? throw new InvalidOperationException("ResourcesKey.RequestFailedStatusFormat is not initialized.");
     public static string ErrorFetchCategories => _instance?.ErrorFetchCategories ?? throw new InvalidOperationException("ResourcesKey.ErrorFetchCategories is not initialized.");
     public static string PlaceholderAdd => _instance?.PlaceholderAdd ?? throw new InvalidOperationException("ResourcesKey.PlaceholderAdd is not initialized.");
+    public static string ErrorCreateGame => _instance?.ErrorCreateGame ?? throw new InvalidOperationException("ResourcesKey.ErrorCreateGame is not initialized.");
 }
\ No newline at end of file
diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
index 517dbba..1d809f1 100644
--- a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
+++ b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
@@ -2,5 +2,5 @@
 
 public class GlobalConstants
 {
-    public const string RegexSelectRow = @"[a-zA-Z_ \-]*";
+    public const string RegexName = @"[\w()\-_ ]*";
 }
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
index ccdf7c5..fa2f7c5 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
@@ -1,34 +1,36 @@
 {
-    "GamesIdeas": "Game Ideas",
-    "ManualAdd": "Manuel",
-    "AutoAdd": "Automatique",
-    "Login": "Se connecter",
-    "Logout": "Se déconnecter",
-    "EnterUsername": "Nom d'utilisateur",
-    "EnterPassword": "Mot de passe",
-    "UserManager": "Gestion des utilisateurs",
-    "Filters": "Les filtres",
-    "LastAdd": "Les ajouts récents",
-    "Research": "Rechercher",
-    "Platforms": "Plateformes",
-    "Tags": "Genres",
-    "Publishers": "Editeurs",
-    "Developers": "Développeurs",
-    "StorageSize": "Taille d'espace",
-    "StorageSizeMo": "Taille d'espace en Mo",
-    "LastModification": "Dernière modifications",
-    "ReleaseDate": "Date de parution",
-    "Title": "Titre",
-    "Interest": "Intérêt",
-    "Properties": "Propriétés",
-    "Description": "Description",
-    "Save": "Enregister",
-    "Reset": "Annuler",
-    "ErrorWhenPostingData": "Erreur lors de la requête POST",
-    "ErrorWhenPutingData": "Erreur lors de la requête PUT",
-    "ErrorWhenDeletingData": "Erreur lors de la requête DELETE",
-    "ErrorWhenFetchingData": "Erreur lors de la requête GET",
-    "RequestFailedStatusFormat": "Erreur lors de la réponse, code {0}",
-    "ErrorFetchCategories": "Erreur lors de la récupération des catégories",
-    "PlaceholderAdd": "Ajouter un nouveau"
+  "GamesIdeas": "Game Ideas",
+  "ManualAdd": "Manuel",
+  "AutoAdd": "Automatique",
+  "Login": "Se connecter",
+  "Logout": "Se déconnecter",
+  "EnterUsername": "Nom d'utilisateur",
+  "EnterPassword": "Mot de passe",
+  "UserManager": "Gestion des utilisateurs",
+  "Filters": "Les filtres",
+  "LastAdd": "Les ajouts récents",
+  "Research": "Rechercher",
+  "Platforms": "Plateformes",
+  "Tags": "Genres",
+  "Publishers": "Editeurs",
+  "Developers": "Développeurs",
+  "StorageSize": "Taille d'espace",
+  "StorageSizeMo": "Taille d'espace en Mo",
+  "LastModification": "Dernière modifications",
+  "ReleaseDate": "Date de parution",
+  "Title": "Titre",
+  "Interest": "Intérêt",
+  "Properties": "Propriétés",
+  "Description": "Description",
+  "Save": "Enregister",
+  "Reset": "Annuler",
+  "ErrorWhenPostingData": "Erreur lors de la requête POST",
+  "ErrorWhenPutingData": "Erreur lors de la requête PUT",
+  "ErrorWhenDeletingData": "Erreur lors de la requête DELETE",
+  "ErrorWhenFetchingData": "Erreur lors de la requête GET",
+  "RequestFailedStatusFormat": "Erreur lors de la réponse, code {0}",
+  "ErrorFetchCategories": "Erreur lors de la récupération des catégories",
+  "PlaceholderAdd": "Ajouter un nouveau",
+  "ErrorCreateGame": "Erreur lors de la Création d'un jeu"
+
 }
\ No newline at end of file
-- 
2.39.5


From 1b7a43e2ac1bb53e1e0e7c3d31296e87f659b145 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Mon, 14 Apr 2025 21:03:34 +0200
Subject: [PATCH 4/8] Add style for game creation

---
 .../Games/Components/GameCreationForm.razor   |  4 ++
 .../Components/GameCreationForm.razor.css     | 56 +++++++++++++--
 .../Pages/Games/Components/GameValidation.cs  | 15 ++--
 .../Shared/Components/Popup/Popup.razor.cs    |  6 +-
 .../Shared/Components/Select/Select.razor.cs  |  3 +-
 .../CreateStaticResourceKey.cs                |  4 ++
 .../Constants/GlobalConstants.cs              |  3 +-
 .../GameIdeas.WebAPI/Files/GameIdeas.fr.json  | 69 ++++++++++---------
 8 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
index bfe8e8e..fe0612b 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
@@ -72,6 +72,9 @@
         <div id="label-description">@ResourcesKey.Description :</div>
         <InputTextArea class="description" @bind-Value=GameDto.Description />
     </div>
+    <div class="bottom-container">
+        <ValidationSummary class="invalid-content" />
+
     <div class="buttons">
         <button type="reset" class="cancel" @onclick=HandleOnCancel>
             @ResourcesKey.Reset
@@ -80,4 +83,5 @@
             @ResourcesKey.Save
         </button>
     </div>
+    </div>
 </EditForm>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
index 9a7779e..cb261c1 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
@@ -1,6 +1,7 @@
 .game-form {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
     gap: 20px;
 }
 
@@ -35,10 +36,14 @@
     color: var(--white);
 }
 
-    ::deep input[type="date"]::-webkit-calendar-picker-indicator {
-        filter: invert(1);
-        cursor: pointer;
-    }
+::deep input[type="date"]::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    cursor: pointer;
+}
+
+::deep input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
 
 ::deep textarea {
     resize: vertical;
@@ -68,6 +73,43 @@
     align-content: center;
 }
 
-input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-}
\ No newline at end of file
+.bottom-container {
+    margin-top: 8px;
+    height: 28px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+::deep .invalid-content {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 1;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    height: auto;
+    text-wrap: nowrap;
+}
+
+::deep .invalid-content li {
+    margin-right: 8px;
+}
+
+.buttons {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.buttons button {
+    border: none;
+    outline: none;
+    background: var(--violet);
+    border-radius: var(--small-radius);
+    color: var(--white);
+    font-weight: bold;
+    padding: 0 10px;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameValidation.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameValidation.cs
index 69ce686..12eff58 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameValidation.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameValidation.cs
@@ -1,5 +1,5 @@
 using FluentValidation;
-using GameIdeas.Shared.Constants;
+using GameIdeas.Resources;
 using GameIdeas.Shared.Dto;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Components;
@@ -9,17 +9,10 @@ public class GameValidation : AbstractValidator<GameDto>
     public GameValidation()
     {
         RuleFor(g => g.Title)
-            .NotEmpty()
-            .NotNull()
-            .Matches(GlobalConstants.RegexName);
-
-        RuleFor(g => g.ReleaseDate)
-            .NotEmpty()
-            .NotNull();
+            .NotEmpty().WithMessage(ResourcesKey.InvalidTitle);
 
         RuleFor(g => g.Interest)
-            .NotNull()
-            .GreaterThanOrEqualTo(1)
-            .LessThanOrEqualTo(5);
+            .GreaterThanOrEqualTo(1).WithMessage(ResourcesKey.InvalidInterest)
+            .LessThanOrEqualTo(5).WithMessage(ResourcesKey.InvalidInterest);
     }
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
index af8af70..c749d38 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
@@ -31,16 +31,18 @@ public partial class Popup
     {
         IsOpen = true;
         await BackdropFilter?.Show()!;
-        StateChanged?.Invoke(null, IsOpen);
         StateHasChanged();
+
+        StateChanged?.Invoke(null, IsOpen);
     }
 
     public async Task Close()
     {
         IsOpen = false;
         await BackdropFilter?.Hide()!;
-        StateChanged?.Invoke(null, IsOpen);
         StateHasChanged();
+
+        StateChanged?.Invoke(null, IsOpen);
     }
 
     private async Task HandleBackdropFilterClicked()
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
index 336911a..d243500 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
@@ -93,8 +93,7 @@ public partial class Select<TItem, THeader>
     }
     private async Task HandleSubmitAdd()
     {
-        if (Regex.IsMatch(AddLabel, GlobalConstants.RegexName) &&
-            Params.AddItem != null)
+        if (Params.AddItem != null)
         {
             Values ??= [];
             Values.Add(Params.AddItem(AddLabel));
diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
index 879572e..f39a66e 100644
--- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
+++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
@@ -36,6 +36,8 @@ public class Translations (TranslationService translationService)
     public string ErrorFetchCategories => translationService.Translate(nameof(ErrorFetchCategories));
     public string PlaceholderAdd => translationService.Translate(nameof(PlaceholderAdd));
     public string ErrorCreateGame => translationService.Translate(nameof(ErrorCreateGame));
+    public string InvalidTitle => translationService.Translate(nameof(InvalidTitle));
+    public string InvalidInterest => translationService.Translate(nameof(InvalidInterest));
 }
 
 public static class ResourcesKey
@@ -80,4 +82,6 @@ public static class ResourcesKey
     public static string ErrorFetchCategories => _instance?.ErrorFetchCategories ?? throw new InvalidOperationException("ResourcesKey.ErrorFetchCategories is not initialized.");
     public static string PlaceholderAdd => _instance?.PlaceholderAdd ?? throw new InvalidOperationException("ResourcesKey.PlaceholderAdd is not initialized.");
     public static string ErrorCreateGame => _instance?.ErrorCreateGame ?? throw new InvalidOperationException("ResourcesKey.ErrorCreateGame is not initialized.");
+    public static string InvalidTitle => _instance?.InvalidTitle ?? throw new InvalidOperationException("ResourcesKey.InvalidTitle is not initialized.");
+    public static string InvalidInterest => _instance?.InvalidInterest ?? throw new InvalidOperationException("ResourcesKey.InvalidInterest is not initialized.");
 }
\ No newline at end of file
diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
index 1d809f1..373c8b2 100644
--- a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
+++ b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
@@ -2,5 +2,6 @@
 
 public class GlobalConstants
 {
-    public const string RegexName = @"[\w()\-_ ]*";
+    
 }
+    
\ No newline at end of file
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
index fa2f7c5..0dcf122 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
@@ -1,36 +1,37 @@
 {
-  "GamesIdeas": "Game Ideas",
-  "ManualAdd": "Manuel",
-  "AutoAdd": "Automatique",
-  "Login": "Se connecter",
-  "Logout": "Se déconnecter",
-  "EnterUsername": "Nom d'utilisateur",
-  "EnterPassword": "Mot de passe",
-  "UserManager": "Gestion des utilisateurs",
-  "Filters": "Les filtres",
-  "LastAdd": "Les ajouts récents",
-  "Research": "Rechercher",
-  "Platforms": "Plateformes",
-  "Tags": "Genres",
-  "Publishers": "Editeurs",
-  "Developers": "Développeurs",
-  "StorageSize": "Taille d'espace",
-  "StorageSizeMo": "Taille d'espace en Mo",
-  "LastModification": "Dernière modifications",
-  "ReleaseDate": "Date de parution",
-  "Title": "Titre",
-  "Interest": "Intérêt",
-  "Properties": "Propriétés",
-  "Description": "Description",
-  "Save": "Enregister",
-  "Reset": "Annuler",
-  "ErrorWhenPostingData": "Erreur lors de la requête POST",
-  "ErrorWhenPutingData": "Erreur lors de la requête PUT",
-  "ErrorWhenDeletingData": "Erreur lors de la requête DELETE",
-  "ErrorWhenFetchingData": "Erreur lors de la requête GET",
-  "RequestFailedStatusFormat": "Erreur lors de la réponse, code {0}",
-  "ErrorFetchCategories": "Erreur lors de la récupération des catégories",
-  "PlaceholderAdd": "Ajouter un nouveau",
-  "ErrorCreateGame": "Erreur lors de la Création d'un jeu"
-
+    "GamesIdeas": "Game Ideas",
+    "ManualAdd": "Manuel",
+    "AutoAdd": "Automatique",
+    "Login": "Se connecter",
+    "Logout": "Se déconnecter",
+    "EnterUsername": "Nom d'utilisateur",
+    "EnterPassword": "Mot de passe",
+    "UserManager": "Gestion des utilisateurs",
+    "Filters": "Les filtres",
+    "LastAdd": "Les ajouts récents",
+    "Research": "Rechercher",
+    "Platforms": "Plateformes",
+    "Tags": "Genres",
+    "Publishers": "Editeurs",
+    "Developers": "Développeurs",
+    "StorageSize": "Taille d'espace",
+    "StorageSizeMo": "Taille d'espace en Mo",
+    "LastModification": "Dernière modifications",
+    "ReleaseDate": "Date de parution",
+    "Title": "Titre",
+    "Interest": "Intérêt",
+    "Properties": "Propriétés",
+    "Description": "Description",
+    "Save": "Enregister",
+    "Reset": "Annuler",
+    "ErrorWhenPostingData": "Erreur lors de la requête POST",
+    "ErrorWhenPutingData": "Erreur lors de la requête PUT",
+    "ErrorWhenDeletingData": "Erreur lors de la requête DELETE",
+    "ErrorWhenFetchingData": "Erreur lors de la requête GET",
+    "RequestFailedStatusFormat": "Erreur lors de la réponse, code {0}",
+    "ErrorFetchCategories": "Erreur lors de la récupération des catégories",
+    "PlaceholderAdd": "Ajouter un nouveau",
+    "ErrorCreateGame": "Erreur lors de la Création d'un jeu",
+    "InvalidTitle": "Le titre est incorrect",
+    "InvalidInterest": "L'interêt est incorrect'"
 }
\ No newline at end of file
-- 
2.39.5


From ab0ab54f61be1a0a0a265135f0f83f03a623915f Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 15 Apr 2025 11:13:32 +0200
Subject: [PATCH 5/8] Correct style and add loader

---
 .../Games/Components/GameCreationForm.razor   | 44 +++++++++++--------
 .../Components/GameCreationForm.razor.cs      | 14 +++---
 .../Components/GameCreationForm.razor.css     |  7 ++-
 .../Pages/Games/GameBase.razor                |  2 +-
 .../BackdropFilter/BackdropFilter.razor.css   |  2 +-
 .../CircleLoader/CircleLoader.razor           |  3 ++
 .../CircleLoader/CircleLoader.razor.css       | 31 +++++++++++++
 .../Shared/Components/Popup/Popup.razor       | 19 ++++----
 .../Shared/Components/Popup/Popup.razor.cs    |  8 ----
 .../Shared/Components/Popup/Popup.razor.css   |  6 ++-
 .../Shared/Components/Slider/Slider.razor.css |  2 +-
 .../SliderRange/SliderRange.razor.css         |  2 +-
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  3 +-
 13 files changed, 93 insertions(+), 50 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor.css

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
index fe0612b..49c858c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
@@ -1,4 +1,5 @@
 @using Blazored.FluentValidation
+@using GameIdeas.BlazorApp.Shared.Components.CircleLoader
 @using GameIdeas.BlazorApp.Shared.Components.SelectSearch
 @using GameIdeas.BlazorApp.Shared.Components.Slider
 @using GameIdeas.Shared.Dto
@@ -22,14 +23,14 @@
             <div class="input-game">
                 <div class="label">@ResourcesKey.Developers :</div>
                 <SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
-                              Items="Categories?.Developers" @bind-Values=GameDto.Developers 
-                              AddItem="@(str => new DeveloperDto() { Name = str })" />
+                Items="Categories?.Developers" @bind-Values=GameDto.Developers 
+                AddItem="@(str => new DeveloperDto() { Name = str })" />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Publishers :</div>
                 <SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
-                              Items="Categories?.Publishers" @bind-Values=GameDto.Publishers
-                              AddItem="@(str => new PublisherDto() { Name = str })" />
+                Items="Categories?.Publishers" @bind-Values=GameDto.Publishers
+                AddItem="@(str => new PublisherDto() { Name = str })" />
             </div>
         </div>
         <div class="container">
@@ -42,21 +43,21 @@
             <div class="input-game">
                 <div class="label">@ResourcesKey.Properties :</div>
                 <SelectSearch TItem="PropertyDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
-                              Items="Categories?.Properties" @bind-Values=GameDto.Properties
-                              AddItem="@(str => new PropertyDto() { Label = str })" />
+                Items="Categories?.Properties" @bind-Values=GameDto.Properties
+                AddItem="@(str => new PropertyDto() { Label = str })" />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Tags :</div>
                 <SelectSearch TItem="TagDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
-                              Items="Categories?.Tags" @bind-Values=GameDto.Tags
-                              AddItem="@(str => new TagDto() { Label = str })" />
+                Items="Categories?.Tags" @bind-Values=GameDto.Tags
+                AddItem="@(str => new TagDto() { Label = str })" />
 
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Platforms :</div>
                 <SelectSearch TItem="PlatformDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
-                              Items="Categories?.Platforms" @bind-Values=GameDto.Platforms
-                              AddItem="@(str => new PlatformDto() { Label = str })" />
+                Items="Categories?.Platforms" @bind-Values=GameDto.Platforms
+                AddItem="@(str => new PlatformDto() { Label = str })" />
             </div>
 
             @foreach (var platform in GameDto.Platforms ?? [])
@@ -75,13 +76,18 @@
     <div class="bottom-container">
         <ValidationSummary class="invalid-content" />
 
-    <div class="buttons">
-        <button type="reset" class="cancel" @onclick=HandleOnCancel>
-            @ResourcesKey.Reset
-        </button>
-        <button type="submit" class="submit">
-            @ResourcesKey.Save
-        </button>
+        <div class="buttons">
+            <button type="reset" class="cancel" @onclick=HandleOnCancel disabled="@IsLoading">
+                @ResourcesKey.Reset
+            </button>
+            <button type="submit" class="submit" disabled="@IsLoading">
+                @ResourcesKey.Save
+            </button>
+        </div>
     </div>
-    </div>
-</EditForm>
\ No newline at end of file
+</EditForm>
+
+@if (IsLoading)
+{
+    <CircleLoader />
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
index d9384cb..9911a85 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
@@ -20,22 +20,18 @@ public partial class GameCreationForm
     private EditContext? EditContext;
     private readonly SelectTheme Theme = SelectTheme.Creation;
     private readonly SliderParams SliderParams = new() { Gap = 1, Min = 1, Max = 5 };
+    private bool IsLoading = true;
 
     protected override async Task OnInitializedAsync()
     {
         EditContext = new(GameDto);
-
-        if (Popup != null)
-        {
-            Popup.StateChanged += async (_, isOpen) => await HandlePopupStateChanged();
-        }
-
         await base.OnInitializedAsync();
     }
 
-    private async Task HandlePopupStateChanged()
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await Js.InvokeVoidAsync("resizeGameForm");
+
     }
 
     private void HandleOnCancel()
@@ -50,6 +46,10 @@ public partial class GameCreationForm
             return;
         }
 
+        IsLoading = true;
+
         await GameGateway.CreateGame(GameDto);
+
+        IsLoading = false;
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
index cb261c1..f1fb03f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
@@ -78,7 +78,6 @@
     height: 28px;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
     align-items: center;
 }
 
@@ -98,6 +97,7 @@
 }
 
 .buttons {
+    margin-left: auto;
     height: 100%;
     display: flex;
     flex-direction: row;
@@ -112,4 +112,9 @@
     color: var(--white);
     font-weight: bold;
     padding: 0 10px;
+    cursor: pointer;
+}
+
+.buttons button:hover {
+    background: var(--violet-selected);
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
index e32a814..404ea88 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
@@ -24,6 +24,6 @@
     <AdvancedGameFilter @bind-GameFilter=GameFilter Categories="Categories" />
 </div>
 
-<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
+<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked" Closable=false>
     <GameCreationForm Categories="Categories" />
 </Popup>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
index cc30289..76a6919 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css
@@ -1,5 +1,5 @@
 .backdrop-filter {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor
new file mode 100644
index 0000000..1af8145
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor
@@ -0,0 +1,3 @@
+<div class="overlay"> <div class="loader"></div> </div>
+
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor.css
new file mode 100644
index 0000000..6eee889
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor.css
@@ -0,0 +1,31 @@
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--overlay);
+}
+
+.loader {
+    border: 8px solid var(--violet-selected);
+    border-top: 8px solid var(--violet);
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
index 237fac8..fb626b3 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
@@ -2,15 +2,18 @@
 @using GameIdeas.BlazorApp.Shared.Constants
 
 <CascadingValue Value="this">
-    <div class="popup-wrapper" style="@GetDisplayStyle()">
-        <div class="popup-content">
-            @if (Closable)
-            {
-                <button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
-            }
-            @ChildContent
+    @if (IsOpen)
+    {
+        <div class="popup-wrapper">
+            <div class="popup-content">
+                @if (Closable)
+                {
+                    <button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
+                }
+                @ChildContent
+            </div>
         </div>
-    </div>
+    }
 </CascadingValue>
 
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
index c749d38..562cefd 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
@@ -5,11 +5,9 @@ namespace GameIdeas.BlazorApp.Shared.Components.Popup;
 public partial class Popup
 {
     [Parameter] public RenderFragment? ChildContent { get; set; }
-    [Parameter] public bool IsDrawerOpen { get; set; }
     [Parameter] public EventCallback BackdropFilterClicked { get; set; }
     [Parameter] public bool Closable { get; set; } = true;
     public bool IsOpen { get; set; }
-    public EventHandler<bool>? StateChanged { get; set; }
 
     private BackdropFilter.BackdropFilter? BackdropFilter;
 
@@ -32,8 +30,6 @@ public partial class Popup
         IsOpen = true;
         await BackdropFilter?.Show()!;
         StateHasChanged();
-
-        StateChanged?.Invoke(null, IsOpen);
     }
 
     public async Task Close()
@@ -41,14 +37,10 @@ public partial class Popup
         IsOpen = false;
         await BackdropFilter?.Hide()!;
         StateHasChanged();
-
-        StateChanged?.Invoke(null, IsOpen);
     }
 
     private async Task HandleBackdropFilterClicked()
     {
         await BackdropFilterClicked.InvokeAsync();
     }
-
-    private string GetDisplayStyle() => IsOpen ? "display: flex;" : "display: none;";
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
index 3983fc4..8b2a752 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
@@ -1,12 +1,14 @@
 .popup-wrapper {
-    display: none;
+    display: flex;
     justify-self: anchor-center;
     align-self: anchor-center;
-    position: fixed;
+    position: absolute;
     z-index: var(--index-popup);
 }
 
 .popup-content {
+    overflow: hidden;
+    position: relative;
     background-color: var(--dropdown-content);
     padding: 10px;
     border-radius: var(--big-radius);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
index 5954b37..09c613a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
@@ -1,7 +1,7 @@
 .container {
     position: relative;
     width: 100%;
-    z-index: var(--index-component)
+    z-index: 0
 }
 
 input[type="range"] {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
index c27647d..29f1a67 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
@@ -1,7 +1,7 @@
 .container {
     position: relative;
     width: 100%;
-    z-index: var(--index-component)
+    z-index: 0
 }
 
 input[type="range"] {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index e49cff2..238e46c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -27,6 +27,7 @@
     --index-backdrop: 700;
     --index-dropdown: 900;
     --index-popup: 1000;
+    --index-overlay: 1100;
 }
 
 html {
@@ -61,7 +62,7 @@ html, body, #app {
     padding: 0.6rem 1.25rem 0.7rem 1.25rem;
     position: fixed;
     width: 100%;
-    z-index: 1000;
+    z-index: 10000;
 }
 
     #blazor-error-ui .dismiss {
-- 
2.39.5


From ad05e210c297cb5ea023ed7eb0d73378185e8e42 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 15 Apr 2025 11:57:28 +0200
Subject: [PATCH 6/8] Create game

---
 .../GameIdeas.BlazorApp/Helpers/GameHelper.cs | 12 ++++++++++
 .../Games/Components/GameCreationForm.razor   |  2 +-
 .../Components/GameCreationForm.razor.cs      | 24 +++++++++++++++----
 .../Pages/Games/Gateways/GameGateway.cs       |  6 ++---
 .../Pages/Games/Gateways/IGameGateway.cs      |  2 +-
 .../Select/Components/SelectRow.razor.css     |  2 +-
 .../Shared/Components/Select/Select.razor.css |  3 ++-
 .../Controllers/GameController.cs             | 10 ++++----
 8 files changed, 45 insertions(+), 16 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs
new file mode 100644
index 0000000..d806f8e
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Helpers/GameHelper.cs
@@ -0,0 +1,12 @@
+using GameIdeas.Shared.Dto;
+
+namespace GameIdeas.BlazorApp.Helpers;
+
+public static class GameHelper
+{
+    public static void WriteTrackingDto(GameDto game)
+    {
+        game.CreationUserId = 100000;
+        game.CreationDate = DateTime.Now;
+    }
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
index 49c858c..103208d 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
@@ -10,7 +10,7 @@
         <div class="container">
             <div class="input-game">
                 <div id="first-label" class="label">@ResourcesKey.Title :</div>
-                <InputText class="title" @bind-Value=GameDto.Title />
+                <InputText  class="title" @bind-Value=GameDto.Title/>
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.ReleaseDate :</div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
index 9911a85..1e773d9 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
@@ -1,3 +1,4 @@
+using GameIdeas.BlazorApp.Helpers;
 using GameIdeas.BlazorApp.Pages.Games.Gateways;
 using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
@@ -20,7 +21,7 @@ public partial class GameCreationForm
     private EditContext? EditContext;
     private readonly SelectTheme Theme = SelectTheme.Creation;
     private readonly SliderParams SliderParams = new() { Gap = 1, Min = 1, Max = 5 };
-    private bool IsLoading = true;
+    private bool IsLoading = false;
 
     protected override async Task OnInitializedAsync()
     {
@@ -46,10 +47,25 @@ public partial class GameCreationForm
             return;
         }
 
-        IsLoading = true;
+        try
+        {
+            IsLoading = true;
 
-        await GameGateway.CreateGame(GameDto);
+            GameHelper.WriteTrackingDto(GameDto);
+            var gameId = await GameGateway.CreateGame(GameDto);
 
-        IsLoading = false;
+            if (gameId != 0)
+            {
+                Popup?.Close();
+            }
+        }
+        catch (Exception)
+        {
+            throw;
+        }
+        finally
+        {
+            IsLoading = false;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs
index 1876b5c..34873dc 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs
@@ -8,13 +8,11 @@ namespace GameIdeas.BlazorApp.Pages.Games.Gateways;
 
 public class GameGateway(IHttpClientService httpClientService) : IGameGateway
 {
-    public async Task<GameDto> CreateGame(GameDto game)
+    public async Task<int> CreateGame(GameDto game)
     {
         try
         {
-            var result = await httpClientService.PostAsync<GameDto>(Endpoints.Game.Create, game);
-
-            return result ?? throw new InvalidOperationException(ResourcesKey.ErrorCreateGame);
+            return await httpClientService.PostAsync<int>(Endpoints.Game.Create, game);
         }
         catch (Exception)
         {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs
index 6b941af..0269bad 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/IGameGateway.cs
@@ -5,5 +5,5 @@ namespace GameIdeas.BlazorApp.Pages.Games.Gateways;
 public interface IGameGateway
 {
     Task<CategoriesDto> FetchCategories();
-    Task<GameDto> CreateGame(GameDto game);
+    Task<int> CreateGame(GameDto game);
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
index a12a8b5..133a7f1 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
@@ -6,10 +6,10 @@
     height: 20px;
     align-items: center;
     padding: 2px 6px;
+    cursor: pointer;
 }
 
     .select-element:hover {
-        cursor: pointer;
         background: var(--input-selected);
     }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
index 2f564c1..90c1264 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
@@ -3,7 +3,8 @@
 }
 
 .button {
-    z-index: var(--index-component)
+    z-index: var(--index-component);
+    cursor: pointer;
 }
 
 .dropdown {
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Controllers/GameController.cs b/src/GameIdeas/Server/GameIdeas.WebAPI/Controllers/GameController.cs
index 7edf1c8..3fdcb3b 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Controllers/GameController.cs
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Controllers/GameController.cs
@@ -40,11 +40,12 @@ public class GameController(IGameService gameService, ILoggerFactory loggerFacto
     }
 
     [HttpPost("Create")]
-    public async Task<ActionResult<GameDto>> CreateGame([FromBody] GameDto game)
+    public async Task<ActionResult<int>> CreateGame([FromBody] GameDto game)
     {
         try
         {
-            return Created("/Create", await gameService.CreateGame(game));
+            var gameResult = await gameService.CreateGame(game);
+            return Created("/Create", gameResult.Id);
         }
         catch (Exception e)
         {
@@ -54,11 +55,12 @@ public class GameController(IGameService gameService, ILoggerFactory loggerFacto
     }
 
     [HttpPut("Update")]
-    public async Task<ActionResult<GameDto>> UpdateGame([FromBody] GameDto game)
+    public async Task<ActionResult<int>> UpdateGame([FromBody] GameDto game)
     {
         try
         {
-            return Created($"/Update", await gameService.UpdateGame(game));
+            var gameResult = await gameService.UpdateGame(game);
+            return Created($"/Update", gameResult.Id);
         }
         catch (Exception e)
         {
-- 
2.39.5


From 01ada94adbdba1d318c6c020e26ad28658a774fc Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 15 Apr 2025 12:18:31 +0200
Subject: [PATCH 7/8] Reload data on submit

---
 .../Pages/Games/Components/GameCreationForm.razor.cs        | 2 ++
 .../Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor   | 2 +-
 .../GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs       | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
index 1e773d9..358d442 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
@@ -16,6 +16,7 @@ public partial class GameCreationForm
     [Inject] private IGameGateway GameGateway { get; set; } = default!;
     [CascadingParameter] private Popup? Popup { get; set; }
     [Parameter] public CategoriesDto? Categories { get; set; }
+    [Parameter] public EventCallback OnSubmit { get; set; }
 
     private GameDto GameDto = new();
     private EditContext? EditContext;
@@ -57,6 +58,7 @@ public partial class GameCreationForm
             if (gameId != 0)
             {
                 Popup?.Close();
+                await OnSubmit.InvokeAsync();
             }
         }
         catch (Exception)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
index 404ea88..f06eaeb 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
@@ -25,5 +25,5 @@
 </div>
 
 <Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked" Closable=false>
-    <GameCreationForm Categories="Categories" />
+    <GameCreationForm Categories="Categories" OnSubmit="HandleFetchCategories" />
 </Popup>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs
index f00fdd0..e356f4a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs
@@ -17,7 +17,7 @@ public partial class GameBase ()
 
     protected override async Task OnInitializedAsync()
     {
-        Categories = await GameGateway.FetchCategories();
+        await HandleFetchCategories();
         await base.OnInitializedAsync();
     }
     private void HandleAddClicked(AddType addType)
@@ -37,4 +37,8 @@ public partial class GameBase ()
     {
         ManualAddPopup?.Close();
     }
+    private async Task HandleFetchCategories()
+    {
+        Categories = await GameGateway.FetchCategories();
+    }
 }
\ No newline at end of file
-- 
2.39.5


From 392a613094bc41a4682c239a2feb32d64dc20916 Mon Sep 17 00:00:00 2001
From: Maxime Adler <madler@sqli.com>
Date: Tue, 15 Apr 2025 14:04:43 +0200
Subject: [PATCH 8/8] Fix input text

---
 .../Shared/Components/Search/SearchInput.razor |  2 ++
 .../Components/Search/SearchInput.razor.cs     | 11 +++++++++--
 .../Shared/Components/Select/Select.razor.cs   | 18 ++++++++++++------
 .../Components/SelectSearch/SelectSearch.razor |  4 ++--
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
index 91c332f..db11012 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -6,6 +6,8 @@
            type="text"
            class="search-field"
            placeholder="@Placeholder"
+           disabled="@IsDisable"
+           style="@(IsDisable ? "pointer-events: none" : "")"
            @bind=@Text
            @bind:event="oninput"
            @bind:after=HandleTextChanged
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
index 2d151d5..5e5f3d1 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -8,6 +8,7 @@ public partial class SearchInput
 {
     [Parameter] public string? Text { get; set; }
     [Parameter] public string? Placeholder { get; set; }
+    [Parameter] public bool IsDisable { get; set; }
     [Parameter] public EventCallback<string> TextChanged { get; set; }
     [Parameter] public EventCallback ClearClicked { get; set; }
     [Parameter] public EventCallback SearchClicked { get; set; }
@@ -39,11 +40,17 @@ public partial class SearchInput
     }
     private async Task HandleSearchClicked()
     {
-        await SearchClicked.InvokeAsync();
+        if (!IsDisable)
+        {
+            await SearchClicked.InvokeAsync();
+        }
     }
     private async Task HandleFocusIn()
     {
-        await FocusIn.InvokeAsync();
+        if (!IsDisable)
+        {
+            await FocusIn.InvokeAsync();
+        }
     }
 
     private MarkupString GetSearchIcon()
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
index d243500..a494c97 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs
@@ -24,11 +24,15 @@ public partial class Select<TItem, THeader>
     private string AddLabel = string.Empty;
     private EditContext? QuickAddEditContext;
 
-    public void Close() =>
+    public void Close()
+    {
         IsContentOpen = false;
+    }
 
-    public void Open() =>
+    public void Open()
+    {
         IsContentOpen = true;
+    }
 
     protected override void OnInitialized()
     {
@@ -47,12 +51,14 @@ public partial class Select<TItem, THeader>
 
     private void HandleButtonClicked()
     {
-        if (!DisableClicked)
-            IsContentOpen = !IsContentOpen;
+        if (!DisableClicked && IsContentOpen)
+            Close();
+
+        if (!DisableClicked && !IsContentOpen)
+            Open();
     }
 
-    private void HandleContentClosed() =>
-        IsContentOpen = false;
+    private void HandleContentClosed() => Close();
 
     private async Task HandleValueClicked(TItem value)
     {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
index a9e74bb..35c1a8a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor
@@ -5,12 +5,12 @@
 
 @typeparam TItem
 
-<Select @ref=Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType.Multiple" DisableClicked=true
+<Select @ref=Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType.Multiple"
         Params="SelectParams" Values=Values ValuesChanged="HandleValuesChanged" QuickAdd=QuickAdd>
 
     <div class="@SelectHelper.GetClassFromTheme(Theme)">
         <SearchInput @ref=SearchInput Icon="SearchInputIcon.Dropdown" Placeholder="@Placeholder" 
-                     TextChanged="HandleClearClicked" ClearClicked="HandleClearClicked"
+                     TextChanged="HandleClearClicked" ClearClicked="HandleClearClicked" IsDisable=QuickAdd
                      FocusIn="HandleFocusIn" SearchClicked="HandleFocusIn" />
     </div>
 
-- 
2.39.5