From ce8bc9be59ae29fe4bfd33e9ff3a06623112afcc Mon Sep 17 00:00:00 2001
From: Damien LEROY <dleroy@veepee.com>
Date: Tue, 9 May 2023 00:25:26 +0200
Subject: [PATCH] Adding autocomplete

---
 Pages/Tester.razor                        | 46 ++++++++++++++++++-----
 Pages/Tester.razor.cs                     | 16 +++++++-
 Pages/_Host.cshtml                        |  1 +
 wwwroot/css/autocomplete/autocomplete.css | 41 ++++++++++++++++++++
 wwwroot/js/autocomplete/autocomplete.js   |  1 +
 5 files changed, 93 insertions(+), 12 deletions(-)
 create mode 100644 wwwroot/css/autocomplete/autocomplete.css
 create mode 100644 wwwroot/js/autocomplete/autocomplete.js

diff --git a/Pages/Tester.razor b/Pages/Tester.razor
index 5476869..d6e5de8 100644
--- a/Pages/Tester.razor
+++ b/Pages/Tester.razor
@@ -36,8 +36,26 @@
                 <div class="form-group row">
                     <label for="topic" class="col-2 col-form-label text-right">Topic</label>
                     <div class="col-10">
-                        <div class="input-group">
-                            <input type="text" class="form-control" id="topic" placeholder="topic" @bind="_setting.Topic">
+                        <div class="input-group autocomplete">
+                            <input type="text" class="form-control" id="topic" placeholder="topic" @bind="_setting.Topic" @oninput="OnTypeTopic">
+                            @if (_filteredTopics is not null)
+                            {
+                                <ul class="options">
+                                    @if (_filteredTopics.Any())
+                                    {
+                                        @foreach (var topic in _filteredTopics)
+                                        {
+                                            <li class="option" @onclick=@(_ => SelectionTopic(topic))>
+                                                <span class="option-text">@topic</span>
+                                            </li>
+                                        }
+                                    }
+                                    else
+                                    {
+                                        <li class="disabled option">No results</li>
+                                    }
+                                </ul>
+                            }
                             <div class="input-group-append">
                                 <button class="btn btn-outline-secondary" type="button" data-toggle="modal" data-target="#topicSelectionModal" @onclick="LoadTopics"><span class="oi oi-justify-center"></span></button>
                             </div>    
@@ -325,20 +343,28 @@ else
     <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Topic selection</h5>
+                <h5 class="modal-title">Select your topic</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                @if (_topics.Any())
+                @if (_topics is not null)
                 {
-                    <div class="list-group" id="topiclist" role="tablist">
-                        @foreach (var topic in _topics)
-                        {
-                            <a class="list-group-item list-group-item-action" id="topic-@topic" href="#" data-toggle="list" @ondblclick="() => SelectionTopic(topic)">@topic</a>
-                        }
-                    </div>
+                    @if(_topics.Count > 0)
+                    {
+                        <div class="list-group" id="topiclist" role="tablist">
+                            @foreach (var topic in _topics)
+                            {
+                                <a class="list-group-item list-group-item-action" id="topic-@topic" href="#" data-toggle="list" @ondblclick="() => SelectionTopic(topic)">@topic</a>
+                            }
+                        </div>
+                    }
+                    else
+                    {
+                        <p>No topics found</p>
+                    }
+
                 }
                 else
                 {
diff --git a/Pages/Tester.razor.cs b/Pages/Tester.razor.cs
index c0a3536..7e431a0 100644
--- a/Pages/Tester.razor.cs
+++ b/Pages/Tester.razor.cs
@@ -11,6 +11,7 @@
 using Microsoft.JSInterop;
 using KafkaTester.Service;
 using Microsoft.AspNetCore.Components.Web;
+using static System.Net.WebRequestMethods;
 
 namespace KafkaTester.Pages
 {
@@ -39,7 +40,8 @@ public partial class Tester
         private string _exportConfigurationString;
         private string _importConfigurationString;
         private readonly List<string> _errors = new();
-        private List<string> _topics = new();
+        private List<string> _topics;
+        private List<string> _filteredTopics;
         private bool _isTopicLoading = false;
 
         protected override async Task OnAfterRenderAsync(bool isFirstRender)
@@ -176,9 +178,18 @@ private void OnSelectSetting(ChangeEventArgs e)
             _setting = setting;
         }
 
+        async Task OnTypeTopic(ChangeEventArgs e)
+        {
+            var filter = e.Value?.ToString();
+            await LoadTopics(null);
+            _filteredTopics = _topics.Where(t => t.Contains(filter ?? string.Empty)).ToList();
+        }
+
         private async Task LoadTopics(MouseEventArgs e)
         {
-            _topics.Clear();
+            if (_topics != null || _isTopicLoading)
+                return;
+
             _isTopicLoading = true;
             var topics = await TesterService.GetTopicsAsync(_setting.Brokers);
             _topics = topics;
@@ -190,6 +201,7 @@ private async Task SelectionTopic(string topic)
         {
             _setting.Topic = topic;
             StateHasChanged();
+            _filteredTopics = null;
             await JsRuntime.InvokeVoidAsync("closeTopicSelectionModal");
         }
 
diff --git a/Pages/_Host.cshtml b/Pages/_Host.cshtml
index f0aa5e0..c3f857c 100644
--- a/Pages/_Host.cshtml
+++ b/Pages/_Host.cshtml
@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="css/highlight/default.min.css" />
     <link rel="stylesheet" href="css/highlight/a11y-light.min.css" />
+    <link rel="stylesheet" href="css/autocomplete/autocomplete.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="KafkaTester.styles.css" rel="stylesheet" />
 </head>
diff --git a/wwwroot/css/autocomplete/autocomplete.css b/wwwroot/css/autocomplete/autocomplete.css
new file mode 100644
index 0000000..3d9737c
--- /dev/null
+++ b/wwwroot/css/autocomplete/autocomplete.css
@@ -0,0 +1,41 @@
+.autocomplete {
+    position: relative;
+}
+
+    .autocomplete .options {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        background: white;
+        width: 100%;
+        padding: 0;
+        z-index: 10;
+        border: 1px solid #ced4da;
+        border-radius: 0.5rem;
+        box-shadow: 0 30px 25px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .autocomplete .option {
+        display: block;
+        padding: 0.25rem;
+        cursor: pointer;
+    }
+
+        .autocomplete .option .option-text {
+            padding: 0.25rem 0.5rem;
+        }
+
+        .autocomplete .option:hover {
+            background: #1E90FF;
+            color: #fff;
+        }
+
+        .autocomplete .option.disabled {
+            background-color: lightgrey;
+            cursor: not-allowed;
+        }
+
+            .autocomplete .option.disabled:hover {
+                background: lightgrey;
+                color: var(--bs-body);
+            }
diff --git a/wwwroot/js/autocomplete/autocomplete.js b/wwwroot/js/autocomplete/autocomplete.js
new file mode 100644
index 0000000..b534584
--- /dev/null
+++ b/wwwroot/js/autocomplete/autocomplete.js
@@ -0,0 +1 @@
+!function (u) { var n = { treshold: 4, maximumItems: 5, highlightTyped: !0, highlightClass: "text-primary" }; function p(e, t, o) { var a; if (o.highlightTyped) { var n = t.label.toLowerCase().indexOf(e.toLowerCase()); a = t.label.substring(0, n) + '<span class="' + function (e) { if ("string" == typeof e) return e; if (0 == e.length) return ""; for (var t = "", o = 0, a = e; o < a.length; o++) { var n = a[o]; t += n + " " } return t.substring(0, t.length - 1) }(o.highlightClass) + '">' + t.label.substring(n, n + e.length) + "</span>" + t.label.substring(n + e.length, t.label.length) } else a = t.label; return '<button type="button" class="dropdown-item" data-value="' + t.value + '">' + a + "</button>" } function l(e, t) { var o = e.val(); if (o.length < t.treshold) return e.dropdown("hide"), 0; var a = e.next(); a.html(""); for (var n = 0, l = Object.keys(t.source), r = 0; r < l.length; r++) { var d = l[r], s = t.source[d], i = { label: t.label ? s[t.label] : d, value: t.value ? s[t.value] : s }; if (0 <= i.label.toLowerCase().indexOf(o.toLowerCase()) && (a.append(p(o, i, t)), 0 < t.maximumItems && ++n >= t.maximumItems)) break } return e.next().find(".dropdown-item").click(function () { e.val(u(this).text()), t.onSelectItem && t.onSelectItem({ value: u(this).data("value"), label: u(this).text() }, e[0]) }), a.children().length } u.fn.autocomplete = function (e) { var t = {}; u.extend(t, n, e); var o = u(this); o.parent().removeClass("dropdown"), o.removeAttr("data-toggle"), o.removeClass("dropdown-toggle"), o.parent().find(".dropdown-menu").remove(), o.dropdown("dispose"), o.parent().addClass("dropdown"), o.attr("data-toggle", "dropdown"), o.addClass("dropdown-toggle"); var a = u('<div class="dropdown-menu" ></div>'); return t.dropdownClass && a.addClass(t.dropdownClass), o.after(a), o.dropdown(t.dropdownOptions), this.off("click.autocomplete").click("click.autocomplete", function (e) { 0 == l(o, t) && (e.stopPropagation(), o.dropdown("hide")) }), this.off("keyup.autocomplete").keyup("keyup.autocomplete", function () { 0 < l(o, t) ? o.dropdown("show") : o.click() }), this } }(jQuery);
\ No newline at end of file