From bb40fcbd1702821d10b419ea5d9a81d57ae65937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 11 Oct 2021 23:40:30 +0300 Subject: [PATCH] Performance improvements --- .../dossier-details.component.ts | 27 ++++++++----------- .../dossier-overview-screen.component.html | 6 ++--- .../dossier-overview-screen.component.ts | 22 +++++++-------- .../red-ui/src/app/state/app-state.service.ts | 2 +- 4 files changed, 26 insertions(+), 31 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.ts index 9bc3230c4..7c60c4f5c 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { AppStateService } from '@state/app-state.service'; import { groupBy, StatusSorter } from '@utils/index'; import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component'; @@ -16,6 +16,7 @@ import { DossiersService } from '@services/entity-services/dossiers.service'; selector: 'redaction-dossier-details', templateUrl: './dossier-details.component.html', styleUrls: ['./dossier-details.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DossierDetailsComponent implements OnInit { documentsChartData: DoughnutChartConfig[] = []; @@ -47,10 +48,6 @@ export class DossierDetailsComponent implements OnInit { ngOnInit(): void { this.owner = this._userService.find(this.dossiersService.activeDossier.ownerId); - this.calculateChartConfig(); - this.appStateService.fileChanged$.subscribe(() => { - this.calculateChartConfig(); - }); } calculateChartConfig(): void { @@ -60,17 +57,15 @@ export class DossierDetailsComponent implements OnInit { } const groups = groupBy(activeDossier?.files, 'status'); - this.documentsChartData = []; - for (const status of Object.keys(groups)) { - this.documentsChartData.push({ - value: groups[status].length, - color: status, - label: fileStatusTranslations[status], - key: status, - }); - } - this.documentsChartData.sort(StatusSorter.byStatus); - this.documentsChartData = this.translateChartService.translateStatus(this.documentsChartData); + let documentsChartData: DoughnutChartConfig[] = Object.keys(groups).map(status => ({ + value: groups[status].length, + color: status, + label: fileStatusTranslations[status], + key: status, + })); + documentsChartData.sort(StatusSorter.byStatus); + documentsChartData = this.translateChartService.translateStatus(documentsChartData); + this.documentsChartData = documentsChartData; this._changeDetectorRef.detectChanges(); } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html index 658a60070..b1e2b5283 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html @@ -1,4 +1,4 @@ -
+
- -
+ +
{{ file.numberOfPages }} diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts index cb150efe8..c2eda5e78 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts @@ -71,10 +71,10 @@ export class DossierOverviewScreenComponent extends ListingComponent imple currentDossier = this._dossiersService.activeDossier; collapsedDetails = false; dossierAttributes: DossierAttributeWithValue[] = []; - fileAttributeConfigs: IFileAttributeConfig[]; tableColumnConfigs: readonly TableColumnConfig[]; analysisForced: boolean; - + displayedInFileListAttributes: IFileAttributeConfig[] = []; + displayedAttributes: IFileAttributeConfig[] = []; readonly workflowConfig: WorkflowConfig = this._configService.workflowConfig(() => this.reloadDossiers()); readonly actionConfigs: readonly ActionConfig[] = this._configService.actionConfig; @ViewChild(DossierDetailsComponent, { static: false }) private readonly _dossierDetailsComponent: DossierDetailsComponent; @@ -110,6 +110,14 @@ export class DossierOverviewScreenComponent extends ListingComponent imple super(_injector); } + private _fileAttributeConfigs: IFileAttributeConfig[]; + + set fileAttributeConfigs(value: IFileAttributeConfig[]) { + this._fileAttributeConfigs = value; + this.displayedInFileListAttributes = value.filter(config => config.displayedInFileList); + this.displayedAttributes = this.displayedInFileListAttributes.filter(c => c.displayedInFileList); + } + get checkedRequiredFilters(): NestedFilter[] { return this.filterService.getGroup('quickFilters')?.filters.filter(f => f.required && f.checked); } @@ -118,14 +126,6 @@ export class DossierOverviewScreenComponent extends ListingComponent imple return this.filterService.getGroup('quickFilters')?.filters.filter(f => !f.required && f.checked); } - get displayedInFileListAttributes() { - return this.fileAttributeConfigs?.filter(config => config.displayedInFileList) || []; - } - - get displayedAttributes(): IFileAttributeConfig[] { - return this.displayedInFileListAttributes.filter(c => c.displayedInFileList); - } - async actionPerformed(action?: string, file?: File) { if (action === 'assign-reviewer') { return this.reloadDossiers(); @@ -289,7 +289,7 @@ export class DossierOverviewScreenComponent extends ListingComponent imple const filterGroups = this._configService.filterGroups( this.entitiesService.all, - this.fileAttributeConfigs, + this._fileAttributeConfigs, this._needsWorkFilterTemplate, () => this.checkedRequiredFilters, () => this.checkedNotRequiredFilters, diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts index ac2c43d5c..6337884df 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/apps/red-ui/src/app/state/app-state.service.ts @@ -497,7 +497,7 @@ export class AppStateService { } private _processFiles(dossier: Dossier, iFiles: IFile[], emitEvents = true) { - const oldFiles = [...dossier.files]; + const oldFiles = dossier.files; const fileAttributes = this._fileAttributesService.getFileAttributeConfig(dossier.dossierTemplateId); const newFiles = iFiles.map(iFile => new File(iFile, this._userService.getNameForId(iFile.currentReviewer), fileAttributes));