use file stats component

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html

@@ -11,7 +11,8 @@
             </span>
         </div>
     </div>
-    <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: file }"></ng-container>
+
+    <redaction-file-stats [file]="file"></redaction-file-stats>
 </div>
 
 <div class="cell">
@@ -58,11 +59,11 @@
         <iqser-status-bar
             *ngIf="!file.isError && !file.isPending"
             [configs]="[
-            {
+                {
-                color: file.workflowStatus,
+                    color: file.workflowStatus,
-                length: 1
+                    length: 1
-            }
+                }
-        ]"
+            ]"
         ></iqser-status-bar>
     </div>
     <redaction-file-actions

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { File, IFileAttributeConfig } from '@red/domain';
 import { Required } from '@iqser/common-ui';
 
@@ -10,7 +10,6 @@ import { Required } from '@iqser/common-ui';
 })
 export class TableItemComponent {
     @Input() @Required() file!: File;
-    @Input() @Required() statsTemplate!: TemplateRef<unknown>;
     @Input() @Required() displayedAttributes!: IFileAttributeConfig[];
     @Output() readonly calculateData = new EventEmitter<string>();
 }

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html

@@ -5,7 +5,7 @@
                 {{ file.filename }}
             </div>
 
-            <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: file }"></ng-container>
+            <redaction-file-stats [file]="file"></redaction-file-stats>
         </div>
 
         <div class="user">

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { File } from '@red/domain';
 
 @Component({
@@ -9,6 +9,5 @@ import { File } from '@red/domain';
 })
 export class WorkflowItemComponent {
     @Input() file: File;
-    @Input() statsTemplate: TemplateRef<unknown>;
     @Output() readonly actionPerformed = new EventEmitter<string>();
 }

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

@@ -90,10 +90,7 @@
     </section>
 
     <ng-template #bulkActions>
-        <redaction-dossier-overview-bulk-actions
+        <redaction-dossier-overview-bulk-actions (reload)="reloadFiles()" [dossier]="dossier"></redaction-dossier-overview-bulk-actions>
-            (reload)="bulkActionPerformed()"
-            [dossier]="dossier"
-        ></redaction-dossier-overview-bulk-actions>
     </ng-template>
 </ng-container>
 
@@ -129,18 +126,9 @@
         (calculateData)="actionPerformed($event)"
         [displayedAttributes]="displayedAttributes"
         [file]="file"
-        [statsTemplate]="statsTemplate"
     ></redaction-table-item>
 </ng-template>
 
 <ng-template #workflowItemTemplate let-entity="entity">
-    <redaction-workflow-item
+    <redaction-workflow-item (actionPerformed)="actionPerformed($event, entity)" [file]="entity"></redaction-workflow-item>
-        (actionPerformed)="actionPerformed($event, entity)"
-        [file]="entity"
-        [statsTemplate]="statsTemplate"
-    ></redaction-workflow-item>
-</ng-template>
-
-<ng-template #statsTemplate let-file="entity">
-    <redaction-file-stats [file]="file"></redaction-file-stats>
 </ng-template>

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

@@ -1,6 +1,5 @@
 import {
     ChangeDetectionStrategy,
-    ChangeDetectorRef,
     Component,
     ElementRef,
     forwardRef,
@@ -20,7 +19,7 @@ import { StatusOverlayService } from '@upload-download/services/status-overlay.s
 import * as moment from 'moment';
 import { UserService } from '@services/user.service';
 import { Observable, timer } from 'rxjs';
-import { take, tap, withLatestFrom } from 'rxjs/operators';
+import { switchMap, take, tap, withLatestFrom } from 'rxjs/operators';
 import { convertFiles, Files, handleFileDrop } from '@utils/index';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
 import {
@@ -51,7 +50,6 @@ import { DossierTemplatesService } from '@services/entity-services/dossier-templ
 import { LongPressEvent } from '@shared/directives/long-press.directive';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { saveAsCSV } from '@utils/csv-utils';
-import { FilesService } from '@services/entity-services/files.service';
 import { FilesMapService } from '@services/entity-services/files-map.service';
 import { ReanalysisService } from '@services/reanalysis.service';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
@@ -99,7 +97,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
         readonly routerHistoryService: RouterHistoryService,
         private readonly _appConfigService: AppConfigService,
         private readonly _dialogService: DossiersDialogService,
-        private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _fileUploadService: FileUploadService,
         private readonly _statusOverlayService: StatusOverlayService,
         private readonly _fileDropOverlayService: FileDropOverlayService,
@@ -107,7 +104,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
         private readonly _fileAttributesService: FileAttributesService,
         private readonly _configService: ConfigService,
         private readonly _userPreferenceService: UserPreferenceService,
-        private readonly _filesService: FilesService,
         private readonly _fileMapService: FilesMapService,
         private readonly _dossierStatsService: DossierStatsService,
         activatedRoute: ActivatedRoute,
@@ -165,35 +161,35 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
             .pipe(tap(files => this.entitiesService.setEntities(files)))
             .subscribe();
 
+        this._fileDropOverlayService.initFileDropHandling();
+
+        await this.calculateData();
+
+        this.addSubscription = timer(0, 20 * 1000)
+            .pipe(switchMap(() => this.reloadFiles()))
+            .subscribe();
+
+        this.addSubscription = this.listingMode$.subscribe(() => {
+            this._computeAllFilters();
+        });
+
+        this.addSubscription = this._dossierTemplatesService.entityChanged$.subscribe(() => {
+            this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
+                this.currentDossier.dossierTemplateId,
+            )?.fileAttributeConfigs;
+        });
+
+        this.addSubscription = this._tableComponent.scrollViewport.scrolledIndexChange
+            .pipe(tap(index => (this._lastScrolledIndex = index)))
+            .subscribe();
+
         try {
-            this._fileDropOverlayService.initFileDropHandling();
-
-            await this.calculateData();
-
-            this.addSubscription = timer(0, 20 * 1000).subscribe(async () => {
-                await this.reloadFiles();
-            });
-
-            this.addSubscription = this.listingMode$.subscribe(() => {
-                this._computeAllFilters();
-            });
-
-            this.addSubscription = this._dossierTemplatesService.entityChanged$.subscribe(() => {
-                this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
-                    this.currentDossier.dossierTemplateId,
-                )?.fileAttributeConfigs;
-            });
-
-            this.addSubscription = this._tableComponent.scrollViewport.scrolledIndexChange
-                .pipe(tap(index => (this._lastScrolledIndex = index)))
-                .subscribe();
-
             this.dossierAttributes = await this._dossierAttributesService.getWithValues(this.currentDossier);
         } catch (e) {
             console.log('Error from dossier overview screen: ', e);
-        } finally {
-            this._loadingService.stop();
         }
+
+        this._loadingService.stop();
     }
 
     ngOnDestroy(): void {
@@ -202,8 +198,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
     }
 
     async ngOnAttach() {
-        // await this._appStateService.reloadActiveDossierFiles();
-        // await this._loadEntitiesFromState();
         await this.ngOnInit();
         this._tableComponent.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
     }
@@ -230,14 +224,12 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
         const files = await this._appStateService.getFiles(this.currentDossier);
         await this._dossierStatsService.getFor([this.dossierId]).toPromise();
         this.entitiesService.setEntities(files);
-        await this.calculateData();
+        this._computeAllFilters();
     }
 
     async calculateData(): Promise<void> {
         await this._loadEntitiesFromState();
         this._computeAllFilters();
-
-        this._changeDetectorRef.markForCheck();
     }
 
     @HostListener('drop', ['$event'])
@@ -286,13 +278,11 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
         this._fileInput.nativeElement.value = null;
     }
 
-    async bulkActionPerformed(): Promise<void> {
-        await this.reloadFiles();
-    }
-
     openAssignDossierMembersDialog(): void {
         const data = { dossierId: this.dossierId, section: 'members' };
-        this._dialogService.openDialog('editDossier', null, data, async () => this.reloadFiles());
+        this._dialogService.openDialog('editDossier', null, data, async () => {
+            await this.reloadFiles();
+        });
     }
 
     openDossierDictionaryDialog() {

apps/red-ui/src/app/services/entity-services/dossier-stats.service.ts

@@ -33,7 +33,11 @@ export class DossierStatsService {
     set(stats: DossierStats): void {
         if (!this._map.has(stats.dossierId)) {
             this._map.set(stats.dossierId, new BehaviorSubject<DossierStats>(stats));
-        } else {
+            return;
+        }
+
+        const old = this.get(stats.dossierId);
+        if (JSON.stringify(old) !== JSON.stringify(stats)) {
             this._map.get(stats.dossierId).next(stats);
         }
     }