Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-3988: extract paginator component

Browse Source
This commit is contained in:
Dan Percic 2022-05-22 10:32:58 +03:00
parent 72825b9df0
commit afde721ddf
18 changed files with 154 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.html
View File

@ -1,27 +0,0 @@
<div *ngIf="pdf.loaded$ | async" class="pagination noselect">
<div (click)="pdf.navigatePreviousPage()">
<mat-icon class="chevron-icon" svgIcon="red:nav-prev"></mat-icon>
</div>
<div>
<input
#pageInput
(change)="pdf.navigateTo(pageInput.value)"
[max]="pdf.totalPages$ | async"
[value]="pdf.currentPage$ | async"
class="page-number-input"
min="1"
type="number"
/>
</div>
<div class="separator">/</div>
<div>
{{ pdf.totalPages$ | async }}
</div>
<div (click)="pdf.navigateNextPage()">
<mat-icon class="chevron-icon" svgIcon="red:nav-next"></mat-icon>
</div>
</div>

62
apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.scss
View File

@ -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);
}
}
}

4
apps/red-ui/src/app/modules/file-preview/components/pdf-paginator/pdf-paginator.component.ts
View File

@ -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);

1
apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.html Normal file
View File

@ -0,0 +1 @@
<input #input (change)="upload($event.target['files'])" accept="application/pdf" class="file-upload-input" type="file" />

7
apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.scss Normal file
View File

@ -0,0 +1,7 @@
:host {
position: absolute;
}
.file-upload-input {
visibility: hidden;
}

38
apps/red-ui/src/app/modules/pdf-viewer/compare-file-input.component.ts → apps/red-ui/src/app/modules/pdf-viewer/components/compare-file-input/compare-file-input.component.ts
View File

@ -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: `<input
#input
(change)="uploadFile($event.target['files'])"
accept="application/pdf"
class="file-upload-input"
type="file"
/>`,
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();

27
apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.html Normal file
View File

@ -0,0 +1,27 @@
<div [style.visibility]="(pdf.loaded$ | async) ? 'visible' : 'hidden'" class="pagination noselect">
<div (click)="pdf.navigatePreviousPage()">
<mat-icon class="chevron-icon" svgIcon="red:nav-prev"></mat-icon>
</div>
<div>
<input
#pageInput
(change)="pdf.navigateTo(pageInput.value)"
[max]="pdf.totalPages$ | async"
[value]="pdf.currentPage$ | async"
class="page-number-input"
min="1"
type="number"
/>
</div>
<div class="separator">/</div>
<div>
{{ pdf.totalPages$ | async }}
</div>
<div (click)="pdf.navigateNextPage()">
<mat-icon class="chevron-icon" svgIcon="red:nav-next"></mat-icon>
</div>
</div>

61
apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss Normal file
View File

@ -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);
}
}
}

11
apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.ts Normal file
View File

@ -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) {}
}

5
apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html Normal file
View File

@ -0,0 +1,5 @@
<div #viewer></div>
<redaction-compare-file-input></redaction-compare-file-input>
<redaction-paginator></redaction-paginator>

12
apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.scss Normal file
View File

@ -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;
}

17
apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts
View File

@ -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: ` <div #viewer></div>
<redaction-compare-file-input></redaction-compare-file-input>`,
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;

14
apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.module.ts
View File

@ -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 {}

4
apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
View File

@ -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;

4
apps/red-ui/src/app/modules/pdf-viewer/services/page-rotation.service.ts
View File

@ -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<Record<number, number>>({});

4
apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts
View File

@ -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')),

4
apps/red-ui/src/app/modules/pdf-viewer/services/tooltips.service.ts
View File

@ -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');

4
apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
View File

@ -14,9 +14,7 @@ const divider: IHeaderElement = {
type: 'divider',
};
@Injectable({
providedIn: 'root',
})
@Injectable()
export class ViewerHeaderService {
#buttons: Map<HeaderElementType, IHeaderElement>;
readonly #config = new Map<HeaderElementType, boolean>([