Performance improvements

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 = [];
+        let documentsChartData: DoughnutChartConfig[] = Object.keys(groups).map(status => ({
-        for (const status of Object.keys(groups)) {
+            value: groups[status].length,
-            this.documentsChartData.push({
+            color: status,
-                value: groups[status].length,
+            label: fileStatusTranslations[status],
-                color: status,
+            key: status,
-                label: fileStatusTranslations[status],
+        }));
-                key: status,
+        documentsChartData.sort(StatusSorter.byStatus);
-            });
+        documentsChartData = this.translateChartService.translateStatus(documentsChartData);
-        }
+        this.documentsChartData = documentsChartData;
-        this.documentsChartData.sort(StatusSorter.byStatus);
-        this.documentsChartData = this.translateChartService.translateStatus(this.documentsChartData);
         this._changeDetectorRef.detectChanges();
     }
 

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html

@@ -1,4 +1,4 @@
-<section *ngIf="!!currentDossier" (longPress)="forceReanalysisAction($event)" redactionLongPress>
+<section (longPress)="forceReanalysisAction($event)" *ngIf="!!currentDossier" redactionLongPress>
     <iqser-page-header
         (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [actionConfigs]="actionConfigs"
@@ -143,8 +143,8 @@
     </div>
 </ng-template>
 
-<ng-template #statsTemplate let-entity="entity">
+<ng-template #statsTemplate let-file="entity">
-    <div *ngIf="cast(entity) as file" class="small-label stats-subtitle">
+    <div class="small-label stats-subtitle">
         <div>
             <mat-icon svgIcon="iqser:pages"></mat-icon>
             {{ file.numberOfPages }}

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<File> imple
     currentDossier = this._dossiersService.activeDossier;
     collapsedDetails = false;
     dossierAttributes: DossierAttributeWithValue[] = [];
-    fileAttributeConfigs: IFileAttributeConfig[];
     tableColumnConfigs: readonly TableColumnConfig<File>[];
     analysisForced: boolean;
-
+    displayedInFileListAttributes: IFileAttributeConfig[] = [];
+    displayedAttributes: IFileAttributeConfig[] = [];
     readonly workflowConfig: WorkflowConfig<File, FileStatus> = 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<File> 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<File> 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<File> imple
 
         const filterGroups = this._configService.filterGroups(
             this.entitiesService.all,
-            this.fileAttributeConfigs,
+            this._fileAttributeConfigs,
             this._needsWorkFilterTemplate,
             () => this.checkedRequiredFilters,
             () => this.checkedNotRequiredFilters,

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));