wip on the movie db exclusion

src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.html

@@ -6,14 +6,37 @@
         <div class="form-group">
             <div class="checkbox">
                 <input type="checkbox" id="showAdultMovies" name="showAdultMovies" [(ngModel)]="settings.showAdultMovies">
-                <label for="showAdultMovies" tooltipPosition="top" pTooltip="Include adult movies (pornography) in results">Show Adult Movies</label>
+                <label for="showAdultMovies" matTooltip="Include adult movies (pornography) in results">Show Adult Movies</label>
             </div>
         </div>
 
         <div class="form-group">
-            <label class="control-label" pTooltip="Prevent movies with certain keywords from being suggested. May require a restart to take effect.">
+            <label class="control-label" matTooltip="Prevent movies with certain keywords from being suggested. May require a restart to take effect.">
                 Excluded Keyword IDs for Movie Suggestions
             </label>
+<form [formGroup]='tagForm'>
+    <mat-form-field class="example-chip-list">
+            <mat-chip-list #chipList>
+                <mat-chip *ngFor="let fruit of excludedKeywords" [selectable]="false"
+                         [removable]="true" (removed)="remove(fruit)">
+                  {{fruit.name}}
+                  <mat-icon matChipRemove >cancel</mat-icon>
+                </mat-chip>
+                <input placeholder="New Keyword"
+                #fruitInput
+                formControlName='input'
+                       [matChipInputFor]="chipList"
+                       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                       [matChipInputAddOnBlur]="true"
+                       >
+              </mat-chip-list>
+              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+                <mat-option *ngFor="let fruit of filteredTags" [value]="fruit">
+                  {{fruit.name}}
+                </mat-option>
+              </mat-autocomplete>
+            </mat-form-field>
+            </form>
             <!-- <tag-input #input
                        [(ngModel)]="excludedKeywords"
                        [identifyBy]="'id'" [displayBy]="'name'"

src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.scss

@@ -8,4 +8,8 @@
 ::ng-deep .dark .btn:hover {
     box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
     color: inherit;
-}
+}
+
+.example-chip-list {
+    width: 100%;
+  }

src/Ombi/ClientApp/src/app/settings/themoviedb/themoviedb.component.ts

@@ -1,10 +1,15 @@
-import { Component, OnInit } from "@angular/core";
-import { empty, of } from "rxjs";
+import {COMMA, ENTER} from "@angular/cdk/keycodes";
+import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";
+import { MatChipInputEvent } from "@angular/material/chips";
+import { MatAutocompleteSelectedEvent, MatAutocomplete } from "@angular/material/autocomplete";
+import { empty, of, Observable } from "rxjs";
 
-import { ITheMovieDbSettings } from "../../interfaces";
+import { ITheMovieDbSettings, IMovieDbKeyword } from "../../interfaces";
 import { NotificationService } from "../../services";
 import { SettingsService } from "../../services";
 import { TheMovieDbService } from "../../services";
+import { FormControl, FormBuilder, FormGroup } from "@angular/forms";
+import { startWith, map, debounceTime, tap, switchMap, finalize } from "rxjs/operators";
 
 interface IKeywordTag {
     id: number;
@@ -20,12 +25,22 @@ export class TheMovieDbComponent implements OnInit {
 
     public settings: ITheMovieDbSettings;
     public excludedKeywords: IKeywordTag[];
+    public tagForm: FormGroup;
+    public filteredTags: IMovieDbKeyword[];
+    @ViewChild('fruitInput') public fruitInput: ElementRef<HTMLInputElement>;
+    @ViewChild('auto') public matAutocomplete: MatAutocomplete;
+
+    private readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
-                private tmdbService: TheMovieDbService) { }
+                private tmdbService: TheMovieDbService,
+                private fb: FormBuilder) { }
 
     public ngOnInit() {
+        this.tagForm = this.fb.group({
+            input: null,
+          });
         this.settingsService.getTheMovieDbSettings().subscribe(settings => {
             this.settings = settings;
             this.excludedKeywords = settings.excludedKeywordIds
@@ -36,8 +51,36 @@ export class TheMovieDbComponent implements OnInit {
                 }))
                 : [];
         });
+
+        this.tagForm
+        .get("input")
+        .valueChanges.pipe(
+          debounceTime(600),
+          switchMap((value: string) => {
+            if (value) {
+              return this.tmdbService.getKeywords(value);
+            }
+          })
+        )
+        .subscribe((r) => (this.filteredTags = r));
+
+    //     this.tagForm.controls.input.valueChanges
+    //   .pipe(
+    //     debounceTime(500),
+    //     switchMap(value => this.tmdbService.getKeywords(value))
+    //   )
+    //   .subscribe((data: IMovieDbKeyword[]) => {
+    //     this.filteredTags = data;
+    //   });
     }
 
+    public async selected(event: MatAutocompleteSelectedEvent) {
+        const keywordId = await this.tmdbService.getKeyword(+event.option.value).toPromise();
+        this.excludedKeywords.push({ id: keywordId.id, name: keywordId.name, initial: false});
+        this.fruitInput.nativeElement.value = '';
+        this.tagForm.controls.input.setValue(null);
+      }
+
     public autocompleteKeyword = (text: string) => this.tmdbService.getKeywords(text);
 
     public onAddingKeyword = (tag: string | IKeywordTag) => {
@@ -59,6 +102,31 @@ export class TheMovieDbComponent implements OnInit {
         }
     }
 
+    public async add(event: MatChipInputEvent) {
+        const input = event.input;
+        const value = event.value;
+
+        // Add our fruit
+        if ((value || '').trim()) {
+            const keyword = await this.tmdbService.getKeywords(value).toPromise();
+            this.excludedKeywords.push({ id: keyword[0].id, name: keyword[0].name, initial: false });
+        }
+
+        // Reset the input value
+        if (input) {
+          input.value = '';
+        }
+        this.tagForm.controls.input.setValue(null);
+      }
+
+    public remove(tag: IKeywordTag): void {
+        const index = this.excludedKeywords.indexOf(tag);
+
+        if (index >= 0) {
+          this.excludedKeywords.splice(index, 1);
+        }
+      }
+
     public save() {
         this.settings.excludedKeywordIds = this.excludedKeywords.map(k => k.id);
         this.settingsService.saveTheMovieDbSettings(this.settings).subscribe(x => {