From fbcd40834e7dfa36ee407c613f34a7b3d9c810c3 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Mon, 10 Mar 2025 20:59:46 +0100
Subject: [PATCH] Add search input

---
 .../Pages/Games/Filter/GameFilter.razor       |  8 ++-
 .../Pages/Games/Filter/GameFilterParams.cs    |  3 +-
 .../Components/Account/AccountSettings.razor  |  5 +-
 .../Account/AccountSettings.razor.cs          |  6 +--
 .../Account/AccountSettings.razor.css         |  4 +-
 .../Components/Search/SearchInput.razor       | 18 +++++++
 .../Components/Search/SearchInput.razor.cs    | 29 ++++++++++
 .../Components/Search/SearchInput.razor.css   | 53 +++++++++++++++++++
 .../CreateStaticResourceKey.cs                |  2 +
 .../Constants/GlobalConstants.cs              |  7 +++
 .../GameIdeas.WebAPI/Files/GameIdeas.fr.json  |  3 +-
 11 files changed, 128 insertions(+), 10 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
 create mode 100644 src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
index 84907eb..d6718a2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -1,4 +1,5 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Search
+@using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.Shared.Dto
 @using GameIdeas.BlazorApp.Pages.Games.Models
 
@@ -8,7 +9,7 @@
         <SelectList TItem="Func<GameDto, object>"
                     Headers="SortTypes"
                     Items="GameProperties"
-                    @bind-Value=GameFilterParams.GameProperty
+                    @bind-Value=GameFilterParams.SortProperty
                     HeaderChanged=HandleSortTypeChanged
                     Theme="SelectListTheme.Sort">
             <Button>
@@ -31,6 +32,9 @@
                 <path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
             </svg>
         </div>
+
+        <SearchInput @bind-Text=GameFilterParams.SearchName />
+
     </div>
 </EditForm>
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
index c98d496..8e2d3e8 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
@@ -6,5 +6,6 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 public class GameFilterParams
 {
     public SortType? SortType { get; set; }
-    public Func<GameDto?, object?>? GameProperty { get; set; }
+    public Func<GameDto?, object?>? SortProperty { get; set; }
+    public string? SearchName { get; set; }
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
index 22c10b9..5b111c2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
@@ -36,10 +36,13 @@
         else
         {
             <div class="settings-list">
+                <div class="settings-element">
+                    @ResourcesKey.UserManager
+                </div>
+                <span class="line"></span>
                 <div class="settings-element" @onclick="HandleLogoutClicked">
                     @ResourcesKey.Logout
                 </div>
-                @* <span class="line"></span> *@
             </div>
         }
     </div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
index 68ede95..4e36135 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
@@ -39,17 +39,17 @@ public partial class AccountSettings (
     {
         if (EditContext?.Validate() == false)
         {
-            LoginDto.Password = string.Empty;
             return;
         }
 
         IsLoading = true;
         await Task.Delay(TimeSpan.FromSeconds(5));
+        Close();
+        AuthentificationService.Login();
         IsLoading = false;
 
         LoginDto = new();
-        Close();
-        AuthentificationService.Login();
+        EditContext = new EditContext(LoginDto);
     }
     private void HandleLogoutClicked()
     {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
index 7550294..6a651ee 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
@@ -5,7 +5,7 @@
     animation-name: fade-in;
     animation-duration: 0.4s;
     border: 2px solid var(--low-white);
-    background: var(--black);
+    background: var(--semi-black);
     right: 10px;
     margin-top: 4px;
 }
@@ -30,7 +30,7 @@
 }
 
 ::deep .input-text {
-    background: var(--light-grey);
+    background: var(--low-white);
     border: 2px solid var(--low-white);
     border-radius: var(--small-radius);
     padding: 6px;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
new file mode 100644
index 0000000..a83c92f
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
@@ -0,0 +1,18 @@
+<EditForm EditContext="EditContext">
+    <div class="search-container">
+        <InputText class="search-field"
+                   @bind-Value=Text />
+
+        <div class="clear-icon" @onclick=HandleClearClicked>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+            </svg>
+        </div>
+        <div type="submit" class="search-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+            </svg>
+        </div>
+    </div>
+</EditForm>
+
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
new file mode 100644
index 0000000..976b70b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
@@ -0,0 +1,29 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using System.Threading.Tasks;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Search;
+
+public partial class SearchInput
+{
+    [Parameter] public string? Text { get; set; }
+    [Parameter] public EventCallback<string> TextChanged { get; set; }
+
+    private EditContext? EditContext;
+
+    protected override void OnInitialized()
+    {
+        Text = string.Empty;
+        EditContext = new EditContext(Text);
+
+        EditContext.OnFieldChanged += async (s, e) =>
+        {
+            await TextChanged.InvokeAsync(Text);
+        };
+    }
+
+    private void HandleClearClicked()
+    {
+        Text = string.Empty;
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
new file mode 100644
index 0000000..552ef2f
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -0,0 +1,53 @@
+.search-container {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    height: 28px;
+    padding-left: 8px;
+    padding-right: 2px;
+    border-radius: var(--small-radius);
+    background: var(--black);
+    overflow: hidden;
+    align-items: center;
+    width: 140px;
+}
+
+::deep .search-field {
+    border: none !important;
+    outline: none !important;
+    background: none !important;
+    color: var(--white);
+    height: 100%;
+    padding: 0;
+    min-width: 0;
+}
+
+.clear-icon {
+    min-height: 18px;
+    min-width: 18px;
+    height: 18px;
+    width: 18px;
+}
+
+    .clear-icon:hover {
+        cursor: pointer;
+    }
+
+    .clear-icon svg {
+        fill: var(--white);
+    }
+
+.search-icon {
+    min-height: 24px;
+    min-width: 24px;
+    height: 24px;
+    width: 24px;
+}
+
+    .search-icon:hover {
+        cursor: pointer;
+    }
+
+    .search-icon svg {
+        fill: var(--white);
+    }
diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
index 2509e89..d81c880 100644
--- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
+++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
@@ -10,6 +10,7 @@ public class Translations (TranslationService translationService)
     public string Logout => translationService.Translate(nameof(Logout));
     public string EnterUsername => translationService.Translate(nameof(EnterUsername));
     public string EnterPassword => translationService.Translate(nameof(EnterPassword));
+    public string UserManager => translationService.Translate(nameof(UserManager));
 }
 
 public static class ResourcesKey
@@ -28,4 +29,5 @@ public static class ResourcesKey
     public static string Logout => _instance?.Logout ?? throw new InvalidOperationException("ResourcesKey.Logout is not initialized.");
     public static string EnterUsername => _instance?.EnterUsername ?? throw new InvalidOperationException("ResourcesKey.EnterUsername is not initialized.");
     public static string EnterPassword => _instance?.EnterPassword ?? throw new InvalidOperationException("ResourcesKey.EnterPassword is not initialized.");
+    public static string UserManager => _instance?.UserManager ?? throw new InvalidOperationException("ResourcesKey.UserManager 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
new file mode 100644
index 0000000..21d357b
--- /dev/null
+++ b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Constants;
+
+public class GlobalConstants
+{
+    public const string EnterKeyCode = "Enter";
+    public const string PadEnterKeyCode = "NumpadEnter";
+}
diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
index ea987f0..5feb362 100644
--- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
+++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
@@ -5,5 +5,6 @@
   "Login": "Se connecter",
   "Logout": "Se déconnecter",
   "EnterUsername": "Nom d'utilisateur",
-  "EnterPassword": "Mot de passe"
+  "EnterPassword": "Mot de passe",
+  "UserManager": "Gestion des utilisateurs"
 }
\ No newline at end of file