Add system predicates to autocomplete

Author: floogulinc

src/app/hydrus-system-predicates.ts

@@ -410,3 +410,10 @@ export const ratingOperators: Partial<Record<SystemPredicate, string[]>> = {
     'is about'
   ]
 }
+
+export const systemTagsForSearch =
+  predicateGroups.flatMap(g => 'predicate' in g ? g.predicate : g.predicates)
+  .map(systemPredicate => ({
+    systemPredicate,
+    value: `system:${allSystemPredicates[systemPredicate].name}`
+  }))

src/app/tag-input/tag-input.component.html

@@ -46,19 +46,19 @@
     >
   </mat-chip-grid>
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
-    @if (filteredTags | async; as tags) {
-      @if (tags.length > 25) {
+    @if ((enableSystemPredicates ? filteredTags$ : filteredTagsFromAPI$) | async; as tags) {
+      @if (tags.length > 100) {
         <cdk-virtual-scroll-viewport
           class="virtual-scroll-viewport-full-width"
           itemSize="48" minBufferPx="256" maxBufferPx="512">
-          <mat-option *cdkVirtualFor="let tag of tags" [value]="tag.value" [attr.data-tag-namespace]="tag.value | tagNamespace" class="theming tag-color">
-            {{tag.value}} ({{tag.count | number}})
+          <mat-option *cdkVirtualFor="let tag of tags" [value]="tag" [attr.data-tag-namespace]="tag.value | tagNamespace" class="theming tag-color">
+            {{tag.value}} @if(tag.count) { ({{tag.count | number}}) }
           </mat-option>
         </cdk-virtual-scroll-viewport>
       } @else {
         @for (tag of tags; track tag.value) {
-          <mat-option [value]="tag.value" [attr.data-tag-namespace]="tag.value | tagNamespace" class="theming tag-color">
-            {{tag.value}} ({{tag.count | number}})
+          <mat-option [value]="tag" [attr.data-tag-namespace]="tag.value | tagNamespace" class="theming tag-color">
+            {{tag.value}} @if(tag.count) { ({{tag.count | number}}) }
           </mat-option>
         }
       }

src/app/tag-input/tag-input.component.ts

@@ -1,15 +1,15 @@
 import { HydrusFilesService } from './../hydrus-files.service';
-import { Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, Input, Optional, Self } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, Input, Optional, Self, input } from '@angular/core';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
-import { ControlValueAccessor, NgControl, UntypedFormControl } from '@angular/forms';
-import { switchMap } from 'rxjs/operators';
-import { MatAutocompleteSelectedEvent, MatAutocomplete } from '@angular/material/autocomplete';
-import { Observable, firstValueFrom, of } from 'rxjs';
+import { ControlValueAccessor, FormControl, NgControl, UntypedFormControl } from '@angular/forms';
+import { distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+import { MatAutocompleteSelectedEvent, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
+import { Observable, combineLatest, firstValueFrom, of } from 'rxjs';
 import { HydrusTagsService } from '../hydrus-tags.service';
 import { HydrusSearchTags, HydrusTagSearchTag, TagDisplayType, isSingleTag } from '../hydrus-tags';
 import { MatDialog } from '@angular/material/dialog';
-import { allSystemPredicates, predicateGroups, SystemPredicate } from '../hydrus-system-predicates';
+import { allSystemPredicates, predicateGroups, SystemPredicate, systemTagsForSearch } from '../hydrus-system-predicates';
 import { SystemPredicateDialogComponent } from '../system-predicate-dialog/system-predicate-dialog.component';
 import { TagInputDialogComponent } from '../tag-input-dialog/tag-input-dialog.component';
 import { SettingsService } from '../settings.service';
@@ -38,6 +38,12 @@ interface ConvertedPredicateGroup {
   predicates: ConvertedPredicate[]
 }
 
+export interface HydrusTagSearchTagUI {
+  value: string,
+  count?: number,
+  systemPredicate?: SystemPredicate
+}
+
 @Component({
   selector: 'app-tag-input',
   templateUrl: './tag-input.component.html',
@@ -50,9 +56,6 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
   searchTags: HydrusSearchTags = [];
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
-  tagCtrl = new UntypedFormControl();
-  filteredTags: Observable<HydrusTagSearchTag[]>;
-
   //inputControl = new FormControl("", this.validators)
 
   @Input() enableOrSearch = true;
@@ -69,6 +72,22 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
 
   @Input() enableSiblingParentsDialog = true;
 
+  showSystemPredicateAutocompleteByDefault = input()
+
+
+  tagCtrl = new FormControl('');
+  filteredTagsFromAPI$: Observable<HydrusTagSearchTagUI[]> = this.tagCtrl.valueChanges.pipe(
+    switchMap(search => search && search.length >= 3 ? this.tagsService.searchTags(search, this.displayType) : of([]))
+  );
+
+  filteredSystemPredicates$: Observable<HydrusTagSearchTagUI[]> = this.tagCtrl.valueChanges.pipe(
+    map((input) => input ? systemTagsForSearch.filter(p => p.value.startsWith(input)) : []),
+  );
+
+  filteredTags$: Observable<HydrusTagSearchTagUI[]> = combineLatest([this.filteredTagsFromAPI$, this.filteredSystemPredicates$, ]).pipe(
+    map(([api, predicates]) => [...api, ...predicates]),
+  )
+
   @Output()
   tags = new EventEmitter<HydrusSearchTags>();
 
@@ -87,11 +106,7 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
     if (this.controlDir) {
       this.controlDir.valueAccessor = this
     }
-
-    this.filteredTags = this.tagCtrl.valueChanges.pipe(
-      switchMap(search => search && search.length >= 3 ? this.tagsService.searchTags(search, this.displayType) : of([]))
-    );
-   }
+  }
 
   favoriteTags = this.settingsService.appSettings.favoriteTags;
 
@@ -180,8 +195,14 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
   }
 
   selected(event: MatAutocompleteSelectedEvent): void {
-    const negated = this.tagInput.nativeElement.value.startsWith('-');
-    this.addSearchTag((negated ? '-' : '') + event.option.value);
+    const option: MatOption<HydrusTagSearchTagUI> = event.option
+    console.log(option)
+    if(option.value.systemPredicate) {
+      this.systemPredicateButton(option.value.systemPredicate)
+    } else {
+      const negated = this.tagInput.nativeElement.value.startsWith('-');
+      this.addSearchTag((negated ? '-' : '') + option.value.value);
+    }
     this.tagInput.nativeElement.value = '';
     this.tagCtrl.setValue(null);
   }