From c0959a86447121ef1c9d197de86f5ce30ba3410a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 28 Apr 2021 21:42:26 +0300
Subject: [PATCH] RED-776: No annotations on this page, jump to previous/next
 buttons

---
 .../src/app/modules/icons/icons.module.ts     |  2 +
 .../file-workload.component.html              | 65 ++++++++++++-------
 .../file-workload.component.scss              | 14 +++-
 .../file-workload/file-workload.component.ts  | 13 +++-
 .../icon-button/icon-button.component.scss    |  1 +
 .../empty-state/empty-state.component.html    |  5 +-
 .../empty-state/empty-state.component.scss    |  1 -
 .../empty-state/empty-state.component.ts      |  1 +
 apps/red-ui/src/assets/i18n/de.json           |  4 +-
 apps/red-ui/src/assets/i18n/en.json           |  8 ++-
 .../src/assets/icons/general/nav-next.svg     | 19 ++++++
 .../src/assets/icons/general/nav-prev.svg     | 19 ++++++
 apps/red-ui/src/assets/styles/red-button.scss |  5 ++
 .../src/assets/styles/red-page-layout.scss    |  4 ++
 14 files changed, 126 insertions(+), 35 deletions(-)
 create mode 100644 apps/red-ui/src/assets/icons/general/nav-next.svg
 create mode 100644 apps/red-ui/src/assets/icons/general/nav-prev.svg

diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts
index 7788e6834..2d5c8c502 100644
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@@ -46,6 +46,8 @@ export class IconsModule {
             'menu',
             'nav-first',
             'nav-last',
+            'nav-next',
+            'nav-prev',
             'needs-work',
             'new-tab',
             'notification',
diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
index 77f30b942..73bb7a2be 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html
@@ -1,16 +1,16 @@
 <div class="right-title heading" translate="file-preview.tabs.annotations.label">
     <div>
         <div
+            (click)="multiSelectActive = true"
             *ngIf="!multiSelectActive"
             class="all-caps-label primary pointer"
-            (click)="multiSelectActive = true"
             translate="file-preview.tabs.annotations.select"
         ></div>
         <redaction-filter
             (filtersChanged)="filtersChanged($event)"
+            [actionsTemplate]="annotationFilterActionTemplate"
             [chevron]="true"
             [filterTemplate]="annotationFilterTemplate"
-            [actionsTemplate]="annotationFilterActionTemplate"
             [primaryFilters]="primaryFilters"
             [secondaryFilters]="secondaryFilters"
         ></redaction-filter>
@@ -20,22 +20,22 @@
     <div *ngIf="multiSelectActive" class="multi-select">
         <div class="selected-wrapper">
             <redaction-round-checkbox
-                type="red-bg"
-                [indeterminate]="!!selectedAnnotations?.length"
                 (click)="!!selectedAnnotations?.length && selectAnnotations.emit()"
+                [indeterminate]="!!selectedAnnotations?.length"
+                type="red-bg"
             ></redaction-round-checkbox>
             <span class="all-caps-label">{{ selectedAnnotations?.length || 0 }} selected </span>
             <redaction-annotation-remove-actions
                 *ngIf="selectedAnnotations?.length > 0"
-                [annotations]="selectedAnnotations"
                 [annotationsChanged]="annotationsChanged"
+                [annotations]="selectedAnnotations"
                 btnType="primary"
                 tooltipPosition="above"
             ></redaction-annotation-remove-actions>
         </div>
         <redaction-circle-button (action)="multiSelectActive = false" icon="red:close" type="primary"></redaction-circle-button>
     </div>
-    <div class="annotations-wrapper" [class.multi-select-active]="multiSelectActive">
+    <div [class.multi-select-active]="multiSelectActive" class="annotations-wrapper">
         <div
             #quickNavigation
             (keydown)="preventKeyDefault($event)"
@@ -45,31 +45,31 @@
             tabindex="0"
         >
             <div
-                class="jump"
+                (click)="quickScrollFirstEnabled && scrollQuickNavFirst()"
                 [class.disabled]="!quickScrollFirstEnabled"
                 [matTooltip]="'file-preview.quick-nav.jump-first' | translate"
+                class="jump"
                 matTooltipPosition="above"
-                (click)="quickScrollFirstEnabled && scrollQuickNavFirst()"
             >
                 <mat-icon svgIcon="red:nav-first"></mat-icon>
             </div>
-            <div class="pages" (scroll)="computeQuickNavButtonsState()" id="pages">
+            <div (scroll)="computeQuickNavButtonsState()" class="pages" id="pages">
                 <redaction-page-indicator
                     (pageSelected)="pageSelectedByClick($event)"
                     *ngFor="let pageNumber of displayedPages"
+                    [activeSelection]="pageHasSelection(pageNumber)"
                     [active]="pageNumber === activeViewerPage"
                     [number]="pageNumber"
                     [viewedPages]="fileData.viewedPages"
-                    [activeSelection]="pageHasSelection(pageNumber)"
                 >
                 </redaction-page-indicator>
             </div>
             <div
-                class="jump"
+                (click)="scrollQuickNavLast()"
                 [class.disabled]="!quickScrollLastEnabled"
                 [matTooltip]="'file-preview.quick-nav.jump-last' | translate"
+                class="jump"
                 matTooltipPosition="above"
-                (click)="scrollQuickNavLast()"
             >
                 <mat-icon svgIcon="red:nav-last"></mat-icon>
             </div>
@@ -83,8 +83,8 @@
                 ></span>
 
                 <div *ngIf="multiSelectActive">
-                    <div class="all-caps-label primary pointer" (click)="selectAllOnActivePage()">All</div>
-                    <div class="all-caps-label primary pointer" (click)="deselectAllOnActivePage()">None</div>
+                    <div (click)="selectAllOnActivePage()" class="all-caps-label primary pointer">All</div>
+                    <div (click)="deselectAllOnActivePage()" class="all-caps-label primary pointer">None</div>
                 </div>
             </div>
 
@@ -93,25 +93,42 @@
                 (keydown)="preventKeyDefault($event)"
                 (keyup)="preventKeyDefault($event)"
                 [class.active-panel]="!pagesPanelActive"
-                redactionHasScrollbar
                 class="annotations"
+                redactionHasScrollbar
                 tabindex="1"
             >
-                <div *ngIf="!displayedAnnotations[activeViewerPage]" class="heading-l no-annotations">
-                    {{ 'file-preview.no-annotations-for-page' | translate }}
-                </div>
+                <ng-container *ngIf="!displayedAnnotations[activeViewerPage]">
+                    <redaction-empty-state [horizontalPadding]="24" [verticalPadding]="40" icon="red:document" screen="file-preview"></redaction-empty-state>
+                    <div class="no-annotations-buttons-container mt-32">
+                        <redaction-icon-button
+                            (action)="jumpToPreviousWithAnnotations()"
+                            [disabled]="activeViewerPage <= displayedPages[0]"
+                            icon="red:nav-prev"
+                            text="file-preview.tabs.annotations.jump-to-previous"
+                            type="show-bg"
+                        ></redaction-icon-button>
+                        <redaction-icon-button
+                            (action)="jumpToNextWithAnnotations()"
+                            [disabled]="activeViewerPage >= displayedPages[displayedPages.length - 1]"
+                            class="mt-8"
+                            icon="red:nav-next"
+                            text="file-preview.tabs.annotations.jump-to-next"
+                            type="show-bg"
+                        ></redaction-icon-button>
+                    </div>
+                </ng-container>
 
                 <div
                     (click)="annotationClicked(annotation, $event)"
-                    class="annotation-wrapper"
                     *ngFor="let annotation of displayedAnnotations[activeViewerPage]?.annotations"
-                    attr.annotation-id="{{ annotation.id }}"
-                    attr.annotation-page="{{ activeViewerPage }}"
                     [class.active]="annotationIsSelected(annotation)"
                     [class.multi-select-active]="multiSelectActive"
+                    attr.annotation-id="{{ annotation.id }}"
+                    attr.annotation-page="{{ activeViewerPage }}"
+                    class="annotation-wrapper"
                 >
                     <div class="active-bar-marker"></div>
-                    <div class="annotation" [class.removed]="annotation.isChangeLogRemoved">
+                    <div [class.removed]="annotation.isChangeLogRemoved" class="annotation">
                         <redaction-hidden-action (action)="logAnnotation(annotation)" [requiredClicks]="2">
                             <div class="details">
                                 <redaction-type-annotation-icon [annotation]="annotation"></redaction-type-annotation-icon>
@@ -132,8 +149,8 @@
                                 </div>
                                 <ng-container
                                     *ngIf="!multiSelectActive"
-                                    [ngTemplateOutlet]="annotationActionsTemplate"
                                     [ngTemplateOutletContext]="{ annotation: annotation }"
+                                    [ngTemplateOutlet]="annotationActionsTemplate"
                                 >
                                 </ng-container>
                                 <div class="active-icon-marker-container">
@@ -162,7 +179,7 @@
 
 <ng-template #annotationFilterActionTemplate let-filter="filter">
     <ng-container *ngIf="filter.key === 'skipped'">
-        <redaction-circle-button [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'" (action)="toggleSkipped.emit($event)" type="dark-bg">
+        <redaction-circle-button (action)="toggleSkipped.emit($event)" [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'" type="dark-bg">
         </redaction-circle-button>
     </ng-container>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss
index 29d1a9e01..c323823f8 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss
@@ -4,9 +4,14 @@
 .right-content {
     flex-direction: column;
 
-    .no-annotations {
-        padding: 24px;
-        text-align: center;
+    .no-annotations-buttons-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+
+        redaction-icon-button {
+            width: 100%;
+        }
     }
 
     .multi-select {
@@ -115,6 +120,9 @@
         overflow: hidden;
         width: 100%;
         height: calc(100% - 32px);
+        display: flex;
+        align-items: center;
+        flex-direction: column;
 
         .annotation-wrapper {
             display: flex;
diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts
index 39dfecfa7..dcb6fc326 100644
--- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts
@@ -227,6 +227,14 @@ export class FileWorkloadComponent {
         }
     }
 
+    public jumpToPreviousWithAnnotations() {
+        this.selectPage.emit(this._prevPageWithAnnotations());
+    }
+
+    public jumpToNextWithAnnotations() {
+        this.selectPage.emit(this._nextPageWithAnnotations());
+    }
+
     private _navigateAnnotations($event: KeyboardEvent) {
         if (!this.firstSelectedAnnotation || this.activeViewerPage !== this.firstSelectedAnnotation.pageNumber) {
             const pageIdx = this.displayedPages.indexOf(this.activeViewerPage);
@@ -325,10 +333,9 @@ export class FileWorkloadComponent {
 
     private _prevPageWithAnnotations() {
         let idx = this.displayedPages.length - 1;
-        for (const page of this.displayedPages.reverse()) {
+        const reverseDisplayedPages = [...this.displayedPages].reverse();
+        for (const page of reverseDisplayedPages) {
             if (page < this.activeViewerPage) {
-                this.selectPage.emit(this.displayedPages[idx]);
-                this.scrollAnnotations();
                 break;
             }
             --idx;
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss
index d84f2d27b..cf946631d 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/icon-button/icon-button.component.scss
@@ -2,6 +2,7 @@
 
 button {
     padding: 0 14px;
+    width: 100%;
 
     &.has-icon {
         padding: 0 14px 0 10px;
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
index a8126d468..b9f7b0425 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
@@ -1,4 +1,7 @@
-<div class="empty-state" [ngStyle]="{ 'padding-left': horizontalPadding + 'px', 'padding-right': horizontalPadding + 'px' }">
+<div
+    class="empty-state"
+    [ngStyle]="{ 'padding-top': verticalPadding + 'px', 'padding-left': horizontalPadding + 'px', 'padding-right': horizontalPadding + 'px' }"
+>
     <mat-icon [svgIcon]="icon"></mat-icon>
     <div class="heading-l" [translate]="text || screen + '.' + type + '.title'"></div>
     <redaction-icon-button *ngIf="showButton" (action)="action.emit()" [icon]="buttonIcon" [text]="screen + '.no-data.action'" type="primary">
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
index ea3dea645..ef18f9b40 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.scss
@@ -4,7 +4,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 120px;
     text-align: center;
 
     > mat-icon {
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
index 9367ebd8b..b42f0e62e 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
@@ -12,6 +12,7 @@ export class EmptyStateComponent implements OnInit {
     @Input() showButton = true;
     @Input() buttonIcon = 'red:plus';
     @Input() horizontalPadding = 100;
+    @Input() verticalPadding = 120;
     @Input() type: 'no-data' | 'no-match' = 'no-data';
     @Output() action = new EventEmitter();
 
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index daa4bdd5b..837a5d879 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -276,7 +276,9 @@
         }
     },
     "file-preview": {
-        "no-annotations-for-page": "Auf dieser Seite gibt es keine Redaktionen, Hinweise oder Anfragen.",
+        "no-data": {
+            "title": "Auf dieser Seite gibt es keine Redaktionen, Hinweise oder Anfragen."
+        },
         "show-redacted-view": "Redigierte Vorschau anzeigen",
         "cannot-show-redacted-view": "Redaktionen nicht synchron. Die redigierte Vorschau ist nur nach einer erneuten Analyse verfügbar",
         "reanalyse-notification": "Dieses Dokument wurde nicht mit dem neuesten Regel- / Wörterbuchsatz verarbeitet. Analysieren Sie jetzt, um aktualisierte Anmerkungen zu erhalten.",
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 88ded3be0..7d5246ba8 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -300,7 +300,9 @@
         "standard-tooltip": "Standard Workload view shows all hints, redactions, recommendations & suggestions. This view allows editing.",
         "redacted-tooltip": "Redaction preview shows only redactions. Consider this a preview for the final redacted version. This view is only available if the file has no pending changes & doesn't require a reanalysis",
         "delta-tooltip": "Delta View shows only the changes since last re-analysis. This view is only available if there is at least 1 change",
-        "no-annotations-for-page": "There are no redactions, hints or requests on this page.",
+        "no-data": {
+            "title": "There are no annotations on this page."
+        },
         "show-redacted-view": "Show Redacted Preview",
         "cannot-show-redacted-view": "Redactions out of sync. Redacted Preview only available after reanalysis",
         "reanalyse-notification": "This document was not processed with the latest rule/dictionary set. Analyze now to get updated annotations.",
@@ -322,7 +324,9 @@
             },
             "annotations": {
                 "label": "Workload",
-                "select": "Select"
+                "select": "Select",
+                "jump-to-previous": "Jump to Previous",
+                "jump-to-next": "Jump to Next"
             },
             "is-excluded": "Redaction is disabled for this document."
         },
diff --git a/apps/red-ui/src/assets/icons/general/nav-next.svg b/apps/red-ui/src/assets/icons/general/nav-next.svg
new file mode 100644
index 000000000..b9f52e81b
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/nav-next.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Annotations-Jump-to-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -486.000000)">
+            <rect x="0" y="0" width="1440" height="750"></rect>
+            <rect id="Rectangle" x="1148" y="206" width="282" height="544"></rect>
+            <g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
+            <g id="Group" transform="translate(1212.000000, 476.000000)">
+                <rect id="Rectangle" x="0" y="0" width="151" height="34" rx="17"></rect>
+                <g id="collapse" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
+                    <g id="Group" transform="translate(1.400000, 3.360000)">
+                        <polygon id="Path" points="9.1 0.98 8.12 0 5.6 2.52 4.9 1.82 3.08 0 2.1 0.98 5.6 4.48"></polygon>
+                        <polygon id="Path" transform="translate(5.600000, 6.580000) scale(1, -1) translate(-5.600000, -6.580000) " points="9.8 5.88 1.4 5.88 7.34412531e-15 5.88 7.34412531e-15 7.28 11.2 7.28 11.2 5.88"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/apps/red-ui/src/assets/icons/general/nav-prev.svg b/apps/red-ui/src/assets/icons/general/nav-prev.svg
new file mode 100644
index 000000000..215a5305a
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/nav-prev.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Annotations-Jump-to-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="01.Jump-to-first-last-annotation" transform="translate(-1222.000000, -444.000000)">
+            <rect x="0" y="0" width="1440" height="750"></rect>
+            <rect id="Rectangle" x="1148" y="206" width="282" height="544"></rect>
+            <g id="Page-05" transform="translate(1147.000000, 173.000000)"></g>
+            <g id="Group" transform="translate(1212.000000, 434.000000)">
+                <rect id="Rectangle" x="0" y="0" width="151" height="34" rx="17"></rect>
+                <g id="collapse" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
+                    <g id="Group" transform="translate(1.400000, 3.360000)">
+                        <polygon id="Path" transform="translate(5.600000, 5.040000) scale(1, -1) translate(-5.600000, -5.040000) " points="9.1 3.78 8.12 2.8 5.6 5.32 4.9 4.62 3.08 2.8 2.1 3.78 5.6 7.28"></polygon>
+                        <polygon id="Path" transform="translate(5.600000, 0.700000) scale(1, -1) translate(-5.600000, -0.700000) " points="9.8 0 1.4 0 7.34412531e-15 0 7.34412531e-15 1.4 11.2 1.4 11.2 0"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss
index bae06f57f..cd54d294d 100644
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@@ -13,10 +13,15 @@
         align-items: center;
         line-height: 34px;
         transition: opacity 0.2s;
+        width: 100%;
 
         > *:not(:last-child) {
             margin-right: 6px;
         }
+
+        > span {
+            margin: auto;
+        }
     }
 
     &.mat-button-disabled {
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index db844d535..ce6b6c562 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -232,6 +232,10 @@ section.settings {
     margin-top: 20px;
 }
 
+.mt-32 {
+    margin-top: 32px;
+}
+
 .pb-24 {
     padding-bottom: 24px;
 }