Highlighting in SearchControl

Author: olmobrutall

Signum.Entities/DynamicQuery/Filter.cs

@@ -503,6 +503,7 @@ public static List<FilterFullText> TableFilters(List<Filter> filters)
         return filters.SelectMany(a => a.GetAllFilters()).OfType<FilterFullText>().Where(a => a.IsTable).ToList();
     }
 
+    //Keep in sync with Finder.tsx extractComplexConditions
     public override IEnumerable<string> GetKeywords()
     {
         if (this.Operation == FullTextFilterOperation.FreeText)

Signum.Entities/DynamicQuery/Tokens/EntityPropertyToken.cs

@@ -142,7 +142,7 @@ protected override List<QueryToken> SubTokensOverride(SubTokensOptions options)
                 result.Add(new FullTextRankToken(this));
             }
 
-            if (this.HasSnippet)
+            if (this.HasSnippet && (options & SubTokensOptions.CanToArray) != 0)
             {
                 result.Add(new StringSnippetToken(this));
             }

Signum.Entities/EnumMessages.cs

@@ -180,6 +180,7 @@ public enum SearchMessage
     [Description("Delete all filter")]
     DeleteAllFilter,
     Filters,
+    Columns,
     Find,
     [Description("Finder of {0}")]
     FinderOf0,

Signum.React.Extensions/Authorization/AuthAdminClient.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { RouteObject } from 'react-router'
-import { ModifiableEntity, EntityPack, is, OperationSymbol, SearchMessage, Lite, getToString, EntityControlMessage } from '@framework/Signum.Entities';
+import { ModifiableEntity, EntityPack, is, OperationSymbol, SearchMessage, Lite, getToString, EntityControlMessage, liteKeyLong } from '@framework/Signum.Entities';
 import { ifError } from '@framework/Globals';
 import { ajaxPost, ajaxGet, ajaxGetRaw, saveFile, ServiceError } from '@framework/Services';
 import * as Services from '@framework/Services';
@@ -41,14 +41,14 @@ export function start(options: { routes: RouteObject[], types: boolean; properti
   permissions = options.permissions;
 
   Navigator.addSettings(new EntitySettings(UserEntity, e => import('./Templates/User'), {
-    renderLite: (lite, subStr) => {
+    renderLite: (lite, hl) => {
       if (UserLiteModel.isInstance(lite.model))
         return (
-          <span className="d-inline-flex align-items-center"><SmallProfilePhoto user={lite} className="me-1" /><span>{TypeaheadOptions.highlightedText(getToString(lite), subStr)}</span></span>
+          <span className="d-inline-flex align-items-center"><SmallProfilePhoto user={lite} className="me-1" /><span>{hl.highlight(getToString(lite))}</span></span>
         );
 
       if (typeof lite.model == "string")
-        return TypeaheadOptions.highlightedText(getToString(lite), subStr);
+        return hl.highlight(getToString(lite));
 
       return lite.EntityType;
     }

Signum.React.Extensions/Basics/Templates/IconTypeahead.tsx

@@ -7,7 +7,7 @@ import { TypeContext } from '@framework/TypeContext'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useForceUpdate } from '@framework/Hooks'
-import { TypeaheadOptions } from '@framework/Components/Typeahead'
+import { TextHighlighter, TypeaheadOptions } from '@framework/Components/Typeahead'
 import { IconName, IconProp, IconPrefix } from "@fortawesome/fontawesome-svg-core";
 
 export interface IconTypeaheadLineProps {
@@ -99,13 +99,13 @@ export function IconTypeahead(p: IconTypeaheadProps) {
     return item as string;
   }
 
-  function handleRenderItem(item: unknown, query: string) {
+  function handleRenderItem(item: unknown, hl: TextHighlighter) {
     var icon = parseIcon(item as string);
 
     return (
       <span>
         {icon && <FontAwesomeIcon icon={icon} className="icon" style={{ width: "12px", height: "12px" }} />}
-        {TypeaheadOptions.highlightedTextAll(item as string, query)}
+        {hl.highlight(item as string)}
       </span>
     );
   }

Signum.React/Scripts/AppContext.tsx

@@ -155,6 +155,7 @@ declare global {
 
   interface Array<T> {
     joinCommaHtml(this: Array<T>, lastSeparator: string): React.ReactElement<any>;
+    joinHtml(this: Array<T>, separator: string | React.ReactElement<any>): React.ReactElement<any>;
   }
 }
 
@@ -196,3 +197,20 @@ Array.prototype.joinCommaHtml = function (this: any[], lastSeparator: string) {
   return React.createElement("span", undefined, ...result);
 }
 
+Array.prototype.joinHtml = function (this: any[], separator: string | React.ReactElement<any>) {
+  const args = arguments;
+
+  const result: (string | React.ReactElement<any>)[] = [];
+  for (let i = 0; i < this.length -1; i++) {
+    result.push(this[i]);
+    result.push(separator);
+  }
+
+ 
+  if (this.length >= 1) {
+    result.push(this[this.length - 1]);
+  }
+
+  return React.createElement("span", undefined, ...result);
+}
+

Signum.React/Scripts/Components/Typeahead.tsx

@@ -13,7 +13,7 @@ export interface TypeaheadProps {
   itemsDelay?: number;
   minLength?: number;
   renderList?: (typeahead: TypeaheadController) => React.ReactNode;
-  renderItem?: (item: unknown, query: string) => React.ReactNode;
+  renderItem?: (item: unknown, highlighter: TextHighlighter) => React.ReactNode;
   onSelect?: (item: unknown, e: React.KeyboardEvent<any> | React.MouseEvent<any>) => string | null;
   scrollHeight?: number;
   inputAttrs?: React.InputHTMLAttributes<HTMLInputElement>;
@@ -257,6 +257,8 @@ export const Typeahead = React.forwardRef(function Typeahead(p: TypeaheadProps,
 
   function renderDefaultList() {
     var items = controller.items;
+
+    var highlighter = TextHighlighter.fromString(controller.query);
     return (
       <Dropdown.Menu align={controller.rtl ? "end" : undefined} className="typeahead">
         {
@@ -268,7 +270,7 @@ export const Typeahead = React.forwardRef(function Typeahead(p: TypeaheadProps,
                 onMouseLeave={e => controller.handleElementMouseLeave(e, i)}
                 onMouseUp={e => controller.handleMenuMouseUp(e, i)}
                 {...p.itemAttrs && p.itemAttrs(item)}>
-                {p.renderItem!(item, controller.query!)}
+                {p.renderItem!(item, highlighter)}
               </button>)
         }
       </Dropdown.Menu>
@@ -293,7 +295,7 @@ Typeahead.defaultProps = {
   getItems: undefined as any,
   itemsDelay: 200,
   minLength: 1,
-  renderItem: (item, query) => TypeaheadOptions.highlightedText(item as string, query),
+  renderItem: (item, highlighter) => highlighter.highlight(item as string),
   onSelect: (elem, event) => (elem as string),
   scrollHeight: 0,
 
@@ -302,57 +304,55 @@ Typeahead.defaultProps = {
 
 
 export namespace TypeaheadOptions {
-  export function highlightedText(val: string, query?: string): React.ReactChild {
 
-    if (query == undefined)
-      return val;
+  export function normalizeString(str: string): string {
+    return str;
+  }
+}
 
-    const index = val.toLowerCase().indexOf(query.toLowerCase());
-    if (index == -1)
-      return val;
+export class TextHighlighter {
+  query?: string;
+  parts?: string[];
+  regex?: RegExp;
 
-    return (
-      <>
-        {val.substr(0, index)}
-        <strong key={0}>{val.substr(index, query.length)}</strong>
-        {val.substr(index + query.length)}
-      </>
-    );
+  static fromString(query: string | undefined) {
+    var hl = new TextHighlighter(query?.split(" "));
+    hl.query = query;
+    return hl;
   }
 
-  export function highlightedTextAll(val: string, query: string | undefined): React.ReactChild {
-    if (query == undefined)
-      return val;
+  constructor(parts: string[] | undefined) {
+    this.parts = parts?.filter(a => a != null && a.length > 0).orderByDescending(a => a.length);
+    if (this.parts?.length)
+      this.regex = new RegExp(this.parts.map(p => RegExp.escape(p)).join("|"), "gi");
+  }
 
-    const parts = query.toLocaleLowerCase().split(" ").filter(a => a.length > 0).orderByDescending(a => a.length);
+  highlight(text: string): React.ReactChild {
+    if (!text || !this.regex)
+      return text;
 
-    function splitText(str: string, partIndex: number): React.ReactChild {
+    var matches = Array.from(text.matchAll(this.regex));
 
-      if (str.length == 0)
-        return str;
+    if (matches.length == 0)
+      return text;
 
-      if (parts.length <= partIndex)
-        return str;
+    var result = [];
 
-      var part = parts[partIndex];
+    var pos = 0;
+    for (var i = 0; i < matches.length; i++) {
+      var m = matches[i];
 
-      const index = str.toLowerCase().indexOf(part);
-      if (index == -1)
-        return splitText(str, partIndex + 1);
+      if (pos < m.index!) {
+        result.push(text.substring(pos, m.index));
+      }
 
-      return (
-        <>
-          {splitText(str.substr(0, index), partIndex + 1)}
-          <strong key={0}>{str.substr(index, part.length)}</strong>
-          {splitText(str.substr(index + part.length), partIndex + 1)}
-        </>
-      );
+      pos = m.index! + m[0].length;
+      result.push(<strong>{text.substring(m.index!, pos)}</strong>);
     }
 
-    return splitText(val, 0);
-  }
+    if (pos < text.length)
+      result.push(text.substring(pos));
 
-  export function normalizeString(str: string): string {
-    return str;
+    return React.createElement(React.Fragment, undefined, ...result);
   }
 }