From 53929c9e3af7790d3a3eb58a79d5fc83858c6b75 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Wed, 12 Jan 2022 14:07:49 +0200
Subject: [PATCH] show/hide dialog functionality in separate service

---
 .../annotation-actions.component.html         |  5 +++--
 .../annotation-actions.component.ts           |  9 ++++----
 ...nnotation-references-dialog.component.html |  2 +-
 .../annotation-references-dialog.component.ts |  9 ++++----
 .../annotations-list.component.html           |  7 ++++--
 .../annotations-list.component.ts             |  8 +++++--
 .../file-workload.component.html              |  1 -
 .../file-workload/file-workload.component.ts  |  1 -
 .../file-preview-screen.component.html        | 10 ---------
 .../file-preview-screen.component.ts          | 11 ++--------
 .../services/annotation-references.service.ts | 22 +++++++++++++++++++
 .../services/dossiers-dialog.service.ts       |  2 +-
 12 files changed, 49 insertions(+), 38 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
index 567aeb3fd..548fe9710 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.html
+++ b/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"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
index 9db9c00e3..cbaf54daa 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-actions/annotation-actions.component.ts
+++ b/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);
-    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
index 79479c853..7bcbbdf53 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.html
+++ b/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>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
index 5cb9a4fdc..1490877f5 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.ts
+++ b/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() annotation: AnnotationWrapper;
-    @Output() readonly closeDialog = new EventEmitter<boolean>();
-    constructor() {}
+    @Input()
+    annotation: AnnotationWrapper;
+
+    constructor(readonly annotationReferencesService: AnnotationReferencesService) {}
 
     ngOnInit(): void {
         console.log(this.annotation);
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
index ee7df1598..ae347c512 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.html
+++ b/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>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
index 49f2f0e31..4671bf016 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.ts
+++ b/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) {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html
index ac5e886ee..71c41366d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.html
+++ b/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"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts
index 9ba05aae5..584a25e84 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/file-workload/file-workload.component.ts
+++ b/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[]>();
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
index 1dd36f48f..b90dd8d93 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
+++ b/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"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index ee38046dd..77c0624eb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/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 => {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/services/annotation-references.service.ts
new file mode 100644
index 000000000..03651811d
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
index 65d6e8092..ae70049f4 100644
--- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
+++ b/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()