show/hide dialog functionality in separate service

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html

@@ -88,7 +88,8 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="openAnnotationReferencesDialog()"
+            (action)="annotationReferencesService.show(annotations)"
+            *ngIf="!multiSelectService.isActive"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.see-references.label' | translate"
             [type]="buttonType"
@@ -96,7 +97,7 @@
         ></iqser-circle-button>
 
         <iqser-circle-button
-            (action)="annotationActionsService.forceRedaction($event, annotations, file, annotationsChanged)"
+            (action)="annotationActionsService.forceAnnotation($event, annotations, file, annotationsChanged)"
             *ngIf="annotationPermissions.canForceRedaction"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.force-redaction.label' | translate"

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts

@@ -17,6 +17,8 @@ import {
 import { filter } from 'rxjs/operators';
 import { ManualAnnotationService } from '../../../../services/manual-annotation.service';
 import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
+import { AnnotationReferencesService } from '../../services/annotation-references.service';
+import { MultiSelectService } from '../../services/multi-select.service';
 
 export const AnnotationButtonTypes = {
     dark: 'dark',
@@ -38,12 +40,13 @@ export class AnnotationActionsComponent implements OnChanges {
     @Input() alwaysVisible: boolean;
     @Input() @Required() file!: File;
     @Output() annotationsChanged = new EventEmitter<AnnotationWrapper>();
-    @Output() seeReferences = new EventEmitter<boolean>();
     annotationPermissions: AnnotationPermissions;
 
     constructor(
         private readonly _manualAnnotationService: ManualAnnotationService,
         readonly annotationActionsService: AnnotationActionsService,
+        readonly annotationReferencesService: AnnotationReferencesService,
+        readonly multiSelectService: MultiSelectService,
         private readonly _permissionsService: PermissionsService,
         private readonly _dossiersService: DossiersService,
         private readonly _userService: UserService,
@@ -156,8 +159,4 @@ export class AnnotationActionsComponent implements OnChanges {
             this.annotations,
         );
     }
-
-    openAnnotationReferencesDialog(): void {
-        this.seeReferences.emit(true);
-    }
 }

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html

@@ -2,7 +2,7 @@
     <div class="dialog references-dialog">
         <div class="references-header flex space-between">
             <div class="small-label">X REFERENCES</div>
-            <iqser-circle-button (action)="closeDialog.emit(false)" icon="iqser:close"></iqser-circle-button>
+            <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
         </div>
     </div>
 </div>

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { AnnotationReferencesService } from '../../services/annotation-references.service';
 
 @Component({
     selector: 'redaction-annotation-references-dialog',
@@ -7,10 +8,10 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
     styleUrls: ['./annotation-references-dialog.component.scss'],
 })
 export class AnnotationReferencesDialogComponent implements OnInit {
-    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    @Input()
-    @Input() annotation: AnnotationWrapper;
+    annotation: AnnotationWrapper;
-    @Output() readonly closeDialog = new EventEmitter<boolean>();
+
-    constructor() {}
+    constructor(readonly annotationReferencesService: AnnotationReferencesService) {}
 
     ngOnInit(): void {
         console.log(this.annotation);

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html

@@ -42,6 +42,9 @@
     </div>
 
     <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
-
-    <ng-container [ngTemplateOutletContext]="{ annotation: annotation }" [ngTemplateOutlet]="annotationReferencesTemplate"></ng-container>
 </div>
+
+<redaction-annotation-references-dialog
+    *ngIf="annotationReferencesService.annotation$ | async as annotation"
+    [annotation]="annotation"
+></redaction-annotation-references-dialog>

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts

@@ -3,6 +3,7 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { HelpModeService, IqserEventTarget } from '@iqser/common-ui';
 import { File } from '@red/domain';
 import { MultiSelectService } from '../../services/multi-select.service';
+import { AnnotationReferencesService } from '../../services/annotation-references.service';
 
 @Component({
     selector: 'redaction-annotations-list',
@@ -15,7 +16,6 @@ export class AnnotationsListComponent implements OnChanges {
     @Input() annotations: AnnotationWrapper[];
     @Input() selectedAnnotations: AnnotationWrapper[];
     @Input() annotationActionsTemplate: TemplateRef<unknown>;
-    @Input() annotationReferencesTemplate: TemplateRef<unknown>;
     @Input() activeViewerPage: number;
     @Input() canMultiSelect = true;
 
@@ -23,7 +23,11 @@ export class AnnotationsListComponent implements OnChanges {
     @Output() readonly selectAnnotations = new EventEmitter<AnnotationWrapper[]>();
     @Output() readonly deselectAnnotations = new EventEmitter<AnnotationWrapper[]>();
 
-    constructor(readonly multiSelectService: MultiSelectService, readonly helpModeService: HelpModeService) {}
+    constructor(
+        readonly multiSelectService: MultiSelectService,
+        readonly helpModeService: HelpModeService,
+        readonly annotationReferencesService: AnnotationReferencesService,
+    ) {}
 
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.annotations && this.annotations) {

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html

@@ -201,7 +201,6 @@
                     (selectAnnotations)="selectAnnotations.emit($event)"
                     [activeViewerPage]="activeViewerPage"
                     [annotationActionsTemplate]="annotationActionsTemplate"
-                    [annotationReferencesTemplate]="annotationReferencesTemplate"
                     [annotations]="(displayedAnnotations$ | async)?.get(activeViewerPage)"
                     [canMultiSelect]="!isReadOnly"
                     [file]="file"

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts

@@ -54,7 +54,6 @@ export class FileWorkloadComponent {
     @Input() dialogRef: MatDialogRef<unknown>;
     @Input() file!: File;
     @Input() annotationActionsTemplate: TemplateRef<unknown>;
-    @Input() annotationReferencesTemplate: TemplateRef<unknown>;
     @Input() viewer: WebViewerInstance;
     @Output() readonly shouldDeselectAnnotationsOnPageChangeChange = new EventEmitter<boolean>();
     @Output() readonly selectAnnotations = new EventEmitter<AnnotationWrapper[]>();

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

@@ -106,7 +106,6 @@
                         [activeViewerPage]="activeViewerPage"
                         [annotationActionsTemplate]="annotationActionsTemplate"
                         [annotations]="visibleAnnotations"
-                        [annotationReferencesTemplate]="annotationReferencesTemplate"
                         [dialogRef]="dialogRef"
                         [file]="file"
                         [selectedAnnotations]="selectedAnnotations"
@@ -119,7 +118,6 @@
         <ng-template #annotationActionsTemplate let-annotation="annotation">
             <redaction-annotation-actions
                 (annotationsChanged)="annotationsChangedByReviewAction($event)"
-                (seeReferences)="seeReferences = $event"
                 [annotations]="[annotation]"
                 [canPerformAnnotationActions]="canPerformAnnotationActions$ | async"
                 [file]="file"
@@ -127,14 +125,6 @@
             ></redaction-annotation-actions>
         </ng-template>
 
-        <ng-template #annotationReferencesTemplate let-annotation="annotation">
-            <redaction-annotation-references-dialog
-                *ngIf="seeReferences"
-                [annotation]="annotation"
-                (closeDialog)="seeReferences = $event"
-            ></redaction-annotation-references-dialog>
-        </ng-template>
-
         <ng-template #annotationFilterTemplate let-filter="filter">
             <redaction-type-filter
                 *ngIf="filter.topLevelFilter"

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

@@ -51,6 +51,7 @@ import { FilePreviewStateService } from './services/file-preview-state.service';
 import { FileDataModel } from '../../../../models/file/file-data.model';
 import Annotation = Core.Annotations.Annotation;
 import PDFNet = Core.PDFNet;
+import { AnnotationReferencesService } from './services/annotation-references.service';
 
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f', 'ArrowUp', 'ArrowDown'];
 
@@ -88,8 +89,8 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     ready = false;
     private _instance: WebViewerInstance;
     private _lastPage: string;
-    private _seeReferences = false;
     private _reloadFileOnReanalysis = false;
+
     @ViewChild('fileWorkloadComponent') private readonly _workloadComponent: FileWorkloadComponent;
     @ViewChild('annotationFilterTemplate', {
         read: TemplateRef,
@@ -167,14 +168,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         }
     }
 
-    set seeReferences(e) {
-        this._seeReferences = e;
-    }
-
-    get seeReferences(): boolean {
-        return this._seeReferences;
-    }
-
     private get _viewDocumentInfo$() {
         return this.documentInfoService.shown$.pipe(
             tap(value => {

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { shareDistinctLast } from '@iqser/common-ui';
+import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+
+@Injectable()
+export class AnnotationReferencesService {
+    readonly annotation$: Observable<AnnotationWrapper>;
+    private readonly _annotation$ = new BehaviorSubject(null);
+
+    constructor() {
+        this.annotation$ = this._annotation$.asObservable().pipe(shareDistinctLast());
+    }
+
+    show(annotations: AnnotationWrapper[]) {
+        this._annotation$.next(annotations[0]);
+    }
+
+    hide() {
+        this._annotation$.next(null);
+    }
+}

apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts

@@ -23,7 +23,7 @@ type DialogType =
     | 'changeLegalBasis'
     | 'removeAnnotations'
     | 'resizeAnnotation'
-    | 'forceRedaction'
+    | 'forceAnnotation'
     | 'manualAnnotation';
 
 @Injectable()