Reworking the studio input

src/app/components/items-grid/items-grid.component.html

@@ -28,14 +28,17 @@
 	<ng-container *ngIf="this.studios.length > 0">
 		<br/>
 		<h4><b>Studios</b></h4>
-		<mat-chip-list>
-			<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
-			<mat-chip *ngFor="let studio of this.studios"
-			          [color]="this.filters.studio == studio ? 'accent' : 'default'" selected
-			          (click)="this.addFilter('studio', studio, false)">
-			{{studio.name}}
-			</mat-chip>
-		</mat-chip-list>
+		<mat-form-field class="w-100 px-3" (click)="$event.stopPropagation();">
+			<input type="text" matInput [matAutocomplete]="auto" [formControl]="studioForm">
+			<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
+			                  (optionSelected)="this.addFilter('studio', $event.option.value, false)"
+			                  [displayWith]="this.nameGetter">
+				<mat-option *ngIf="this.shouldDisplayNoneStudio()" [value]="null">None</mat-option>
+				<mat-option *ngFor="let studio of this.filteredStudios | async" [value]="studio">
+					{{studio.name}}
+				</mat-option>
+			</mat-autocomplete>
+		</mat-form-field>
 	</ng-container>
 </mat-menu>
 

src/app/components/items-grid/items-grid.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
+import { FormControl } from "@angular/forms";
 import { ActivatedRoute, ActivatedRouteSnapshot, Params, Router } from "@angular/router";
 import { DomSanitizer } from '@angular/platform-browser';
 import { Genre } from "../../../models/resources/genre";
@@ -11,13 +12,15 @@ import { Collection } from "../../../models/resources/collection";
 import { Studio } from "../../../models/resources/studio";
 import { ItemsUtils } from "../../misc/items-utils";
 import { PreLoaderService } from "../../services/pre-loader.service";
+import { Observable } from "rxjs"
+import { map, startWith, tap } from "rxjs/operators"
 
 @Component({
 	selector: 'app-items-grid',
 	templateUrl: './items-grid.component.html',
 	styleUrls: ['./items-grid.component.scss']
 })
-export class ItemsGridComponent
+export class ItemsGridComponent implements OnInit
 {
 	@Input() page: Page<LibraryItem | Show | ShowRole | Collection>;
 	@Input() sortEnabled: boolean = true;
@@ -34,6 +37,9 @@ export class ItemsGridComponent
 	genres: Genre[] = [];
 	studios: Studio[] = [];
 
+	studioForm: FormControl = new FormControl();
+	filteredStudios: Observable<Studio[]>;
+
 	constructor(private route: ActivatedRoute,
 	            private sanitizer: DomSanitizer,
 	            private loader: PreLoaderService,
@@ -80,6 +86,21 @@ export class ItemsGridComponent
 			|| x.slug == this.route.snapshot.params.slug);
 	}
 
+	ngOnInit()
+	{
+		this.filteredStudios = this.studioForm.valueChanges
+			.pipe(
+				map(x => x == null ? "" : x),
+				map(x => typeof x === "string" ? x : x.name),
+				map(x => this.studios.filter(y => y.name.toLowerCase().indexOf(x.toLowerCase()) != -1))
+			);
+	}
+
+	shouldDisplayNoneStudio()
+	{
+		return this.studioForm.value == '' || typeof this.studioForm.value != "string";
+	}
+
 	// TODO add /people to the switch list.
 
 	/*
@@ -116,7 +137,7 @@ export class ItemsGridComponent
 		return count;
 	}
 
-	addFilter(category: string, filter: IResource, isArray: boolean = true)
+	addFilter(category: string, filter: IResource, isArray: boolean = true, toggle: boolean = false)
 	{
 		if (isArray)
 		{
@@ -128,7 +149,11 @@ export class ItemsGridComponent
 		else
 		{
 			if (this.filters[category] == filter)
+			{
+				if (!toggle)
+					return;
 				this.filters[category] = null;
+			}
 			else
 				this.filters[category] = filter;
 		}
@@ -183,6 +208,11 @@ export class ItemsGridComponent
 		});
 	}
 
+	nameGetter(obj: Studio)
+	{
+		return obj?.name ?? "None";
+	}
+
 	getThumb(slug: string)
 	{
 		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");

src/app/misc/custom-route-reuse-strategy.ts

@@ -8,7 +8,6 @@ export class CustomRouteReuseStrategy extends RouteReuseStrategy
 			|| curr.routeConfig?.path == "genre/:slug"
 			|| curr.routeConfig?.path == "studio/:slug")
 		{
-			console.log(`${curr.routeConfig?.path} - ${future.routeConfig?.path}`)
 			return future.routeConfig.path == "browse"
 				|| future.routeConfig.path == "genre/:slug"
 				|| future.routeConfig.path == "studio/:slug";