diff --git a/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.html b/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.html index 895c09618..e69de29bb 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.html @@ -1,27 +0,0 @@ - diff --git a/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.scss b/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.scss index 776be77f4..2d79be4aa 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.scss @@ -9,65 +9,3 @@ margin-left: 15px; } } - -.pagination { - z-index: 1; - position: absolute; - bottom: 20px; - left: 50%; - transform: translate(-50%); - background: var(--iqser-white); - color: var(--iqser-grey-7); - border: 1px solid var(--iqser-grey-7); - border-radius: 8px; - padding: 6px 2px; - display: flex; - justify-content: center; - align-items: center; - - > div { - height: 16px; - cursor: default; - } - - .separator { - padding-left: 2px; - padding-right: 2px; - } - - .page-number-input { - -moz-appearance: textfield; - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; - } - - color: var(--iqser-grey-7); - text-decoration: none; - outline: none; - border: none; - padding: 0; - margin: 0; - cursor: pointer; - - &:hover, - &:focus { - font-weight: bold; - border-bottom: 1px solid var(--iqser-grey-7); - } - } - - .chevron-icon { - height: 16px; - transform: rotate(-90deg); - cursor: pointer; - padding-left: 4px; - padding-right: 4px; - - &:hover { - color: var(--iqser-accent); - } - } -} diff --git a/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.ts b/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.ts index 835071b21..6cb1f2126 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.ts @@ -133,7 +133,7 @@ export class PdfPaginatorComponent extends AutoUnsubscribe implements OnInit, On this._configureElements(); this._configureTextPopup(); - this.pdf.documentViewer.addEventListener('textSelected', (quads, selectedText, pageNumber: number) => { + this.pdf.documentViewer.addEventListener('textSelected', (_, selectedText, pageNumber: number) => { this._selectedText = selectedText; if (this.pdf.isCompare && pageNumber % 2 === 0) { @@ -162,8 +162,6 @@ export class PdfPaginatorComponent extends AutoUnsubscribe implements OnInit, On } private _configureElements() { - // this._viewerHeaderService.initialize(this.compareFileInput); - const dossierTemplateId = this.dossier.dossierTemplateId; const color = this._annotationDrawService.getAndConvertColor(dossierTemplateId, 'manual'); this.pdf.setRectangleToolStyles(color); diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html new file mode 100644 index 000000000..07516d39f --- /dev/null +++ b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html @@ -0,0 +1 @@ + diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.scss b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.scss new file mode 100644 index 000000000..69bf74748 --- /dev/null +++ b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.scss @@ -0,0 +1,7 @@ +:host { + position: absolute; +} + +.file-upload-input { + visibility: hidden; +} diff --git a/apps/red-ui/src/app/modules/pdf-viewer/compare-file-input.component.ts b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts similarity index 77% rename from apps/red-ui/src/app/modules/pdf-viewer/compare-file-input.component.ts rename to apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts index 84eeaf965..29fe1f4aa 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/compare-file-input.component.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts @@ -1,35 +1,18 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; -import { environment } from '@environments/environment'; -import { loadCompareDocumentWrapper } from '../file-preview/utils/compare-mode.utils'; -import { HeaderElements } from '../file-preview/utils/constants'; +import { loadCompareDocumentWrapper } from '../../../file-preview/utils/compare-mode.utils'; +import { HeaderElements } from '../../../file-preview/utils/constants'; import { ConfirmationDialogInput, LoadingService } from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { FilesMapService } from '@services/files/files-map.service'; +import { FilesMapService } from '../../../../services/files/files-map.service'; import { ActivatedRoute } from '@angular/router'; -import { SharedDialogService } from '@shared/services/dialog.service'; -import { PdfViewer } from './services/pdf-viewer.service'; -import { ViewerHeaderService } from './services/viewer-header.service'; +import { SharedDialogService } from '../../../shared/services/dialog.service'; +import { PdfViewer } from '../../services/pdf-viewer.service'; +import { ViewerHeaderService } from '../../services/viewer-header.service'; @Component({ selector: 'redaction-compare-file-input', - template: ``, - styles: [ - ` - :host { - position: absolute; - } - - .file-upload-input { - visibility: hidden; - } - `, - ], + templateUrl: './compare-file-input.component.html', + styleUrls: ['./compare-file-input.component.scss'], }) export class CompareFileInputComponent { @ViewChild('input', { static: true }) readonly input: ElementRef; @@ -43,7 +26,7 @@ export class CompareFileInputComponent { private readonly _viewerHeaderService: ViewerHeaderService, ) {} - uploadFile(files: FileList) { + upload(files: FileList) { const fileToCompare = files[0]; this.input.nativeElement.value = null; @@ -56,11 +39,10 @@ export class CompareFileInputComponent { fileReader.onload = async () => { const pdfNet = this._pdf.PDFNet; - await pdfNet.initialize(environment.licenseKey ? window.atob(environment.licenseKey) : null); - const compareDocument = await pdfNet.PDFDoc.createFromBuffer(fileReader.result as ArrayBuffer); const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._pdf.blob.arrayBuffer()); + // TODO: transform these functions into methods const loadCompareDocument = async () => { this._loadingService.start(); const mergedDocument = await pdfNet.PDFDoc.create(); diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.html b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.html new file mode 100644 index 000000000..242a379e1 --- /dev/null +++ b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.html @@ -0,0 +1,27 @@ + diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss new file mode 100644 index 000000000..21be9c450 --- /dev/null +++ b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss @@ -0,0 +1,61 @@ +.pagination { + z-index: 1; + position: absolute; + bottom: 20px; + left: calc(50% - (var(--workload-width) / 2)); + transform: translate(-50%); + background: var(--iqser-white); + color: var(--iqser-grey-7); + border: 1px solid var(--iqser-grey-7); + border-radius: 8px; + padding: 6px 2px; + display: flex; + justify-content: center; + align-items: center; + + > div { + height: 16px; + cursor: default; + } + + .separator { + padding-left: 2px; + padding-right: 2px; + } + + .page-number-input { + -moz-appearance: textfield; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + color: var(--iqser-grey-7); + text-decoration: none; + outline: none; + border: none; + padding: 0; + margin: 0; + cursor: pointer; + + &:hover, + &:focus { + font-weight: bold; + border-bottom: 1px solid var(--iqser-grey-7); + } + } + + .chevron-icon { + height: 16px; + transform: rotate(-90deg); + cursor: pointer; + padding-left: 4px; + padding-right: 4px; + + &:hover { + color: var(--iqser-accent); + } + } +} diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.ts b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.ts new file mode 100644 index 000000000..ff97976ea --- /dev/null +++ b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; +import { PdfViewer } from '../../services/pdf-viewer.service'; + +@Component({ + selector: 'redaction-paginator', + templateUrl: './paginator.component.html', + styleUrls: ['./paginator.component.scss'], +}) +export class PaginatorComponent { + constructor(readonly pdf: PdfViewer) {} +} diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html new file mode 100644 index 000000000..13cb7017f --- /dev/null +++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html @@ -0,0 +1,5 @@ +
+ + + + diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.scss b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.scss new file mode 100644 index 000000000..1301cc73e --- /dev/null +++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.scss @@ -0,0 +1,12 @@ +:host { + --workload-width: 350px; + --header-height: 111px; +} + +div { + width: calc(100% - var(--workload-width)); + height: calc(100% - var(--header-height)); + bottom: 0; + left: 0; + position: absolute; +} diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts index 423783000..3946c2a22 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts @@ -2,23 +2,12 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { PdfViewer } from './services/pdf-viewer.service'; import { REDAnnotationManager } from './services/annotation-manager.service'; import { ViewerHeaderService } from './services/viewer-header.service'; -import { CompareFileInputComponent } from './compare-file-input.component'; +import { CompareFileInputComponent } from './components/compare-file-input/compare-file-input.component'; @Component({ selector: 'redaction-pdf-viewer', - template: `
- `, - styles: [ - ` - div { - width: calc(100% - 350px); - height: calc(100% - 111px); - bottom: 0; - left: 0; - position: absolute; - } - `, - ], + templateUrl: './pdf-viewer.component.html', + styleUrls: ['./pdf-viewer.component.scss'], }) export class PdfViewerComponent implements OnInit { @ViewChild('viewer', { static: true }) private readonly _viewer: ElementRef; diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts index 85bb7f5e0..a6a6b4ff0 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts @@ -1,11 +1,19 @@ import { NgModule } from '@angular/core'; import { PdfViewerComponent } from './pdf-viewer.component'; import { CommonModule } from '@angular/common'; -import { CompareFileInputComponent } from './compare-file-input.component'; +import { CompareFileInputComponent } from './components/compare-file-input/compare-file-input.component'; +import { PageRotationService } from './services/page-rotation.service'; +import { REDAnnotationManager } from './services/annotation-manager.service'; +import { PdfViewer } from './services/pdf-viewer.service'; +import { TooltipsService } from './services/tooltips.service'; +import { ViewerHeaderService } from './services/viewer-header.service'; +import { PaginatorComponent } from './components/paginator/paginator.component'; +import { MatIconModule } from '@angular/material/icon'; @NgModule({ - declarations: [PdfViewerComponent, CompareFileInputComponent], + declarations: [PdfViewerComponent, CompareFileInputComponent, PaginatorComponent], exports: [PdfViewerComponent], - imports: [CommonModule], + imports: [CommonModule, MatIconModule], + providers: [PdfViewer, REDAnnotationManager, PageRotationService, TooltipsService, ViewerHeaderService], }) export class PdfViewerModule {} diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts index 9f7f4b267..c3d4d00be 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts @@ -9,9 +9,7 @@ import { getId, isStringOrWrapper } from '../utils/functions'; import AnnotationManager = Core.AnnotationManager; import Annotation = Core.Annotations.Annotation; -@Injectable({ - providedIn: 'root', -}) +@Injectable() export class REDAnnotationManager { annotationSelected$: Observable<[Annotation[], string]>; #manager: AnnotationManager; diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/page-rotation.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/page-rotation.service.ts index f4d09b597..b8eae0e25 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/page-rotation.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/page-rotation.service.ts @@ -20,9 +20,7 @@ import { NGXLogger } from 'ngx-logger'; const ONE_ROTATION_DEGREE = 90; -@Injectable({ - providedIn: 'root', -}) +@Injectable() export class PageRotationService { readonly #rotations$ = new BehaviorSubject>({}); diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts index 4e70d5a3b..0c4230cc8 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts @@ -21,9 +21,7 @@ import TextHighlightAnnotation = Core.Annotations.TextHighlightAnnotation; import DocumentViewer = Core.DocumentViewer; import Color = Core.Annotations.Color; -@Injectable({ - providedIn: 'root', -}) +@Injectable() export class PdfViewer { readonly currentPage$ = this._activatedRoute.queryParamMap.pipe( map(params => Number(params.get('page') ?? '1')), diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts index 16652cac7..23bf1c8d7 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts @@ -6,9 +6,7 @@ import { TranslateService } from '@ngx-translate/core'; import { BASE_HREF_FN, BaseHrefFn } from '../../../tokens'; import { PdfViewer } from './pdf-viewer.service'; -@Injectable({ - providedIn: 'root', -}) +@Injectable() export class TooltipsService { readonly #enableIcon = this._convertPath('/assets/icons/general/pdftron-action-enable-tooltips.svg'); readonly #disableIcon = this._convertPath('/assets/icons/general/pdftron-action-disable-tooltips.svg'); diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts index 1a627f52b..35415cdf6 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts +++ b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts @@ -14,9 +14,7 @@ const divider: IHeaderElement = { type: 'divider', }; -@Injectable({ - providedIn: 'root', -}) +@Injectable() export class ViewerHeaderService { #buttons: Map; readonly #config = new Map([