mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-07-09 03:04:20 -04:00
Reworking the studio input
This commit is contained in:
parent
f9e88adcc3
commit
ebf83d64ed
@ -28,14 +28,17 @@
|
|||||||
<ng-container *ngIf="this.studios.length > 0">
|
<ng-container *ngIf="this.studios.length > 0">
|
||||||
<br/>
|
<br/>
|
||||||
<h4><b>Studios</b></h4>
|
<h4><b>Studios</b></h4>
|
||||||
<mat-chip-list>
|
<mat-form-field class="w-100 px-3" (click)="$event.stopPropagation();">
|
||||||
<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
|
<input type="text" matInput [matAutocomplete]="auto" [formControl]="studioForm">
|
||||||
<mat-chip *ngFor="let studio of this.studios"
|
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
|
||||||
[color]="this.filters.studio == studio ? 'accent' : 'default'" selected
|
(optionSelected)="this.addFilter('studio', $event.option.value, false)"
|
||||||
(click)="this.addFilter('studio', studio, false)">
|
[displayWith]="this.nameGetter">
|
||||||
{{studio.name}}
|
<mat-option *ngIf="this.shouldDisplayNoneStudio()" [value]="null">None</mat-option>
|
||||||
</mat-chip>
|
<mat-option *ngFor="let studio of this.filteredStudios | async" [value]="studio">
|
||||||
</mat-chip-list>
|
{{studio.name}}
|
||||||
|
</mat-option>
|
||||||
|
</mat-autocomplete>
|
||||||
|
</mat-form-field>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</mat-menu>
|
</mat-menu>
|
||||||
|
|
||||||
|
@ -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 { ActivatedRoute, ActivatedRouteSnapshot, Params, Router } from "@angular/router";
|
||||||
import { DomSanitizer } from '@angular/platform-browser';
|
import { DomSanitizer } from '@angular/platform-browser';
|
||||||
import { Genre } from "../../../models/resources/genre";
|
import { Genre } from "../../../models/resources/genre";
|
||||||
@ -11,13 +12,15 @@ import { Collection } from "../../../models/resources/collection";
|
|||||||
import { Studio } from "../../../models/resources/studio";
|
import { Studio } from "../../../models/resources/studio";
|
||||||
import { ItemsUtils } from "../../misc/items-utils";
|
import { ItemsUtils } from "../../misc/items-utils";
|
||||||
import { PreLoaderService } from "../../services/pre-loader.service";
|
import { PreLoaderService } from "../../services/pre-loader.service";
|
||||||
|
import { Observable } from "rxjs"
|
||||||
|
import { map, startWith, tap } from "rxjs/operators"
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-items-grid',
|
selector: 'app-items-grid',
|
||||||
templateUrl: './items-grid.component.html',
|
templateUrl: './items-grid.component.html',
|
||||||
styleUrls: ['./items-grid.component.scss']
|
styleUrls: ['./items-grid.component.scss']
|
||||||
})
|
})
|
||||||
export class ItemsGridComponent
|
export class ItemsGridComponent implements OnInit
|
||||||
{
|
{
|
||||||
@Input() page: Page<LibraryItem | Show | ShowRole | Collection>;
|
@Input() page: Page<LibraryItem | Show | ShowRole | Collection>;
|
||||||
@Input() sortEnabled: boolean = true;
|
@Input() sortEnabled: boolean = true;
|
||||||
@ -34,6 +37,9 @@ export class ItemsGridComponent
|
|||||||
genres: Genre[] = [];
|
genres: Genre[] = [];
|
||||||
studios: Studio[] = [];
|
studios: Studio[] = [];
|
||||||
|
|
||||||
|
studioForm: FormControl = new FormControl();
|
||||||
|
filteredStudios: Observable<Studio[]>;
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute,
|
constructor(private route: ActivatedRoute,
|
||||||
private sanitizer: DomSanitizer,
|
private sanitizer: DomSanitizer,
|
||||||
private loader: PreLoaderService,
|
private loader: PreLoaderService,
|
||||||
@ -80,6 +86,21 @@ export class ItemsGridComponent
|
|||||||
|| x.slug == this.route.snapshot.params.slug);
|
|| 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.
|
// TODO add /people to the switch list.
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -116,7 +137,7 @@ export class ItemsGridComponent
|
|||||||
return count;
|
return count;
|
||||||
}
|
}
|
||||||
|
|
||||||
addFilter(category: string, filter: IResource, isArray: boolean = true)
|
addFilter(category: string, filter: IResource, isArray: boolean = true, toggle: boolean = false)
|
||||||
{
|
{
|
||||||
if (isArray)
|
if (isArray)
|
||||||
{
|
{
|
||||||
@ -128,7 +149,11 @@ export class ItemsGridComponent
|
|||||||
else
|
else
|
||||||
{
|
{
|
||||||
if (this.filters[category] == filter)
|
if (this.filters[category] == filter)
|
||||||
|
{
|
||||||
|
if (!toggle)
|
||||||
|
return;
|
||||||
this.filters[category] = null;
|
this.filters[category] = null;
|
||||||
|
}
|
||||||
else
|
else
|
||||||
this.filters[category] = filter;
|
this.filters[category] = filter;
|
||||||
}
|
}
|
||||||
@ -183,6 +208,11 @@ export class ItemsGridComponent
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nameGetter(obj: Studio)
|
||||||
|
{
|
||||||
|
return obj?.name ?? "None";
|
||||||
|
}
|
||||||
|
|
||||||
getThumb(slug: string)
|
getThumb(slug: string)
|
||||||
{
|
{
|
||||||
return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
|
return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");
|
||||||
|
@ -8,7 +8,6 @@ export class CustomRouteReuseStrategy extends RouteReuseStrategy
|
|||||||
|| curr.routeConfig?.path == "genre/:slug"
|
|| curr.routeConfig?.path == "genre/:slug"
|
||||||
|| curr.routeConfig?.path == "studio/:slug")
|
|| curr.routeConfig?.path == "studio/:slug")
|
||||||
{
|
{
|
||||||
console.log(`${curr.routeConfig?.path} - ${future.routeConfig?.path}`)
|
|
||||||
return future.routeConfig.path == "browse"
|
return future.routeConfig.path == "browse"
|
||||||
|| future.routeConfig.path == "genre/:slug"
|
|| future.routeConfig.path == "genre/:slug"
|
||||||
|| future.routeConfig.path == "studio/:slug";
|
|| future.routeConfig.path == "studio/:slug";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user