Add OR search dialog

src/app/app.module.ts

@@ -60,6 +60,7 @@ 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';
+import { OrSearchDialogComponent } from './or-search-dialog/or-search-dialog.component';
 
 
 const MAT_MODULES = [
@@ -104,7 +105,8 @@ const MAT_MODULES = [
         ComicComponent,
         ImageListLoaderComponent,
         ToolbarActionsComponent,
-        JoinPipe
+        JoinPipe,
+        OrSearchDialogComponent
     ],
     imports: [
         BrowserModule,

src/app/or-search-dialog/or-search-dialog.component.html

@@ -0,0 +1,10 @@
+<h1 mat-dialog-title>Add OR Search</h1>
+<div mat-dialog-content>
+<div fxFlex>
+  <app-tag-input [(ngModel)]="tags" [enableOrSearch]="false" placeholder="Tags"></app-tag-input>
+</div>
+</div>
+<div mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button [mat-dialog-close]="tags" cdkFocusInitial>Add</button>
+</div>

src/app/or-search-dialog/or-search-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrSearchDialogComponent } from './or-search-dialog.component';
+
+describe('OrSearchDialogComponent', () => {
+  let component: OrSearchDialogComponent;
+  let fixture: ComponentFixture<OrSearchDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OrSearchDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OrSearchDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/or-search-dialog/or-search-dialog.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { HydrusSearchTags } from '../hydrus-tags';
+
+@Component({
+  selector: 'app-or-search-dialog',
+  templateUrl: './or-search-dialog.component.html',
+  styleUrls: ['./or-search-dialog.component.scss']
+})
+export class OrSearchDialogComponent implements OnInit {
+
+  tags: HydrusSearchTags = [];
+
+  constructor(public dialogRef: MatDialogRef<OrSearchDialogComponent>) { }
+
+  ngOnInit(): void {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}

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

@@ -1,4 +1,5 @@
-<mat-form-field class="tag-form-field">
+<mat-form-field class="tag-form-field" appearance="outline">
+  <mat-label>{{placeholder}}</mat-label>
     <mat-chip-list #chipList [attr.aria-label]="placeholder">
       <ng-template ngFor let-tag [ngForOf]="searchTags" let-i="index" >
         <mat-chip *ngIf="tag | isString; else arrayTag" [selectable]="false" color="primary"
@@ -18,7 +19,6 @@
         </ng-template>
       </ng-template>
       <input #tagInput
-             [placeholder]="placeholder"
              [matChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              matChipInputAddOnBlur="false"
@@ -43,4 +43,16 @@
         </ng-template>
       </ng-container>
     </mat-autocomplete>
+
+    <button *ngIf="enableOrSearch || enableSystemPredicates" type="button" mat-icon-button matSuffix [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+      <mat-icon>add</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button *ngIf="enableOrSearch" type="button" mat-menu-item (click)="orSearchButton()">
+        OR Search
+      </button>
+      <button *ngIf="enableSystemPredicates" type="button" mat-menu-item (click)="systemPredicateButton()">
+        System Predicate
+      </button>
+    </mat-menu>
 </mat-form-field>

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

@@ -9,6 +9,8 @@ import { MatAutocompleteSelectedEvent, MatAutocomplete } from '@angular/material
 import { Observable, of } from 'rxjs';
 import { HydrusTagsService } from '../hydrus-tags.service';
 import { HydrusSearchTags, HydrusTagSearchTag } from '../hydrus-tags';
+import { OrSearchDialogComponent } from '../or-search-dialog/or-search-dialog.component';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-tag-input',
@@ -27,6 +29,10 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
 
   //inputControl = new FormControl("", this.validators)
 
+  @Input() enableOrSearch = true;
+
+  @Input() enableSystemPredicates = true;
+
   @Input() placeholder: string;
 
   @Input() defaultTags: HydrusSearchTags;
@@ -41,7 +47,9 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
     @Optional() @Self() private controlDir: NgControl,
     public filesService: HydrusFilesService,
     public tagsService: HydrusTagsService,
-    private cd: ChangeDetectorRef) {
+    private cd: ChangeDetectorRef,
+    public dialog: MatDialog
+  ) {
     if (this.controlDir) {
       this.controlDir.valueAccessor = this
     }
@@ -85,7 +93,7 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
       return;
     }
 
-    const input = event.input;
+    const input = event.chipInput.inputElement;
     const value = event.value.toLowerCase(); // Hydrus tags are always lowercase
 
     this.addSearchTag(value);
@@ -107,6 +115,13 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
     this.tags.emit(this.searchTags);
   }
 
+  addSearchTagsArray(tags: HydrusSearchTags) {
+    if(tags.length > 0) {
+      this.searchTags.push([...tags]);
+      this.tags.emit(this.searchTags);
+    }
+  }
+
   setSearchTags(tags: string[]) {
     this.searchTags = [...tags];
     this.tags.emit(this.searchTags);
@@ -149,5 +164,25 @@ export class TagInputComponent implements OnInit, ControlValueAccessor {
   //   return results;
   // }
 
+  orSearchButton() {
+    const dialogRef = this.dialog.open<OrSearchDialogComponent, {}, HydrusSearchTags>(
+      OrSearchDialogComponent,
+      {
+        width: '80vw',
+      }
+    );
+
+    dialogRef.afterClosed().subscribe(result => {
+      if(result) {
+        this.addSearchTagsArray(result);
+      }
+    });
+
+  }
+
+  systemPredicateButton() {
+
+  }
+
 
 }