From 764525af7e6a0a35fc072a67b99356f604e47000 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Sat, 15 Oct 2022 17:47:17 +0300 Subject: [PATCH] RED-5289 - Docs/Pages switch in dossier stats --- .../users-stats/users-stats.component.html | 2 +- ...ssier-states-listing-screen.component.html | 2 +- .../template-stats.component.html | 4 +- .../dossier-details.component.html | 43 +++++++----- .../dossier-details.component.ts | 66 +++++++++++++++---- .../dossiers-listing-details.component.html | 4 +- .../src/app/modules/icons/icons.module.ts | 1 + .../donut-chart/donut-chart.component.html | 9 ++- .../donut-chart/donut-chart.component.scss | 15 +++++ .../donut-chart/donut-chart.component.ts | 6 +- apps/red-ui/src/assets/i18n/de.json | 3 +- apps/red-ui/src/assets/i18n/en.json | 3 +- .../src/assets/icons/general/arrow-down.svg | 14 ++++ 13 files changed, 130 insertions(+), 42 deletions(-) create mode 100644 apps/red-ui/src/assets/icons/general/arrow-down.svg diff --git a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html index 54d750dcb..30e11d161 100644 --- a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html +++ b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html @@ -24,7 +24,7 @@ [config]="chartConfig" [radius]="63" [strokeWidth]="15" - [subtitle]="'user-stats.chart.users' | translate" + [subtitles]="['user-stats.chart.users' | translate]" direction="row" filterKey="roleFilters" totalType="sum" diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html index 9ffc888b9..8e11d9b95 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html @@ -37,7 +37,7 @@ [config]="chartConfig" [radius]="80" [strokeWidth]="15" - [subtitle]="'dossier-states-listing.chart.dossier-states' | translate: { count: chartConfig.length }" + [subtitles]="['dossier-states-listing.chart.dossier-states' | translate: { count: chartConfig.length }]" [totalType]="'simpleLabel'" > diff --git a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html index 6aba47c49..d4828b7f9 100644 --- a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html +++ b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html @@ -42,7 +42,7 @@ [config]="translateChartService.translateDossierStates(dossierTemplate.dossiersChartConfig, dossierTemplate.id)" [radius]="63" [strokeWidth]="15" - [subtitle]="'dossier-template-stats.active-dossiers' | translate: { count: dossierTemplate.numberOfActiveDossiers }" + [subtitles]="['dossier-template-stats.active-dossiers' | translate: { count: dossierTemplate.numberOfActiveDossiers }]" direction="row" totalType="sum" > @@ -52,7 +52,7 @@ [config]="translateChartService.translateWorkflowStatus(dossierTemplate.documentsChartConfig)" [radius]="63" [strokeWidth]="15" - [subtitle]="'dossier-template-stats.total-documents' | translate" + [subtitles]="['dossier-template-stats.total-documents' | translate]" direction="row" totalType="sum" > diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html index 03e08b4e5..cca6cbcdc 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html +++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html @@ -1,11 +1,11 @@ - +
-
{{ dossier.dossierName }}
+
{{ ctx.dossier?.dossierName }}
@@ -15,7 +15,7 @@
- +
- +
- +
-
+
-
+
- +
- +
-
+
{{ description }}
@@ -84,9 +91,9 @@ diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts index 118ef0e81..3091a92cc 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts @@ -1,10 +1,11 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { DonutChartConfig, Dossier, DOSSIER_ID, DossierAttributeWithValue, DossierStats, + File, IDossierRequest, ProcessingTypes, StatusSorter, @@ -12,13 +13,22 @@ import { } from '@red/domain'; import { TranslateChartService } from '@services/translate-chart.service'; import { UserService } from '@users/user.service'; -import { FilterService, getParam, ProgressBarConfigModel, shareLast, Toaster } from '@iqser/common-ui'; +import { ContextComponent, FilterService, getParam, INestedFilter, ProgressBarConfigModel, shareLast, Toaster } from '@iqser/common-ui'; import { workflowFileStatusTranslations } from '@translations/file-status-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { firstValueFrom, Observable } from 'rxjs'; +import { firstValueFrom, Observable, of } from 'rxjs'; import { DossierStatsService } from '@services/dossiers/dossier-stats.service'; import { map } from 'rxjs/operators'; import { DossiersService } from '@services/dossiers/dossiers.service'; +import { FilesMapService } from '@services/files/files-map.service'; + +interface DossierDetailsContext { + needsWorkFilters: INestedFilter[] | undefined; + dossier: Dossier; + dossierStats: DossierStats; + chartConfig: void; + statusConfig: ProgressBarConfigModel[]; +} @Component({ selector: 'redaction-dossier-details', @@ -26,36 +36,52 @@ import { DossiersService } from '@services/dossiers/dossiers.service'; styleUrls: ['./dossier-details.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DossierDetailsComponent { +export class DossierDetailsComponent extends ContextComponent implements OnInit { @Input() dossierAttributes: DossierAttributeWithValue[]; @Output() readonly toggleCollapse = new EventEmitter(); editingOwner = false; + #currentChartSubtitleIndex = 0; + readonly #dossierId: string; readonly collapseTooltip = _('dossier-details.collapse'); readonly expandTooltip = _('dossier-details.expand'); readonly needsWorkFilters$ = this.filterService.getFilterModels$('needsWorkFilters'); readonly currentUser = this._userService.currentUser; readonly dossier$: Observable; readonly dossierStats$: Observable; - readonly chartConfig$: Observable; + readonly chartConfig$: Observable; readonly statusConfig$: Observable; + chartConfig: DonutChartConfig[] = []; + constructor( private readonly _toaster: Toaster, - readonly filterService: FilterService, - dossierStatsService: DossierStatsService, private readonly _userService: UserService, private readonly _dossiersService: DossiersService, + private readonly _filesMapService: FilesMapService, + readonly dossierStatsService: DossierStatsService, + readonly filterService: FilterService, readonly translateChartService: TranslateChartService, ) { - const dossierId = getParam(DOSSIER_ID); - this.dossier$ = _dossiersService.getEntityChanged$(dossierId).pipe(shareLast()); - this.dossierStats$ = dossierStatsService.watch$(dossierId).pipe(shareLast()); + super(); + this.#dossierId = getParam(DOSSIER_ID); + this.dossier$ = _dossiersService.getEntityChanged$(this.#dossierId).pipe(shareLast()); + this.dossierStats$ = dossierStatsService.watch$(this.#dossierId).pipe(shareLast()); this.chartConfig$ = this.dossierStats$.pipe(map(stats => this.#calculateChartConfig(stats))); this.statusConfig$ = this.dossierStats$.pipe(map(stats => this.#calculateStatusConfig(stats))); } + ngOnInit() { + super._initContext({ + needsWorkFilters: this.needsWorkFilters$, + dossier: this.dossier$, + dossierStats: this.dossierStats$, + chartConfig: this.chartConfig$, + statusConfig: this.statusConfig$, + }); + } + get managers() { return this._userService.managerUsers.map(manager => manager.id); } @@ -70,15 +96,24 @@ export class DossierDetailsComponent { this._toaster.info(_('assignment.owner'), { params: { ownerName, dossierName } }); } - #calculateChartConfig(stats: DossierStats): DonutChartConfig[] { + #calculateChartConfig(stats: DossierStats): void { const documentsChartConfig: DonutChartConfig[] = Object.keys(stats.fileCountPerWorkflowStatus).map(status => ({ - value: stats.fileCountPerWorkflowStatus[status], + value: !this.#currentChartSubtitleIndex + ? stats.fileCountPerWorkflowStatus[status] + : this.#getPageCountPerWorkflowStatus(status), color: status, label: workflowFileStatusTranslations[status], key: status, })); documentsChartConfig.sort((a, b) => StatusSorter.byStatus(a.key, b.key)); - return this.translateChartService.translateLabels(documentsChartConfig); + this.chartConfig = this.translateChartService.translateLabels(documentsChartConfig); + } + + #getPageCountPerWorkflowStatus(status: string) { + const files = this._filesMapService.get(this.#dossierId); + return files + .filter((file: File) => file.workflowStatus === status) + .reduce((sum: number, file: File) => sum + file.numberOfPages, 0); } #calculateStatusConfig(stats: DossierStats): ProgressBarConfigModel[] { @@ -113,4 +148,9 @@ export class DossierDetailsComponent { }, ].filter(config => config.count > 0); } + + onSubtitleChanged(subtitleIndex: number) { + this.#currentChartSubtitleIndex = subtitleIndex; + this.#calculateChartConfig(this.dossierStatsService.get(this.#dossierId)); + } } diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html index 2ca4d738a..5ffc22a7c 100644 --- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html +++ b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html @@ -3,7 +3,7 @@ [config]="dossiersChartConfig$ | async" [radius]="80" [strokeWidth]="15" - [subtitle]="'dossier-template-stats.active-dossiers' | translate: { count: stats.numberOfActiveDossiers }" + [subtitles]="['dossier-template-stats.active-dossiers' | translate: { count: stats.numberOfActiveDossiers }]" filterKey="dossierStatesFilters" > @@ -31,7 +31,7 @@ [config]="documentsChartConfig$ | async" [radius]="80" [strokeWidth]="15" - [subtitle]="'dossier-template-stats.total-documents' | translate" + [subtitles]="['dossier-template-stats.total-documents' | translate]" filterKey="statusFilters" >
diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index 50aa17ad8..bcb2f116a 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -15,6 +15,7 @@ export class IconsModule { 'approved', 'archive', 'arrow-up', + 'arrow-down', 'assign', 'assign-me', 'attribute', diff --git a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html index 28ead10a9..dc4a3f2fa 100644 --- a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html +++ b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html @@ -19,7 +19,14 @@
{{ displayedDataTotal }}
-
{{ subtitle }}
+
{{ subtitles[0] }}
+ + {{ subtitle }} +
diff --git a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss index 1bfd8851a..8d1c752b9 100644 --- a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss @@ -70,3 +70,18 @@ } } } + +mat-select { + width: unset; + margin-top: 5px; + margin-left: 10px; + + ::ng-deep .mat-select-value, + ::ng-deep .mat-select-arrow { + color: var(--iqser-text); + } + + ::ng-deep .mat-select-arrow { + margin-top: 2px; + } +} diff --git a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts index de45cfc33..97fe867bf 100644 --- a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges, OnInit, Optional } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } from '@angular/core'; import { DonutChartConfig } from '@red/domain'; import { FilterService, get, INestedFilter, shareLast } from '@iqser/common-ui'; import { Observable, of } from 'rxjs'; @@ -10,7 +10,7 @@ import { map } from 'rxjs/operators'; styleUrls: ['./donut-chart.component.scss'], }) export class DonutChartComponent implements OnChanges, OnInit { - @Input() subtitle: string; + @Input() subtitles: string[]; @Input() config: DonutChartConfig[] = []; @Input() radius = 85; @Input() strokeWidth = 20; @@ -20,6 +20,8 @@ export class DonutChartComponent implements OnChanges, OnInit { @Input() filterKey; @Input() helpModeKey; + @Output() readonly subtitleChanged = new EventEmitter(); + chartData: any[] = []; cx = 0; cy = 0; diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index 961686495..a36b47f5d 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -832,7 +832,8 @@ "show-less": "weniger anzeigen" }, "charts": { - "documents-in-dossier": "Dokumente im Dossier" + "documents-in-dossier": "Dokumente", + "pages-in-dossier": "" }, "description": "Beschreibung", "dictionary": "Dossier-Wörterbuch", diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index f4a68a4a1..0b64d480f 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -832,7 +832,8 @@ "show-less": "show less" }, "charts": { - "documents-in-dossier": "Documents in Dossier" + "documents-in-dossier": "Documents", + "pages-in-dossier": "Pages" }, "description": "Description", "dictionary": "Dossier Dictionary", diff --git a/apps/red-ui/src/assets/icons/general/arrow-down.svg b/apps/red-ui/src/assets/icons/general/arrow-down.svg new file mode 100644 index 000000000..1467aa65c --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/arrow-down.svg @@ -0,0 +1,14 @@ + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + +