Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

move status bar to common lib

Browse Source
This commit is contained in:
Dan Percic 2021-08-10 21:09:50 +03:00
parent c99d6cda8d
commit fbc32d7e23
15 changed files with 92 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
View File

@ -1,4 +1,4 @@
<redaction-status-bar [config]="getDossierStatusConfig(dossier)"></redaction-status-bar>
<iqser-status-bar [configs]="statusBarConfig"></iqser-status-bar>
<div class="action-buttons">
<iqser-circle-button
(action)="openEditDossierDialog($event, dossier)"

17
apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
View File

@ -1,24 +1,27 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { PermissionsService } from '@services/permissions.service';
import { DossierWrapper } from '@state/model/dossier.wrapper';
import { StatusSorter } from '@utils/sorters/status-sorter';
import { AppStateService } from '@state/app-state.service';
import { DossiersDialogService } from '../../services/dossiers-dialog.service';
import { CircleButtonTypes } from '@iqser/common-ui';
import { CircleButtonTypes, StatusBarConfig } from '@iqser/common-ui';
import { UserService } from '@services/user.service';
import { FileStatusWrapper } from '@models/file/file-status.wrapper';
@Component({
selector: 'redaction-dossier-listing-actions',
templateUrl: './dossier-listing-actions.component.html',
styleUrls: ['./dossier-listing-actions.component.scss']
})
export class DossierListingActionsComponent {
export class DossierListingActionsComponent implements OnInit {
readonly circleButtonTypes = CircleButtonTypes;
readonly currentUser = this._userService.currentUser;
@Input() dossier: DossierWrapper;
@Output() actionPerformed = new EventEmitter<DossierWrapper | undefined>();
statusBarConfig: readonly StatusBarConfig<string>[];
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;

19
apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="screen === 'dossier-overview'" class="action-buttons">
<ng-container *ngTemplateOutlet="actions"></ng-container>
<redaction-status-bar *ngIf="fileStatus?.isWorkable" [config]="statusBarConfig"></redaction-status-bar>
<iqser-status-bar *ngIf="isWorkable" [configs]="statusBarConfig"></iqser-status-bar>
</div>
<ng-container *ngIf="screen === 'file-preview'">
@ -9,10 +9,9 @@
<ng-template #actions>
<div class="file-actions" *ngIf="fileStatus">
<!-- delete-->
<iqser-circle-button
(action)="openDeleteFileDialog($event)"
*ngIf="permissionsService.canDeleteFile(fileStatus)"
*ngIf="canDelete"
[tooltipPosition]="tooltipPosition"
[tooltip]="'dossier-overview.delete.action' | translate"
[type]="buttonType"
@ -23,7 +22,7 @@
(action)="assign($event)"
*ngIf="canAssign && screen === 'dossier-overview'"
[tooltipPosition]="tooltipPosition"
[tooltip]="assignTooltip"
[tooltip]="assignTooltip | translate"
[type]="buttonType"
icon="red:assign"
></iqser-circle-button>
@ -88,14 +87,10 @@
<!-- Approved-->
<iqser-circle-button
(action)="setFileApproved($event)"
*ngIf="permissionsService.isReadyForApproval(fileStatus)"
[disabled]="!permissionsService.canApprove(fileStatus)"
*ngIf="readyForApproval"
[disabled]="!canApprove"
[tooltipPosition]="tooltipPosition"
[tooltip]="
permissionsService.canApprove(fileStatus)
? ('dossier-overview.approve' | translate)
: ('dossier-overview.approve-disabled' | translate)
"
[tooltip]="canApprove ? ('dossier-overview.approve' | translate) : ('dossier-overview.approve-disabled' | translate)"
[type]="buttonType"
icon="red:approved"
></iqser-circle-button>
@ -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"

2
apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss
View File

@ -17,7 +17,7 @@
font-weight: bold;
}
redaction-status-bar {
iqser-status-bar {
margin-left: 2px;
}

122
apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
View File

@ -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<string>();
screen: 'file-preview' | 'dossier-overview';
statusBarConfig?: readonly StatusBarConfig<FileStatus.StatusEnum>[];
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');
});
}

6
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
View File

@ -147,15 +147,15 @@
class="small-label loading"
translate="dossier-overview.file-listing.file-entry.file-processing"
></div>
<redaction-status-bar
<iqser-status-bar
*ngIf="fileStatus.isWorkable"
[config]="[
[configs]="[
{
color: fileStatus.status,
length: 1
}
]"
></redaction-status-bar>
></iqser-status-bar>
<redaction-file-actions
(actionPerformed)="calculateData()"

2
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
View File

@ -32,7 +32,7 @@
<div class="flex-1 actions-container">
<ng-container *ngIf="!appStateService.activeFile.isExcluded">
<ng-container *ngIf="!appStateService.activeFile.isProcessing">
<redaction-status-bar [config]="statusBarConfig" [small]="true"></redaction-status-bar>
<iqser-status-bar [configs]="statusBarConfig" [small]="true"></iqser-status-bar>
<div class="all-caps-label mr-16 ml-8">
{{ translations[status] | translate }}

6
apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
View File

@ -59,8 +59,8 @@
</div>
<div>
<redaction-status-bar
[config]="[
<iqser-status-bar
[configs]="[
{
color: item.status,
label: fileStatusTranslations[item.status] | translate,
@ -69,7 +69,7 @@
}
]"
[small]="true"
></redaction-status-bar>
></iqser-status-bar>
</div>
<div class="small-label">

6
apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
View File

@ -30,8 +30,8 @@
[class.active]="filterChecked$(val.key) | async"
[class.filter-disabled]="(statusFilters$ | async)?.length === 0"
>
<redaction-status-bar
[config]="[
<iqser-status-bar
[configs]="[
{
length: val.value,
color: val.color,
@ -41,7 +41,7 @@
]"
[small]="true"
>
</redaction-status-bar>
</iqser-status-bar>
</div>
</div>
</div>

11
apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.html
View File

@ -1,11 +0,0 @@
<div [ngClass]="{ small: small }" class="rectangle-container">
<div *ngFor="let rect of config" [style]="'flex: ' + (rect.length || 1) + ';'" class="section-wrapper">
<div
[className]="'rectangle ' + rect.color"
[ngStyle]="{
'background-color': rect.color.includes('#') ? rect.color : ''
}"
></div>
<div *ngIf="rect.label" [class]="rect.cssClass">{{ rect.label }}</div>
</div>
</div>

46
apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.scss
View File

@ -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;
}
}

22
apps/red-ui/src/app/modules/shared/components/status-bar/status-bar.component.ts
View File

@ -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;
}

2
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

@ -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,

2
apps/red-ui/src/app/services/permissions.service.ts
View File

@ -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 (

2
libs/common-ui

@ -1 +1 @@
Subproject commit 7e9b28a10c7b226dcab54354c6e7f1d8ccebc0c6
Subproject commit 1d46b21c74c07d6811a99b9de6c940c740bc8ceb