diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index 625425eb4..1319c967b 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -33,6 +33,7 @@
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;
}
diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
index fc07d2d20..e4f8c66b4 100644
--- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.ts
+++ b/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();
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
}));
}
}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html
index e68662154..7c048bc6e 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html
+++ b/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)"
>
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts
index 97b569684..5ee602320 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts
+++ b/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);
+ }
}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 082e24a8b..a1faf643e 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -232,6 +232,8 @@
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index 1bc441898..02259e860 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/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();
}