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 4301e87b3..261e7c10f 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,10 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import {
+ DonutChartConfig,
Dossier,
DOSSIER_ID,
DossierAttributeWithValue,
DossierStats,
- DoughnutChartConfig,
IDossierRequest,
StatusSorter,
User,
@@ -17,7 +17,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { ActivatedRoute } from '@angular/router';
import { firstValueFrom, Observable } from 'rxjs';
import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
-import { map, pluck, switchMap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
import { DossiersService } from '@services/dossiers/dossiers.service';
@Component({
@@ -27,35 +27,32 @@ import { DossiersService } from '@services/dossiers/dossiers.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DossierDetailsComponent {
- editingOwner = false;
@Input() dossierAttributes: DossierAttributeWithValue[];
@Output() readonly toggleCollapse = new EventEmitter();
- collapseTooltip = _('dossier-details.collapse');
- expandTooltip = _('dossier-details.expand');
+ editingOwner = false;
+
+ readonly collapseTooltip = _('dossier-details.collapse');
+ readonly expandTooltip = _('dossier-details.expand');
readonly needsWorkFilters$ = this.filterService.getFilterModels$('needsWorkFilters');
readonly currentUser = this._userService.currentUser;
- readonly dossierId: string;
readonly dossier$: Observable
;
readonly dossierStats$: Observable;
- chartConfig$: Observable;
- statusConfig$: Observable;
+ readonly chartConfig$: Observable;
+ readonly statusConfig$: Observable;
constructor(
- readonly translateChartService: TranslateChartService,
- readonly filterService: FilterService,
- private readonly _dossiersService: DossiersService,
- private readonly _userService: UserService,
- private readonly _dossierStatsService: DossierStatsService,
- private readonly _toaster: Toaster,
activatedRoute: ActivatedRoute,
+ private readonly _toaster: Toaster,
+ readonly filterService: FilterService,
+ dossierStatsService: DossierStatsService,
+ private readonly _userService: UserService,
+ private readonly _dossiersService: DossiersService,
+ readonly translateChartService: TranslateChartService,
) {
- this.dossierId = activatedRoute.snapshot.paramMap.get(DOSSIER_ID);
- this.dossier$ = _dossiersService.getEntityChanged$(this.dossierId).pipe(shareLast());
- this.dossierStats$ = this.dossier$.pipe(
- pluck('dossierId'),
- switchMap(dossierId => _dossierStatsService.watch$(dossierId)),
- );
+ const dossierId = activatedRoute.snapshot.paramMap.get(DOSSIER_ID);
+ this.dossier$ = _dossiersService.getEntityChanged$(dossierId).pipe(shareLast());
+ this.dossierStats$ = dossierStatsService.watch$(dossierId).pipe(shareLast());
this.chartConfig$ = this.dossierStats$.pipe(map(stats => this.#calculateChartConfig(stats)));
this.statusConfig$ = this.dossierStats$.pipe(map(stats => this.#calculateStatusConfig(stats)));
}
@@ -74,15 +71,15 @@ export class DossierDetailsComponent {
this._toaster.info(_('assignment.owner'), { params: { ownerName, dossierName } });
}
- #calculateChartConfig(stats: DossierStats): DoughnutChartConfig[] {
- const documentsChartData: DoughnutChartConfig[] = Object.keys(stats.fileCountPerWorkflowStatus).map(status => ({
+ #calculateChartConfig(stats: DossierStats): DonutChartConfig[] {
+ const documentsChartConfig: DonutChartConfig[] = Object.keys(stats.fileCountPerWorkflowStatus).map(status => ({
value: stats.fileCountPerWorkflowStatus[status],
color: status,
label: workflowFileStatusTranslations[status],
key: status,
}));
- documentsChartData.sort((a, b) => StatusSorter.byStatus(a.key, b.key));
- return this.translateChartService.translateLabels(documentsChartData);
+ documentsChartConfig.sort((a, b) => StatusSorter.byStatus(a.key, b.key));
+ return this.translateChartService.translateLabels(documentsChartConfig);
}
#calculateStatusConfig(stats: DossierStats): ProgressBarConfigModel[] {
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 65ece10d7..759d2b5a9 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
@@ -1,10 +1,10 @@
-
+ >
@@ -26,10 +26,10 @@
-
+ >
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
index 2f37d9924..b8f747e2f 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
@@ -1,8 +1,8 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DashboardStats, DoughnutChartConfig } from '@red/domain';
+import { DashboardStats, DonutChartConfig } from '@red/domain';
import { Observable } from 'rxjs';
import { TranslateChartService } from '@services/translate-chart.service';
-import { map, pluck } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
import { DashboardStatsService } from '@services/dossier-templates/dashboard-stats.service';
import { ActivatedRoute } from '@angular/router';
import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
@@ -15,8 +15,8 @@ import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
})
export class DossiersListingDetailsComponent {
readonly stats$: Observable
;
- readonly documentsChartData$: Observable;
- readonly dossiersChartData$: Observable;
+ readonly documentsChartConfig$: Observable;
+ readonly dossiersChartConfig$: Observable;
constructor(
route: ActivatedRoute,
@@ -26,13 +26,13 @@ export class DossiersListingDetailsComponent {
const dossierTemplateId: string = route.snapshot.paramMap.get(DOSSIER_TEMPLATE_ID);
this.stats$ = dashboardStatsService.getEntityChanged$(dossierTemplateId);
- this.dossiersChartData$ = this.stats$.pipe(
- pluck('dossiersChartData'),
- map(data => this._translateChartService.translateDossierStates(data, dossierTemplateId)),
+ this.dossiersChartConfig$ = this.stats$.pipe(
+ map(stats => stats.dossiersChartConfig),
+ map(data => _translateChartService.translateDossierStates(data, dossierTemplateId)),
);
- this.documentsChartData$ = this.stats$.pipe(
- pluck('documentsChartData'),
- map(data => this._translateChartService.translateWorkflowStatus(data)),
+ this.documentsChartConfig$ = this.stats$.pipe(
+ map(stats => stats.documentsChartConfig),
+ map(data => _translateChartService.translateWorkflowStatus(data)),
);
}
}
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html
similarity index 95%
rename from apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
rename to apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html
index e60f9535e..28ead10a9 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html
@@ -27,7 +27,7 @@
(click)="val.key && selectValue(val.key)"
*ngFor="let val of config"
[class.active]="filterChecked$(val.key) | async"
- [class.filter-disabled]="!val.key || !filtersEnabled"
+ [class.filter-disabled]="!val.key || !(filters$ | async).length"
>
;
constructor(@Optional() readonly filterService: FilterService) {
- if (filterService) {
- this.filterService.filterGroups$.subscribe(() => {
- this.filtersEnabled = !!this.filterService.filterGroups.find(g => g.slug === this.filterKey);
- });
- } else {
- this.filtersEnabled = false;
- }
+ // TODO: move this component to a separate module, split into smaller components, improve filters
}
get circumference(): number {
@@ -51,7 +43,11 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
}
ngOnInit() {
- this.filters$ = (this.filtersEnabled && this.filterService.getFilterModels$(this.filterKey)) ?? of([]);
+ this.filters$ =
+ this.filterService?.getFilterModels$(this.filterKey).pipe(
+ map(filters => filters ?? []),
+ shareLast(),
+ ) ?? of([]);
}
ngOnChanges(): void {
@@ -62,7 +58,10 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
}
filterChecked$(key: string): Observable {
- return this.filtersEnabled ? this.filters$.pipe(map(all => all?.find(e => e.id === key)?.checked)) : of(false);
+ return this.filters$.pipe(
+ get(filter => filter.id === key),
+ map(filter => !!filter?.checked),
+ );
}
calculateChartData() {
@@ -91,7 +90,7 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
return `rotate(${this.chartData[index].degrees}, ${this.cx}, ${this.cy})`;
}
- getLabel({ label, value }: DoughnutChartConfig): string {
+ getLabel({ label, value }: DonutChartConfig): string {
return this.totalType === 'simpleLabel'
? `${label}`
: this.totalType === 'sum'
@@ -100,8 +99,6 @@ export class SimpleDoughnutChartComponent implements OnChanges, OnInit {
}
selectValue(key: string): void {
- if (this.filtersEnabled) {
- this.filterService.toggleFilter(this.filterKey, key);
- }
+ this.filterService?.toggleFilter(this.filterKey, key);
}
}
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index e77823834..b6acecd3f 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -9,7 +9,7 @@ import { MatConfigModule } from '../mat-config/mat-config.module';
import { IconsModule } from '../icons/icons.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
-import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component';
import { CommonUiModule } from '@iqser/common-ui';
import { SelectComponent } from './components/select/select.component';
@@ -41,7 +41,7 @@ const components = [
InitialsAvatarComponent,
PaginationComponent,
AnnotationIconComponent,
- SimpleDoughnutChartComponent,
+ DonutChartComponent,
DictionaryAnnotationIconComponent,
SelectComponent,
DictionaryManagerComponent,
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-states-map.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-states-map.service.ts
index 7faa80816..dfdcd7287 100644
--- a/apps/red-ui/src/app/services/entity-services/dossier-states-map.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossier-states-map.service.ts
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
-import { DossierState, DoughnutChartConfig, IDossierState } from '@red/domain';
+import { DonutChartConfig, DossierState, IDossierState } from '@red/domain';
import { EntitiesMapService } from '@iqser/common-ui';
import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
import { flatMap } from 'lodash-es';
@@ -10,15 +10,15 @@ export class DossierStatesMapService extends EntitiesMapService obs.value));
return Array.from(
allStates
.reduce((acc, { color, name, dossierCount }) => {
const key = name + '-' + color;
- const item: DoughnutChartConfig = acc.get(key) ?? Object.assign({}, { value: 0, label: name, color: color });
+ const item: DonutChartConfig = acc.get(key) ?? Object.assign({}, { value: 0, label: name, color: color });
return acc.set(key, { ...item, value: item.value + dossierCount });
- }, new Map())
+ }, new Map())
.values(),
);
}
diff --git a/apps/red-ui/src/app/services/translate-chart.service.ts b/apps/red-ui/src/app/services/translate-chart.service.ts
index 30fd2b1ae..71fb222b9 100644
--- a/apps/red-ui/src/app/services/translate-chart.service.ts
+++ b/apps/red-ui/src/app/services/translate-chart.service.ts
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
-import { DoughnutChartConfig } from '@red/domain';
+import { DonutChartConfig } from '@red/domain';
import { TranslateService } from '@ngx-translate/core';
import { rolesTranslations } from '../translations/roles-translations';
import { workflowFileStatusTranslations } from '../translations/file-status-translations';
@@ -11,11 +11,11 @@ import { DossierStatesMapService } from './entity-services/dossier-states-map.se
export class TranslateChartService {
constructor(private readonly _translateService: TranslateService, private readonly _dossierStatesMapService: DossierStatesMapService) {}
- translateLabels(config: DoughnutChartConfig[]): DoughnutChartConfig[] {
+ translateLabels(config: DonutChartConfig[]): DonutChartConfig[] {
return config.map(val => ({ ...val, label: this._translateService.instant(val.label) }));
}
- translateDossierStates(config: DoughnutChartConfig[], dossierTemplateId: string): DoughnutChartConfig[] {
+ translateDossierStates(config: DonutChartConfig[], dossierTemplateId: string): DonutChartConfig[] {
return config.map(val => {
if (!val.key) {
return { ...val, label: this._translateService.instant(val.label) };
@@ -26,11 +26,11 @@ export class TranslateChartService {
});
}
- translateWorkflowStatus(config: DoughnutChartConfig[]): DoughnutChartConfig[] {
+ translateWorkflowStatus(config: DonutChartConfig[]): DonutChartConfig[] {
return config.map(val => ({ ...val, label: this._translateService.instant(workflowFileStatusTranslations[val.label] as string) }));
}
- translateRoles(config: DoughnutChartConfig[]): DoughnutChartConfig[] {
+ translateRoles(config: DonutChartConfig[]): DonutChartConfig[] {
return config.map(val => ({
...val,
label: this._translateService.instant(rolesTranslations[val.label]).toLowerCase(),
diff --git a/libs/common-ui b/libs/common-ui
index 37ab9a6ed..e20ed84ca 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 37ab9a6ed7fb9f0a70a2226f75a86611405f907d
+Subproject commit e20ed84ca2c59f7235de4d7d5e22e114b99ac51a
diff --git a/libs/red-domain/src/lib/dossier-templates/dashboard-stats.model.ts b/libs/red-domain/src/lib/dossier-templates/dashboard-stats.model.ts
index d0c9c19c7..a05c19f15 100644
--- a/libs/red-domain/src/lib/dossier-templates/dashboard-stats.model.ts
+++ b/libs/red-domain/src/lib/dossier-templates/dashboard-stats.model.ts
@@ -1,6 +1,6 @@
import { IListable, List } from '@iqser/common-ui';
import { CountByStatus, CountPerProcessingStatus, CountPerWorkflowStatus, IDashboardStats } from './dashboard-stats';
-import { DoughnutChartConfig, StatusSorter } from '../shared';
+import { DonutChartConfig, StatusSorter } from '../shared';
export class DashboardStats implements IListable, IDashboardStats {
readonly dossierCountByStatus: List;
@@ -17,8 +17,8 @@ export class DashboardStats implements IListable, IDashboardStats {
readonly numberOfPages: number;
readonly numberOfPeople: number;
readonly numberOfSoftDeletedFiles: number;
- readonly dossiersChartData: DoughnutChartConfig[];
- readonly documentsChartData: DoughnutChartConfig[];
+ readonly dossiersChartConfig: DonutChartConfig[];
+ readonly documentsChartConfig: DonutChartConfig[];
constructor(stats: IDashboardStats) {
this.dossierCountByStatus = stats.dossierCountByStatus;
@@ -36,8 +36,8 @@ export class DashboardStats implements IListable, IDashboardStats {
this.numberOfPeople = stats.numberOfPeople;
this.numberOfSoftDeletedFiles = stats.numberOfSoftDeletedFiles;
- this.dossiersChartData = this._dossiersChartData;
- this.documentsChartData = this._documentsChartData;
+ this.dossiersChartConfig = this.#dossiersChartConfig;
+ this.documentsChartConfig = this.#documentsChartConfig;
}
get isEmpty(): boolean {
@@ -52,7 +52,7 @@ export class DashboardStats implements IListable, IDashboardStats {
return this.name;
}
- private get _dossiersChartData(): DoughnutChartConfig[] {
+ get #dossiersChartConfig(): DonutChartConfig[] {
return this.dossierCountByStatus.map(d => ({
value: d.count,
color: '#e2e4e9',
@@ -61,14 +61,14 @@ export class DashboardStats implements IListable, IDashboardStats {
}));
}
- private get _documentsChartData(): DoughnutChartConfig[] {
- const configArray: DoughnutChartConfig[] = this.fileCountPerWorkflowStatus.map(d => ({
+ get #documentsChartConfig(): DonutChartConfig[] {
+ const configArray: DonutChartConfig[] = this.fileCountPerWorkflowStatus.map(d => ({
value: d.count,
color: d.workflowStatus,
label: d.workflowStatus,
key: d.workflowStatus,
}));
- configArray.sort((a: DoughnutChartConfig, b) => StatusSorter.byStatus(a.label, b.label));
- return configArray;
+
+ return configArray.sort((a, b) => StatusSorter.byStatus(a.label, b.label));
}
}
diff --git a/libs/red-domain/src/lib/shared/charts.ts b/libs/red-domain/src/lib/shared/charts.ts
index e14be4ed1..6865ae089 100644
--- a/libs/red-domain/src/lib/shared/charts.ts
+++ b/libs/red-domain/src/lib/shared/charts.ts
@@ -1,6 +1,6 @@
import { Color } from './colors';
-export interface DoughnutChartConfig {
+export interface DonutChartConfig {
value: number;
color: Color;
label: string;