Linking the new filter pannel with the back

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

@@ -18,9 +18,7 @@
 		<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
 		<mat-chip *ngFor="let genre of this.genres"
 		          [color]="this.filters.genres.includes(genre) ? 'accent' : 'default'" selected
-		          (click)="this.filters.genres.includes(genre)
+		          (click)="this.addFilter('genres', genre)">
-		          	? this.filters.genres.splice(this.filters.genres.indexOf(genre), 1)
-		          	: this.filters.genres.push(genre)">
 			{{genre.name}}
 		</mat-chip>
 	</mat-chip-list>
@@ -30,10 +28,8 @@
 	<mat-chip-list>
 		<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
 		<mat-chip *ngFor="let studio of this.studios"
-		          [color]="this.filters.studios.includes(studio) ? 'accent' : 'default'" selected
+		          [color]="this.filters.studio == studio ? 'accent' : 'default'" selected
-		          (click)="this.filters.studios.includes(studio)
+		          (click)="this.addFilter('studio', studio, false)">
-		          	? this.filters.studios.splice(this.filters.studios.indexOf(studio), 1)
-		          	: this.filters.studios.push(studio)">
 		{{studio.name}}
 		</mat-chip>
 	</mat-chip-list>

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

@@ -1,14 +1,15 @@
-import {Component, Input} from '@angular/core';
+import { Component, Input, OnInit } from "@angular/core";
-import {ActivatedRoute} from '@angular/router';
+import { ActivatedRoute } from "@angular/router";
-import {DomSanitizer} from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { Genre } from "../../../models/resources/genre";
-import {LibraryItem} from "../../../models/resources/library-item";
+import { LibraryItem } from "../../../models/resources/library-item";
-import {Page} from "../../../models/page";
+import { Page } from "../../../models/page";
-import {HttpClient} from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
-import {Show, ShowRole} from "../../../models/resources/show";
+import { IResource } from "../../../models/resources/resource";
-import {Collection} from "../../../models/resources/collection";
+import { Show, ShowRole } from "../../../models/resources/show";
+import { Collection } from "../../../models/resources/collection";
 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";
 
 @Component({
@@ -16,14 +17,19 @@ import { PreLoaderService } from "../../services/pre-loader.service";
 	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;
+
+	complexFiltersEnabled: boolean;
+	defaultType: string;
+
 	sortType: string = "title";
 	sortKeys: string[] = ["title", "start year", "end year"]
 	sortUp: boolean = true;
-	filters: {genres: Genre[], studios: Studio[]} = {genres: [], studios: []};
+
+	filters: {genres: Genre[], studio: Studio} = {genres: [], studio: null};
 	genres: Genre[] = [];
 	studios: Studio[] = [];
 
@@ -46,9 +52,69 @@ export class ItemsGridComponent
 		});
 	}
 
+	ngOnInit()
+	{
+		this.defaultType = this.page.this.match(/\/(\w*)($|\?)/)[1];
+		this.complexFiltersEnabled = this.defaultType == "shows" || this.defaultType == "items";
+	}
+
 	getFilterCount()
 	{
-		return this.filters.genres.length + this.filters.studios.length;
+		let count: number = this.filters.genres.length;
+		if (this.filters.studio != null)
+			count++;
+		return count;
+	}
+
+	addFilter(category: string, filter: IResource, isArray: boolean = true, isShowOnly: boolean = true)
+	{
+		if (!this.complexFiltersEnabled)
+			return;
+		let useShow: boolean;
+
+		if (isArray)
+		{
+			if (this.filters[category].includes(filter))
+			{
+				this.filters[category].splice(this.filters[category].indexOf(filter), 1);
+				useShow = this.getFilterCount() != 0;
+			}
+			else
+			{
+				this.filters[category].push(filter);
+				useShow = true;
+			}
+		}
+		else
+		{
+			if (this.filters[category] == filter)
+			{
+				this.filters[category] = null;
+				useShow = false;
+			}
+			else
+			{
+				this.filters[category] = filter;
+				useShow = filter != null;
+			}
+		}
+
+		let url: URL = new URL(this.page.first);
+		if (isShowOnly)
+		{
+			url = useShow
+				? new URL(this.page.changeType("shows"))
+				: new URL(this.page.changeType(this.defaultType));
+		}
+
+		if (isArray && this.filters[category].length > 0)
+			url.searchParams.set(category, `ctn:${this.filters[category].map(x => x.slug).join(',')}`);
+		else if (!isArray && this.filters[category] != null)
+			url.searchParams.set(category, filter.slug)
+		else
+			url.searchParams.delete(category)
+		this.client.get<Page<Show>>(url.toString())
+			.subscribe(x => this.page = Object.assign(new Page<Show>(), x));
 	}
 
 	getThumb(slug: string)

src/app/pages/metadata-edit/metadata-edit.component.ts

@@ -93,7 +93,7 @@ export class MetadataEditComponent
 	{
 		const input = event.input;
 		const value = event.value;
-		let genre: Genre = {slug: null, name: value};
+		let genre: Genre = {id: 0, slug: null, name: value};
 		
 		this.show.genres.push(genre);
 		if (input)

src/models/page.ts

@@ -26,4 +26,8 @@ export class Page<T>
 			this.this = x.this;
 		});
 	}
+	changeType(type: string)
+	{
+		return this.first.replace(/\/\w*($|\?)/, `/${type}$1`)
+	}
 }

src/models/resources/genre.ts

@@ -1,5 +1,6 @@
-export interface Genre
+import { IResource } from "./resource";
+
+export interface Genre extends IResource
 {
-	slug: string;
 	name: string;
 }

src/models/resources/studio.ts

@@ -1,5 +1,6 @@
-export interface Studio
+import { IResource } from "./resource";
+
+export interface Studio extends IResource
 {
-	slug: string;
 	name: string;
 }