From 04cc33b18e24059cb3278232dc80bb24a35790eb Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Mon, 12 Jun 2023 01:06:40 +0300 Subject: [PATCH] RED-6829: update pdf event listeners to run in ng zone --- .../base-screen/base-screen.component.html | 2 +- .../document-info.component.html | 112 +++++++++--------- .../document-info/document-info.component.ts | 30 ++--- .../file-workload.component.html | 1 + .../file-preview-screen.component.ts | 76 +++++------- .../services/document-info.service.ts | 15 ++- .../services/file-preview-state.service.ts | 26 ++-- .../services/pdf-proxy.service.ts | 4 +- .../paginator/paginator.component.html | 4 +- .../services/annotation-draw.service.ts | 3 +- .../services/document-viewer.service.ts | 112 ++++++++++-------- .../file-actions/file-actions.component.ts | 4 +- .../expandable-file-actions.component.html | 2 +- .../expandable-file-actions.component.ts | 2 +- 14 files changed, 194 insertions(+), 199 deletions(-) diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index a92bc2c52..c50d2e68e 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -47,7 +47,7 @@ - + diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html index 5b960b9f3..a6d75907c 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html @@ -1,62 +1,58 @@ - -
+
+
+ + + +
+
+ +
+
+
+
{{ attr.label }}:
+
{{ attr.value ? (isDate(attr) ? (attr.value | date : 'd MMM yyyy') : attr.value) : '-' }}
+
+
+ +
- + + +
- +
+ + {{ 'file-preview.tabs.document-info.details.pages' | translate : { pages: _state.file().numberOfPages } }} +
+ +
+ + +
+ +
+ + +
+ +
+ + {{ _dossierTemplate().name }}
- -
-
-
-
{{ attr.label }}:
-
{{ attr.value ? (isDate(attr) ? (attr.value | date : 'd MMM yyyy') : attr.value) : '-' }}
-
-
- -
-
- - -
- -
- - {{ 'file-preview.tabs.document-info.details.pages' | translate : { pages: _state.file().numberOfPages } }} -
- -
- - -
- -
- - -
- -
- - {{ ctx.dossierTemplateName }} -
-
-
- +
diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts index 03160f154..1d9e5ee07 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts @@ -1,14 +1,13 @@ -import { Component, inject } from '@angular/core'; +import { Component, computed, inject } from '@angular/core'; import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service'; import { DocumentInfoService } from '../../services/document-info.service'; -import { combineLatest, switchMap } from 'rxjs'; import { PermissionsService } from '@services/permissions.service'; import { FilePreviewStateService } from '../../services/file-preview-state.service'; -import { map } from 'rxjs/operators'; import { type FileAttributeConfigType, FileAttributeConfigTypes } from '@red/domain'; import { FilePreviewDialogService } from '../../services/file-preview-dialog.service'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; import { ContextComponent } from '@iqser/common-ui'; +import { toSignal } from '@angular/core/rxjs-interop'; interface FileAttribute { label: string; @@ -17,7 +16,6 @@ interface FileAttribute { } interface Context { - readonly dossierTemplateName: string; readonly fileAttributes: FileAttribute[]; } @@ -28,28 +26,22 @@ interface Context { }) export class DocumentInfoComponent extends ContextComponent { protected readonly _state = inject(FilePreviewStateService); + protected readonly _dossierTemplate = toSignal(inject(DossierTemplatesService).getEntityChanged$(this._state.dossierTemplateId)); + protected readonly _fileAttributesConfig = toSignal(inject(FileAttributesService).fileAttributesConfig$); + protected readonly _attributes = toSignal( + this.documentInfoService.fileAttributes$(this._state.fileId, this._state.dossierId, this._state.dossierTemplateId), + ); + protected readonly _fileAttributes = computed(() => { + this._fileAttributesConfig(); + return this._attributes(); + }); constructor( - fileAttributesService: FileAttributesService, readonly permissionsService: PermissionsService, readonly documentInfoService: DocumentInfoService, private readonly _dialogService: FilePreviewDialogService, - private readonly _dossierTemplatesService: DossierTemplatesService, ) { super(); - const fileAttributes$ = combineLatest([this._state.file$, this._state.dossier$, fileAttributesService.fileAttributesConfig$]).pipe( - switchMap(([file, dossier]) => this.documentInfoService.fileAttributes$(file.id, dossier.id, dossier.dossierTemplateId)), - ); - - const dossierTemplateName$ = this._state.dossier$.pipe( - switchMap(dossier => this._dossierTemplatesService.getEntityChanged$(dossier.dossierTemplateId)), - map(dossierTemplate => dossierTemplate.name), - ); - - super._initContext({ - dossierTemplateName: dossierTemplateName$, - fileAttributes: fileAttributes$, - }); } edit() { diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html index 58572c49b..56ed7fa4c 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html @@ -26,6 +26,7 @@ >
{ + if (this._documentViewer.loaded()) { + this._pageRotationService.clearRotations(); + this._viewerHeaderService.disable(ROTATION_ACTION_BUTTONS); + this.viewerReady().then(); + } + }, + { allowSignalWrites: true }, + ); + + effect(() => { + if (this._documentViewer.pageComplete()) { + this.#setExcludedPageStyles(); + } + }); + + effect(() => { + const selectedText = this._documentViewer.selectedText(); + const canPerformActions = this.pdfProxyService.canPerformActions(); + const isCurrentPageExcluded = this.state.file().isPageExcluded(this.pdf.currentPage()); + + if ((selectedText.length > 2 || this._isJapaneseString(selectedText)) && canPerformActions && !isCurrentPageExcluded) { + this.pdf.enable(textActions); + } else { + this.pdf.disable(textActions); + } + }); } get changed() { return this._pageRotationService.hasRotations(); } - get #textSelected$() { - const textSelected$ = combineLatest([ - this._documentViewer.textSelected$, - toObservable(this.pdfProxyService.canPerformActions, { injector: this._injector }), - this.state.file$, - ]); - - return textSelected$.pipe( - tap(([selectedText, canPerformActions, file]) => { - const isCurrentPageExcluded = file.isPageExcluded(this.pdf.currentPage()); - - if ((selectedText.length > 2 || this._isJapaneseString(selectedText)) && canPerformActions && !isCurrentPageExcluded) { - this.pdf.enable(textActions); - } else { - this.pdf.disable(textActions); - } - }), - ); - } - get #earmarks$() { const isEarmarksViewMode$ = this._viewModeService.viewMode$.pipe(filter(() => this._viewModeService.isEarmarks())); @@ -440,17 +448,6 @@ export class FilePreviewScreenComponent } loadAnnotations() { - const documentLoaded$ = this._documentViewer.loaded$.pipe( - tap(loaded => { - if (!loaded) { - return; - } - this._pageRotationService.clearRotations(); - this._viewerHeaderService.disable(ROTATION_ACTION_BUTTONS); - return this.viewerReady(); - }), - ); - const annotations$ = this._fileDataService.annotations$.pipe( startWith([] as AnnotationWrapper[]), pairwise(), @@ -471,7 +468,7 @@ export class FilePreviewScreenComponent ), ); - return combineLatest([currentPageAnnotations$, documentLoaded$]).pipe( + return combineLatest([currentPageAnnotations$, this._documentViewer.loaded$]).pipe( filter(([, loaded]) => loaded), map(([annotations]) => annotations), map(annotations => this.drawChangedAnnotations(...annotations)), @@ -608,23 +605,10 @@ export class FilePreviewScreenComponent .pipe(tap(() => this.#handleDeletedFile())) .subscribe(); - this.addActiveScreenSubscription = combineLatest([this._viewModeService.viewMode$, this.state.file$]) - .pipe( - filter(([viewMode, file]) => viewMode === ViewModes.TEXT_HIGHLIGHTS && !file.hasHighlights), - tap(() => this._viewModeService.switchToStandard()), - ) - .subscribe(); - - this.addActiveScreenSubscription = this._documentViewer.pageComplete$.subscribe(() => { - this.#setExcludedPageStyles(); - }); - this.addActiveScreenSubscription = this._documentViewer.keyUp$.subscribe($event => { this.handleKeyEvent($event); }); - this.addActiveScreenSubscription = this.#textSelected$.subscribe(); - this.addActiveScreenSubscription = this.#earmarks$.subscribe(); this.addActiveScreenSubscription = this.deleteEarmarksOnViewChange$().subscribe(); diff --git a/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts b/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts index 602c57391..63738433e 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts @@ -23,12 +23,15 @@ export class DocumentInfoService { ) { this.hidden = computed(() => !this.#show$()); this.shown = this.#show$.asReadonly(); - effect(() => { - if (this.shown()) { - this._multiSelectService.deactivate(); - this._excludedPagesService.hide(); - } - }); + effect( + () => { + if (this.shown()) { + this._multiSelectService.deactivate(); + this._excludedPagesService.hide(); + } + }, + { allowSignalWrites: true }, + ); } fileAttributes$(fileId: string, dossierId: string, dossierTemplateId: string) { diff --git a/apps/red-ui/src/app/modules/file-preview/services/file-preview-state.service.ts b/apps/red-ui/src/app/modules/file-preview/services/file-preview-state.service.ts index 8d0f28328..a709c78a7 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/file-preview-state.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/file-preview-state.service.ts @@ -15,6 +15,7 @@ import { TranslateService } from '@ngx-translate/core'; import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service'; import { DossierDictionariesMapService } from '@services/entity-services/dossier-dictionaries-map.service'; import { toSignal } from '@angular/core/rxjs-interop'; +import { ViewModeService } from './view-mode.service'; const ONE_MEGABYTE = 1024 * 1024; @@ -64,6 +65,7 @@ export class FilePreviewStateService { private readonly _dictionariesMapService: DictionariesMapService, private readonly _translateService: TranslateService, private readonly _loadingService: LoadingService, + private readonly _viewModeService: ViewModeService, ) { const dossiersService = dossiersServiceResolver(_injector, router); this.dossier$ = dossiersService.getEntityChanged$(this.dossierId); @@ -82,12 +84,20 @@ export class FilePreviewStateService { this.blob$ = this.#blob$; this.dossierDictionary = toSignal(this._dossierDictionariesMapService.watch$(this.dossierId, 'dossier_redaction')); - this.#dossierFileChange = toSignal(this.#dossierFilesChange$()); + this.#dossierFileChange = toSignal(this.#dossierFilesChange$); effect(() => { if (this.#dossierFileChange()) { this._filesService.loadAll(this.dossierId); } }); + effect( + () => { + if (this._viewModeService.isEarmarks() && !this.file().hasHighlights) { + this._viewModeService.switchToStandard(); + } + }, + { allowSignalWrites: true }, + ); } get dictionaries(): Dictionary[] { @@ -113,6 +123,13 @@ export class FilePreviewStateService { ); } + get #dossierFilesChange$() { + return this._dossiersService.dossierFileChanges$.pipe( + filter(dossierId => dossierId === this.dossierId), + map(() => true), + ); + } + reloadBlob(): void { this.#reloadBlob$.next(true); } @@ -127,13 +144,6 @@ export class FilePreviewStateService { return `${remainingTime} ${seconds}`; } - #dossierFilesChange$() { - return this._dossiersService.dossierFileChanges$.pipe( - filter(dossierId => dossierId === this.dossierId), - map(() => true), - ); - } - #downloadOriginalFile(cacheIdentifier: string, wipeCaches = true): Observable { const downloadFile$ = this.#getFileToDownload(cacheIdentifier); const obs = wipeCaches ? from(wipeCache('files')) : of({}); diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts index ec5b1de76..9ebd6f7ac 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts @@ -184,7 +184,7 @@ export class PdfProxyService { private _addManualRedactionOfType(type: ManualRedactionEntryType) { const selectedQuads: Record = this._pdf.documentViewer.getSelectedTextQuads(); - const text = this._documentViewer.selectedText; + const text = this._documentViewer.selectedText(); const manualRedactionEntry = this._getManualRedaction(selectedQuads, text, true); this.manualAnnotationRequested$.next({ manualRedactionEntry, type }); } @@ -208,7 +208,7 @@ export class PdfProxyService { this._pdf.enable(TEXT_POPUPS_TO_TOGGLE); this._viewerHeaderService.enable(HEADER_ITEMS_TO_TOGGLE); - if (this._documentViewer.selectedText.length > 2) { + if (this._documentViewer.selectedText().length > 2) { this._pdf.enable([TextPopups.ADD_DICTIONARY, TextPopups.ADD_FALSE_POSITIVE]); } } else { 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 index 8e9a4ea81..caf48f3b9 100644 --- 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 @@ -1,4 +1,4 @@ -