From b89f4a3f7879cfeb3481e8dbf04760cd04ba8227 Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 10 Jan 2022 17:16:37 +0200
Subject: [PATCH] separate annotation card component in list

---
 .../annotation-card.component.html            | 22 +++++++++++++
 .../annotation-card.component.scss            | 13 ++++++++
 .../annotation-card.component.ts              | 17 ++++++++++
 ...nnotation-references-dialog.component.html |  2 +-
 ...nnotation-references-dialog.component.scss |  5 ++-
 .../annotations-list.component.html           | 32 ++++---------------
 .../annotations-list.component.scss           | 14 --------
 .../file-preview.module.ts                    |  2 ++
 8 files changed, 66 insertions(+), 41 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts

diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
new file mode 100644
index 000000000..a23949aed
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.html
@@ -0,0 +1,22 @@
+<div class="details">
+    <redaction-type-annotation-icon [annotation]="annotation" [file]="file"></redaction-type-annotation-icon>
+
+    <div class="flex-1">
+        <div>
+            <strong>{{ annotation.typeLabel | translate }}</strong>
+        </div>
+        <div *ngIf="annotation?.type !== 'manual'">
+            <strong>
+                <span>{{ annotation.descriptor | translate }}</span
+                >: </strong
+            >{{ annotation.type | humanize: false }}
+        </div>
+        <div *ngIf="annotation.shortContent && !annotation.isHint">
+            <strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
+        </div>
+    </div>
+
+    <div class="active-icon-marker-container">
+        <iqser-round-checkbox *ngIf="(multiSelectService.active$ | async) && isSelected" [active]="true"></iqser-round-checkbox>
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
new file mode 100644
index 000000000..2da4583a7
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.scss
@@ -0,0 +1,13 @@
+.details {
+    display: flex;
+    position: relative;
+}
+
+.active-icon-marker-container {
+    min-width: 20px;
+}
+
+redaction-type-annotation-icon {
+    margin-top: 6px;
+    margin-right: 10px;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
new file mode 100644
index 000000000..a0b18557d
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotation-card/annotation-card.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { AnnotationWrapper } from '../../../../../../models/file/annotation.wrapper';
+import { File } from '@red/domain';
+import { MultiSelectService } from '../../services/multi-select.service';
+
+@Component({
+    selector: 'redaction-annotation-card',
+    templateUrl: './annotation-card.component.html',
+    styleUrls: ['./annotation-card.component.scss'],
+})
+export class AnnotationCardComponent {
+    @Input() annotation: AnnotationWrapper;
+    @Input() file: File;
+    @Input() isSelected = false;
+
+    constructor(readonly multiSelectService: MultiSelectService) {}
+}
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 0234943e1..79479c853 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,6 @@
 <div class="content-container">
     <div class="dialog references-dialog">
-        <div class="references-header">
+        <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>
         </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 045ba5b10..2e6925b09 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,8 +1,11 @@
 .references-dialog {
     position: fixed;
-    right: 350px;
+    margin: 0;
+    right: 370px;
+    top: 165px;
 
     .references-header {
         padding: 13px 13px 0 13px;
+        align-items: center;
     }
 }
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 f50ea272a..ee7df1598 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
@@ -11,31 +11,13 @@
     <div class="active-bar-marker"></div>
 
     <div [class.removed]="annotation.isChangeLogRemoved" class="annotation">
-        <div [matTooltip]="annotation.content" class="details" matTooltipPosition="above">
-            <redaction-type-annotation-icon [annotation]="annotation" [file]="file"></redaction-type-annotation-icon>
-
-            <div class="flex-1">
-                <div>
-                    <strong>{{ annotation.typeLabel | translate }}</strong>
-                </div>
-                <div *ngIf="annotation?.type !== 'manual'">
-                    <strong>
-                        <span>{{ annotation.descriptor | translate }}</span
-                        >: </strong
-                    >{{ annotation.type | humanize: false }}
-                </div>
-                <div *ngIf="annotation.shortContent && !annotation.isHint">
-                    <strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
-                </div>
-            </div>
-
-            <div class="active-icon-marker-container">
-                <iqser-round-checkbox
-                    *ngIf="(multiSelectService.active$ | async) && isSelected(annotation.annotationId)"
-                    [active]="true"
-                ></iqser-round-checkbox>
-            </div>
-        </div>
+        <redaction-annotation-card
+            [annotation]="annotation"
+            [file]="file"
+            [isSelected]="isSelected(annotation.annotationId)"
+            [matTooltip]="annotation.content"
+            matTooltipPosition="above"
+        ></redaction-annotation-card>
 
         <div class="actions-wrapper">
             <div
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss
index e159e24af..047e483e4 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/annotations-list/annotations-list.component.scss
@@ -16,10 +16,6 @@
         min-height: 100%;
     }
 
-    .active-icon-marker-container {
-        min-width: 20px;
-    }
-
     &.active {
         &:not(.lower-height) .active-bar-marker {
             background-color: variables.$primary;
@@ -40,11 +36,6 @@
             color: variables.$grey-7;
         }
 
-        .details {
-            display: flex;
-            position: relative;
-        }
-
         .actions-wrapper {
             display: flex;
             justify-content: space-between;
@@ -74,11 +65,6 @@
                 }
             }
         }
-
-        redaction-type-annotation-icon {
-            margin-top: 6px;
-            margin-right: 10px;
-        }
     }
 
     &:hover,
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
index 37ec7d0a3..dea30eb79 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview.module.ts
@@ -21,6 +21,7 @@ import { ViewSwitchComponent } from './components/view-switch/view-switch.compon
 import { UserManagementComponent } from './components/user-management/user-management.component';
 import { AnnotationReferencesDialogComponent } from './components/annotation-references-dialog/annotation-references-dialog.component';
 import { AcceptRecommendationDialogComponent } from './dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
+import { AnnotationCardComponent } from './components/annotation-card/annotation-card.component';
 
 const routes: Routes = [
     {
@@ -48,6 +49,7 @@ const routes: Routes = [
         UserManagementComponent,
         AcceptRecommendationDialogComponent,
         AnnotationReferencesDialogComponent,
+        AnnotationCardComponent,
     ],
     imports: [
         RouterModule.forChild(routes),