Add js for end text

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

@@ -40,5 +40,5 @@
 </div>
 
 <Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked" Closable=false>
-    <GameCreationForm Categories="Categories" OnSubmit="HandleFetchDatas" />
+    <GameCreationForm Categories="Categories" OnSubmit="() => HandleFetchDatas(true)" />
 </Popup>

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

@@ -18,12 +18,13 @@ public partial class Game
     private IEnumerable<GameDto> GamesDto = [];
     private int CurrentPage;
 
-    protected override async Task OnInitializedAsync()
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         CurrentPage = 1;
-        await HandleFetchDatas();
+        await HandleFetchDatas(firstRender);
-        await base.OnInitializedAsync();
+        await base.OnAfterRenderAsync(firstRender);    
     }
+
     private void HandleAddClicked(AddType addType)
     {
         switch (addType)
@@ -41,13 +42,15 @@ public partial class Game
     {
         ManualAddPopup?.Close();
     }
-    private async Task HandleFetchDatas()
+    private async Task HandleFetchDatas(bool loadCategories = false)
     {
         try
         {
             IsLoading = true;
 
+            if (loadCategories)
                 Categories = await GameGateway.FetchCategories();
+
             GamesDto = await GameGateway.FetchGames(GameFilter, CurrentPage);
         }
         catch (Exception)
@@ -62,22 +65,6 @@ public partial class Game
     private async Task HandleFilterChanged(GameFilterParams args)
     {
         GameFilter = args;
-
+        await HandleFetchDatas(false);
-
-
-        try
-        {
-            IsLoading = true;
-
-            GamesDto = await GameGateway.FetchGames(GameFilter, CurrentPage);
-        }
-        catch (Exception)
-        {
-            throw;
-        }
-        finally
-        {
-            IsLoading = false;
-        }
     }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor

@@ -3,14 +3,13 @@
 
 <div class="search-container">
     <input @ref=InputText
+           id="searchInput"
            type="text"
            class="search-field"
            placeholder="@Placeholder"
            disabled="@IsDisable"
            style="@(IsDisable ? "pointer-events: none" : "")"
            @bind=@Text
-           @bind:event="oninput"
-           @bind:after=HandleTextChanged
            @onfocusin=HandleFocusIn/>
 
     <div class="buttons">
@@ -26,4 +25,3 @@
         </div>
     </div>
 </div>
-

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs

@@ -1,11 +1,13 @@
 using GameIdeas.BlazorApp.Shared.Constants;
 using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Search;
 
 public partial class SearchInput
 {
+    [Inject] private IJSRuntime Js { get; set; } = default!;
     [Parameter] public string? Text { get; set; }
     [Parameter] public string? Placeholder { get; set; }
     [Parameter] public bool IsDisable { get; set; }
@@ -17,9 +19,11 @@ public partial class SearchInput
 
     private ElementReference InputText;
 
-    protected override void OnInitialized()
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         Text = string.Empty;
+        await Js.InvokeVoidAsync("addStopWriteListener", DotNetObjectReference.Create(this));
+        await base.OnAfterRenderAsync(firstRender);
     }
 
     public void SetText(string str)
@@ -27,7 +31,8 @@ public partial class SearchInput
         Text = str;
     }
 
-    private async Task HandleTextChanged()
+    [JSInvokable]
+    public async Task HandleTextEnd()
     {
         await TextChanged.InvokeAsync(Text);
     }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.js

@@ -0,0 +1,19 @@
+function debounce(func, delay, dotNetReference) {
+    let timeoutId;
+    return function () {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            func.apply(this, dotNetReference);
+        }, delay);
+    };
+}
+    
+function handleInputStop(dotNetReference) {
+    console.log("L'utilisateur a arrêté de taper.");
+    //dotNetReference.invokeMethodAsync("HandleTextEnd");
+}
+
+function addStopWriteListener(dotNetReference) { 
+    const input = document.getElementById('searchInput');
+    input.addEventListener('input', debounce(handleInputStop, 1000, dotNetReference)); // 500ms après la dernière frappe
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html

@@ -27,7 +27,7 @@
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
-    <script src="Shared/Components/Select/MultipleSelectList.razor.js"></script>
+    <script src="Shared/Components/Search/SearchInput.razor.js"></script>
     <script src="Pages/Games/Components/GameCreationForm.razor.js"></script>
 </body>