From ebf83d64edac5618a30b75ca2566628e7b46685e Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sun, 27 Sep 2020 22:00:05 +0200 Subject: [PATCH] Reworking the studio input --- .../items-grid/items-grid.component.html | 19 +++++----- .../items-grid/items-grid.component.ts | 36 +++++++++++++++++-- src/app/misc/custom-route-reuse-strategy.ts | 1 - 3 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/app/components/items-grid/items-grid.component.html b/src/app/components/items-grid/items-grid.component.html index 0ff568e7..e2eb2af8 100644 --- a/src/app/components/items-grid/items-grid.component.html +++ b/src/app/components/items-grid/items-grid.component.html @@ -28,14 +28,17 @@

Studios

- - - - {{studio.name}} - - + + + + None + + {{studio.name}} + + +
diff --git a/src/app/components/items-grid/items-grid.component.ts b/src/app/components/items-grid/items-grid.component.ts index ecc50e12..2fd75ed4 100644 --- a/src/app/components/items-grid/items-grid.component.ts +++ b/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; @Input() sortEnabled: boolean = true; @@ -34,6 +37,9 @@ export class ItemsGridComponent genres: Genre[] = []; studios: Studio[] = []; + studioForm: FormControl = new FormControl(); + filteredStudios: Observable; + 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 + ")"); diff --git a/src/app/misc/custom-route-reuse-strategy.ts b/src/app/misc/custom-route-reuse-strategy.ts index e665a461..40e7f226 100644 --- a/src/app/misc/custom-route-reuse-strategy.ts +++ b/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";