Support the display of OR searches in tag input

src/app/app.module.ts

@@ -59,6 +59,7 @@ import { ComicsListComponent } from './comics-list/comics-list.component';
 import { ComicComponent } from './comic/comic.component';
 import { ImageListLoaderComponent } from './image-list-loader/image-list-loader.component';
 import { ToolbarActionsComponent } from './toolbar-actions/toolbar-actions.component';
+import { JoinPipe } from './utils/join.pipe';
 
 
 const MAT_MODULES = [
@@ -102,7 +103,8 @@ const MAT_MODULES = [
         ComicsListComponent,
         ComicComponent,
         ImageListLoaderComponent,
-        ToolbarActionsComponent
+        ToolbarActionsComponent,
+        JoinPipe
     ],
     imports: [
         BrowserModule,

src/app/browse/browse.component.ts

@@ -7,6 +7,7 @@ import { HydrusFilesService } from '../hydrus-files.service';
 import { Subscription } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { SettingsService } from '../settings.service';
+import { HydrusSearchTags } from '../hydrus-tags';
 
 enum FilterOption {
   archive,
@@ -39,7 +40,7 @@ export class BrowseComponent implements OnInit, AfterViewInit {
   }
 
   currentSearchIDs: number[] = [];
-  searchTags: string[] = [];
+  searchTags: HydrusSearchTags = [];
 
   searchSub: Subscription;
 
@@ -65,7 +66,7 @@ export class BrowseComponent implements OnInit, AfterViewInit {
     }
   }
 
-  tagsChanged(tags: string[]) {
+  tagsChanged(tags: HydrusSearchTags) {
     this.searchTags = tags;
     this.search();
   }

src/app/comic/comic.component.ts

@@ -5,7 +5,7 @@ import { SearchService } from '../search.service';
 import { ActivatedRoute } from '@angular/router';
 import { switchMap, map } from 'rxjs/operators';
 import { HydrusFilesService } from '../hydrus-files.service';
-import { TagUtils } from '../tag-utils';
+import { TagUtils } from '../utils/tag-utils';
 
 @Component({
   selector: 'app-comic',

src/app/comics.service.ts

@@ -3,7 +3,7 @@ import { HydrusFilesService } from './hydrus-files.service';
 import { SearchService } from './search.service';
 import { forkJoin, from } from 'rxjs';
 import { map, switchMap, filter, mergeMap, toArray, delay, concatMap, tap, reduce, distinct, retry } from 'rxjs/operators';
-import { TagUtils } from './tag-utils';
+import { TagUtils } from './utils/tag-utils';
 import { HydrusFile } from './hydrus-file';
 import { ProgressBarMode } from '@angular/material/progress-bar';
 

src/app/file-info-sheet/file-info-sheet.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { HydrusFile, HydrusFileType, ServiceNamesToStatusesToTags } from '../hydrus-file';
 import {MAT_BOTTOM_SHEET_DATA} from '@angular/material/bottom-sheet';
-import { TagUtils } from '../tag-utils';
+import { TagUtils } from '../utils/tag-utils';
 import { HydrusFilesService } from '../hydrus-files.service';
 import { saveAs } from 'file-saver';
 import { MatSnackBar } from '@angular/material/snack-bar';

src/app/hydrus-files.service.ts

@@ -3,7 +3,7 @@ import { HydrusFile, HydrusFileFromAPI, HydrusFileType } from './hydrus-file';
 import { Observable, of, forkJoin } from 'rxjs';
 import { HydrusApiService } from './hydrus-api.service';
 import { map, tap } from 'rxjs/operators';
-import { TagUtils } from './tag-utils';
+import { TagUtils } from './utils/tag-utils';
 
 function chunk<T>(array: T[], size: number): T[][] {
   const chunked = [];

src/app/hydrus-tags.ts

@@ -1,4 +1,7 @@
+
 export interface HydrusTagSearchTag {
   value: string,
   count: number
 }
+
+export type HydrusSearchTags = (string | HydrusSearchTags)[];

src/app/search.service.ts

@@ -2,6 +2,7 @@ import { HydrusApiService } from './hydrus-api.service';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { HydrusSearchTags } from './hydrus-tags';
 
 @Injectable({
   providedIn: 'root'
@@ -11,7 +12,7 @@ export class SearchService {
   constructor(private api: HydrusApiService) { }
 
 
-  public searchFiles(tags: string[], options?: {system_inbox?: boolean, system_archive?: boolean}): Observable<number[]> {
+  public searchFiles(tags: HydrusSearchTags, options?: {system_inbox?: boolean, system_archive?: boolean}): Observable<number[]> {
     return this.api.searchFiles(
       encodeURIComponent(JSON.stringify(tags)),
       {

src/app/settings.ts

@@ -1,8 +1,10 @@
+import { HydrusSearchTags } from "./hydrus-tags";
+
 export interface AppSettingsV1 {
   version: 1;
 
   browseSearchOnLoad: boolean;
-  browseDefaultSearchTags: string[];
+  browseDefaultSearchTags: HydrusSearchTags;
 }
 
 export type AppSettings = AppSettingsV1;

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

@@ -1,12 +1,22 @@
 <mat-form-field class="tag-form-field">
     <mat-chip-list #chipList [attr.aria-label]="placeholder">
-      <mat-chip *ngFor="let tag of searchTags" [selectable]="false" color="primary"
-                class="tag-chip"
-               [removable]="true" (removed)="removeSearchTag(tag)"
-               [ngClass]="'tag-namespace-' + this.tagUtils.getNamespaceNoSpace(tag)">
-        {{tag}}
-        <mat-icon matChipRemove>cancel</mat-icon>
-      </mat-chip>
+      <ng-template ngFor let-tag [ngForOf]="searchTags" let-i="index" >
+        <mat-chip *ngIf="tag | isString; else arrayTag" [selectable]="false" color="primary"
+                  class="tag-chip"
+                [removable]="true" (removed)="removeSearchTag(i)"
+                [ngClass]="'tag-namespace-' + this.tagUtils.getNamespaceNoSpace($any(tag))">
+          {{tag}}
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+        <ng-template #arrayTag>
+          <mat-chip [selectable]="false" color="primary" class="tag-chip"
+                  [removable]="true" (removed)="removeSearchTag(i)"
+                  >
+            {{$any(tag) | flatten | join:' OR '}}
+            <mat-icon matChipRemove>cancel</mat-icon>
+          </mat-chip>
+        </ng-template>
+      </ng-template>
       <input #tagInput
              [placeholder]="placeholder"
              [matChipInputFor]="chipList"

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

@@ -2,13 +2,13 @@ import { HydrusFilesService } from './../hydrus-files.service';
 import { Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, Input, Optional, Self, ChangeDetectorRef } from '@angular/core';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
-import { TagUtils } from '../tag-utils';
+import { TagUtils } from '../utils/tag-utils';
 import { ControlValueAccessor, NgControl, UntypedFormControl } from '@angular/forms';
 import { switchMap, debounceTime } from 'rxjs/operators';
 import { MatAutocompleteSelectedEvent, MatAutocomplete } from '@angular/material/autocomplete';
 import { Observable, of } from 'rxjs';
 import { HydrusTagsService } from '../hydrus-tags.service';
-import { HydrusTagSearchTag } from '../hydrus-tags';
+import { HydrusSearchTags, HydrusTagSearchTag } from '../hydrus-tags';
 
 @Component({
   selector: 'app-tag-input',
@@ -17,7 +17,7 @@ import { HydrusTagSearchTag } from '../hydrus-tags';
 })
 export class TagInputComponent implements OnInit, ControlValueAccessor {
 
-  searchTags: string[] = [];
+  searchTags: HydrusSearchTags = [];
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
   tagUtils = TagUtils;
@@ -29,10 +29,10 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
 
   @Input() placeholder: string;
 
-  @Input() defaultTags: string[];
+  @Input() defaultTags: HydrusSearchTags;
 
   @Output()
-  tags = new EventEmitter<string[]>();
+  tags = new EventEmitter<HydrusSearchTags>();
 
   @ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
   @ViewChild('auto') matAutocomplete: MatAutocomplete;
@@ -114,12 +114,12 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
 
 
 
-  removeSearchTag(tag: string): void {
-    const index = this.searchTags.indexOf(tag);
+  removeSearchTag(index: number): void {
+    //const index = this.searchTags.indexOf(tag);
 
-    if (index >= 0) {
-      this.searchTags.splice(index, 1);
-    }
+    //if (index >= 0) {
+    this.searchTags.splice(index, 1);
+    //}
 
     this.tags.emit(this.searchTags);
   }

src/app/utils/array-utils.ts

@@ -0,0 +1,26 @@
+function *range(a: number, b: number) {
+  for (let i = a; i <= b; ++i) { yield i; }
+}
+
+export function rangeArray(a: number, b: number): number[] {
+  return Array.from(range(a, b));
+}
+
+export function chunk<T>(array: T[], size: number): T[][] {
+  const chunked = [];
+  for (let i = 0; i < array.length; i = i + size) {
+    chunked.push(array.slice(i, i + size));
+  }
+  return chunked;
+}
+
+/**
+ * In an ngFor directive, don't destroy and re-create the HTML elements every
+ * time the list changes.
+ *
+ * (Abstractly, this function says that an HTML element's "identity" is
+ * determined by its position in the list, not by its value.)
+ */
+export function trackByIndex(index: number, item: any) {
+  return index;
+}

src/app/utils/join.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: 'join'
+})
+export class JoinPipe implements PipeTransform {
+  transform(input:Array<any>, sep = ','): string {
+    return input.join(sep);
+  }
+}

src/app/tag-utils.ts → src/app/utils/tag-utils.ts

@@ -1,4 +1,4 @@
-import { HydrusFile, ServiceNamesToStatusesToTags } from './hydrus-file';
+import { HydrusFile, ServiceNamesToStatusesToTags } from '../hydrus-file';
 
 export class TagUtils {
   public static getNamespace(tag: string): string {