diff --git a/apps/red-ui/proxy.conf.json b/apps/red-ui/proxy.conf.json index 3a34f90c6..5dab76d13 100644 --- 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, diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index e80b66f50..d890db0d3 100644 --- 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, diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 6493a7f9a..08912aece 100644 --- 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) { 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 6f796120d..057772813 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 @@ -111,15 +111,14 @@ class="pages" tabindex="0" > -
- {{ pageNumber }} -
+
{ @@ -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(); }); diff --git 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 new file mode 100644 index 000000000..47d7bb481 --- /dev/null +++ b/apps/red-ui/src/app/screens/file/page-indicator/page-indicator.component.html @@ -0,0 +1,12 @@ +
+ +
+ {{ number }} +
+
diff --git 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 new file mode 100644 index 000000000..0be88c00d --- /dev/null +++ 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; + } +} diff --git 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 new file mode 100644 index 000000000..6f068d39b --- /dev/null +++ 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(); + + 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); + }); + } + } +} diff --git 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 index a6dc3329b..27365255d 100644 --- 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 { diff --git a/apps/red-ui/src/assets/icons/general/page.svg b/apps/red-ui/src/assets/icons/general/page.svg new file mode 100644 index 000000000..8c053a5a7 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/page.svg @@ -0,0 +1,9 @@ + + + Page + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/pages.svg b/apps/red-ui/src/assets/icons/general/pages.svg index 82afe4a31..6c1cb6e48 100644 --- a/apps/red-ui/src/assets/icons/general/pages.svg +++ b/apps/red-ui/src/assets/icons/general/pages.svg @@ -1,33 +1,7 @@ - - - - - - - - - + + + pages + + + diff --git a/docker/common/nginx/nginx.conf.template b/docker/common/nginx/nginx.conf.template index 7fdbfb6e5..9f5016571 100644 --- 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; } diff --git a/libs/red-ui-http/src/lib/api/viewedPagesController.service.ts b/libs/red-ui-http/src/lib/api/viewedPagesController.service.ts index dc6977dc6..46b0f1a39 100644 --- 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();