From 2a4b19f46d3b992b7e36825fb023763f6e67d262 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 29 Oct 2020 22:20:17 +0200
Subject: [PATCH] Comments for annotations viewer

---
 .editorconfig                                 |  2 +-
 apps/red-ui/src/app/app.module.ts             |  3 +
 .../comments/comments.component.html          | 25 ++++++++
 .../comments/comments.component.scss          | 58 +++++++++++++++++++
 .../components/comments/comments.component.ts | 41 +++++++++++++
 apps/red-ui/src/app/icons/icons.module.ts     |  1 +
 .../file-preview-screen.component.html        | 56 +++++++++---------
 .../file-preview-screen.component.scss        |  6 ++
 .../file-preview-screen.component.ts          | 11 ++--
 apps/red-ui/src/assets/i18n/en.json           |  4 ++
 .../src/assets/icons/general/comment.svg      |  7 +++
 .../red-ui/src/assets/icons/general/trash.svg |  4 +-
 apps/red-ui/src/assets/styles/red-input.scss  |  1 -
 apps/red-ui/src/assets/styles/red-mixins.scss |  7 ++-
 14 files changed, 190 insertions(+), 36 deletions(-)
 create mode 100644 apps/red-ui/src/app/components/comments/comments.component.html
 create mode 100644 apps/red-ui/src/app/components/comments/comments.component.scss
 create mode 100644 apps/red-ui/src/app/components/comments/comments.component.ts
 create mode 100644 apps/red-ui/src/assets/icons/general/comment.svg

diff --git a/.editorconfig b/.editorconfig
index 6e87a003d..9b7352176 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 0207ecd0b..31bd05c6d 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -60,6 +60,7 @@ import { MatNativeDateModule } from '@angular/material/core';
 import { MatInputModule } from '@angular/material/input';
 import { ProjectMemberGuard } from './auth/project-member-guard.service';
 import { HumanizePipe } from './utils/humanize.pipe';
+import { CommentsComponent } from './components/comments/comments.component';
 import { ManualAnnotationDialogComponent } from './dialogs/manual-redaction-dialog/manual-annotation-dialog.component';
 import { FileNotAvailableOverlayComponent } from './screens/file/file-not-available-overlay/file-not-available-overlay.component';
 import { ToastComponent } from './components/toast/toast.component';
@@ -90,6 +91,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
         AnnotationIconComponent,
         AuthErrorComponent,
         HumanizePipe,
+        CommentsComponent
+        HumanizePipe,
         ToastComponent,
         FileNotAvailableOverlayComponent,
         FilterComponent
diff --git a/apps/red-ui/src/app/components/comments/comments.component.html b/apps/red-ui/src/app/components/comments/comments.component.html
new file mode 100644
index 000000000..6ffdc1bdb
--- /dev/null
+++ b/apps/red-ui/src/app/components/comments/comments.component.html
@@ -0,0 +1,25 @@
+<div class="comments">
+    <ng-container *ngFor="let comment of comments; let idx = index">
+        <div class="comment" *ngIf="idx < 2 || expanded">
+            <div class="comment-icon">
+                <mat-icon svgIcon="red:comment"></mat-icon>
+            </div>
+            <div class="trash-icon" (click)="deleteComment(comment)">
+                <mat-icon svgIcon="red:trash"></mat-icon>
+            </div>
+            <div>{{ comment }}</div>
+        </div>
+    </ng-container>
+
+    <div *ngIf="more" (click)="toggleSeeMore($event)" class="see-more">
+        <span>{{ expanded ? '-' : '+' }}</span>
+        <span [translate]="'comments.show-' + (expanded ? 'less' : 'more')"></span>
+    </div>
+
+    <!--    <form [formGroup]="commentForm" (submit)="addComment()">-->
+    <!--        <div class="red-input-group">-->
+    <!--            <input formControlName="comment" name="comment" type="text" />-->
+    <!--            <mat-icon svgIcon="red:check-alt" class="check-icon" (click)="addComment()"></mat-icon>-->
+    <!--        </div>-->
+    <!--    </form>-->
+</div>
diff --git a/apps/red-ui/src/app/components/comments/comments.component.scss b/apps/red-ui/src/app/components/comments/comments.component.scss
new file mode 100644
index 000000000..fe36f7832
--- /dev/null
+++ b/apps/red-ui/src/app/components/comments/comments.component.scss
@@ -0,0 +1,58 @@
+@import '../../../assets/styles/red-variables';
+
+.comments {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    form {
+        position: relative;
+
+        .check-icon {
+            width: 14px;
+            height: 40px;
+            color: $grey-1;
+            position: absolute;
+            right: 10px;
+            opacity: 0.7;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+
+    .comment {
+        display: flex;
+        gap: 12px;
+
+        mat-icon {
+            width: 14px;
+            height: 16px;
+        }
+
+        .comment-icon {
+            color: $grey-5;
+            display: initial;
+        }
+
+        .trash-icon {
+            color: $primary;
+            display: none;
+        }
+
+        &:hover {
+            .comment-icon {
+                display: none;
+            }
+            .trash-icon {
+                display: initial;
+            }
+        }
+    }
+
+    .see-more {
+        margin-left: 24px;
+        text-decoration: underline;
+    }
+}
diff --git a/apps/red-ui/src/app/components/comments/comments.component.ts b/apps/red-ui/src/app/components/comments/comments.component.ts
new file mode 100644
index 000000000..d40c32d5d
--- /dev/null
+++ b/apps/red-ui/src/app/components/comments/comments.component.ts
@@ -0,0 +1,41 @@
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+    selector: 'redaction-comments',
+    templateUrl: './comments.component.html',
+    styleUrls: ['./comments.component.scss']
+})
+export class CommentsComponent {
+    @Input() public comments: string[] = [];
+    public expanded = false;
+    public commentForm: FormGroup;
+
+    constructor(
+        private readonly _changeDetectorRef: ChangeDetectorRef,
+        private readonly _formBuilder: FormBuilder
+    ) {
+        this.commentForm = this._formBuilder.group({
+            comment: ['', Validators.required]
+        });
+    }
+
+    public get more(): boolean {
+        return this.comments.length > 2;
+    }
+
+    public toggleSeeMore($event: MouseEvent): void {
+        $event.stopPropagation();
+        this.expanded = !this.expanded;
+        this._changeDetectorRef.detectChanges();
+    }
+
+    public addComment(): void {
+        console.log(`Adding comment "${this.commentForm.value.comment}"...`);
+        this.commentForm.reset();
+    }
+
+    public deleteComment(comment: string): void {
+        console.log(`Deleting comment "${comment}"...`);
+    }
+}
diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts
index cb5cd2894..6493a7f9a 100644
--- a/apps/red-ui/src/app/icons/icons.module.ts
+++ b/apps/red-ui/src/app/icons/icons.module.ts
@@ -20,6 +20,7 @@ export class IconsModule {
             'calendar',
             'check',
             'close',
+            'comment',
             'document',
             'double-chevron-right',
             'download',
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 1c3d4e9ef..61c3f2114 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -99,8 +99,8 @@
                     class="pages"
                     [class.activePanel]="pagesPanelActive"
                     tabindex="0"
-                    (keyup)="$event.preventDefault()"
-                    (keydown)="$event.preventDefault()"
+                    (keyup)="preventArrowDefault($event)"
+                    (keydown)="preventArrowDefault($event)"
                     #quickNavigation
                 >
                     <div
@@ -119,8 +119,8 @@
                     [class.activePanel]="!pagesPanelActive"
                     #annotationsElement
                     tabindex="1"
-                    (keyup)="$event.preventDefault()"
-                    (keydown)="$event.preventDefault()"
+                    (keyup)="preventArrowDefault($event)"
+                    (keydown)="preventArrowDefault($event)"
                 >
                     <div *ngFor="let page of displayedPages">
                         <div class="page-separator" attr.anotation-page-header="{{ page }}">
@@ -137,32 +137,36 @@
                             [ngClass]="{ active: selectedAnnotation?.id === annotation.id }"
                             (click)="selectAnnotation(annotation)"
                         >
-                            <redaction-annotation-icon
-                                [typeValue]="
-                                    appStateService.getDictionaryTypeValueForAnnotation(annotation)
-                                "
-                            ></redaction-annotation-icon>
-                            <div class="flex-1">
-                                <div>
-                                    <strong>{{ annotation.superType | humanize }}</strong>
+                            <div class="details">
+                                <redaction-annotation-icon
+                                    [typeValue]="
+                                        appStateService.getDictionaryTypeValueForAnnotation(
+                                            annotation
+                                        )
+                                    "
+                                ></redaction-annotation-icon>
+                                <div class="flex-1">
+                                    <div>
+                                        <strong>{{ annotation.superType | humanize }}</strong>
+                                    </div>
+                                    <div *ngIf="annotation.dictionary">
+                                        <strong><span translate="dictionary"></span>: </strong
+                                        >{{ annotation.dictionary | humanize }}
+                                    </div>
+                                    <div *ngIf="annotation.content">
+                                        <strong><span translate="content"></span>: </strong
+                                        >{{ annotation.content }}
+                                    </div>
                                 </div>
-                                <div *ngIf="annotation.dictionary">
-                                    <strong><span translate="dictionary"></span>: </strong
-                                    >{{ annotation.dictionary | humanize }}
-                                </div>
-                                <div *ngIf="annotation.content">
-                                    <strong><span translate="content"></span>: </strong
-                                    >{{ annotation.content }}
-                                </div>
-                                <div *ngFor="let comment of annotation.comments">
-                                    <strong><span translate="comment"></span>:</strong>
-                                    {{ comment }}
+
+                                <div class="page-number">
+                                    {{ annotation.pageNumber }}
                                 </div>
                             </div>
 
-                            <div class="page-number">
-                                {{ annotation.pageNumber }}
-                            </div>
+                            <redaction-comments
+                                [comments]="annotation.comments"
+                            ></redaction-comments>
 
                             <div
                                 class="annotation-actions"
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index 530feb2a5..f320fc099 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -87,9 +87,15 @@ redaction-pdf-viewer {
                 cursor: pointer;
                 position: relative;
                 display: flex;
+                flex-direction: column;
                 gap: 10px;
                 border-left: 2px solid transparent;
 
+                .details {
+                    display: flex;
+                    gap: 10px;
+                }
+
                 redaction-annotation-icon {
                     margin-top: 6px;
                 }
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
index b5f33ec8c..e1d8a0ca0 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@@ -30,6 +30,8 @@ import { AnnotationDrawService } from '../service/annotation-draw.service';
 import { AnnotationProcessingService } from '../service/annotation-processing.service';
 import { FilterModel } from '../../../common/filter/model/filter.model';
 
+const KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+
 @Component({
     selector: 'redaction-file-preview-screen',
     templateUrl: './file-preview-screen.component.html',
@@ -262,10 +264,11 @@ export class FilePreviewScreenComponent implements OnInit {
     }
 
     @HostListener('window:keyup', ['$event'])
-    handleKeyEvent($event: KeyboardEvent) {
-        const keyArray = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-
-        if (!keyArray.includes($event.key) || this._dialogRef?.getState() === MatDialogState.OPEN) {
+    public handleKeyEvent($event: KeyboardEvent) {
+        if (
+            !KEY_ARRAY.includes($event.key) ||
+            this._dialogRef?.getState() === MatDialogState.OPEN
+        ) {
             return;
         }
 
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index f0a81d195..5cf21d44c 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -550,6 +550,10 @@
             "label": "You are not allowed to access that page."
         }
     },
+    "comments": {
+        "show-more": "Show More",
+        "show-less": "Show Less"
+    },
     "unassigned": "Unassigned",
     "under-review": "Under review",
     "under-approval": "Under approval",
diff --git a/apps/red-ui/src/assets/icons/general/comment.svg b/apps/red-ui/src/assets/icons/general/comment.svg
new file mode 100644
index 000000000..06c578ba2
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/comment.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>comments</title>
+    <g id="comments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M50,0 C25,0 5,20 5,45 C5,55.5 8.5,65 15,73 L15,100 L44,89.5 C46.5,90 48,90 50,90 C75,90 95,70 95,45 C95,20 75,0 50,0 Z M50,80 C48.5,80 46.5,80 44.5,79.5 L43,79.5 L25,86 L25,69.5 L23.5,68 C18,61.5 15,53.5 15,45 C15,25.5 30.5,10 50,10 C69.5,10 85,25.5 85,45 C85,64.5 69.5,80 50,80 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
+    </g>
+</svg>
diff --git a/apps/red-ui/src/assets/icons/general/trash.svg b/apps/red-ui/src/assets/icons/general/trash.svg
index 254482033..6ade89287 100644
--- a/apps/red-ui/src/assets/icons/general/trash.svg
+++ b/apps/red-ui/src/assets/icons/general/trash.svg
@@ -2,6 +2,6 @@
 <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>trash</title>
     <g id="trash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M85,10 L65,10 L65,0 L35,0 L35,10 L15,10 C12,10 10,12 10,15 C10,18 12,20 15,20 L15,85 C15,93.5 21.5,100 30,100 L70,100 C78.5,100 85,93.5 85,85 L85,20 C88,20 90,18 90,15 C90,12 88,10 85,10 Z M75,85 C75,88 73,90 70,90 L30,90 C27,90 25,88 25,85 L25,20 L75,20 L75,85 Z" id="Shape" fill="#283241" fill-rule="nonzero"></path>
+        <path d="M85,10 L65,10 L65,0 L35,0 L35,10 L15,10 C12,10 10,12 10,15 C10,18 12,20 15,20 L15,85 C15,93.5 21.5,100 30,100 L70,100 C78.5,100 85,93.5 85,85 L85,20 C88,20 90,18 90,15 C90,12 88,10 85,10 Z M75,85 C75,88 73,90 70,90 L30,90 C27,90 25,88 25,85 L25,20 L75,20 L75,85 Z" id="Shape" fill="currentColor" fill-rule="nonzero"></path>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index c008f4544..872c6546c 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -24,7 +24,6 @@
     textarea,
     mat-select {
         box-sizing: border-box;
-        width: 322px;
         padding-left: 11px;
         padding-right: 11px;
         border: 1px solid $grey-5;
diff --git a/apps/red-ui/src/assets/styles/red-mixins.scss b/apps/red-ui/src/assets/styles/red-mixins.scss
index 8930792e3..d011a9dd1 100644
--- a/apps/red-ui/src/assets/styles/red-mixins.scss
+++ b/apps/red-ui/src/assets/styles/red-mixins.scss
@@ -5,8 +5,11 @@
     -webkit-line-clamp: $lines;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+    @if $lines == 1 {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 @mixin no-scroll-bar {