From 0d15cf694d2a5173434b31c0fcf127b50f3af640 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 10 Jan 2022 14:21:03 +0200
Subject: [PATCH] annotation references in template

---
 .../annotation-references-dialog.component.html      |  6 ++++--
 .../annotation-references-dialog.component.scss      |  4 ++++
 .../annotations-list/annotations-list.component.html |  2 ++
 .../annotations-list/annotations-list.component.ts   |  1 +
 .../file-workload/file-workload.component.html       |  1 +
 .../file-workload/file-workload.component.ts         |  1 +
 .../file-preview-screen.component.html               | 12 ++++++++----
 7 files changed, 21 insertions(+), 6 deletions(-)

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 598299dd3..0234943e1 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
@@ -1,6 +1,8 @@
 <div class="content-container">
     <div class="dialog references-dialog">
-        <div class="dialog-header">X REFERENCES</div>
-        <iqser-circle-button (action)="closeDialog.emit(false)" class="dialog-close" icon="iqser:close"></iqser-circle-button>
+        <div class="references-header">
+            <div class="small-label">X REFERENCES</div>
+            <iqser-circle-button (action)="closeDialog.emit(false)" 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.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
index cc502ada9..045ba5b10 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-references-dialog/annotation-references-dialog.component.scss
@@ -1,4 +1,8 @@
 .references-dialog {
     position: fixed;
     right: 350px;
+
+    .references-header {
+        padding: 13px 13px 0 13px;
+    }
 }
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 368df6874..f50ea272a 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
@@ -60,4 +60,6 @@
     </div>
 
     <redaction-annotation-details [annotation]="annotation"></redaction-annotation-details>
+
+    <ng-container [ngTemplateOutletContext]="{ annotation: annotation }" [ngTemplateOutlet]="annotationReferencesTemplate"></ng-container>
 </div>
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 437b31c31..49f2f0e31 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
@@ -15,6 +15,7 @@ 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;
 
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 71c41366d..ac5e886ee 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,6 +201,7 @@
                     (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 584a25e84..9ba05aae5 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,6 +54,7 @@ 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 a8901693a..1dd36f48f 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,6 +106,7 @@
                         [activeViewerPage]="activeViewerPage"
                         [annotationActionsTemplate]="annotationActionsTemplate"
                         [annotations]="visibleAnnotations"
+                        [annotationReferencesTemplate]="annotationReferencesTemplate"
                         [dialogRef]="dialogRef"
                         [file]="file"
                         [selectedAnnotations]="selectedAnnotations"
@@ -126,10 +127,13 @@
             ></redaction-annotation-actions>
         </ng-template>
 
-        <redaction-annotation-references-dialog
-            *ngIf="seeReferences"
-            (closeDialog)="seeReferences = $event"
-        ></redaction-annotation-references-dialog>
+        <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