viewed pages

2020-11-04 11:23:44 +02:00 · 2020-11-04 11:23:44 +02:00 · a724a787e5
commit a724a787e5
parent ce7a4a3704
14 changed files with 159 additions and 47 deletions
--- a/apps/red-ui/proxy.conf.json
+++ b/apps/red-ui/proxy.conf.json
@ -23,6 +23,12 @@
        "changeOrigin": true,
        "logLevel": "debug"
    },
+    "/viewedPages": {
+        "target": "https://timo-redaction-dev.iqser.cloud/",
+        "secure": false,
+        "changeOrigin": true,
+        "logLevel": "debug"
+    },
    "/redactionLog": {
        "target": "https://timo-redaction-dev.iqser.cloud/",
        "secure": false,
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@ -69,6 +69,7 @@ import { AppInfoComponent } from './screens/app-info/app-info.component';
 import { SortingComponent } from './components/sorting/sorting.component';
 import { TableColNameComponent } from './components/table-col-name/table-col-name.component';
 import { ProjectDetailsComponent } from './screens/project-overview-screen/project-details/project-details.component';
+import { PageIndicatorComponent } from './screens/file/page-indicator/page-indicator.component';

 export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@ -103,7 +104,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
        AppInfoComponent,
        SortingComponent,
        TableColNameComponent,
-        ProjectDetailsComponent
+        ProjectDetailsComponent,
+        PageIndicatorComponent
    ],
    imports: [
        BrowserModule,
--- a/apps/red-ui/src/app/icons/icons.module.ts
+++ b/apps/red-ui/src/app/icons/icons.module.ts
@ -42,7 +42,8 @@ export class IconsModule {
            'status',
            'trash',
            'user',
-            'check-alt'
+            'check-alt',
+            'page'
        ];

        for (const icon of icons) {
--- 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
@ -111,15 +111,14 @@
                    class="pages"
                    tabindex="0"
                >
-                    <div
-                        (click)="selectPage(pageNumber)"
+                    <redaction-page-indicator
                        *ngFor="let pageNumber of displayedPages"
-                        [id]="'quick-nav-page-' + pageNumber"
-                        [ngClass]="{ active: pageNumber === activeViewerPage }"
-                        class="page-number pointer"
+                        (pageSelected)="selectPage($event)"
+                        [viewedPages]="viewedPages"
+                        [number]="pageNumber"
+                        [active]="pageNumber === activeViewerPage"
                    >
-                        {{ pageNumber }}
-                    </div>
+                    </redaction-page-indicator>
                </div>

                <div
--- 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
@ -62,9 +62,7 @@ redaction-pdf-viewer {
            display: flex;
            flex-direction: column;
            align-items: center;
-            gap: 10px;
-            padding: 16px;
-            min-width: 28px;
+            min-width: 61px;
        }

        .annotations {
--- 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
@ -8,7 +8,12 @@ import {
    ViewChild
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FileStatus, ReanalysisControllerService } from '@redaction/red-ui-http';
+import {
+    FileStatus,
+    ReanalysisControllerService,
+    ViewedPages,
+    ViewedPagesControllerService
+} from '@redaction/red-ui-http';
 import { AppStateService } from '../../../state/app-state.service';
 import { WebViewerInstance } from '@pdftron/webviewer';
 import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
@ -56,6 +61,7 @@ export class FilePreviewScreenComponent implements OnInit {
        private readonly _manualAnnotationService: ManualAnnotationService,
        private readonly _fileDownloadService: FileDownloadService,
        private readonly _reanalysisControllerService: ReanalysisControllerService,
+        private readonly _viewedPagesControllerService: ViewedPagesControllerService,
        private ngZone: NgZone
    ) {
        this._activatedRoute.params.subscribe((params) => {
@ -109,8 +115,14 @@ export class FilePreviewScreenComponent implements OnInit {

    private _activeMenuAnnotation: AnnotationWrapper;
    loadingMessage: string;
+    viewedPages: ViewedPages = { pages: [] };

    public ngOnInit(): void {
+        this._viewedPagesControllerService
+            .getViewedPages(this.appStateService.activeProjectId, this.appStateService.activeFileId)
+            .subscribe((viewedPages) => {
+                this.viewedPages = viewedPages;
+            });
        this._loadFileData().subscribe(() => {
            this._displayNewRuleToast();
        });
--- a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.html
+++ b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.html
@ -0,0 +1,12 @@
+<div
+    class="page-wrapper"
+    [class.read]="read"
+    [class.active]="active"
+    [id]="'quick-nav-page-' + number"
+    (click)="pageSelected.emit(number)"
+>
+    <mat-icon svgIcon="red:page"> </mat-icon>
+    <div class="text">
+        {{ number }}
+    </div>
+</div>
--- a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.scss
+++ b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.scss
@ -0,0 +1,39 @@
+@import '../../../../assets/styles/red-variables';
+
+.page-wrapper {
+    color: $grey-1;
+    position: relative;
+    padding: 12px;
+    cursor: pointer;
+    border-left: 1px solid transparent;
+
+    &:hover {
+        background-color: $grey-6;
+    }
+
+    &.active {
+        border-left: 1px solid $red-1;
+    }
+
+    mat-icon {
+        width: 36px;
+        height: 40px;
+    }
+
+    .text {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        position: absolute;
+        background: transparent;
+    }
+
+    &.read {
+        color: $grey-5;
+    }
+}
--- a/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts
+++ b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.ts
@ -0,0 +1,58 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ViewedPages, ViewedPagesControllerService } from '@redaction/red-ui-http';
+import { AppState, AppStateService } from '../../../state/app-state.service';
+
+@Component({
+    selector: 'redaction-page-indicator',
+    templateUrl: './page-indicator.component.html',
+    styleUrls: ['./page-indicator.component.scss']
+})
+export class PageIndicatorComponent implements OnChanges {
+    @Input() active: boolean;
+    @Input() number: number;
+    @Input() viewedPages: ViewedPages;
+
+    @Output() pageSelected = new EventEmitter<number>();
+
+    pageReadTimeout: number = null;
+
+    constructor(
+        private readonly _viewedPagesControllerService: ViewedPagesControllerService,
+        private readonly _appStateService: AppStateService
+    ) {}
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.active) {
+            this._handlePageRead();
+        }
+    }
+
+    get read() {
+        return this.viewedPages?.pages?.indexOf(this.number) >= 0;
+    }
+
+    private _handlePageRead() {
+        if (this.pageReadTimeout) {
+            clearTimeout(this.pageReadTimeout);
+        }
+        if (this.active && !this.read) {
+            this.pageReadTimeout = setTimeout(() => {
+                this._markPageRead();
+            }, 10 * 1000);
+        }
+    }
+
+    private _markPageRead() {
+        if (this.active && !this.read) {
+            this._viewedPagesControllerService
+                .addPage(
+                    { page: this.number },
+                    this._appStateService.activeProjectId,
+                    this._appStateService.activeFileId
+                )
+                .subscribe(() => {
+                    this.viewedPages?.pages?.push(this.number);
+                });
+        }
+    }
+}
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
@ -79,7 +79,6 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
        if (changes.isReviewer) {
            this._handleCustomActions();
        }
-        console.log(this.isReviewer);
    }

    ngAfterViewInit(): void {
--- a/apps/red-ui/src/assets/icons/general/page.svg
+++ b/apps/red-ui/src/assets/icons/general/page.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="40px" viewBox="0 0 36 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Page</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1099.000000, -440.000000)" fill="currentColor" fill-rule="nonzero">
+            <path d="M1135,440 L1135,472 L1127,480 L1099,480 L1099,440 L1135,440 Z M1133.66667,441.333333 L1100.33333,441.333333 L1100.33333,478.666667 L1125.66667,478.666667 L1125.66667,470.666667 L1133.66667,470.666667 L1133.66667,441.333333 Z M1133.111,472 L1127,472 L1127,478.111 L1133.111,472 Z" id="Page"></path>
+        </g>
+    </g>
+</svg>
--- a/apps/red-ui/src/assets/icons/general/pages.svg
+++ b/apps/red-ui/src/assets/icons/general/pages.svg
@ -1,33 +1,7 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="548.291px" height="548.291px" viewBox="0 0 548.291 548.291" style="enable-background:new 0 0 548.291 548.291;"
-	 xml:space="preserve">
-<g>
-	<path d="M189.2,293.611c-1.806-6.027-3.609-13.564-5.119-19.583h-0.296c-1.515,6.019-3.027,13.703-4.665,19.583l-6.037,21.554
-		h22.452L189.2,293.611z"/>
-	<path d="M486.201,196.124h-13.166V132.59c0-0.396-0.062-0.795-0.115-1.196c-0.021-2.523-0.825-5-2.552-6.963L364.657,3.677
-		c-0.033-0.031-0.064-0.042-0.085-0.073c-0.63-0.707-1.364-1.292-2.143-1.795c-0.229-0.157-0.461-0.286-0.702-0.421
-		c-0.672-0.366-1.387-0.671-2.121-0.892c-0.2-0.055-0.379-0.136-0.577-0.188C358.23,0.118,357.401,0,356.562,0H96.757
-		C84.894,0,75.256,9.651,75.256,21.502v174.613H62.092c-16.971,0-30.732,13.756-30.732,30.733v159.812
-		c0,16.968,13.761,30.731,30.732,30.731h13.164V526.79c0,11.854,9.638,21.501,21.501,21.501h354.776
-		c11.853,0,21.501-9.647,21.501-21.501V417.392h13.166c16.966,0,30.729-13.764,30.729-30.731V226.854
-		C516.93,209.872,503.167,196.124,486.201,196.124z M96.757,21.502h249.054v110.009c0,5.939,4.817,10.75,10.751,10.75h94.972v53.861
-		H96.757V21.502z M404.394,296.781v18.678h-37.361v24.104h41.733v18.846h-64.778v-101.55h62.674v18.835h-39.629v21.098h37.361
-		V296.781z M292.592,340.918c5.265,0,9.484-0.6,11.297-1.501v-21.25h-15.665v-17.933h37.816v53.502
-		c-7.081,2.404-20.492,5.724-33.9,5.724c-18.538,0-31.953-4.674-41.287-13.712c-9.347-8.736-14.475-21.996-14.321-36.926
-		c0.153-33.743,24.712-53.026,58.007-53.026c13.107,0,23.196,2.562,28.174,4.976l-4.819,18.381
-		c-5.575-2.415-12.494-4.373-23.648-4.373c-19.132,0-33.591,10.86-33.591,32.846C260.649,328.562,273.759,340.918,292.592,340.918z
-		 M231.399,358.409H206.69l-7.848-26.068h-29.066l-7.239,26.068h-23.809l31.042-101.555h30.124L231.399,358.409z M90.356,322.083
-		v36.325H67.607v-100.2c7.069-1.211,17.024-2.114,31.032-2.114c14.164,0,24.266,2.709,31.042,8.139
-		c6.478,5.121,10.833,13.566,10.833,23.497c0,9.954-3.308,18.394-9.326,24.115c-7.833,7.382-19.439,10.684-33,10.684
-		C95.172,322.535,92.458,322.398,90.356,322.083z M451.534,520.962H96.757v-103.57h354.776V520.962z M449.314,359.91
-		c-11.598,0-23.04-3.013-28.773-6.173l4.661-18.991c6.18,3.165,15.664,6.336,25.46,6.336c10.552,0,16.121-4.373,16.121-10.992
-		c0-6.337-4.814-9.959-17.014-14.322c-16.876-5.884-27.884-15.212-27.884-29.983c0-17.336,14.467-30.581,38.416-30.581
-		c11.463,0,19.89,2.415,25.915,5.124l-5.119,18.528c-4.072-1.959-11.296-4.816-21.248-4.816c-9.943,0-14.763,4.527-14.763,9.797
-		c0,6.479,5.729,9.328,18.835,14.312c17.942,6.619,26.363,15.969,26.363,30.288C490.295,345.443,477.192,359.91,449.314,359.91z"/>
-	<path d="M117.765,288.341c0-9.341-6.478-14.915-17.911-14.915c-4.682,0-7.848,0.451-9.503,0.903v29.985
-		c1.95,0.451,4.37,0.592,7.677,0.592C110.246,304.907,117.765,298.74,117.765,288.341z"/>
-</g>
+<?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>pages</title>
+    <g id="pages" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
+        <path d="M100,0 L100,80 L80,80 L80,100 L0,100 L0,20 L20,20 L20,0 L100,0 Z M20,30 L10,30 L10,90 L70,90 L70,80 L20,80 L20,30 Z M90,10 L30,10 L30,70 L90,70 L90,10 Z M80,40 L80,50 L40,50 L40,40 L80,40 Z M80,20 L80,30 L40,30 L40,20 L80,20 Z"  fill-rule="nonzero"></path>
+    </g>
 </svg>
--- a/docker/common/nginx/nginx.conf.template
+++ b/docker/common/nginx/nginx.conf.template
@ -17,6 +17,9 @@ server {
  location /project {
        proxy_pass $API_URL;
  }
+  location /viewedPages {
+        proxy_pass $API_URL;
+  }
  location /version {
        proxy_pass $API_URL;
  }
--- a/libs/red-ui-http/src/lib/api/viewedPagesController.service.ts
+++ b/libs/red-ui-http/src/lib/api/viewedPagesController.service.ts
@ -23,7 +23,7 @@ import { Configuration } from '../configuration';

@Injectable()
 export class ViewedPagesControllerService {
-    protected basePath = '//timo-redaction-dev.iqser.cloud/';
+    protected basePath = '';
    public defaultHeaders = new HttpHeaders();
    public configuration = new Configuration();