RED-7051

apps/red-ui/src/app/app.module.ts

@@ -131,11 +131,17 @@ export const appModuleFactory = (config: AppConfig) => {
                         features: {
                             ANNOTATIONS: {
                                 color: 'aqua',
-                                enabled: true,
+                                enabled: false,
                                 level: NgxLoggerLevel.DEBUG,
                             },
                             FILTERS: {
-                                enabled: true,
+                                enabled: false,
+                            },
+                            TENANTS: {
+                                enabled: false,
+                            },
+                            ROUTES: {
+                                enabled: false,
                             },
                             PDF: {
                                 enabled: true,

apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.html

@@ -1,7 +1,7 @@
 <div
     (click)="pageSelected.emit(number)"
     (dblclick)="toggleReadState()"
-    *ngIf="componentContext$ | async"
+    *ngIf="assigneeChanged$ | async"
     [class.active]="isActive"
     [class.read]="read"
     [id]="'quick-nav-page-' + number"

apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts

@@ -1,34 +1,31 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Component, effect, EventEmitter, inject, Input, OnChanges, Output } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
 import { ViewedPagesService } from '@services/files/viewed-pages.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { PageRotationService } from '../../../pdf-viewer/services/page-rotation.service';
 import { getConfig } from '@iqser/common-ui';
-import { map, tap } from 'rxjs/operators';
+import { map, startWith, tap } from 'rxjs/operators';
 import { AppConfig, ViewedPage } from '@red/domain';
 import { ViewedPagesMapService } from '@services/files/viewed-pages-map.service';
-import { pairwise } from 'rxjs';
+import { Observable, pairwise } from 'rxjs';
 import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
-import { ContextComponent } from '@iqser/common-ui/lib/utils';
-
-interface PageIndicatorContext {
-    isRotated: boolean;
-    assigneeChanged: boolean;
-}
+import { NGXLogger } from 'ngx-logger';
 
 @Component({
     selector: 'redaction-page-indicator',
     templateUrl: './page-indicator.component.html',
     styleUrls: ['./page-indicator.component.scss'],
 })
-export class PageIndicatorComponent extends ContextComponent<PageIndicatorContext> implements OnChanges, OnInit {
+export class PageIndicatorComponent implements OnChanges {
     readonly #config = getConfig<AppConfig>();
+    readonly #logger = inject(NGXLogger);
     @Input({ required: true }) number: number;
     @Input() showDottedIcon = false;
     @Input() activeSelection = false;
     @Input() read = false;
     @Output() readonly pageSelected = new EventEmitter<number>();
     pageReadTimeout: number = null;
+    readonly assigneeChanged$: Observable<boolean>;
 
     constructor(
         private readonly _viewedPagesService: ViewedPagesService,
@@ -38,38 +35,45 @@ export class PageIndicatorComponent extends ContextComponent<PageIndicatorContex
         private readonly _pdf: PdfViewer,
         readonly pageRotationService: PageRotationService,
     ) {
-        super();
+        this.assigneeChanged$ = this._state.file$.pipe(
+            pairwise(),
+            map(([prevFile, currFile]) => prevFile.assignee !== currFile.assignee),
+            tap(assigneeChanged => assigneeChanged && this.handlePageRead()),
+            startWith(true),
+            map(() => true),
+        );
+
+        effect(() => {
+            if (this.isActive) {
+                this.handlePageRead();
+            }
+        });
     }
 
     get isActive() {
         return this.number === this._pdf.currentPage();
     }
 
-    ngOnInit() {
-        const assigneeChanged$ = this._state.file$.pipe(
-            pairwise(),
-            map(([prevFile, currFile]) => prevFile.assignee !== currFile.assignee),
-            tap(assigneeChanged => assigneeChanged && this.handlePageRead()),
-        );
-        super._initContext({ assigneeChanged: assigneeChanged$ });
-    }
-
     ngOnChanges() {
         this.handlePageRead();
     }
 
     async toggleReadState() {
-        if (this._permissionService.canMarkPagesAsViewed(this._state.file())) {
-            if (this.read) {
-                await this.#markPageUnread();
-            } else {
-                await this.#markPageRead();
-            }
+        if (!this._permissionService.canMarkPagesAsViewed(this._state.file())) {
+            this.#logger.info('[PAGES] Cannot toggle read state');
+            return;
+        }
+
+        if (this.read) {
+            await this.#markPageUnread();
+        } else {
+            await this.#markPageRead();
         }
     }
 
     handlePageRead(): void {
         if (!this._permissionService.canMarkPagesAsViewed(this._state.file())) {
+            this.#logger.info('[PAGES] Cannot mark pages as read');
             return;
         }
 
@@ -87,6 +91,8 @@ export class PageIndicatorComponent extends ContextComponent<PageIndicatorContex
     }
 
     async #markPageRead() {
+        this.#logger.info('[PAGES] Mark page read', this.number);
+
         const fileId = this._state.fileId;
         await this._viewedPagesService.add({ page: this.number }, this._state.dossierId, fileId);
         const viewedPage = new ViewedPage({ page: this.number, fileId });
@@ -94,6 +100,8 @@ export class PageIndicatorComponent extends ContextComponent<PageIndicatorContex
     }
 
     async #markPageUnread() {
+        this.#logger.info('[PAGES] Mark page unread', this.number);
+
         const fileId = this._state.fileId;
         await this._viewedPagesService.remove(this._state.dossierId, fileId, this.number);
         this._viewedPagesMapService.delete(fileId, this.number);

apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts

@@ -136,7 +136,7 @@ export class REDAnnotationManager {
 
     #autoSelectRectangleAfterCreation() {
         this.#manager.addEventListener('annotationChanged', (annotations: Annotation[], action: string, options) => {
-            this.#logger.info('[PDF] Annotations changed: ', annotations, action, options);
+            this.#logger.info('[ANNOTATIONS] Annotations changed: ', annotations, action, options);
             // when a rectangle is drawn,
             // it returns one annotation with tool name 'AnnotationCreateRectangle;
             // this will auto select rectangle after drawing

apps/red-ui/src/app/services/files/files.service.ts

@@ -31,7 +31,7 @@ export class FilesService extends EntitiesService<IFile, File> {
     loadAll(dossierId: string) {
         const files$ = this.getFor(dossierId).pipe(
             mapEach(file => new File(file, this._userService.getName(file.assignee))),
-            tap(() => this._logger.info('[FILE] Loaded')),
+            tap(file => this._logger.info('[FILE] Loaded', file)),
         );
         const loadStats$ = files$.pipe(switchMap(files => this._dossierStatsService.getFor([dossierId]).pipe(map(() => files))));
         return loadStats$.pipe(tap(files => this._filesMapService.set(dossierId, files)));
@@ -41,7 +41,7 @@ export class FilesService extends EntitiesService<IFile, File> {
         const _file = await firstValueFrom(super._getOne([dossierId, file.id]));
         const reloadedFile = new File(_file, this._userService.getName(_file.assignee));
         await firstValueFrom(this._dossierStatsService.getFor([dossierId]));
-        this._logger.info('[FILE] Reloaded');
+        this._logger.info('[FILE] Reloaded', reloadedFile);
         return this._filesMapService.replace(dossierId, [reloadedFile]);
     }