From 14811688f9eaa2ae5f4259be671b4f293f69f485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 22 Oct 2021 01:08:07 +0300
Subject: [PATCH] RED-2543: Doughnut chart - fixed visually disabling selection

---
 .../simple-doughnut-chart.component.html            |  2 +-
 .../simple-doughnut-chart.component.ts              | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index dbe733b5e..fb0477d48 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -28,7 +28,7 @@
                 (click)="val.key && selectValue(val.key)"
                 *ngFor="let val of config"
                 [class.active]="filterChecked$(val.key) | async"
-                [class.filter-disabled]="!val.key || (statusFilters$ | async)?.length === 0"
+                [class.filter-disabled]="!val.key || !filtersEnabled"
             >
                 <iqser-status-bar
                     [configs]="[
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
index f529ad6c4..a95aea2f8 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
@@ -12,6 +12,8 @@ export interface DoughnutChartConfig {
     active?: boolean;
 }
 
+const FILTER_KEY = 'statusFilters';
+
 @Component({
     selector: 'redaction-simple-doughnut-chart',
     templateUrl: './simple-doughnut-chart.component.html',
@@ -25,6 +27,7 @@ export class SimpleDoughnutChartComponent implements OnChanges {
     @Input() direction: 'row' | 'column' = 'column';
     @Input() totalType: 'sum' | 'count' = 'sum';
     @Input() counterText: string;
+    readonly filtersEnabled: boolean;
 
     chartData: any[] = [];
     perimeter: number;
@@ -32,9 +35,11 @@ export class SimpleDoughnutChartComponent implements OnChanges {
     cy = 0;
     size = 0;
 
-    readonly statusFilters$ = this.filterService.getFilterModels$('statusFilters') ?? of([]);
+    readonly statusFilters$ = this.filterService.getFilterModels$(FILTER_KEY) ?? of([]);
 
-    constructor(readonly filterService: FilterService) {}
+    constructor(readonly filterService: FilterService) {
+        this.filtersEnabled = !!this.filterService.filterGroups.find(g => g.slug === FILTER_KEY);
+    }
 
     get circumference(): number {
         return 2 * Math.PI * this.radius;
@@ -90,6 +95,8 @@ export class SimpleDoughnutChartComponent implements OnChanges {
     }
 
     selectValue(key: string): void {
-        this.filterService.toggleFilter('statusFilters', key);
+        if (this.filtersEnabled) {
+            this.filterService.toggleFilter(FILTER_KEY, key);
+        }
     }
 }