Feature: item search

src/Web/Shared/Components/Form/AutoForm.razor.css

@@ -24,20 +24,3 @@
 .form-actions .btn-secondary {
     margin-left: 1rem;
 }
-
-.auto-form-search-group {
-    position: relative;
-}
-
-.auto-form-search-group .form-control {
-    padding-left: 2.25rem;
-}
-
-.auto-form-search-group .search-icon {
-    position: absolute;
-    left: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #6c757d;
-    pointer-events: none;
-}

src/Web/Shared/Components/Form/ItemTable.razor

@@ -25,9 +25,22 @@
         @if (!this._isCollapsed)
         {
             <div class="card-body card-text">
+                @if (this._showSearch)
+                {
+                    <div class="auto-form-container">
+                        <div class="mb-3 form-group auto-form-search-group">
+                        <input type="text"
+                               class="form-control"
+                                   placeholder="@($"{Resources.Search}...")"
+                                   @bind="this._searchTerm"
+                                   @bind:event="oninput" />
+                            <span class="oi oi-magnifying-glass search-icon"></span>
+                        </div>
+                    </div>
+                }
                 <table>
                     <tbody>
-                    @foreach (var item in (this.Value ?? Enumerable.Empty<TItem>())
+                    @foreach (var item in this.FilteredItems
                         .Select(i => (Name : i.GetName(), Id : i.GetId(), Item : i))
                         .OrderBy(i => i.Name))
                     {

src/Web/Shared/Components/Form/ItemTable.razor.cs

@@ -16,12 +16,14 @@ namespace MUnique.OpenMU.Web.Shared.Components.Form;
 using MUnique.OpenMU.Web.Shared.Components.Form.Modal;
 
 /// <summary>
-/// A component which shows a collection of <typeparamref name="TItem"/> in a table.
+/// A component that shows a collection of <typeparamref name="TItem"/> in a table.
 /// </summary>
 /// <typeparam name="TItem">The type of the item.</typeparam>
 public partial class ItemTable<TItem>
     where TItem : class
 {
+    private readonly int _searchThreshold = 10;
+
     private bool _isEditable;
 
     private bool _isInlineEditable;
@@ -34,6 +36,10 @@ public partial class ItemTable<TItem>
 
     private bool _isCollapsed;
 
+    private string? _searchTerm;
+
+    private bool _showSearch;
+
     /// <summary>
     /// Gets or sets the label.
     /// </summary>
@@ -46,6 +52,23 @@ public partial class ItemTable<TItem>
     [CascadingParameter]
     public IContext PersistenceContext { get; set; } = null!;
 
+    /// <summary>
+    /// Gets the filtered list of items based on the current search term.
+    /// </summary>
+    private IEnumerable<TItem> FilteredItems
+    {
+        get
+        {
+            var items = this.Value ?? Enumerable.Empty<TItem>();
+            if (string.IsNullOrWhiteSpace(this._searchTerm))
+            {
+                return items;
+            }
+
+            return items.Where(i => (i.GetName()?.Contains(this._searchTerm, StringComparison.OrdinalIgnoreCase) ?? false));
+        }
+    }
+
     /// <inheritdoc />
     protected override void OnInitialized()
     {
@@ -57,10 +80,17 @@ protected override void OnInitialized()
         this._isInlineEditable = this._isEditable && isMemberOfAggregate && this.ValueExpression!.ScaffoldColumn();
         this._isAddingSupported = !isMemberOfAggregate;
         this._isCreatingSupported = isMemberOfAggregate;
-        this._isStartingCollapsed = this.Value is not null && this.Value.Count > 10;
+        this._isStartingCollapsed = this.Value is not null && this.Value.Count > this._searchThreshold;
         this._isCollapsed = this._isStartingCollapsed;
     }
 
+    /// <inheritdoc />
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        this._showSearch = this.Value is not null && this.Value.Count > this._searchThreshold;
+    }
+
     /// <inheritdoc />
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out ICollection<TItem> result, [NotNullWhen(false)] out string? validationErrorMessage)
     {

src/Web/Shared/Styles/Forms.scss

@@ -111,4 +111,21 @@ ul.socket > li > div {
 
 ul.socket > li > div:last-of-type {
     @extend .ml-3;
+}
+
+.auto-form-search-group {
+    position: relative;
+}
+
+.auto-form-search-group .form-control {
+    padding-left: 2.25rem;
+}
+
+.auto-form-search-group .search-icon {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #6c757d;
+    pointer-events: none;
 }

src/Web/Shared/wwwroot/css/shared.css

@@ -10064,6 +10064,23 @@ label > details[open] {
   z-index: 1;
 }
 
+.auto-form-search-group {
+  position: relative;
+}
+
+.auto-form-search-group .form-control, .auto-form-search-group th input, th .auto-form-search-group input, .auto-form-search-group select, .auto-form-search-group form input, form .auto-form-search-group input, .auto-form-search-group .invalid .valid, .invalid .auto-form-search-group .valid, .auto-form-search-group .valid.modified {
+  padding-left: 2.25rem;
+}
+
+.auto-form-search-group .search-icon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #6c757d;
+  pointer-events: none;
+}
+
 @keyframes FadeIn {
   0% {
     opacity: 0;