From 3408655c8223aafdc5fa63c28c2c01339c4f4186 Mon Sep 17 00:00:00 2001 From: Valentin Mihai Date: Fri, 15 Jul 2022 15:26:38 +0300 Subject: [PATCH] RED-3687 - undone changes for file preview component --- .../components/comments/comments.component.ts | 13 +- .../file-preview-screen.component.html | 20 +-- .../file-preview-screen.component.ts | 119 +++++++++--------- .../services/manual-redaction.service.ts | 2 +- .../red-ui/src/app/utils/context.component.ts | 44 ++----- 5 files changed, 91 insertions(+), 107 deletions(-) diff --git a/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts b/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts index f0eab09e1..c8d9027b7 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts +++ b/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts @@ -11,13 +11,18 @@ import { FilePreviewStateService } from '../../services/file-preview-state.servi import { ManualRedactionService } from '../../services/manual-redaction.service'; import { ContextComponent } from '@utils/context.component'; +interface CommentsTemplate { + dossier: Dossier; + file: File; +} + @Component({ selector: 'redaction-comments', templateUrl: './comments.component.html', styleUrls: ['./comments.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class CommentsComponent extends ContextComponent implements OnInit { +export class CommentsComponent extends ContextComponent implements OnInit { @Input() annotation: AnnotationWrapper; readonly trackBy = trackByFactory(); readonly file$: Observable; @@ -47,7 +52,11 @@ export class CommentsComponent extends ContextComponent implements OnInit { }), ); - super._initContext([{ file: this.file$ }, { dossier: this.dossier$ }, this.hiddenComments$]); + super._initContext({ + file: this.file$, + dossier: this.dossier$, + hiddenComments: this.hiddenComments$, + }); } async addComment(value: string): Promise { diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html index 31f5076ab..19f0302e7 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html @@ -1,22 +1,22 @@ - -
+ +
- + - +
- {{ 'file-preview.last-assignee' | translate: { status: ctx.file.workflowStatus } }} + {{ 'file-preview.last-assignee' | translate: { status: file.workflowStatus } }}
@@ -24,8 +24,8 @@
@@ -40,7 +40,7 @@ this._fileDataService.loadAnnotations(file))); +export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate { readonly circleButtonTypes = CircleButtonTypes; fullScreen = false; + readonly fileId = this.state.fileId; + readonly dossierId = this.state.dossierId; + readonly file$ = this.state.file$.pipe(tap(file => this._fileDataService.loadAnnotations(file))); @ViewChild('annotationFilterTemplate', { read: TemplateRef, static: false, @@ -191,6 +192,7 @@ export class FilePreviewScreenComponent extends ContextComponent implements OnIn ngOnDetach() { this._viewerHeaderService.resetCompareButtons(); + super.ngOnDetach(); this._changeRef.markForCheck(); } @@ -217,7 +219,7 @@ export class FilePreviewScreenComponent extends ContextComponent implements OnIn this._loadingService.start(); await this.userPreferenceService.saveLastOpenedFileForDossier(this.dossierId, this.fileId); - this._initContext(); + this._subscribeToFileUpdates(); if (file?.analysisRequired && !file.excludedFromAutomaticAnalysis) { const reanalysisService = this._injector.get(ReanalysisService); @@ -485,66 +487,59 @@ export class FilePreviewScreenComponent extends ContextComponent implements OnIn }, 100); } - protected _initContext(): void { - const loadAnnotations$ = this.loadAnnotations(); + private _subscribeToFileUpdates(): void { + this.addActiveScreenSubscription = this.loadAnnotations().subscribe(); - const handleDeletedDossier$ = this._dossiersService.getEntityDeleted$(this.dossierId).pipe(tap(() => this._handleDeletedDossier())); + this.addActiveScreenSubscription = this._dossiersService + .getEntityDeleted$(this.dossierId) + .pipe(tap(() => this._handleDeletedDossier())) + .subscribe(); - const watchDeleted$ = this._filesMapService.watchDeleted$(this.fileId).pipe(tap(() => this._handleDeletedFile())); + this.addActiveScreenSubscription = this._filesMapService + .watchDeleted$(this.fileId) + .pipe(tap(() => this._handleDeletedFile())) + .subscribe(); - const switchToStandard$ = combineLatest([this._viewModeService.viewMode$, this.state.file$]).pipe( - tap(([viewMode, file]) => { - if (viewMode === ViewModes.TEXT_HIGHLIGHTS && !file.hasHighlights) { - this._viewModeService.switchToStandard(); - } + this.addActiveScreenSubscription = combineLatest([this._viewModeService.viewMode$, this.state.file$]) + .pipe( + tap(([viewMode, file]) => { + if (viewMode === ViewModes.TEXT_HIGHLIGHTS && !file.hasHighlights) { + 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.state.dossierFileChange$.subscribe(); + + this.addActiveScreenSubscription = this.state.blob$ + .pipe( + switchMap(blob => from(this._documentViewer.lock()).pipe(map(() => blob))), + tap(() => this._errorService.clear()), + tap(blob => this.pdf.loadDocument(blob, this.state.file, () => this.state.reloadBlob())), + ) + .subscribe(); + + this.addActiveScreenSubscription = this.pdfProxyService.manualAnnotationRequested$.subscribe($event => { + this.openManualAnnotationDialog($event); + }); + + this.addActiveScreenSubscription = this.pdfProxyService.pageChanged$.subscribe(page => + this._ngZone.run(() => { + console.log('viewerPageChanged', page); + return this.#updateQueryParamsPage(page); }), ); - - const excludedPageStyles$ = this._documentViewer.pageComplete$.pipe(tap(() => this._setExcludedPageStyles())); - - const handleKeyEvent$ = this._documentViewer.keyUp$.pipe(tap($event => this.handleKeyEvent($event))); - - const textSelected$ = this.#textSelected$; - - const blobLoadDocument$ = this.state.blob$.pipe( - switchMap(blob => from(this._documentViewer.lock()).pipe(map(() => blob))), - tap(() => this._errorService.clear()), - tap(blob => this.pdf.loadDocument(blob, this.state.file, () => this.state.reloadBlob())), - ); - - const openManualAnnotationDialog$ = this.pdfProxyService.manualAnnotationRequested$.pipe( - tap($event => { - this.openManualAnnotationDialog($event); - }), - ); - - const updateQueryParamsPage$ = this.pdfProxyService.pageChanged$.pipe( - tap(page => { - this._ngZone.run(() => { - console.log('viewerPageChanged', page); - return this.#updateQueryParamsPage(page); - }); - }), - ); - - super._initContext([ - { dossier: this.state.dossier$ }, - { file: this.file$ }, - this.pdf.currentPage$, - this.pdfProxyService.canPerformAnnotationActions$, - this.state.dossierFileChange$, - this.pdfProxyService.annotationSelected$, - loadAnnotations$, - handleDeletedDossier$, - watchDeleted$, - switchToStandard$, - excludedPageStyles$, - handleKeyEvent$, - textSelected$, - blobLoadDocument$, - openManualAnnotationDialog$, - updateQueryParamsPage$, - ]); + this.addActiveScreenSubscription = this.pdfProxyService.annotationSelected$.subscribe(); } private _handleDeletedDossier(): void { diff --git a/apps/red-ui/src/app/modules/file-preview/services/manual-redaction.service.ts b/apps/red-ui/src/app/modules/file-preview/services/manual-redaction.service.ts index 129aeadef..051596419 100644 --- a/apps/red-ui/src/app/modules/file-preview/services/manual-redaction.service.ts +++ b/apps/red-ui/src/app/modules/file-preview/services/manual-redaction.service.ts @@ -136,7 +136,7 @@ export class ManualRedactionService extends GenericService { } getTitle(type: ManualRedactionEntryType, dossier: Dossier) { - if (dossier && this._permissionsService.isApprover(dossier)) { + if (this._permissionsService.isApprover(dossier)) { switch (type) { case 'DICTIONARY': return _('manual-annotation.dialog.header.dictionary'); diff --git a/apps/red-ui/src/app/utils/context.component.ts b/apps/red-ui/src/app/utils/context.component.ts index b11f2a0e3..a7b7b621b 100644 --- a/apps/red-ui/src/app/utils/context.component.ts +++ b/apps/red-ui/src/app/utils/context.component.ts @@ -1,41 +1,21 @@ -import { combineLatest, Observable, of } from 'rxjs'; +import { combineLatest, Observable, ObservableInputTuple, of, pipe } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; +import { OnDetach, ValuesOf } from '@iqser/common-ui'; -type ContextObservable = Observable | { [key: string]: Observable }; +export class ContextComponent implements OnDetach { + componentContext$: Observable | null = of({} as C); -export class ContextComponent { - componentContext$: Observable = of({}); - - #templateContextKeys = {}; - #observables = []; - - protected _initContext(observables: ContextObservable[]) { - this.#extractKeysAndObservables(observables); - this.componentContext$ = combineLatest(this.#observables).pipe(map(values => this.#mapContext(values))); + protected _initContext>>(context: ObservableInputTuple): void { + const observables = Object.values(context).map(obs => obs.pipe(startWith(null))); + const keys = Object.keys(context); + this.componentContext$ = combineLatest(observables).pipe(map(values => this._mapKeysToObs(keys, values))); } - #extractKeysAndObservables(observables: ContextObservable[]) { - observables.forEach((value, index) => { - const keys = Object.keys(value); - let observable: any; - if (keys.length === 1) { - this.#templateContextKeys[index] = keys[0]; - observable = value[keys[0]]; - } else { - observable = value; - } - this.#observables.push(observable.pipe(startWith(null))); - }); + protected _mapKeysToObs(keys: string[], observables: Observable[]): T { + return keys.reduce((acc, key, index) => ({ ...acc, [key]: observables[index] }), {} as T); } - #mapContext(values: Array) { - const context = {}; - - values.forEach((value, index) => { - const key = this.#templateContextKeys[index]; - context[key ? key : index] = value; - }); - - return context; + ngOnDetach() { + this.componentContext$ = null; } }