Started working on search suggestions

This commit is contained in:
2025-04-18 12:17:18 +02:00
parent 5dec609004
commit 68a4479c2d
7 changed files with 163 additions and 19 deletions

View File

@@ -12,7 +12,13 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="0648788e-7696-4e60-bf12-5d5601f33d8c" name="Changes" comment=""> <list default="true" id="0648788e-7696-4e60-bf12-5d5601f33d8c" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/HopFrame.Web/Services/ISearchSuggestionProvider.cs" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/HopFrame.Web/Services/Implementation/SearchSuggestionProvider.cs" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/.idea.HopFrame/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/.idea.HopFrame/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/.idea.HopFrame/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/.idea.HopFrame/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/HopFrame.Web/Components/Pages/HopFrameTablePage.razor" beforeDir="false" afterPath="$PROJECT_DIR$/src/HopFrame.Web/Components/Pages/HopFrameTablePage.razor" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/HopFrame.Web/Components/Pages/HopFrameTablePage.razor.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/HopFrame.Web/Components/Pages/HopFrameTablePage.razor.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/HopFrame.Web/ServiceCollectionExtensions.cs" beforeDir="false" afterPath="$PROJECT_DIR$/src/HopFrame.Web/ServiceCollectionExtensions.cs" afterDir="false" />
<change beforePath="$PROJECT_DIR$/testing/HopFrame.Testing/Models/User.cs" beforeDir="false" afterPath="$PROJECT_DIR$/testing/HopFrame.Testing/Models/User.cs" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -32,7 +38,7 @@
<component name="Git.Settings"> <component name="Git.Settings">
<option name="RECENT_BRANCH_BY_REPOSITORY"> <option name="RECENT_BRANCH_BY_REPOSITORY">
<map> <map>
<entry key="$PROJECT_DIR$" value="feature/repositories" /> <entry key="$PROJECT_DIR$" value="dev" />
</map> </map>
</option> </option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -130,7 +136,7 @@
&quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;, &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
&quot;b5f11219-dfc4-47a1-b02c-90ab603034fb.executor&quot;: &quot;Debug&quot;, &quot;b5f11219-dfc4-47a1-b02c-90ab603034fb.executor&quot;: &quot;Debug&quot;,
&quot;dcdf1689-dc07-47e4-8824-2e60a4fbf301.executor&quot;: &quot;Debug&quot;, &quot;dcdf1689-dc07-47e4-8824-2e60a4fbf301.executor&quot;: &quot;Debug&quot;,
&quot;git-widget-placeholder&quot;: &quot;dev&quot;, &quot;git-widget-placeholder&quot;: &quot;!35 on feature/advanced-search&quot;,
&quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;, &quot;list.type.of.created.stylesheet&quot;: &quot;CSS&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;, &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;, &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
@@ -262,14 +268,11 @@
<workItem from="1740742471317" duration="672000" /> <workItem from="1740742471317" duration="672000" />
<workItem from="1741974241977" duration="10854000" /> <workItem from="1741974241977" duration="10854000" />
<workItem from="1742038098473" duration="990000" /> <workItem from="1742038098473" duration="990000" />
</task> <workItem from="1742059898156" duration="3488000" />
<task id="LOCAL-00003" summary="Added database loading logic"> <workItem from="1744725284649" duration="60000" />
<option name="closed" value="true" /> <workItem from="1744916016381" duration="66000" />
<created>1736859917232</created> <workItem from="1744916106166" duration="49000" />
<option name="number" value="00003" /> <workItem from="1744966207145" duration="5064000" />
<option name="presentableId" value="LOCAL-00003" />
<option name="project" value="LOCAL" />
<updated>1736859917232</updated>
</task> </task>
<task id="LOCAL-00004" summary="Started working on listing page"> <task id="LOCAL-00004" summary="Started working on listing page">
<option name="closed" value="true" /> <option name="closed" value="true" />
@@ -655,7 +658,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1742038459077</updated> <updated>1742038459077</updated>
</task> </task>
<option name="localTasksCounter" value="52" /> <task id="LOCAL-00052" summary="Implemented sql search + negatable searches">
<option name="closed" value="true" />
<created>1742063374318</created>
<option name="number" value="00052" />
<option name="presentableId" value="LOCAL-00052" />
<option name="project" value="LOCAL" />
<updated>1742063374318</updated>
</task>
<option name="localTasksCounter" value="53" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@@ -685,7 +696,6 @@
<component name="UnityProjectConfiguration" hasMinimizedUI="false" /> <component name="UnityProjectConfiguration" hasMinimizedUI="false" />
<component name="VcsManagerConfiguration"> <component name="VcsManagerConfiguration">
<option name="CLEAR_INITIAL_COMMIT_MESSAGE" value="true" /> <option name="CLEAR_INITIAL_COMMIT_MESSAGE" value="true" />
<MESSAGE value="Fixed test for table view" />
<MESSAGE value="Added n-m relation mapping" /> <MESSAGE value="Added n-m relation mapping" />
<MESSAGE value="Fixed wrong element selection for action buttons" /> <MESSAGE value="Fixed wrong element selection for action buttons" />
<MESSAGE value="Implemented primitive change reversion" /> <MESSAGE value="Implemented primitive change reversion" />
@@ -710,6 +720,7 @@
<MESSAGE value="Reverted pipeline to include all jobs" /> <MESSAGE value="Reverted pipeline to include all jobs" />
<MESSAGE value="Added support for custom repositories" /> <MESSAGE value="Added support for custom repositories" />
<MESSAGE value="Added documentation for custom repos and exporter plugin" /> <MESSAGE value="Added documentation for custom repos and exporter plugin" />
<option name="LAST_COMMIT_MESSAGE" value="Added documentation for custom repos and exporter plugin" /> <MESSAGE value="Implemented sql search + negatable searches" />
<option name="LAST_COMMIT_MESSAGE" value="Implemented sql search + negatable searches" />
</component> </component>
</project> </project>

View File

@@ -9,8 +9,8 @@
@using HopFrame.Web.Models @using HopFrame.Web.Models
@using HopFrame.Web.Plugins @using HopFrame.Web.Plugins
@using HopFrame.Web.Plugins.Events @using HopFrame.Web.Plugins.Events
@using HopFrame.Web.Services
@using Microsoft.JSInterop @using Microsoft.JSInterop
@using Microsoft.EntityFrameworkCore
@if (!DisplaySelection) { @if (!DisplaySelection) {
<PageTitle>@_config?.DisplayName</PageTitle> <PageTitle>@_config?.DisplayName</PageTitle>
@@ -40,7 +40,27 @@
} }
<FluentSpacer /> <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) { @if (_hasCreatePolicy && DisplayActions && _buttonToggles.ShowAddEntityButton) {
<FluentButton OnClick="async () => { await CreateOrEdit(null); }">Add Entity</FluentButton> <FluentButton OnClick="async () => { await CreateOrEdit(null); }">Add Entity</FluentButton>
@@ -162,6 +182,7 @@
@inject IHopFrameAuthHandler Handler @inject IHopFrameAuthHandler Handler
@inject ICallbackEmitter Emitter @inject ICallbackEmitter Emitter
@inject IPluginOrchestrator PluginOrchestrator @inject IPluginOrchestrator PluginOrchestrator
@inject ISearchSuggestionProvider SearchSuggestions
@code { @code {
@@ -191,6 +212,9 @@
private int _totalPages; private int _totalPages;
private string? _searchTerm; private string? _searchTerm;
private bool _loading; private bool _loading;
private bool _isSearchActive;
private IList<string> _searchSuggestions = [];
private FluentSearch? _searchBox;
private bool _hasUpdatePolicy; private bool _hasUpdatePolicy;
private bool _hasDeletePolicy; private bool _hasDeletePolicy;
@@ -255,6 +279,7 @@
_searchTerm = eventArgs.Value?.ToString(); _searchTerm = eventArgs.Value?.ToString();
if (_searchTerm is null) return; if (_searchTerm is null) return;
_searchCancel = new(); _searchCancel = new();
UpdateSearchSuggestions();
await Task.Delay(500, _searchCancel.Token); await Task.Delay(500, _searchCancel.Token);
@@ -275,6 +300,31 @@
await Reload(); 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() { public async Task Reload() {
_loading = true; _loading = true;
@@ -421,4 +471,5 @@
public void RequestRender() { public void RequestRender() {
StateHasChanged(); StateHasChanged();
} }
} }

View File

@@ -20,3 +20,13 @@
place-items: center; place-items: center;
border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest); 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;
}

View File

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

View File

@@ -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);
}

View File

@@ -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;
}
}

View File

@@ -12,8 +12,4 @@ public class User {
public string? LastName { get; set; } public string? LastName { get; set; }
public virtual List<Post> Posts { get; set; } = new(); public virtual List<Post> Posts { get; set; } = new();
public override string ToString() {
return Username;
}
} }