Link filters on project listing

apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html

@@ -33,6 +33,7 @@
             <div
                 *ngFor="let val of parsedConfig"
                 [class.active]="val.checked"
+                [class.filter-disabled]="!filter"
                 (click)="toggleFilter.emit(val.label)"
             >
                 <redaction-status-bar

apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss

@@ -40,10 +40,13 @@
 
         > div {
             border-radius: 4px;
-            cursor: pointer;
             padding: 3px 8px;
 
-            &:hover {
+            &:not(.filter-disabled) {
+                cursor: pointer;
+            }
+
+            &:hover:not(.active):not(.filter-disabled) {
                 background-color: $grey-6;
             }
 

apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts

@@ -20,7 +20,7 @@ export class SimpleDoughnutChartComponent implements OnChanges {
     @Input() radius = 85;
     @Input() strokeWidth = 20;
     @Input() direction: 'row' | 'column' = 'column';
-    @Input() filter: FilterModel[] = [];
+    @Input() filter: FilterModel[];
     @Output() public toggleFilter = new EventEmitter<string>();
 
     public chartData: any[] = [];
@@ -78,7 +78,7 @@ export class SimpleDoughnutChartComponent implements OnChanges {
             .filter((el) => el.value)
             .map((el) => ({
                 ...el,
-                checked: this.filter.find((f) => f.key === el.label)?.checked
+                checked: this.filter?.find((f) => f.key === el.label)?.checked
             }));
     }
 }

apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html

@@ -28,5 +28,7 @@
         [config]="documentsChartData"
         [strokeWidth]="15"
         [subtitle]="'project-listing.stats.charts.total-documents'"
+        [filter]="filters.statusFilters"
+        (toggleFilter)="toggleFilter('statusFilters', $event)"
     ></redaction-simple-doughnut-chart>
 </div>

apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts

@@ -1,6 +1,7 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component';
 import { AppStateService } from '../../../state/app-state.service';
+import { FilterModel } from '../../../common/filter/model/filter.model';
 
 @Component({
     selector: 'redaction-project-listing-details',
@@ -10,6 +11,8 @@ import { AppStateService } from '../../../state/app-state.service';
 export class ProjectListingDetailsComponent implements OnInit {
     @Input() public projectsChartData: DoughnutChartConfig[];
     @Input() public documentsChartData: DoughnutChartConfig[];
+    @Input() public filters: { statusFilters: FilterModel[] };
+    @Output() public filtersChanged = new EventEmitter();
 
     constructor(private readonly _appStateService: AppStateService) {}
 
@@ -22,4 +25,10 @@ export class ProjectListingDetailsComponent implements OnInit {
     public get totalPeople() {
         return this._appStateService.totalPeople;
     }
+
+    public toggleFilter(filterType: 'needsWorkFilters' | 'statusFilters', key: string): void {
+        const filter = this.filters[filterType].find((f) => f.key === key);
+        filter.checked = !filter.checked;
+        this.filtersChanged.emit(this.filters);
+    }
 }

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html

@@ -232,6 +232,8 @@
             <redaction-project-listing-details
                 [projectsChartData]="projectsChartData"
                 [documentsChartData]="documentsChartData"
+                [filters]="detailsContainerFilters"
+                (filtersChanged)="filtersChanged($event)"
             ></redaction-project-listing-details>
         </div>
     </div>

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts

@@ -34,8 +34,12 @@ export class ProjectListingScreenComponent implements OnInit {
     public dueDateFilters: FilterModel[];
     public peopleFilters: FilterModel[];
     public needsWorkFilters: FilterModel[];
-    public displayedProjects: ProjectWrapper[] = [];
 
+    public detailsContainerFilters: {
+        statusFilters: FilterModel[];
+    };
+
+    public displayedProjects: ProjectWrapper[] = [];
     public sortingOption: SortingOption = { column: 'projectDate', order: 'desc' };
 
     constructor(
@@ -208,7 +212,14 @@ export class ProjectListingScreenComponent implements OnInit {
         this.needsWorkFilters = needsWorkFilters;
     }
 
-    public filtersChanged() {
+    filtersChanged(filters?: { [key: string]: FilterModel[] }): void {
+        if (filters) {
+            for (const key of Object.keys(filters)) {
+                for (let idx = 0; idx < this[key].length; ++idx) {
+                    this[key][idx] = filters[key][idx];
+                }
+            }
+        }
         this._filterProjects();
     }
 
@@ -219,7 +230,9 @@ export class ProjectListingScreenComponent implements OnInit {
             { values: this.dueDateFilters, checker: dueDateChecker },
             { values: this.needsWorkFilters, checker: annotationFilterChecker, matchAll: true }
         ];
-
+        this.detailsContainerFilters = {
+            statusFilters: this.statusFilters.map((f) => ({ ...f }))
+        };
         this.displayedProjects = getFilteredEntities(this.appStateService.allProjects, filters);
         this._changeDetectorRef.detectChanges();
     }