Started working on search suggestions

src/HopFrame.Web/Components/Pages/HopFrameTablePage.razor

@@ -9,8 +9,8 @@
 @using HopFrame.Web.Models
 @using HopFrame.Web.Plugins
 @using HopFrame.Web.Plugins.Events
+@using HopFrame.Web.Services
 @using Microsoft.JSInterop
-@using Microsoft.EntityFrameworkCore
 
 @if (!DisplaySelection) {
     <PageTitle>@_config?.DisplayName</PageTitle>
@@ -40,7 +40,27 @@
         }
         
         <FluentSpacer />
-        <FluentSearch @oninput="OnSearch" @onchange="OnSearch" Style="width: 350px" />
+        <div
+            style="position: relative; height: 32px"
+            class="hopframe-search">
+            
+            <FluentSearch
+                @ref="_searchBox"
+                @oninput="OnSearch"
+                @onchange="OnSearch"
+                @onfocusin="() => { SearchFocus(); UpdateSearchSuggestions(); }"
+                @onfocusout="SearchUnfocus"
+                Style="width: 500px"/>
+
+            @if (_isSearchActive && _searchSuggestions.Count > 0) {
+                <FluentListbox
+                    TOption="string"
+                    Items="_searchSuggestions"
+                    SelectedOptionChanged="SearchSuggestionSelected"
+                    @onfocusin="SearchFocus"
+                    @onfocusout="SearchUnfocus"/>
+            }
+        </div>
         
         @if (_hasCreatePolicy && DisplayActions && _buttonToggles.ShowAddEntityButton) {
             <FluentButton OnClick="async () => { await CreateOrEdit(null); }">Add Entity</FluentButton>
@@ -162,6 +182,7 @@
 @inject IHopFrameAuthHandler Handler
 @inject ICallbackEmitter Emitter
 @inject IPluginOrchestrator PluginOrchestrator
+@inject ISearchSuggestionProvider SearchSuggestions
 
 @code {
     
@@ -191,6 +212,9 @@
     private int _totalPages;
     private string? _searchTerm;
     private bool _loading;
+    private bool _isSearchActive;
+    private IList<string> _searchSuggestions = [];
+    private FluentSearch? _searchBox;
 
     private bool _hasUpdatePolicy;
     private bool _hasDeletePolicy;
@@ -255,6 +279,7 @@
         _searchTerm = eventArgs.Value?.ToString();
         if (_searchTerm is null) return;
         _searchCancel = new();
+        UpdateSearchSuggestions();
         
         await Task.Delay(500, _searchCancel.Token);
 
@@ -274,6 +299,31 @@
         
         await Reload();
     }
+    
+    private void SearchSuggestionSelected(string? suggestion) {
+        if (string.IsNullOrWhiteSpace(suggestion)) return;
+        _searchTerm = SearchSuggestions.CompleteSearchSuggestion(_config!, _searchTerm ?? string.Empty, suggestion);
+        _searchBox!.Value = _searchTerm;
+        _searchBox.FocusAsync();
+        UpdateSearchSuggestions();
+    }
+
+    private void UpdateSearchSuggestions() {
+        if (_config is null) return;
+        _searchSuggestions = SearchSuggestions.GenerateSearchSuggestions(_config, _searchTerm ?? string.Empty).ToList();
+    }
+
+    private CancellationTokenSource _searchFocusCancel = new();
+    private async Task SearchFocus() {
+        _isSearchActive = true;
+        await _searchFocusCancel.CancelAsync();
+        _searchFocusCancel = new();
+    }
+
+    private async Task SearchUnfocus() {
+        await Task.Delay(10, _searchFocusCancel.Token);
+        _isSearchActive = false;
+    }
 
     public async Task Reload() {
         _loading = true;
@@ -421,4 +471,5 @@
     public void RequestRender() {
         StateHasChanged();
     }
+
 }

src/HopFrame.Web/Components/Pages/HopFrameTablePage.razor.css

@@ -20,3 +20,13 @@
     place-items: center;
     border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
 }
+
+.hopframe-search ::deep fluent-listbox {
+    width: 500px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: var(--fill-color);
+    z-index: 1;
+    outline: none !important;
+}

src/HopFrame.Web/ServiceCollectionExtensions.cs

@@ -10,6 +10,7 @@ using HopFrame.Web.Services.Implementation;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.FluentUI.AspNetCore.Components;
 using Microsoft.AspNetCore.Builder;
+using Microsoft.Extensions.DependencyInjection.Extensions;
 
 namespace HopFrame.Web;
 
@@ -44,6 +45,7 @@ public static class ServiceCollectionExtensions {
 
         services.AddScoped<IPluginOrchestrator, PluginOrchestrator>();
         services.AddScoped<IFileService, FileService>();
+        services.TryAddScoped<ISearchSuggestionProvider, SearchSuggestionProvider>();
 
         if (addRazorComponents) {
             services.AddRazorComponents()

src/HopFrame.Web/Services/ISearchSuggestionProvider.cs

@@ -0,0 +1,11 @@
+using HopFrame.Core.Config;
+
+namespace HopFrame.Web.Services;
+
+public interface ISearchSuggestionProvider {
+
+    public IEnumerable<string> GenerateSearchSuggestions(TableConfig table, string searchText);
+
+    public string CompleteSearchSuggestion(TableConfig table, string searchText, string selectedSuggestion);
+
+}

src/HopFrame.Web/Services/Implementation/SearchSuggestionProvider.cs

@@ -0,0 +1,63 @@
+using HopFrame.Core.Config;
+using HopFrame.Core.Services;
+using HopFrame.Web.Helpers;
+
+namespace HopFrame.Web.Services.Implementation;
+
+public sealed class SearchSuggestionProvider(IContextExplorer explorer, IServiceProvider provider) : ISearchSuggestionProvider {
+    
+    public IEnumerable<string> GenerateSearchSuggestions(TableConfig table, string searchText) {
+        if (table.ContextConfig is not DbContextConfig) return [];
+
+        var searchParts = searchText.Trim().Split(' ');
+        if (searchParts.Length != 0 && searchParts.Last().EndsWith('=') && !searchText.EndsWith(' ')) {
+            var part = searchParts.Last()[..^1];
+            var property = table.Properties
+                .Where(p => p.List)
+                .Where(p => !p.IsVirtualProperty)
+                .FirstOrDefault(p => p.Name == part);
+            
+            if (property is null) return [];
+
+            if (property.Info.PropertyType.IsEnum)
+                return Enum.GetNames(property.Info.PropertyType);
+
+            if (property.Info.PropertyType == typeof(DateOnly))
+                return [DateOnly.FromDateTime(DateTime.Now).ToString()];
+
+            if (property.Info.PropertyType == typeof(TimeOnly))
+                return [TimeOnly.FromDateTime(DateTime.Now).ToString()];
+
+            if (property.IsRelation) {
+                var manager = explorer.GetTableManager(table.TableType);
+                var entries = manager!.LoadPage(0, 100).Result;
+                return entries
+                    .Select(e => manager.DisplayProperty(e, property).Result)
+                    .Distinct()
+                    .Take(10);
+            }
+        }
+
+        if (searchText.Length != 0 && !searchText.EndsWith(' '))
+            return [];
+
+        Type[] validTypes = [typeof(string), typeof(Guid), typeof(bool), typeof(DateOnly), typeof(TimeOnly)];
+        var searchableProperties = table.Properties
+            .Where(p => !p.IsVirtualProperty)
+            .Where(p => p.List)
+            .Where(p => 
+                p.Info.PropertyType.IsEnum || 
+                p.Info.PropertyType.IsNumeric() ||
+                validTypes.Contains(p.Info.PropertyType) ||
+                p.IsRelation)
+            .ToArray();
+
+        return searchableProperties
+            .Select(p => p.Name + "=");
+    }
+    
+    public string CompleteSearchSuggestion(TableConfig table, string searchText, string selectedSuggestion) {
+        return searchText + selectedSuggestion;
+    }
+    
+}