From 0ac68251542d66689950cbcc4b90f385ea1c558d Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Thu, 30 Nov 2023 14:23:57 -0800 Subject: [PATCH] Revert "Feature-parity migration to ngx-extended-pdf-viewer" This reverts commit 81bbc8405a1310a9221423fe9e1eae421a271b98. --- src-ui/angular.json | 9 ++- src-ui/package-lock.json | 63 ++++++++++++----- src-ui/package.json | 2 +- src-ui/src/app/app.module.ts | 4 +- .../common/toasts/toasts.component.html | 8 +-- .../document-detail.component.html | 70 +++++++++---------- .../document-detail.component.spec.ts | 4 +- .../document-detail.component.ts | 51 ++++---------- 8 files changed, 104 insertions(+), 107 deletions(-) diff --git a/src-ui/angular.json b/src-ui/angular.json index 605835c5e..1fef2fe7d 100644 --- a/src-ui/angular.json +++ b/src-ui/angular.json @@ -65,15 +65,18 @@ "src/assets", "src/manifest.webmanifest", { - "glob": "**/*", - "input": "node_modules/ngx-extended-pdf-viewer/assets/", - "output": "/assets/" + "glob": "pdf.worker.min.js", + "input": "node_modules/pdfjs-dist/build/", + "output": "/assets/js/" } ], "styles": [ "src/styles.scss" ], "scripts": [], + "allowedCommonJsDependencies": [ + "ng2-pdf-viewer" + ], "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json index dcf0e036d..13f060d60 100644 --- a/src-ui/package-lock.json +++ b/src-ui/package-lock.json @@ -25,9 +25,9 @@ "bootstrap": "^5.3.2", "file-saver": "^2.0.5", "mime-names": "^1.0.0", + "ng2-pdf-viewer": "^10.0.0", "ngx-color": "^9.0.0", "ngx-cookie-service": "^16.0.1", - "ngx-extended-pdf-viewer": "^18.1.9", "ngx-file-drop": "^16.0.0", "ngx-ui-tour-ng-bootstrap": "^13.0.6", "rxjs": "^7.8.1", @@ -8863,6 +8863,12 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dommatrix": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz", + "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==", + "deprecated": "dommatrix is no longer maintained. Please use @thednp/dommatrix." + }, "node_modules/domutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", @@ -13521,11 +13527,6 @@ "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "dev": true }, - "node_modules/lodash.deburr": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz", - "integrity": "sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ==" - }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -14208,6 +14209,18 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ng2-pdf-viewer": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/ng2-pdf-viewer/-/ng2-pdf-viewer-10.0.0.tgz", + "integrity": "sha512-zEefcAsTpDoxFceQYs3ycPMaUAkt5UX4OcTstVQoNqRK6w+vOY+V8z8aFCuBwnt+7iN1EHaIpquOf4S9mWc04g==", + "dependencies": { + "pdfjs-dist": "~2.16.105", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "pdfjs-dist": "~2.16.105" + } + }, "node_modules/ngx-color": { "version": "9.0.0", "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-9.0.0.tgz", @@ -14234,19 +14247,6 @@ "@angular/core": "^16.0.0" } }, - "node_modules/ngx-extended-pdf-viewer": { - "version": "18.1.9", - "resolved": "https://registry.npmjs.org/ngx-extended-pdf-viewer/-/ngx-extended-pdf-viewer-18.1.9.tgz", - "integrity": "sha512-puISS6h1JoHObo0BZK68EhlWlI215AWP5RJ5D86yuWiBgVYeNUa8JrEVnaJtQ/bI6WbfvleaBe8NBwKnM0Bqsw==", - "dependencies": { - "lodash.deburr": "^4.1.0", - "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/common": ">=12.0.0 <18.0.0", - "@angular/core": ">=12.0.0 <18.0.0" - } - }, "node_modules/ngx-file-drop": { "version": "16.0.0", "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-16.0.0.tgz", @@ -15456,6 +15456,23 @@ "node": ">=8" } }, + "node_modules/pdfjs-dist": { + "version": "2.16.105", + "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz", + "integrity": "sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==", + "dependencies": { + "dommatrix": "^1.0.3", + "web-streams-polyfill": "^3.2.1" + }, + "peerDependencies": { + "worker-loader": "^3.0.8" + }, + "peerDependenciesMeta": { + "worker-loader": { + "optional": true + } + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -18101,6 +18118,14 @@ "defaults": "^1.0.3" } }, + "node_modules/web-streams-polyfill": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", + "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==", + "engines": { + "node": ">= 8" + } + }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", diff --git a/src-ui/package.json b/src-ui/package.json index 713fccbb9..39e71d033 100644 --- a/src-ui/package.json +++ b/src-ui/package.json @@ -27,9 +27,9 @@ "bootstrap": "^5.3.2", "file-saver": "^2.0.5", "mime-names": "^1.0.0", + "ng2-pdf-viewer": "^10.0.0", "ngx-color": "^9.0.0", "ngx-cookie-service": "^16.0.1", - "ngx-extended-pdf-viewer": "^18.1.9", "ngx-file-drop": "^16.0.0", "ngx-ui-tour-ng-bootstrap": "^13.0.6", "rxjs": "^7.8.1", diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 87d97c01a..e3cef8c95 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -51,7 +51,7 @@ import { SavedViewWidgetComponent } from './components/dashboard/widgets/saved-v import { StatisticsWidgetComponent } from './components/dashboard/widgets/statistics-widget/statistics-widget.component' import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component' import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component' -import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer' +import { PdfViewerModule } from 'ng2-pdf-viewer' import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-widget/welcome-widget.component' import { YesNoPipe } from './pipes/yes-no.pipe' import { FileSizePipe } from './pipes/file-size.pipe' @@ -265,11 +265,11 @@ function initializeApp(settings: SettingsService) { FormsModule, ReactiveFormsModule, NgxFileDropModule, + PdfViewerModule, NgSelectModule, ColorSliderModule, TourNgBootstrapModule, DragDropModule, - NgxExtendedPdfViewerModule, ], providers: [ { diff --git a/src-ui/src/app/components/common/toasts/toasts.component.html b/src-ui/src/app/components/common/toasts/toasts.component.html index 67e3e2335..2372911ae 100644 --- a/src-ui/src/app/components/common/toasts/toasts.component.html +++ b/src-ui/src/app/components/common/toasts/toasts.component.html @@ -16,7 +16,7 @@

{{toast.content}}

-
+
URL
{{ toast.error.url }}
Status
@@ -24,12 +24,6 @@
Error
{{ getErrorText(toast.error) }}
- -
-
Error
-
{{ getErrorText(toast.error) }}
-
-
- + +
+ +
+ + + + + +
+ +
+
+ +
+
- - - -
- - -
- - - - - -
- -
-
- -
-
- diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts index 871c8ec71..9f49e737b 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts @@ -653,14 +653,14 @@ describe('DocumentDetailComponent', () => { it('should support password-protected PDFs with a password field', () => { initNormally() component.onError({ name: 'PasswordException' }) // normally dispatched by pdf viewer - expect(component.showPasswordField).toBeTruthy() + expect(component.requiresPassword).toBeTruthy() fixture.detectChanges() expect( fixture.debugElement.query(By.css('input[type=password]')) ).not.toBeUndefined() component.password = 'foo' component.pdfPreviewLoaded({ numPages: 1000 } as any) - expect(component.showPasswordField).toBeFalsy() + expect(component.requiresPassword).toBeFalsy() }) it('should support Enter key in password field', () => { diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts index e4a7ac6e3..368f1e632 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.ts @@ -1,10 +1,4 @@ -import { - Component, - OnInit, - OnDestroy, - ViewChild, - ChangeDetectorRef, -} from '@angular/core' +import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core' import { FormArray, FormControl, FormGroup } from '@angular/forms' import { ActivatedRoute, Router } from '@angular/router' import { @@ -27,6 +21,7 @@ import { DocumentService } from 'src/app/services/rest/document.service' import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component' import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component' import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component' +import { PDFDocumentProxy } from 'ng2-pdf-viewer' import { ToastService } from 'src/app/services/toast.service' import { TextComponent } from '../common/input/text/text.component' import { SettingsService } from 'src/app/services/settings.service' @@ -74,9 +69,6 @@ import { } from 'src/app/data/paperless-custom-field' import { PaperlessCustomFieldInstance } from 'src/app/data/paperless-custom-field-instance' import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service' -import { InvalidPDFException } from 'ngx-extended-pdf-viewer/lib/events/invalid-pdf-exception' -import { PagesLoadedEvent } from 'ngx-extended-pdf-viewer/lib/events/pages-loaded-event' -import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer' enum DocumentDetailNavIDs { Details = 1, @@ -144,7 +136,8 @@ export class DocumentDetailComponent unsubscribeNotifier: Subject = new Subject() docChangeNotifier: Subject = new Subject() - showPasswordField: boolean = false + requiresPassword: boolean = false + password: string ogDate: Date @@ -167,8 +160,6 @@ export class DocumentDetailComponent DocumentDetailNavIDs = DocumentDetailNavIDs activeNavID: number - setPasswordCallback: (password: string) => void - constructor( private documentsService: DocumentService, private route: ActivatedRoute, @@ -185,23 +176,9 @@ export class DocumentDetailComponent private permissionsService: PermissionsService, private userService: UserService, private customFieldsService: CustomFieldsService, - private http: HttpClient, - private ref: ChangeDetectorRef + private http: HttpClient ) { super() - pdfDefaultOptions.passwordPrompt = { - // ngx-extended-pdf-viewer PasswordPrompt - open: () => { - this.showPasswordField = true - ref.detectChanges() // manually trigger change detection - }, - setUpdateCallback: ( - updateCallback: (password: string) => void, - reason: 1 | 2 - ) => { - this.setPasswordCallback = updateCallback - }, - } } titleKeyUp(event) { @@ -420,6 +397,7 @@ export class DocumentDetailComponent updateComponent(doc: PaperlessDocument) { this.document = doc + this.requiresPassword = false // this.customFields = doc.custom_fields.concat([]) this.updateFormForCustomFields() this.documentsService @@ -749,21 +727,20 @@ export class DocumentDetailComponent }) } - onPagesLoaded(event: PagesLoadedEvent) { - this.previewNumPages = event.pagesCount + pdfPreviewLoaded(pdf: PDFDocumentProxy) { + this.previewNumPages = pdf.numPages + if (this.password) this.requiresPassword = false } - onPdfLoadingFailed(event: InvalidPDFException) { - this.toastService.showError($localize`Error loading PDF`, { - error: event.message, - }) - this.ref.detectChanges() // manually trigger change detection + onError(event) { + if (event.name == 'PasswordException') { + this.requiresPassword = true + } } onPasswordKeyUp(event: KeyboardEvent) { if ('Enter' == event.key) { - this.showPasswordField = false - this.setPasswordCallback((event.target as HTMLInputElement).value) + this.password = (event.target as HTMLInputElement).value } }