Merge pull request #1328 from scireum/feature/ymo/SE-12851-has-more

SE-12851 provide autocompletes with a "has more" hint
scireum · Nov 22, 2023 · 585025a · 585025a
2 parents efb2599 + 773f702
commit 585025a
Show file tree

Hide file tree

Showing 4 changed files with 571 additions and 493 deletions.
diff --git a/src/main/java/sirius/web/controller/AutocompleteHelper.java b/src/main/java/sirius/web/controller/AutocompleteHelper.java
@@ -12,6 +12,7 @@
 import sirius.kernel.xml.StructuredOutput;
 import sirius.web.http.WebContext;
 
+import java.util.concurrent.atomic.AtomicInteger;
 import java.util.function.Consumer;
 
 /**
@@ -98,25 +99,25 @@ public Completion markDisabled() {
             return this;
         }
 
-        private void writeTo(StructuredOutput out) {
-            out.beginObject("completion");
+        private void writeTo(StructuredOutput output) {
+            output.beginObject("completion");
             {
-                out.property("value", value);
-                out.property("fieldLabel", fieldLabel);
-                out.property("completionLabel", Strings.isFilled(completionLabel) ? completionLabel : fieldLabel);
-                out.property("completionDescription", completionDescription);
+                output.property("value", value);
+                output.property("fieldLabel", fieldLabel);
+                output.property("completionLabel", Strings.isFilled(completionLabel) ? completionLabel : fieldLabel);
+                output.property("completionDescription", completionDescription);
 
                 // LEGACY SUPPORT....
-                out.property("id", value);
-                out.property("text", fieldLabel == null ? "" : fieldLabel);
-                out.property("description", Strings.isFilled(completionLabel) ? completionLabel : fieldLabel);
+                output.property("id", value);
+                output.property("text", fieldLabel == null ? "" : fieldLabel);
+                output.property("description", Strings.isFilled(completionLabel) ? completionLabel : fieldLabel);
                 // END OF LEGACY SUPPORT
 
                 if (disabled) {
-                    out.property("disabled", true);
+                    output.property("disabled", true);
                 }
             }
-            out.endObject();
+            output.endObject();
         }
     }
 
@@ -149,19 +150,83 @@ public static Completion suggest(String code) {
     /**
      * Handles the given request and generates the appropriate JSON as expected by the autocomplete in JavaScript.
      *
-     * @param ctx    the request to handle
-     * @param search the handler to generate suggestions
+     * @param webContext the request to handle
+     * @param search     the handler to generate suggestions
      */
-    public static void handle(WebContext ctx, ItemSearch search) {
-        StructuredOutput out = ctx.respondWith().json();
-        out.beginResult();
-        out.beginArray("completions");
-        search.search(ctx.get("query").asString(), c -> {
+    public static void handle(WebContext webContext, ItemSearch search) {
+        StructuredOutput output = webContext.respondWith().json();
+        output.beginResult();
+        output.beginArray("completions");
+        search.search(webContext.get("query").asString(), c -> {
             if (Strings.isFilled(c.value)) {
-                c.writeTo(out);
+                c.writeTo(output);
             }
         });
-        out.endArray();
-        out.endResult();
+        output.endArray();
+        output.endResult();
+    }
+
+    /**
+     * Handles the given request and generates the appropriate JSON as expected by the autocomplete in JavaScript.
+     * Also adds a "hasMore" entry with the given text if the given limit is reached.
+     *
+     * @param webContext the request to handle
+     * @param search     the handler to generate suggestions
+     * @param limit      the maximum number of suggestions to generate
+     * @param hint       the hint to show for the "hasMore" entry
+     */
+    public static void handleWithMore(WebContext webContext, ItemSearch search, int limit, String hint) {
+        AtomicInteger counter = new AtomicInteger();
+        StructuredOutput output = webContext.respondWith().json();
+        output.beginResult();
+        output.beginArray("completions");
+        search.search(webContext.get("query").asString(), completion -> {
+            if (counter.get() < limit) {
+                if (Strings.isFilled(completion.value)) {
+                    completion.writeTo(output);
+                    counter.incrementAndGet();
+                }
+            } else if (counter.get() == limit) {
+                new Completion("hasMore").markDisabled().withFieldLabel(hint).writeTo(output);
+                counter.incrementAndGet();
+            }
+        });
+        output.endArray();
+        output.endResult();
+    }
+
+    /**
+     * Handles the given request and generates the appropriate JSON as expected by the autocomplete in JavaScript.
+     * Also adds a "hasMore" entry with "..." if the given limit is reached.
+     *
+     * @param webContext the request to handle
+     * @param search     the handler to generate suggestions
+     * @param limit      the maximum number of suggestions to generate
+     */
+    public static void handleWithMore(WebContext webContext, ItemSearch search, int limit) {
+        handleWithMore(webContext, search, limit, "...");
+    }
+
+    /**
+     * Handles the given request and generates the appropriate JSON as expected by the autocomplete in JavaScript.
+     * Also adds a "hasMore" entry with the given text if the DEFAULT_LIMIT limit is reached.
+     *
+     * @param webContext the request to handle
+     * @param search     the handler to generate suggestions
+     * @param hint       the hint to show for the "hasMore" entry
+     */
+    public static void handleWithMore(WebContext webContext, ItemSearch search, String hint) {
+        handleWithMore(webContext, search, DEFAULT_LIMIT, hint);
+    }
+
+    /**
+     * Handles the given request and generates the appropriate JSON as expected by the autocomplete in JavaScript.
+     * Also adds a "hasMore" entry with "..." if the DEFAULT_LIMIT is reached.
+     *
+     * @param webContext the request to handle
+     * @param search     the handler to generate suggestions
+     */
+    public static void handleWithMore(WebContext webContext, ItemSearch search) {
+        handleWithMore(webContext, search, DEFAULT_LIMIT, "...");
     }
 }
diff --git a/src/main/resources/default/assets/tycho/libs/token-autocomplete/token-autocomplete.css b/src/main/resources/default/assets/tycho/libs/token-autocomplete/token-autocomplete.css
@@ -128,6 +128,11 @@
     background-color: #fdfdfd;
 }
 
+.token-autocomplete-container .token-autocomplete-suggestions li.token-autocomplete-suggestion-disabled, .token-autocomplete-container .token-autocomplete-suggestions li.token-autocomplete-suggestion-disabled:hover {
+    background-color: #cccccc;
+    cursor: unset;
+}
+
 .token-autocomplete-container .token-autocomplete-suggestions li.token-autocomplete-suggestion-active {
     color: #747474;
     background-color: #fdfdfd;