diff --git a/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.html b/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.html index 764e2454f..37411ebe8 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.html +++ b/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.html @@ -1,39 +1,34 @@ - - -
-
-
- {{ comment.user | name }} - {{ comment.date | date: 'sophisticatedDate' }} -
- -
- -
+ +
+
+
+ {{ comment.user | name }} + {{ comment.date | date: 'sophisticatedDate' }}
-
{{ comment.text }}
+
+ +
- - +
{{ comment.text }}
+
+ + + +
- -
- - - 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 214246329..f0eab09e1 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 @@ -1,14 +1,15 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnChanges, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit, ViewChild } from '@angular/core'; import { Dossier, File, IComment } from '@red/domain'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { UserService } from '@services/user.service'; import { PermissionsService } from '@services/permissions.service'; -import { AutoUnsubscribe, InputWithActionComponent, LoadingService, trackByFactory } from '@iqser/common-ui'; +import { InputWithActionComponent, LoadingService, trackByFactory } from '@iqser/common-ui'; import { firstValueFrom, Observable } from 'rxjs'; import { CommentingService } from '../../services/commenting.service'; import { tap } from 'rxjs/operators'; import { FilePreviewStateService } from '../../services/file-preview-state.service'; import { ManualRedactionService } from '../../services/manual-redaction.service'; +import { ContextComponent } from '@utils/context.component'; @Component({ selector: 'redaction-comments', @@ -16,7 +17,7 @@ import { ManualRedactionService } from '../../services/manual-redaction.service' styleUrls: ['./comments.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class CommentsComponent extends AutoUnsubscribe implements OnChanges { +export class CommentsComponent extends ContextComponent implements OnInit { @Input() annotation: AnnotationWrapper; readonly trackBy = trackByFactory(); readonly file$: Observable; @@ -39,12 +40,14 @@ export class CommentsComponent extends AutoUnsubscribe implements OnChanges { this.dossier$ = _stateService.dossier$; } - ngOnChanges() { + ngOnInit() { this.hiddenComments$ = this._commentingService.isActive$(this.annotation.id).pipe( tap(active => { this._hidden = !active; }), ); + + super._initContext([{ file: this.file$ }, { dossier: this.dossier$ }, 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 19f0302e7..31f5076ab 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: file.workflowStatus } }} + {{ 'file-preview.last-assignee' | translate: { status: ctx.file.workflowStatus } }}
@@ -24,8 +24,8 @@
@@ -40,7 +40,7 @@ this._fileDataService.loadAnnotations(file))); + readonly circleButtonTypes = CircleButtonTypes; + + fullScreen = false; @ViewChild('annotationFilterTemplate', { read: TemplateRef, static: false, @@ -192,7 +191,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni ngOnDetach() { this._viewerHeaderService.resetCompareButtons(); - super.ngOnDetach(); this._changeRef.markForCheck(); } @@ -219,7 +217,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni this._loadingService.start(); await this.userPreferenceService.saveLastOpenedFileForDossier(this.dossierId, this.fileId); - this._subscribeToFileUpdates(); + this._initContext(); if (file?.analysisRequired && !file.excludedFromAutomaticAnalysis) { const reanalysisService = this._injector.get(ReanalysisService); @@ -487,59 +485,66 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni }, 100); } - private _subscribeToFileUpdates(): void { - this.addActiveScreenSubscription = this.loadAnnotations().subscribe(); + protected _initContext(): void { + const loadAnnotations$ = this.loadAnnotations(); - this.addActiveScreenSubscription = this._dossiersService - .getEntityDeleted$(this.dossierId) - .pipe(tap(() => this._handleDeletedDossier())) - .subscribe(); + const handleDeletedDossier$ = this._dossiersService.getEntityDeleted$(this.dossierId).pipe(tap(() => this._handleDeletedDossier())); - this.addActiveScreenSubscription = this._filesMapService - .watchDeleted$(this.fileId) - .pipe(tap(() => this._handleDeletedFile())) - .subscribe(); + const watchDeleted$ = this._filesMapService.watchDeleted$(this.fileId).pipe(tap(() => this._handleDeletedFile())); - 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 switchToStandard$ = combineLatest([this._viewModeService.viewMode$, this.state.file$]).pipe( + tap(([viewMode, file]) => { + if (viewMode === ViewModes.TEXT_HIGHLIGHTS && !file.hasHighlights) { + this._viewModeService.switchToStandard(); + } }), ); - this.addActiveScreenSubscription = this.pdfProxyService.annotationSelected$.subscribe(); + + 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$, + ]); } 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 051596419..129aeadef 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 (this._permissionsService.isApprover(dossier)) { + if (dossier && 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 new file mode 100644 index 000000000..b11f2a0e3 --- /dev/null +++ b/apps/red-ui/src/app/utils/context.component.ts @@ -0,0 +1,41 @@ +import { combineLatest, Observable, of } from 'rxjs'; +import { map, startWith } from 'rxjs/operators'; + +type ContextObservable = Observable | { [key: string]: Observable }; + +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))); + } + + #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))); + }); + } + + #mapContext(values: Array) { + const context = {}; + + values.forEach((value, index) => { + const key = this.#templateContextKeys[index]; + context[key ? key : index] = value; + }); + + return context; + } +}