improve preset search box dramatically

SteamGridDB · Oct 18, 2024 · 97d4298 · 97d4298
1 parent 3dd649f
commit 97d4298
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 80 deletions.
diff --git a/files/presets/Battle-net.json b/files/presets/Battle-net.json
@@ -58,26 +58,14 @@
     },
     "presetVersion": 17,
     "defaultImage": {
-      "long": {
-        "tall": null,
-        "long": null,
-        "hero": null,
-        "logo": null,
-        "icon": null
-      },
+      "long": "",
       "tall": "",
       "hero": "",
       "logo": "",
       "icon": ""
     },
     "localImages": {
-      "long": {
-        "tall": null,
-        "long": null,
-        "hero": null,
-        "logo": null,
-        "icon": null
-      },
+      "long": "",
       "tall": "",
       "hero": "",
       "logo": "",

diff --git a/package.json b/package.json
@@ -112,6 +112,7 @@
     "file-uri-to-path": "^2.0.0",
     "fs-extra": "^11.2.0",
     "fuzzaldrin-plus": "^0.6.0",
+    "fuzzysort": "^3.1.0",
     "glob": "^11.0.0",
     "he": "^1.2.0",
     "highlight.js": "^11.10.0",

diff --git a/src/renderer/components/ng-select.component.ts b/src/renderer/components/ng-select.component.ts
@@ -2,86 +2,98 @@ import {
   Component,
   forwardRef,
   ElementRef,
-  Optional,
-  Host,
   HostListener,
   Input,
   Output,
-  ContentChildren,
-  QueryList,
   ChangeDetectorRef,
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 import * as _ from "lodash";
 import { SelectItem, StringDict } from "../../models";
+import fuzzysort from 'fuzzysort';
+import { NgTextInputComponent } from "./ng-text-input.component";
 
 @Component({
   selector: "ng-select",
   template: `
-    <div
-      class="display"
-      *ngIf="!searchable"
-      (click)="toggleOpen()"
-      [class.open]="open"
-    >
-      <div text-scroll>{{ currentDisplay || placeholder || "null" }}</div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        version="1.1"
-        viewBox="0 0 300 300"
+      <div
+        class="display"
+        *ngIf="!searchable"
+        (click)="toggleOpen()"
+        [class.open]="open"
       >
-        <polyline points="70, 110 150, 200 230, 110" />
-      </svg>
-    </div>
-    <ng-text-input
-      *ngIf="searchable"
-      class="display"
-      [placeholder]="placeholder"
-      (click)="open = !open"
-      [class.open]="open"
-      [(ngModel)]="searchText"
-      (ngModelChange)="searchText = $event; filterOptions($event)"
-      value="searchText;"
-    >
-    </ng-text-input>
-    <div class="options" [class.open]="open">
-      <ng-container *ngIf="_sections.length">
-        <ng-container *ngFor="let option of optionsList; let i = index">
-          <ng-container
-            *ngIf="_sectionsList[i.toString()] && !searchText.length"
-          >
-            <div class="sectionTitle">
-              {{ _sectionsList[i.toString()].name }}
-            </div>
+        <div text-scroll>{{ currentDisplay || placeholder || "null" }}</div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          viewBox="0 0 300 300"
+        >
+          <polyline points="70, 110 150, 200 230, 110" />
+        </svg>
+      </div>
+      <ng-text-input
+        *ngIf="searchable"
+        class="display"
+        [placeholder]="placeholder"
+        (click)="toggleOpen(); searchText=''; allowAutoOpen=true; autoFocus(searchEl)"
+        [class.open]="open"
+        [(ngModel)]="searchText"
+        (ngModelChange)="searchText = $event; filterOptions($event); open=allowAutoOpen?true:open"
+        value="searchText;"
+        autoFocus="false"
+        #searchEl
+      >
+      </ng-text-input>
+      <div class="options" [class.open]="open">
+        <ng-container *ngIf="_sections.length">
+          <ng-container *ngFor="let option of optionsList; let i = index">
+            <ng-container
+              *ngIf="_sectionsList[i.toString()] && !searchText.length"
+            >
+              <div class="sectionTitle">
+                {{ _sectionsList[i.toString()].name }}
+              </div>
+            </ng-container>
+            <ng-option
+              text-scroll
+              [displayValue]="option.displayValue"
+              [isSelected]="selected.indexOf(i) >= 0"
+              [isHidden]="
+                searchable && searchText.length && filtered.indexOf(i) < 0
+              "
+              (click)="selectOption(i, true);"
+            >
+              {{ option.displayValue }}
+            </ng-option>
           </ng-container>
+        </ng-container>
+        <ng-container *ngIf="!_sections.length">
           <ng-option
             text-scroll
+            *ngFor="let option of optionsList; let i = index"
             [displayValue]="option.displayValue"
             [isSelected]="selected.indexOf(i) >= 0"
             [isHidden]="
-              searchable && searchText.length && filtered.indexOf(i) >= 0
+              searchable && searchText.length && filtered.indexOf(i) < 0
             "
             (click)="selectOption(i, true)"
           >
             {{ option.displayValue }}
           </ng-option>
         </ng-container>
-      </ng-container>
-      <ng-container *ngIf="!_sections.length">
-        <ng-option
-          text-scroll
-          *ngFor="let option of optionsList; let i = index"
-          [displayValue]="option.displayValue"
-          [isSelected]="selected.indexOf(i) >= 0"
-          [isHidden]="
-            searchable && searchText.length && filtered.indexOf(i) >= 0
-          "
-          (click)="selectOption(i, true)"
-        >
-          {{ option.displayValue }}
-        </ng-option>
-      </ng-container>
-    </div>
+        <div *ngIf="searchable && searchText.length && !filtered.length"
+            text-scroll
+            class="fakeOption"
+          >
+            No results...
+          </div>
+          <div *ngIf="searchable && open && !optionsList.length"
+            text-scroll
+            class="fakeOption"
+          >
+            Options Loading...
+          </div>
+      </div>
   `,
   styleUrls: ["../styles/ng-select.component.scss"],
   host: { "[class.open]": "open" },
@@ -95,6 +107,7 @@ import { SelectItem, StringDict } from "../../models";
 })
 export class NgSelectComponent implements ControlValueAccessor {
   open: boolean = false;
+  allowAutoOpen: boolean = false;
   optionsList: SelectItem[] = [];
   _sectionsMap: StringDict = {};
   _sections: string[] = [];
@@ -155,12 +168,16 @@ export class NgSelectComponent implements ControlValueAccessor {
     this.selected = newSelected.map((value) =>
       _.findIndex(this.optionsList, (e) => _.isEqual(e, value)),
     );
+    this.changeRef.detectChanges();
   }
 
   toggleOpen() {
     this.open = !this.open;
     this.changeRef.detectChanges();
   }
+  autoFocus(searchEl: NgTextInputComponent) {
+    searchEl.focus();
+  }
 
   getSectionList(optionsList: SelectItem[]) {
     let running = 0;
@@ -235,6 +252,7 @@ export class NgSelectComponent implements ControlValueAccessor {
         } else {
           this.searchText = "";
         }
+        setTimeout(()=>{ this.open = false; this.changeRef.detectChanges(); },10)
       }
 
       if (currentDisplays.length > 0 && this.sort) {
@@ -337,17 +355,9 @@ export class NgSelectComponent implements ControlValueAccessor {
   }
 
   filterOptions(filter: string) {
-    let filteredIds: number[] = [];
-    for (let id = 0; id < this.optionsList.length; id++) {
-      if (
-        !this.optionsList[id].displayValue
-          .toUpperCase()
-          .includes(filter.toUpperCase())
-      ) {
-        filteredIds.push(id);
-      }
-    }
-    this.filtered = filteredIds;
+    this.filtered = fuzzysort.go(filter,this.optionsList.map((opt,i)=>({...opt, i})), {
+      key: 'displayValue',
+    }).map(res=>res.obj.i);
   }
 
   private getOptionId(value: any) {

diff --git a/src/renderer/components/ng-text-input.component.ts b/src/renderer/components/ng-text-input.component.ts
@@ -69,6 +69,10 @@ export class NgTextInputComponent implements ControlValueAccessor {
     );
   }
 
+  focus() {
+    this.elementRef.nativeElement.focus();
+  }
+
   handlePaste(event: ClipboardEvent) {
     event.preventDefault();
     let data = event.clipboardData.getData("text");

diff --git a/src/renderer/styles/ng-select.component.scss b/src/renderer/styles/ng-select.component.scss
@@ -86,5 +86,19 @@
       background-color: var(--color-ng-select-background);
       padding: var(--ng-select-padding, 0);
     }
+    .fakeOption {
+      &:not(.hidden) {
+        display: grid;
+        grid-auto-flow: column;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        background-color: var(--color-ng-select-background);
+        padding: var(--ng-select-padding, 0);
+      }
+      &.hidden {
+        display: none;
+      }
+    }
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2430,6 +2430,11 @@ fuzzaldrin-plus@^0.6.0:
   resolved "https://registry.yarnpkg.com/fuzzaldrin-plus/-/fuzzaldrin-plus-0.6.0.tgz#832f6489fbe876769459599c914a670ec22947ee"
   integrity sha512-srIDThJHkdp3aPwJpR/HNzYZCRJwm07b/igxseoHSB7qR8e/gQp4F6lMGknE3TQI1Aq14TiFf/wzrHOp9LY/EA==
 
+fuzzysort@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/fuzzysort/-/fuzzysort-3.1.0.tgz#4d7832d8fa48ad381753eaa7a7aae9927bdc10a8"
+  integrity sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==
+
 gauge@^4.0.3:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce"