From 036b9c2691817a5f3b010f94d0799d84c23b5088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sat, 7 Nov 2020 13:40:20 +0200 Subject: [PATCH] Link filters on project listing --- .../simple-doughnut-chart.component.html | 1 + .../simple-doughnut-chart.component.scss | 7 +++++-- .../simple-doughnut-chart.component.ts | 4 ++-- .../project-listing-details.component.html | 2 ++ .../project-listing-details.component.ts | 11 ++++++++++- .../project-listing-screen.component.html | 2 ++ .../project-listing-screen.component.ts | 19 ++++++++++++++++--- 7 files changed, 38 insertions(+), 8 deletions(-) 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(); }