From fad6bda758d13c40b5d0aaa0cb52f0a0f84024da Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Wed, 16 Sep 2020 00:17:25 +0200
Subject: [PATCH] Adding toogles to the chips

---
 .../components/items-grid/items-grid.component.html   | 11 +++++++++--
 src/app/components/items-grid/items-grid.component.ts |  9 +++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/components/items-grid/items-grid.component.html b/src/app/components/items-grid/items-grid.component.html
index f25d4fe6..f1309c36 100644
--- a/src/app/components/items-grid/items-grid.component.html
+++ b/src/app/components/items-grid/items-grid.component.html
@@ -1,6 +1,6 @@
 <div class="container-fluid justify-content-center" *ngIf="this.sortEnabled">
 	<button mat-icon-button matTooltipPosition="below" matTooltip="Filter" [matMenuTriggerFor]="filterMenu">
-		<mat-icon [matBadge]="this.filters.length.toString()" [matBadgeHidden]="this.filters.length == 0"
+		<mat-icon [matBadge]="getFilterCount().toString()" [matBadgeHidden]="getFilterCount() == 0"
 		          matBadgeColor="warn" matBadgeSize="small">
 			filter_list
 		</mat-icon>
@@ -14,7 +14,14 @@
 
 <mat-menu #filterMenu="matMenu">
 	<mat-chip-list>
-		<mat-chip *ngFor="let genre of this.genres">{{genre.name}}</mat-chip>
+		<!--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)
+		          	? this.filters.genres.pop(genre)
+		          	: this.filters.genres.push(genre)">
+			{{genre.name}}
+		</mat-chip>
 	</mat-chip-list>
 </mat-menu>
 
diff --git a/src/app/components/items-grid/items-grid.component.ts b/src/app/components/items-grid/items-grid.component.ts
index fd6f2072..047250ec 100644
--- a/src/app/components/items-grid/items-grid.component.ts
+++ b/src/app/components/items-grid/items-grid.component.ts
@@ -22,8 +22,8 @@ export class ItemsGridComponent
 	sortType: string = "title";
 	sortKeys: string[] = ["title", "start year", "end year"]
 	sortUp: boolean = true;
-	filters: string[] = [];
-	genres: Genre[];
+	filters: {genres: Genre[]} = {genres: []};
+	genres: Genre[] = [];
 
 	constructor(private route: ActivatedRoute,
 	            private sanitizer: DomSanitizer,
@@ -40,6 +40,11 @@ export class ItemsGridComponent
 		});
 	}
 
+	getFilterCount()
+	{
+		return this.filters.genres.length;
+	}
+
 	getThumb(slug: string)
 	{
 		return this.sanitizer.bypassSecurityTrustStyle("url(/poster/" + slug + ")");