Merge pull request #833 from eduardosmaniotto/bugfix/account-search

fix: account search typeahead not working
(cherry picked from commit 8f2b32d5d3654d7ef3f271ba3e6a2ad19a2ff212)

src/Web/AdminPanel/Pages/Accounts.razor

@@ -22,13 +22,12 @@
             <th class="col-2">@Resources.Action</th>
         </TableHeader>
         <FilterHeader>
-            <th colspan="3">
+            <th colspan="4">
                 <div class="input-group">
                     <span class="input-group-text"><span class="oi oi-magnifying-glass" aria-hidden="true"></span></span>
-                    <input type="search" class="form-control" placeholder="Search by Account or Character Name..." @bind="@this._accountService.SearchFilter"/>
+                    <input class="form-control small" type="search" autofocus @bind="@this._accountService.SearchFilter" @bind:event="oninput" placeholder="@Resources.Search ..."/>
                 </div>
             </th>
-            <th></th>
         </FilterHeader>
         <ItemTemplate Context="item">
             <td>@item.LoginName</td>

src/Web/Shared/Services/AccountService.cs

@@ -6,19 +6,23 @@ namespace MUnique.OpenMU.Web.Shared.Services;
 
 using System.ComponentModel.DataAnnotations;
 using System.Diagnostics.CodeAnalysis;
-using MUnique.OpenMU.Web.Shared.Components.Modal;
 using MUnique.OpenMU.DataModel.Entities;
 using MUnique.OpenMU.Persistence;
+using MUnique.OpenMU.Web.Shared.Components;
 using MUnique.OpenMU.Web.Shared.Components.Form.Modal;
+using MUnique.OpenMU.Web.Shared.Components.Modal;
 using MUnique.OpenMU.Web.Shared.Properties;
 
 /// <summary>
 /// Service for <see cref="Account"/>s.
 /// </summary>
-public class AccountService : IDataService<Account>, ISupportDataChangedNotification
+public class AccountService : IDataService<Account>, ISupportDataChangedNotification, IDisposable
 {
     private readonly IDataSource<Account> _dataSource;
     private readonly IModalService _modalService;
+    private readonly Debouncer _debouncer = new(300);
+
+    private string _searchFilter = string.Empty;
 
     /// <summary>
     /// Initializes a new instance of the <see cref="AccountService"/> class.
@@ -31,7 +35,8 @@ public class AccountService : IDataService<Account>, ISupportDataChangedNotifica
         this._modalService = modalService;
     }
 
-    private string _searchFilter = string.Empty;
+    /// <inheritdoc />
+    public event EventHandler? DataChanged;
 
     /// <summary>
     /// Gets or sets the search filter query.
@@ -45,14 +50,19 @@ public class AccountService : IDataService<Account>, ISupportDataChangedNotifica
             if (this._searchFilter != newValue)
             {
                 this._searchFilter = newValue;
-                this.RaiseDataChanged();
+                if (string.IsNullOrEmpty(newValue))
+                {
+                    this._debouncer.Cancel();
+                    this.DataChanged?.Invoke(this, EventArgs.Empty);
+                }
+                else
+                {
+                    _ = this._debouncer.DebounceAsync(this.RaiseDataChangedAsync);
+                }
             }
         }
     }
 
-    /// <inheritdoc />
-    public event EventHandler? DataChanged;
-
     /// <summary>
     /// Returns a slice of the account list, defined by an offset and a count.
     /// </summary>
@@ -138,11 +148,21 @@ public class AccountService : IDataService<Account>, ISupportDataChangedNotifica
             item.SecurityCode = accountParameters.SecurityCode;
             item.RegistrationDate = DateTime.UtcNow;
             await context.SaveChangesAsync().ConfigureAwait(false);
-            this.RaiseDataChanged();
+            this.DataChanged?.Invoke(this, EventArgs.Empty);
         }
     }
 
-    private void RaiseDataChanged() => this.DataChanged?.Invoke(this, EventArgs.Empty);
+    /// <inheritdoc />
+    public void Dispose()
+    {
+        this._debouncer.Dispose();
+    }
+
+    private Task RaiseDataChangedAsync()
+    {
+        this.DataChanged?.Invoke(this, EventArgs.Empty);
+        return Task.CompletedTask;
+    }
 
     /// <summary>
     /// Parameters for the account creation which is used for the user interface.