From 94b3c336ac5bff3c9251f63b1a4486ca608a630e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sat, 22 Jan 2022 20:42:20 +0200 Subject: [PATCH 01/10] Remove some inputs from components --- .../pdf-viewer/pdf-viewer.component.html | 2 +- .../pdf-viewer/pdf-viewer.component.ts | 32 ++--- .../user-management.component.html | 88 ++++++------- .../user-management.component.ts | 116 ++++++++++-------- .../view-switch/view-switch.component.html | 4 +- .../view-switch/view-switch.component.ts | 18 +-- .../file-preview-screen.component.html | 7 +- .../file-preview-screen.component.ts | 34 +++-- .../services/file-preview-state.service.ts | 9 +- 9 files changed, 163 insertions(+), 147 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.html index 251630448..97eab9b6a 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.html @@ -1,5 +1,5 @@
-
+
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts index f0c0968a4..58d71be6c 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/pdf-viewer/pdf-viewer.component.ts @@ -11,7 +11,7 @@ import { SimpleChanges, ViewChild, } from '@angular/core'; -import { Dossier, File, IManualRedactionEntry } from '@red/domain'; +import { Dossier, IManualRedactionEntry } from '@red/domain'; import WebViewer, { Core, WebViewerInstance } from '@pdftron/webviewer'; import { TranslateService } from '@ngx-translate/core'; import { @@ -64,7 +64,6 @@ const dataElements = { styleUrls: ['./pdf-viewer.component.scss'], }) export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnChanges { - @Input() file: File; @Input() dossier: Dossier; @Input() canPerformActions = false; @Input() annotations: AnnotationWrapper[]; @@ -96,7 +95,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha private readonly _annotationActionsService: AnnotationActionsService, private readonly _configService: ConfigService, private readonly _loadingService: LoadingService, - private readonly _stateService: FilePreviewStateService, + readonly stateService: FilePreviewStateService, readonly viewModeService: ViewModeService, readonly multiSelectService: MultiSelectService, ) { @@ -121,7 +120,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this); await this._loadViewer(); - this.addActiveScreenSubscription = this._stateService.fileData$ + this.addActiveScreenSubscription = this.stateService.fileData$ .pipe( filter(fileData => !!fileData), switchMap(fileData => fileData.blob$), @@ -158,7 +157,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); const compareDocument = await pdfNet.PDFDoc.createFromBuffer(fileReader.result as ArrayBuffer); - const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._stateService.fileData.blob$.value.arrayBuffer()); + const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this.stateService.fileData.blob$.value.arrayBuffer()); const loadCompareDocument = async () => { this._loadingService.start(); @@ -169,7 +168,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha compareDocument, mergedDocument, this.instance, - this.file, + this.stateService.fileData.file, () => { this.viewModeService.compareMode = true; }, @@ -211,9 +210,9 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha this.viewModeService.compareMode = false; const pdfNet = this.instance.Core.PDFNet; await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); - const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this._stateService.fileData.blob$.value.arrayBuffer()); + const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this.stateService.fileData.blob$.value.arrayBuffer()); this.instance.UI.loadDocument(currentDocument, { - filename: this.file ? this.file.filename : 'document.pdf', + filename: this.stateService.fileData?.file?.filename ?? 'document.pdf', }); this.instance.UI.disableElements([dataElements.CLOSE_COMPARE_BUTTON]); this.instance.UI.enableElements([dataElements.COMPARE_BUTTON]); @@ -293,7 +292,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha this._selectedText = selectedText; const textActions = [dataElements.ADD_DICTIONARY, dataElements.ADD_FALSE_POSITIVE]; - if (selectedText.length > 2 && this.canPerformActions && !this.utils.isCurrentPageExcluded(this.file)) { + if (selectedText.length > 2 && this.canPerformActions && !this.utils.isCurrentPageExcluded(this.stateService.fileData.file)) { this.instance.UI.enableElements(textActions); } else { this.instance.UI.disableElements(textActions); @@ -481,7 +480,12 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha } this.instance.UI.annotationPopup.add( - this._annotationActionsService.getViewerAvailableActions(this.instance, this.file, annotationWrappers, this.annotationsChanged), + this._annotationActionsService.getViewerAvailableActions( + this.instance, + this.stateService.fileData.file, + annotationWrappers, + this.annotationsChanged, + ), ); } @@ -594,7 +598,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha ANNOTATION_POPUP, ]; - if (this.canPerformActions && !this.utils.isCurrentPageExcluded(this.file)) { + if (this.canPerformActions && !this.utils.isCurrentPageExcluded(this.stateService.fileData.file)) { try { this.instance.UI.enableTools(['AnnotationCreateRectangle']); } catch (e) { @@ -611,7 +615,7 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha let elementsToDisable = [...elements, ADD_RECTANGLE]; - if (this.utils.isCurrentPageExcluded(this.file)) { + if (this.utils.isCurrentPageExcluded(this.stateService.fileData.file)) { const allowedActionsWhenPageExcluded: string[] = [ANNOTATION_POPUP, ADD_RECTANGLE, ADD_REDACTION, SHAPE_TOOL_GROUP_BUTTON]; elementsToDisable = elementsToDisable.filter(element => !allowedActionsWhenPageExcluded.includes(element)); } else { @@ -642,8 +646,8 @@ export class PdfViewerComponent extends AutoUnsubscribe implements OnInit, OnCha } private _loadDocument() { - this.instance.UI.loadDocument(this._stateService.fileData.blob$.value, { - filename: this.file ? this.file.filename : 'document.pdf', + this.instance.UI.loadDocument(this.stateService.fileData.blob$.value, { + filename: this.stateService.fileData?.file?.filename ?? 'document.pdf', }); } diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/user-management/user-management.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/user-management/user-management.component.html index 1fc165006..53669e553 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/user-management/user-management.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/user-management/user-management.component.html @@ -1,47 +1,49 @@ - + -
- {{ translations[file.workflowStatus] | translate }} - {{ 'by' | translate }}: -
+ +
+ {{ translations[file.workflowStatus] | translate }} + {{ 'by' | translate }}: +
- - -
- - - -
- + > - -
+
+ + + +
+ + + +
+ diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/user-management/user-management.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/user-management/user-management.component.ts index 0101f238f..472057b03 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/user-management/user-management.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/user-management/user-management.component.ts @@ -1,6 +1,6 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { Dossier, File, StatusBarConfigs, User } from '@red/domain'; -import { List, LoadingService, Toaster } from '@iqser/common-ui'; +import { List, LoadingService, log, Toaster } from '@iqser/common-ui'; import { PermissionsService } from '@services/permissions.service'; import { FileAssignService } from '../../../../shared/services/file-assign.service'; import { workflowFileStatusTranslations } from '../../../../translations/file-status-translations'; @@ -9,6 +9,10 @@ import { UserService } from '@services/user.service'; import { FilesService } from '@services/entity-services/files.service'; import { TranslateService } from '@ngx-translate/core'; import { firstValueFrom } from 'rxjs'; +import { BehaviorSubject, combineLatest, Observable, switchMap } from 'rxjs'; +import { FilePreviewStateService } from '../../services/file-preview-state.service'; +import { distinctUntilChanged, map } from 'rxjs/operators'; +import { DossiersService } from '@services/entity-services/dossiers.service'; @Component({ selector: 'redaction-user-management', @@ -16,22 +20,19 @@ import { firstValueFrom } from 'rxjs'; styleUrls: ['./user-management.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class UserManagementComponent implements OnChanges { +export class UserManagementComponent { readonly translations = workflowFileStatusTranslations; - - @Input() file: File; - @Input() dossier: Dossier; - - editingReviewer = false; - statusBarConfigs: StatusBarConfigs; - canAssignToSelf = false; - canAssignUser = false; - canUnassignUser = false; - canAssign = false; - canAssignOrUnassign = false; - canAssignReviewer = false; - assignTooltip: string; - usersOptions: List; + readonly statusBarConfig$: Observable; + readonly assignTooltip$: Observable; + readonly canAssignReviewer$: Observable; + readonly canAssignToSelf$: Observable; + readonly editingReviewer$ = new BehaviorSubject(false); + readonly canAssignOrUnassign$: Observable; + readonly canAssign$: Observable; + readonly usersOptions$: Observable; + private readonly _dossier$: Observable; + private readonly _canAssignUser$: Observable; + private readonly _canUnassignUser$: Observable; constructor( readonly fileAssignService: FileAssignService, @@ -41,44 +42,57 @@ export class UserManagementComponent implements OnChanges { readonly toaster: Toaster, readonly loadingService: LoadingService, readonly translateService: TranslateService, - ) {} + readonly stateService: FilePreviewStateService, + private readonly _dossiersService: DossiersService, + ) { + this._dossier$ = this.stateService.file$.pipe(switchMap(file => this._dossiersService.getEntityChanged$(file.dossierId))); + this.statusBarConfig$ = this.stateService.file$.pipe(map(file => [{ length: 1, color: file.workflowStatus }])); + this.assignTooltip$ = this.stateService.file$.pipe( + map(file => + file.isUnderApproval + ? this.translateService.instant(_('dossier-overview.assign-approver')) + : file.assignee + ? this.translateService.instant(_('file-preview.change-reviewer')) + : this.translateService.instant(_('file-preview.assign-reviewer')), + ), + ); - private get _statusBarConfig(): StatusBarConfigs { - return [{ length: 1, color: this.file.workflowStatus }]; - } + this.canAssignToSelf$ = this.stateService.file$.pipe( + map(file => this.permissionsService.canAssignToSelf(file)), + distinctUntilChanged(), + ); + this._canAssignUser$ = this.stateService.file$.pipe( + map(file => this.permissionsService.canAssignUser(file)), + distinctUntilChanged(), + ); + this._canUnassignUser$ = this.stateService.file$.pipe( + map(file => this.permissionsService.canUnassignUser(file)), + distinctUntilChanged(), + ); - private get _assignOrChangeReviewerTooltip(): string { - return this.file.assignee - ? this.translateService.instant(_('file-preview.change-reviewer')) - : this.translateService.instant(_('file-preview.assign-reviewer')); - } + this.canAssignOrUnassign$ = combineLatest([this._canAssignUser$, this._canUnassignUser$]).pipe( + map(([canAssignUser, canUnassignUser]) => canAssignUser || canUnassignUser), + distinctUntilChanged(), + ); - private get _assignTooltip(): string { - return this.file.isUnderApproval - ? this.translateService.instant(_('dossier-overview.assign-approver')) - : this._assignOrChangeReviewerTooltip; - } + this.canAssign$ = combineLatest([this.canAssignToSelf$, this.canAssignOrUnassign$]).pipe( + map(([canAssignToSelf, canAssignOrUnassign]) => canAssignToSelf || canAssignOrUnassign), + distinctUntilChanged(), + ); - private get _canAssignReviewer(): boolean { - return !this.file.assignee && this.canAssignUser && this.dossier.hasReviewers; - } + this.canAssignReviewer$ = combineLatest([this.stateService.file$, this._canAssignUser$, this._dossier$]).pipe( + log(), + map(([file, canAssignUser, dossier]) => !file.assignee && canAssignUser && dossier.hasReviewers), + log(), + distinctUntilChanged(), + ); - private get _usersOptions(): List { - const unassignUser = this.canUnassignUser ? [undefined] : []; - return this.file.isUnderApproval ? [...this.dossier.approverIds, ...unassignUser] : [...this.dossier.memberIds, ...unassignUser]; - } - - ngOnChanges() { - this.canAssignToSelf = this.permissionsService.canAssignToSelf(this.file); - this.canAssignUser = this.permissionsService.canAssignUser(this.file); - this.canUnassignUser = this.permissionsService.canUnassignUser(this.file); - this.canAssignOrUnassign = this.canAssignUser || this.canUnassignUser; - this.canAssign = this.canAssignToSelf || this.canAssignOrUnassign; - - this.statusBarConfigs = this._statusBarConfig; - this.canAssignReviewer = this._canAssignReviewer; - this.assignTooltip = this._assignTooltip; - this.usersOptions = this._usersOptions; + this.usersOptions$ = combineLatest([this._canUnassignUser$, this.stateService.file$, this._dossier$]).pipe( + map(([canUnassignUser, file, dossier]) => { + const unassignUser = canUnassignUser ? [undefined] : []; + return file.isUnderApproval ? [...dossier.approverIds, ...unassignUser] : [...dossier.memberIds, ...unassignUser]; + }), + ); } async assignReviewer(file: File, user: User | string) { @@ -99,6 +113,6 @@ export class UserManagementComponent implements OnChanges { this.loadingService.stop(); this.toaster.info(_('assignment.reviewer'), { params: { reviewerName, filename } }); - this.editingReviewer = false; + this.editingReviewer$.next(false); } } diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.html index c99ce4ba5..c3836a11a 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/view-switch/view-switch.component.html @@ -21,9 +21,9 @@