| | | 1 | | @* |
| | | 2 | | ArticleDetailWikiLinkAutocomplete Component |
| | | 3 | | |
| | | 4 | | This is a legacy autocomplete implementation specifically for ArticleDetail.razor. |
| | | 5 | | It differs from the newer WikiLinkAutocomplete component (in Shared) which uses |
| | | 6 | | WikiLinkAutocompleteService for centralized state management. |
| | | 7 | | |
| | | 8 | | Key differences: |
| | | 9 | | - Direct parameter-based control (no service dependency) |
| | | 10 | | - Custom positioning logic for inline editing |
| | | 11 | | - Create-new-article option in the autocomplete dropdown |
| | | 12 | | |
| | | 13 | | TODO: Consider migrating ArticleDetail to use the service-based approach |
| | | 14 | | *@ |
| | | 15 | | |
| | | 16 | | @inject ILogger<WikiLinkAutocomplete> Logger |
| | | 17 | | |
| | | 18 | | <div class="wiki-link-autocomplete" |
| | | 19 | | style="left: @($"{Position.X}px"); top: @($"{Position.Y}px");"> |
| | | 20 | | |
| | 0 | 21 | | @if (Loading) |
| | | 22 | | { |
| | | 23 | | <div class="wiki-link-loading"> |
| | | 24 | | Searching... |
| | | 25 | | </div> |
| | | 26 | | } |
| | 0 | 27 | | else if (!Suggestions.Any()) |
| | | 28 | | { |
| | | 29 | | <div class="wiki-link-no-results"> |
| | 0 | 30 | | @if (Query.Length < 3) |
| | | 31 | | { |
| | | 32 | | <text>Type at least 3 characters to search</text> |
| | | 33 | | } |
| | | 34 | | else |
| | | 35 | | { |
| | 0 | 36 | | @if (IsExternalQuery) |
| | | 37 | | { |
| | | 38 | | <text>No results found</text> |
| | | 39 | | } |
| | | 40 | | else |
| | | 41 | | { |
| | | 42 | | <text>No articles found</text> |
| | | 43 | | <div class="wiki-link-create-option" @onclick="OnCreateClick"> |
| | | 44 | | <span class="wiki-link-create-icon">+</span> |
| | 0 | 45 | | Create "@GetArticleName()" in Wiki root |
| | | 46 | | </div> |
| | | 47 | | } |
| | | 48 | | } |
| | | 49 | | </div> |
| | | 50 | | } |
| | | 51 | | else |
| | | 52 | | { |
| | 0 | 53 | | @for (int i = 0; i < Suggestions.Count; i++) |
| | | 54 | | { |
| | 0 | 55 | | var suggestion = Suggestions[i]; |
| | 0 | 56 | | var index = i; |
| | 0 | 57 | | var isSelected = index == SelectedIndex; |
| | | 58 | | |
| | | 59 | | <div class="wiki-link-suggestion @(isSelected ? "selected" : "")" |
| | 0 | 60 | | @onclick="() => OnSuggestionClick(suggestion)" |
| | 0 | 61 | | @onmouseenter="() => OnSuggestionHover(index)"> |
| | | 62 | | <div class="wiki-link-suggestion-title"> |
| | 0 | 63 | | @suggestion.DisplayTitle |
| | 0 | 64 | | @if (suggestion.IsExternal && !string.IsNullOrWhiteSpace(suggestion.SourceBadge)) |
| | | 65 | | { |
| | 0 | 66 | | <span class="wiki-link-suggestion-badge">@suggestion.SourceBadge</span> |
| | | 67 | | } |
| | | 68 | | </div> |
| | 0 | 69 | | @if (!string.IsNullOrWhiteSpace(suggestion.SecondaryText)) |
| | | 70 | | { |
| | 0 | 71 | | <div class="wiki-link-suggestion-path">@suggestion.SecondaryText</div> |
| | | 72 | | } |
| | | 73 | | </div> |
| | | 74 | | } |
| | | 75 | | } |
| | | 76 | | </div> |
| | | 77 | | |
| | | 78 | | @code { |
| | | 79 | | [Parameter] |
| | 0 | 80 | | public List<WikiLinkAutocompleteItem> Suggestions { get; set; } = new(); |
| | | 81 | | |
| | | 82 | | [Parameter] |
| | 0 | 83 | | public bool Loading { get; set; } |
| | | 84 | | |
| | | 85 | | [Parameter] |
| | 0 | 86 | | public int SelectedIndex { get; set; } |
| | | 87 | | |
| | | 88 | | [Parameter] |
| | 0 | 89 | | public EventCallback<int> SelectedIndexChanged { get; set; } |
| | | 90 | | |
| | | 91 | | [Parameter] |
| | 0 | 92 | | public EventCallback<WikiLinkAutocompleteItem> OnSelect { get; set; } |
| | | 93 | | |
| | | 94 | | [Parameter] |
| | 0 | 95 | | public (double X, double Y) Position { get; set; } |
| | | 96 | | |
| | | 97 | | [Parameter] |
| | 0 | 98 | | public string Query { get; set; } = string.Empty; |
| | | 99 | | |
| | | 100 | | [Parameter] |
| | 0 | 101 | | public EventCallback<string> OnCreate { get; set; } |
| | | 102 | | |
| | | 103 | | [Parameter] |
| | 0 | 104 | | public bool IsExternalQuery { get; set; } |
| | | 105 | | |
| | | 106 | | private async Task OnSuggestionClick(WikiLinkAutocompleteItem suggestion) |
| | | 107 | | { |
| | 0 | 108 | | Logger.LogDebug("WikiLinkAutocomplete: OnSuggestionClick called for {Title}", suggestion.Title); |
| | 0 | 109 | | await OnSelect.InvokeAsync(suggestion); |
| | 0 | 110 | | Logger.LogDebug("WikiLinkAutocomplete: OnSelect.InvokeAsync completed"); |
| | 0 | 111 | | } |
| | | 112 | | |
| | | 113 | | private async Task OnSuggestionHover(int index) |
| | | 114 | | { |
| | 0 | 115 | | if (SelectedIndex != index) |
| | | 116 | | { |
| | 0 | 117 | | await SelectedIndexChanged.InvokeAsync(index); |
| | | 118 | | } |
| | 0 | 119 | | } |
| | | 120 | | |
| | | 121 | | private async Task OnCreateClick() |
| | | 122 | | { |
| | 0 | 123 | | var articleName = GetArticleName(); |
| | 0 | 124 | | Logger.LogDebug("WikiLinkAutocomplete: OnCreateClick called for {Name}", articleName); |
| | 0 | 125 | | await OnCreate.InvokeAsync(articleName); |
| | 0 | 126 | | } |
| | | 127 | | |
| | | 128 | | private string GetArticleName() |
| | | 129 | | { |
| | | 130 | | // If query contains path separators, extract just the article name (last segment) |
| | 0 | 131 | | var segments = Query.Split('/'); |
| | 0 | 132 | | var name = segments.Last().Trim(); |
| | | 133 | | |
| | | 134 | | // Capitalize first letter |
| | 0 | 135 | | if (!string.IsNullOrEmpty(name)) |
| | | 136 | | { |
| | 0 | 137 | | name = char.ToUpper(name[0]) + name.Substring(1); |
| | | 138 | | } |
| | | 139 | | |
| | 0 | 140 | | return name; |
| | | 141 | | } |
| | | 142 | | } |