From 2a23538ae140526f232b71461e4b589b204e56d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 6 Nov 2020 12:40:02 +0200 Subject: [PATCH 1/8] Link needs work filters with project details --- .../project-details.component.html | 25 +++++++------------ .../project-details.component.scss | 16 +++++++++++- .../project-details.component.ts | 21 +++++++++++----- .../project-overview-screen.component.html | 2 ++ .../project-overview-screen.component.ts | 14 +++++++++-- apps/red-ui/src/assets/i18n/en.json | 8 +++--- 6 files changed, 57 insertions(+), 29 deletions(-) diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html index 7379e3003..0b74f9a20 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html @@ -53,29 +53,22 @@ [config]="documentsChartData" [radius]="70" [strokeWidth]="15" - [subtitle]="'project-overview.project-details.charts.total-documents'" + [subtitle]="'project-overview.project-details.charts.documents-in-project'" direction="row" >
-
+
- {{ 'project-overview.legend.contains-hints' | translate }} -
-
- - {{ 'project-overview.legend.contains-redactions' | translate }} -
-
- - {{ 'project-overview.legend.contains-suggestions' | translate }} + {{ 'project-overview.legend.' + filter.key | translate }}
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss index 2a0234af9..ac0ffd3c8 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss @@ -1,3 +1,5 @@ +@import '../../../../assets/styles/red-variables'; + .members-container { gap: 5px; } @@ -5,12 +7,24 @@ .legend { display: flex; flex-direction: column; - gap: 8px; + gap: 4px; + margin-left: -8px; > div { display: flex; gap: 8px; align-items: center; + border-radius: 4px; + cursor: pointer; + padding: 3px 8px; + + &:hover { + background-color: $grey-6; + } + + &.active { + background-color: rgba($primary, 0.1); + } } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts index 384cf25af..f6f1baf33 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; import { AppStateService } from '../../../state/app-state.service'; import { UserService } from '../../../user/user.service'; import { groupBy } from '../../../utils/functions'; import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; import { DialogService } from '../../../dialogs/dialog.service'; import { Router } from '@angular/router'; +import { FilterModel } from '../../../common/filter/model/filter.model'; @Component({ selector: 'redaction-project-details', @@ -13,7 +14,9 @@ import { Router } from '@angular/router'; }) export class ProjectDetailsComponent implements OnInit { public documentsChartData: DoughnutChartConfig[] = []; - @Output() public reloadProjects = new EventEmitter(); + @Input() public filters: { needsWorkFilters: FilterModel[] }; + @Output() public reloadProjects = new EventEmitter(); + @Output() public filtersChanged = new EventEmitter(); constructor( public readonly appStateService: AppStateService, @@ -55,7 +58,7 @@ export class ProjectDetailsComponent implements OnInit { ); } - public openAssignProjectMembersDialog() { + public openAssignProjectMembersDialog(): void { this._dialogService.openAssignProjectMembersAndOwnerDialog( null, this.appStateService.activeProject.project, @@ -65,12 +68,12 @@ export class ProjectDetailsComponent implements OnInit { ); } - public downloadRedactionReport($event: MouseEvent) { + public downloadRedactionReport($event: MouseEvent): void { $event.stopPropagation(); this.appStateService.downloadRedactionReport(); } - public calculateChartConfig() { + public calculateChartConfig(): void { if (this.appStateService.activeProject) { const groups = groupBy(this.appStateService.activeProject?.files, 'status'); this.documentsChartData = []; @@ -80,7 +83,13 @@ export class ProjectDetailsComponent implements OnInit { } } - get hasFiles() { + get hasFiles(): boolean { return this.appStateService.activeProject.hasFiles; } + + public toggleFilter(key: string): void { + const filter = this.filters.needsWorkFilters.find((f) => f.key === key); + filter.checked = !filter.checked; + this.filtersChanged.emit(this.filters); + } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index ae76eb713..170294da4 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -334,6 +334,8 @@
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index 4f0df4abb..952e07dd4 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -19,7 +19,7 @@ import { TranslateService } from '@ngx-translate/core'; import { FileActionService } from '../file/service/file-action.service'; import { FilterModel } from '../../common/filter/model/filter.model'; import * as moment from 'moment'; -import { SortingComponent, SortingOption } from '../../components/sorting/sorting.component'; +import { SortingOption } from '../../components/sorting/sorting.component'; import { ProjectDetailsComponent } from './project-details/project-details.component'; import { FileStatusWrapper } from '../file/model/file-status.wrapper'; import { @@ -45,6 +45,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { public displayedFiles: FileStatusWrapper[] = []; + public detailsContainerFilters: { needsWorkFilters: FilterModel[] }; + @ViewChild('projectDetailsComponent', { static: true }) private _projectDetailsComponent: ProjectDetailsComponent; @@ -314,7 +316,12 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { }); } - filtersChanged() { + filtersChanged(filters?: { [key: string]: FilterModel[] }): void { + if (filters) { + for (const key of Object.keys(filters)) { + this[key] = filters[key]; + } + } this._filterFiles(); } @@ -328,6 +335,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this.appStateService.activeProject.files, filters ); + this.detailsContainerFilters = { + needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f })) + }; this._changeDetectorRef.detectChanges(); } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index be31eb3e7..08372d28b 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -224,7 +224,7 @@ }, "project-details": { "charts": { - "total-documents": "Total Documents" + "documents-in-project": "Documents in Project" }, "stats": { "documents": "{{count}} documents", @@ -239,9 +239,9 @@ "upload-document": "Upload Document", "no-project": "Requested project: {{projectId}} does not exist! Back to Project Listing. ", "legend": { - "contains-hints": "Hints only ", - "contains-redactions": "Redacted ", - "contains-suggestions": "Suggested Redaction " + "hints": "Hints only", + "redactions": "Redacted", + "suggestions": "Suggested Redaction" } }, "file-preview": { From db553e56b0e3ca70c52578163e3b9e78eefcc885 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 6 Nov 2020 13:47:09 +0200 Subject: [PATCH 2/8] Filename tooltip position --- .../project-overview-screen.component.html | 10 +++++----- .../project-overview-screen.component.scss | 7 ------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 170294da4..3009c4e9d 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -168,11 +168,11 @@ > -
-
+
+
Date: Sat, 7 Nov 2020 12:51:29 +0200 Subject: [PATCH 3/8] Minor UI improvements --- .../initials-avatar.component.html | 10 ++++-- .../project-listing-screen.component.html | 2 +- .../project-overview-screen.component.html | 31 +++++++++---------- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html index aeb90be97..3ee32e3b7 100644 --- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html +++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html @@ -1,5 +1,11 @@ -
-
{{ initials }}
+
+
+ {{ initials }} +
{{ username || ('initials-avatar.unassigned' | translate) }}
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 882d6c9b8..5035d6307 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 @@ -162,7 +162,7 @@ [config]="getProjectStatusConfig(pw)" > -
+
-
-
-
- {{ fileStatus.filename }} -
- +
+
+ {{ fileStatus.filename }}
+
From 7b94c227f2656e032d1616b5790d4d447744f144 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sat, 7 Nov 2020 13:00:57 +0200 Subject: [PATCH 4/8] Fixed filter linking --- .../project-overview-screen.component.ts | 5 ++++- apps/red-ui/src/assets/i18n/en.json | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index 92155ca23..f756f895d 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -318,7 +318,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { filtersChanged(filters?: { [key: string]: FilterModel[] }): void { if (filters) { for (const key of Object.keys(filters)) { - this[key] = filters[key]; + console.log(filters[key]); + for (let idx = 0; idx < this[key].length; ++idx) { + this[key][idx] = filters[key][idx]; + } } } this._filterFiles(); diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 15226a323..6e8be4829 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -243,7 +243,7 @@ "legend": { "hints": "Hints only", "redactions": "Redacted", - "suggestions": "Suggested Redaction" + "requests": "Redaction requests" } }, "file-preview": { From 1c65ebdc1f470b87df77e3e9b07c90938c89405b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sat, 7 Nov 2020 13:05:27 +0200 Subject: [PATCH 5/8] Doughnut chart filters --- .../src/app/common/filter/utils/filter-utils.ts | 4 ---- .../simple-doughnut-chart.component.html | 6 +++++- .../simple-doughnut-chart.component.scss | 17 ++++++++++++++++- .../simple-doughnut-chart.component.ts | 13 +++++++++++-- .../project-details.component.html | 5 +++-- .../project-details.component.ts | 6 +++--- .../project-overview-screen.component.ts | 9 ++++++--- 7 files changed, 44 insertions(+), 16 deletions(-) diff --git a/apps/red-ui/src/app/common/filter/utils/filter-utils.ts b/apps/red-ui/src/app/common/filter/utils/filter-utils.ts index ed10d5300..2f6add9ad 100644 --- a/apps/red-ui/src/app/common/filter/utils/filter-utils.ts +++ b/apps/red-ui/src/app/common/filter/utils/filter-utils.ts @@ -1,6 +1,5 @@ import { FilterModel } from '../model/filter.model'; import { FileStatusWrapper } from '../../../screens/file/model/file-status.wrapper'; -import * as moment from 'moment'; import { ProjectWrapper } from '../../../state/app-state.service'; export const RedactionFilterSorter = { @@ -57,9 +56,6 @@ export const annotationFilterChecker = (f: FileStatusWrapper, filter: FilterMode return f[getter]; }; -export const fileAddedFilterChecker = (f: FileStatusWrapper, filter: FilterModel) => - moment(f.added).format('DD/MM/YYYY') === filter.key; - export const projectStatusChecker = (pw: ProjectWrapper, filter: FilterModel) => pw.hasStatus(filter.key); 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 5f4d6913e..625425eb4 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 @@ -30,7 +30,11 @@
-
+
f.key === key); + 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-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index f756f895d..cd5a44331 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -43,7 +43,10 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { public displayedFiles: FileStatusWrapper[] = []; - public detailsContainerFilters: { needsWorkFilters: FilterModel[] }; + public detailsContainerFilters: { + needsWorkFilters: FilterModel[]; + statusFilters: FilterModel[]; + }; @ViewChild('projectDetailsComponent', { static: false }) private _projectDetailsComponent: ProjectDetailsComponent; @@ -318,7 +321,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { filtersChanged(filters?: { [key: string]: FilterModel[] }): void { if (filters) { for (const key of Object.keys(filters)) { - console.log(filters[key]); for (let idx = 0; idx < this[key].length; ++idx) { this[key][idx] = filters[key][idx]; } @@ -338,7 +340,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { filters ); this.detailsContainerFilters = { - needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f })) + needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f })), + statusFilters: this.statusFilters.map((f) => ({ ...f })) }; this._changeDetectorRef.detectChanges(); } From 095360012bc9aed9c5d4e0aaed3bbb71c9338abb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sat, 7 Nov 2020 13:22:57 +0200 Subject: [PATCH 6/8] Project listing details component --- apps/red-ui/src/app/app.module.ts | 4 ++- .../project-listing-details.component.html | 32 +++++++++++++++++ .../project-listing-details.component.scss | 26 ++++++++++++++ .../project-listing-details.component.ts | 25 +++++++++++++ .../project-listing-screen.component.html | 36 +++---------------- .../project-listing-screen.component.scss | 27 -------------- .../project-listing-screen.component.ts | 8 ----- 7 files changed, 90 insertions(+), 68 deletions(-) create mode 100644 apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html create mode 100644 apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss create mode 100644 apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index aa140d8c4..e7c40a6f6 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -73,6 +73,7 @@ import { PageIndicatorComponent } from './screens/file/page-indicator/page-indic import { NeedsWorkBadgeComponent } from './screens/common/needs-work-badge/needs-work-badge.component'; import { ProjectOverviewEmptyComponent } from './screens/empty-states/project-overview-empty/project-overview-empty.component'; import { ProjectListingEmptyComponent } from './screens/empty-states/project-listing-empty/project-listing-empty.component'; +import { ProjectListingDetailsComponent } from './screens/project-listing-screen/project-listing-details/project-listing-details.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -111,7 +112,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) { PageIndicatorComponent, NeedsWorkBadgeComponent, ProjectOverviewEmptyComponent, - ProjectListingEmptyComponent + ProjectListingEmptyComponent, + ProjectListingDetailsComponent ], imports: [ BrowserModule, 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 new file mode 100644 index 000000000..e68662154 --- /dev/null +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html @@ -0,0 +1,32 @@ +
+ + +
+
+ +
+
{{ totalPages }}
+
+
+
+ +
+ +
+
{{ totalPeople }}
+
+
+
+
+
+
+ +
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss new file mode 100644 index 000000000..1d97dac26 --- /dev/null +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss @@ -0,0 +1,26 @@ +:host { + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.project-stats-container { + width: fit-content; + + .project-stats-item { + display: flex; + width: fit-content; + gap: 5px; + margin-top: 25px; + + &:first-of-type { + margin-top: 50px; + } + + mat-icon { + height: 16px; + margin-top: 2px; + } + } +} 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 new file mode 100644 index 000000000..97b569684 --- /dev/null +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts @@ -0,0 +1,25 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; +import { AppStateService } from '../../../state/app-state.service'; + +@Component({ + selector: 'redaction-project-listing-details', + templateUrl: './project-listing-details.component.html', + styleUrls: ['./project-listing-details.component.scss'] +}) +export class ProjectListingDetailsComponent implements OnInit { + @Input() public projectsChartData: DoughnutChartConfig[]; + @Input() public documentsChartData: DoughnutChartConfig[]; + + constructor(private readonly _appStateService: AppStateService) {} + + ngOnInit(): void {} + + public get totalPages() { + return this._appStateService.totalAnalysedPages; + } + + public get totalPeople() { + return this._appStateService.totalPeople; + } +} 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 5035d6307..082e24a8b 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 @@ -229,38 +229,10 @@
-
- - -
-
- -
-
{{ totalPages }}
-
-
-
- -
- -
-
{{ totalPeople }}
-
-
-
-
-
-
- -
+
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss index c8d100a87..e3a8235e2 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss @@ -38,31 +38,4 @@ display: flex; width: 430px; padding-top: 50px; - - > div { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - } - - .project-stats-container { - width: fit-content; - - .project-stats-item { - display: flex; - width: fit-content; - gap: 5px; - margin-top: 25px; - - &:first-of-type { - margin-top: 50px; - } - - mat-icon { - height: 16px; - margin-top: 2px; - } - } - } } 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 2dd30e430..1bc441898 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 @@ -72,14 +72,6 @@ export class ProjectListingScreenComponent implements OnInit { return this.userService.user; } - public get totalPages() { - return this.appStateService.totalAnalysedPages; - } - - public get totalPeople() { - return this.appStateService.totalPeople; - } - public get activeProjects() { return this.appStateService.allProjects.reduce( (i, p) => i + (p.project.status === Project.StatusEnum.ACTIVE ? 1 : 0), 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 7/8] 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(); } From 5fa011822c2cf0b18e3390fce3ff29f7e12c3534 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sat, 7 Nov 2020 13:44:10 +0200 Subject: [PATCH 8/8] Fixed styling --- .../project-listing-details.component.scss | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss index 1d97dac26..538a27659 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss @@ -3,24 +3,30 @@ display: flex; flex-direction: row; justify-content: space-between; -} -.project-stats-container { - width: fit-content; - - .project-stats-item { + > div { display: flex; - width: fit-content; - gap: 5px; - margin-top: 25px; + flex-direction: column; + align-items: center; - &:first-of-type { - margin-top: 50px; - } + .project-stats-container { + width: fit-content; - mat-icon { - height: 16px; - margin-top: 2px; + .project-stats-item { + display: flex; + width: fit-content; + gap: 5px; + margin-top: 25px; + + &:first-of-type { + margin-top: 50px; + } + + mat-icon { + height: 16px; + margin-top: 2px; + } + } } } }