From d98b837b6a0f83ac45e1f44b08b7612a1930fab4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 24 Jun 2022 00:11:12 +0300
Subject: [PATCH] Progress bar component supports filters

---
 .../progress-bar/progress-bar-config.model.ts |  1 +
 .../progress-bar/progress-bar.component.html  | 14 +++++----
 .../progress-bar/progress-bar.component.scss  |  6 +++-
 .../progress-bar/progress-bar.component.ts    | 31 ++++++++++++++++++-
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/lib/misc/progress-bar/progress-bar-config.model.ts b/src/lib/misc/progress-bar/progress-bar-config.model.ts
index 5723a9b..76fe4a4 100644
--- a/src/lib/misc/progress-bar/progress-bar-config.model.ts
+++ b/src/lib/misc/progress-bar/progress-bar-config.model.ts
@@ -1,4 +1,5 @@
 export interface ProgressBarConfigModel {
+    id: string;
     label: string;
     icon: string;
     count: number;
diff --git a/src/lib/misc/progress-bar/progress-bar.component.html b/src/lib/misc/progress-bar/progress-bar.component.html
index bc871ed..4ca1311 100644
--- a/src/lib/misc/progress-bar/progress-bar.component.html
+++ b/src/lib/misc/progress-bar/progress-bar.component.html
@@ -1,8 +1,10 @@
-<div class="details mb-6">
-    <span>{{ config.count }} {{ config.label | translate }}</span>
-    <mat-icon [svgIcon]="config.icon"></mat-icon>
-</div>
+<div (click)="selectValue()" [class.pointer]="filterKey && !!filterService">
+    <div [class.active]="filterChecked$ | async" class="details mb-6">
+        <span>{{ config.count }} {{ config.label | translate }}</span>
+        <mat-icon [svgIcon]="config.icon"></mat-icon>
+    </div>
 
-<div class="wrapper">
-    <div [style.--count]="config.count" [style.--total]="config.total" class="indicator"></div>
+    <div class="wrapper">
+        <div [style.--count]="config.count" [style.--total]="config.total" class="indicator"></div>
+    </div>
 </div>
diff --git a/src/lib/misc/progress-bar/progress-bar.component.scss b/src/lib/misc/progress-bar/progress-bar.component.scss
index 8ceb83a..0cb0bcc 100644
--- a/src/lib/misc/progress-bar/progress-bar.component.scss
+++ b/src/lib/misc/progress-bar/progress-bar.component.scss
@@ -21,8 +21,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    
+
     mat-icon {
         width: 10px;
     }
 }
+
+.active {
+    font-weight: 600;
+}
diff --git a/src/lib/misc/progress-bar/progress-bar.component.ts b/src/lib/misc/progress-bar/progress-bar.component.ts
index 8045426..6192d9b 100644
--- a/src/lib/misc/progress-bar/progress-bar.component.ts
+++ b/src/lib/misc/progress-bar/progress-bar.component.ts
@@ -1,5 +1,9 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Optional } from '@angular/core';
 import { ProgressBarConfigModel } from './progress-bar-config.model';
+import { FilterService, INestedFilter } from '../../filtering';
+import { Observable, of } from 'rxjs';
+import { get, shareLast } from '../../utils';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'iqser-progress-bar [config]',
@@ -9,4 +13,29 @@ import { ProgressBarConfigModel } from './progress-bar-config.model';
 })
 export class ProgressBarComponent {
     @Input() config!: ProgressBarConfigModel;
+    @Input() filterKey?: string;
+
+    filterChecked$!: Observable<boolean>;
+    filters$!: Observable<INestedFilter[]>;
+
+    constructor(@Optional() readonly filterService: FilterService) {}
+
+    ngOnInit() {
+        this.filters$ =
+            this.filterService?.getFilterModels$(this.filterKey || '-').pipe(
+                map(filters => filters ?? []),
+                shareLast(),
+            ) ?? of([]);
+
+        this.filterChecked$ = this.filters$.pipe(
+            get(filter => filter.id === this.config.id),
+            map(filter => !!filter?.checked),
+        );
+    }
+
+    selectValue(): void {
+        if (this.filterKey && this.filterService) {
+            this.filterService?.toggleFilter(this.filterKey, this.config.id);
+        }
+    }
 }