From fbc32d7e23c682ce66d2e7e21908548ee46b3131 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Tue, 10 Aug 2021 21:09:50 +0300 Subject: [PATCH] move status bar to common lib --- .../dossier-listing-actions.component.html | 2 +- .../dossier-listing-actions.component.ts | 17 ++- .../file-actions/file-actions.component.html | 19 +-- .../file-actions/file-actions.component.scss | 2 +- .../file-actions/file-actions.component.ts | 122 +++++++++--------- .../dossier-overview-screen.component.html | 6 +- .../file-preview-screen.component.html | 2 +- .../search-screen.component.html | 6 +- .../simple-doughnut-chart.component.html | 6 +- .../status-bar/status-bar.component.html | 11 -- .../status-bar/status-bar.component.scss | 46 ------- .../status-bar/status-bar.component.ts | 22 ---- .../src/app/modules/shared/shared.module.ts | 2 - .../src/app/services/permissions.service.ts | 2 +- libs/common-ui | 2 +- 15 files changed, 92 insertions(+), 175 deletions(-) delete mode 100644 apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html delete mode 100644 apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss delete mode 100644 apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html index 71b1d646d..caff3a7ed 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html @@ -1,4 +1,4 @@ - +
(); + statusBarConfig: readonly StatusBarConfig[]; + constructor( readonly permissionsService: PermissionsService, readonly appStateService: AppStateService, @@ -26,6 +29,10 @@ export class DossierListingActionsComponent { private readonly _userService: UserService ) {} + ngOnInit() { + this.statusBarConfig = this._getStatusConfig(this.dossier.files); + } + openEditDossierDialog($event: MouseEvent, dossierWrapper: DossierWrapper) { this._dialogService.openDialog('editDossier', $event, { dossierWrapper, @@ -40,8 +47,8 @@ export class DossierListingActionsComponent { }); } - getDossierStatusConfig(dw: DossierWrapper) { - const obj = dw.files.reduce((acc, file) => { + private _getStatusConfig(files: readonly FileStatusWrapper[]) { + const obj = files.reduce((acc, file) => { const status = file.status; if (!acc[status]) { acc[status] = 1; diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html index 5e450dc3e..f0051f62e 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html @@ -1,6 +1,6 @@
- +
@@ -9,10 +9,9 @@
- @@ -88,14 +87,10 @@ @@ -147,7 +142,7 @@ (click)="$event.stopPropagation()" [checked]="!fileStatus?.isExcluded" [class.mr-24]="screen === 'dossier-overview'" - [disabled]="!permissionsService.canToggleAnalysis(fileStatus)" + [disabled]="!canToggleAnalysis" [matTooltipPosition]="tooltipPosition" [matTooltip]="toggleTooltip | translate" color="primary" diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss index d98d4d2d1..600b5345d 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss @@ -17,7 +17,7 @@ font-weight: bold; } -redaction-status-bar { +iqser-status-bar { margin-left: 2px; } diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts index 7e1657a6b..135159bb0 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import { FileStatusWrapper } from '@models/file/file-status.wrapper'; import { AppStateService } from '@state/app-state.service'; @@ -6,18 +6,18 @@ import { FileActionService } from '../../services/file-action.service'; import { DossiersDialogService } from '../../services/dossiers-dialog.service'; import { ConfirmationDialogInput } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component'; import { LoadingService } from '@services/loading.service'; -import { FileManagementControllerService } from '@redaction/red-ui-http'; -import { TranslateService } from '@ngx-translate/core'; +import { FileManagementControllerService, FileStatus } from '@redaction/red-ui-http'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { CircleButtonTypes } from '@iqser/common-ui'; +import { AutoUnsubscribe, CircleButtonType, CircleButtonTypes, StatusBarConfig } from '@iqser/common-ui'; import { UserService } from '@services/user.service'; +import { filter } from 'rxjs/operators'; @Component({ selector: 'redaction-file-actions', templateUrl: './file-actions.component.html', styleUrls: ['./file-actions.component.scss'] }) -export class FileActionsComponent implements OnInit { +export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnDestroy { readonly circleButtonTypes = CircleButtonTypes; readonly currentUser = this._userService.currentUser; @@ -27,6 +27,24 @@ export class FileActionsComponent implements OnInit { @Output() actionPerformed = new EventEmitter(); screen: 'file-preview' | 'dossier-overview'; + statusBarConfig?: readonly StatusBarConfig[]; + tooltipPosition?: 'below' | 'above'; + toggleTooltip?: string; + assignTooltip?: string; + buttonType?: CircleButtonType; + isWorkable: boolean; + + canUndoApproval: boolean; + canAssignToSelf: boolean; + canAssign: boolean; + canDelete: boolean; + canReanalyse: boolean; + canOcr: boolean; + canSetToUnderReview: boolean; + canSetToUnderApproval: boolean; + canApprove: boolean; + readyForApproval: boolean; + canToggleAnalysis: boolean; constructor( readonly permissionsService: PermissionsService, @@ -35,23 +53,12 @@ export class FileActionsComponent implements OnInit { private readonly _fileActionService: FileActionService, private readonly _loadingService: LoadingService, private readonly _fileManagementControllerService: FileManagementControllerService, - private readonly _translateService: TranslateService, private readonly _userService: UserService - ) {} - - get statusBarConfig() { - return [{ color: this.fileStatus.status, length: 1 }]; + ) { + super(); } - get tooltipPosition() { - return this.screen === 'file-preview' ? 'below' : 'above'; - } - - get buttonType() { - return this.screen === 'file-preview' ? CircleButtonTypes.default : CircleButtonTypes.dark; - } - - get toggleTooltip(): string { + private get _toggleTooltip(): string { if (!this.currentUser.isManager) { return _('file-preview.toggle-analysis.only-managers'); } @@ -59,57 +66,46 @@ export class FileActionsComponent implements OnInit { return this.fileStatus?.isExcluded ? _('file-preview.toggle-analysis.enable') : _('file-preview.toggle-analysis.disable'); } - get canAssignToSelf() { - return this.permissionsService.canAssignToSelf(this.fileStatus); - } + private _setup() { + this.statusBarConfig = [{ color: this.fileStatus.status, length: 1 }]; + this.tooltipPosition = this.screen === 'file-preview' ? 'below' : 'above'; + this.assignTooltip = this.fileStatus.isUnderApproval + ? _('dossier-overview.assign-approver') + : _('dossier-overview.assign-reviewer'); + this.buttonType = this.screen === 'file-preview' ? CircleButtonTypes.default : CircleButtonTypes.dark; + this.isWorkable = this.fileStatus.isWorkable; + this.toggleTooltip = this._toggleTooltip; - get canAssign() { - return this.permissionsService.canAssignUser(this.fileStatus); - } - - get canDelete() { - return this.permissionsService.canDeleteFile(this.fileStatus); - } - - get canReanalyse() { - return this.permissionsService.canReanalyseFile(this.fileStatus); - } - - get canOcr() { - return this.permissionsService.canOcrFile(this.fileStatus); - } - - get canSetToUnderReview() { - return this.permissionsService.canSetUnderReview(this.fileStatus); - } - - get canSetToUnderApproval() { - return this.permissionsService.canSetUnderApproval(this.fileStatus); - } - - get canUndoApproval() { - return this.permissionsService.canUndoApproval(this.fileStatus); - } - - get assignTooltip() { - return this.fileStatus.isUnderApproval - ? this._translateService.instant('dossier-overview.assign-approver') - : this._translateService.instant('dossier-overview.assign-reviewer'); + this.canUndoApproval = this.permissionsService.canUndoApproval(this.fileStatus); + this.canAssignToSelf = this.permissionsService.canAssignToSelf(this.fileStatus); + this.canAssign = this.permissionsService.canAssignUser(this.fileStatus); + this.canDelete = this.permissionsService.canDeleteFile(this.fileStatus); + this.canReanalyse = this.permissionsService.canReanalyseFile(this.fileStatus); + this.canOcr = this.permissionsService.canOcrFile(this.fileStatus); + this.canSetToUnderReview = this.permissionsService.canSetUnderReview(this.fileStatus); + this.canSetToUnderApproval = this.permissionsService.canSetUnderApproval(this.fileStatus); + this.canApprove = this.permissionsService.canApprove(this.fileStatus); + this.readyForApproval = this.permissionsService.isReadyForApproval(this.fileStatus); + this.canToggleAnalysis = this.permissionsService.canToggleAnalysis(this.fileStatus); } ngOnInit(): void { if (this.fileStatus) { this.screen = 'dossier-overview'; + this._setup(); return; } this.fileStatus = this.appStateService.activeFile; this.screen = 'file-preview'; - this.appStateService.fileChanged.subscribe(fileStatus => { - if (fileStatus.fileId === this.fileStatus?.fileId) { - this.fileStatus = this.appStateService.activeFile; - } - }); + this._setup(); + + this.addSubscription = this.appStateService.fileChanged + .pipe(filter(file => file.fileId === this.fileStatus?.fileId)) + .subscribe(fileStatus => { + this.fileStatus = fileStatus; + this._setup(); + }); } toggleViewDocumentInfo() { @@ -156,7 +152,7 @@ export class FileActionsComponent implements OnInit { reanalyseFile($event: MouseEvent) { $event.stopPropagation(); - this._fileActionService.reanalyseFile(this.fileStatus).subscribe(() => { + this.addSubscription = this._fileActionService.reanalyseFile(this.fileStatus).subscribe(() => { this.reloadDossiers('reanalyse'); }); } @@ -171,7 +167,7 @@ export class FileActionsComponent implements OnInit { true ); } else { - this._fileActionService.setFileUnderApproval(this.fileStatus).subscribe(() => { + this.addSubscription = this._fileActionService.setFileUnderApproval(this.fileStatus).subscribe(() => { this.reloadDossiers('set-under-approval'); }); } @@ -179,14 +175,14 @@ export class FileActionsComponent implements OnInit { setFileApproved($event: MouseEvent) { $event.stopPropagation(); - this._fileActionService.setFileApproved(this.fileStatus).subscribe(() => { + this.addSubscription = this._fileActionService.setFileApproved(this.fileStatus).subscribe(() => { this.reloadDossiers('set-approved'); }); } ocrFile($event: MouseEvent) { $event.stopPropagation(); - this._fileActionService.ocrFile(this.fileStatus).subscribe(() => { + this.addSubscription = this._fileActionService.ocrFile(this.fileStatus).subscribe(() => { this.reloadDossiers('ocr-file'); }); } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html index cb1c6c5be..06ac1f075 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html @@ -147,15 +147,15 @@ class="small-label loading" translate="dossier-overview.file-listing.file-entry.file-processing" >
- + > - +
{{ translations[status] | translate }} diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html index c646b14e8..ba1fc56ce 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html +++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html @@ -59,8 +59,8 @@
- + >
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html index 09e4aa6af..5c0ed8df1 100644 --- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html +++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html @@ -30,8 +30,8 @@ [class.active]="filterChecked$(val.key) | async" [class.filter-disabled]="(statusFilters$ | async)?.length === 0" > - - +
diff --git a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html deleted file mode 100644 index e06bd34f9..000000000 --- a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html +++ /dev/null @@ -1,11 +0,0 @@ -
-
-
-
{{ rect.label }}
-
-
diff --git a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss deleted file mode 100644 index dbb1e1e5f..000000000 --- a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import '../../../../../assets/styles/variables'; - -.rectangle-container { - flex: 1; - display: flex; - width: 100%; - min-width: 12px; - - &.small { - .rectangle { - width: 12px; - min-width: 12px; - } - - .section-wrapper { - display: flex; - align-items: center; - - > *:not(:last-child) { - margin-right: 10px; - } - } - } - - .section-wrapper:first-child { - .rectangle { - border-radius: 6px 0 0 6px; - } - } - - .section-wrapper:last-child { - .rectangle { - border-radius: 0 6px 6px 0; - } - - &:first-child { - .rectangle { - border-radius: 6px; - } - } - } - - .rectangle { - height: 6px; - } -} diff --git a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts b/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts deleted file mode 100644 index 1d4b36646..000000000 --- a/apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; -import { Color } from '@utils/types'; - -@Component({ - selector: 'redaction-status-bar', - templateUrl: './status-bar.component.html', - styleUrls: ['./status-bar.component.scss'], - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class StatusBarComponent { - @Input() - config: { - length: number; - color: Color; - label?: string; - cssClass?: string; - }[] = []; - - @Input() - small = false; -} diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index 44c41e7ee..49a35194f 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -11,7 +11,6 @@ import { IconsModule } from '../icons/icons.module'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component'; import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component'; -import { StatusBarComponent } from './components/status-bar/status-bar.component'; import { HasScrollbarDirective } from './directives/has-scrollbar.directive'; import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component'; import { HiddenActionComponent } from './components/hidden-action/hidden-action.component'; @@ -40,7 +39,6 @@ const components = [ InputWithActionComponent, AnnotationIconComponent, SimpleDoughnutChartComponent, - StatusBarComponent, DictionaryAnnotationIconComponent, HiddenActionComponent, PopupFilterComponent, diff --git a/apps/red-ui/src/app/services/permissions.service.ts b/apps/red-ui/src/app/services/permissions.service.ts index 506c3f81c..c39714027 100644 --- a/apps/red-ui/src/app/services/permissions.service.ts +++ b/apps/red-ui/src/app/services/permissions.service.ts @@ -61,7 +61,7 @@ export class PermissionsService { canAssignToSelf(fileStatus = this._activeFile): boolean { const precondition = this.isDossierMember() && !fileStatus.isProcessing && !fileStatus.isError && !fileStatus.isApproved; - const isTheOnlyReviewer = !this._appStateService.activeDossier.hasMoreThanOneReviewer; + const isTheOnlyReviewer = !this._appStateService.activeDossier?.hasMoreThanOneReviewer; if (precondition) { if ( diff --git a/libs/common-ui b/libs/common-ui index 7e9b28a10..1d46b21c7 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 7e9b28a10c7b226dcab54354c6e7f1d8ccebc0c6 +Subproject commit 1d46b21c74c07d6811a99b9de6c940c740bc8ceb