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

tooltips fix

Browse Source
This commit is contained in:
Timo Bejan 2020-11-06 20:06:47 +02:00
parent 39dc1752ab
commit b33b66ce8e
9 changed files with 163 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,68 +16,78 @@
</div>
<div class="flex-1 actions-container">
<div class="actions-row">
<button
(click)="openDeleteFileDialog($event)"
*ngIf="userService.isManager(user)"
mat-icon-button
>
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<div
[matTooltip]="
(appStateService.activeFile.isApproved
? 'report.action'
: 'report.unavailable-single'
) | translate
"
[matTooltipHideDelay]="400000"
[matTooltipPosition]="'above'"
>
<button
(click)="openDeleteFileDialog($event)"
*ngIf="userService.isManager(user)"
mat-icon-button
(click)="appStateService.downloadFileRedactionReport()"
*ngIf="appStateService.isActiveProjectOwnerAndManager"
[disabled]="!appStateService.activeFile.isApproved"
color="accent"
>
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<button mat-icon-button>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<button
(click)="assignReviewer()"
*ngIf="appStateService.isActiveProjectMember && !isApprovedOrUnderApproval()"
mat-icon-button
>
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button
(click)="reanalyseFile($event)"
*ngIf="appStateService.isActiveProjectMember && !isApproved()"
mat-icon-button
>
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>
<button
*ngIf="canApprove() && appStateService.isActiveProjectOwnerAndManager"
(click)="requestApprovalOrApproveFile($event)"
color="accent"
mat-icon-button
[matTooltip]="
(appStateService.activeFile.status === 'UNDER_APPROVAL'
? 'project-overview.approve'
: 'project-overview.under-approval'
) | translate
"
[matTooltipPosition]="'above'"
>
<mat-icon svgIcon="red:check-alt"></mat-icon>
</button>
<button
(click)="undoApproveOrUnderApproval($event)"
*ngIf="
isApprovedOrUnderApproval() &&
appStateService.isActiveProjectOwnerAndManager
"
[matTooltip]="
(appStateService.activeFile.status === 'APPROVED'
? 'project-overview.under-approval'
: 'project-overview.under-review'
) | translate
"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:undo"></mat-icon>
</button>
<button (click)="openFileDetailsDialog($event)" mat-icon-button>
<mat-icon svgIcon="red:info"></mat-icon>
</button>
</div>
<button (click)="assignReviewer()" *ngIf="!isApprovedOrUnderApproval()" mat-icon-button>
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button
(click)="reanalyseFile($event)"
*ngIf="appStateService.canReanalyseFile()"
mat-icon-button
>
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>
<button
*ngIf="canApprove() && appStateService.isActiveProjectOwnerAndManager"
(click)="requestApprovalOrApproveFile($event)"
color="accent"
mat-icon-button
[matTooltip]="
(appStateService.activeFile.status === 'UNDER_APPROVAL'
? 'project-overview.approve'
: 'project-overview.under-approval'
) | translate
"
[matTooltipPosition]="'above'"
>
<mat-icon svgIcon="red:check-alt"></mat-icon>
</button>
<button
(click)="undoApproveOrUnderApproval($event)"
*ngIf="
isApprovedOrUnderApproval() && appStateService.isActiveProjectOwnerAndManager
"
[matTooltip]="
(appStateService.activeFile.status === 'APPROVED'
? 'project-overview.under-approval'
: 'project-overview.under-review'
) | translate
"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:undo"></mat-icon>
</button>
<button (click)="openFileDetailsDialog($event)" mat-icon-button>
<mat-icon svgIcon="red:info"></mat-icon>
</button>
<button
(click)="downloadFile('REDACTED')"

16
apps/red-ui/src/app/screens/file/model/file-status.wrapper.ts
View File

@ -75,10 +75,26 @@ export class FileStatusWrapper {
return this.fileStatus.uploader;
}
get isApproved() {
return this.fileStatus.status === 'APPROVED';
}
get isError() {
return this.fileStatus.status === 'ERROR';
}
get pages() {
if (this.fileStatus.status === 'ERROR') {
return -1;
}
return this.fileStatus.numberOfPages ? this.fileStatus.numberOfPages : 0;
}
get isApprovedOrUnderApproval() {
return this.status === 'APPROVED' || this.status === 'UNDER_APPROVAL';
}
get canApprove() {
return this.status === 'UNDER_REVIEW' || this.status === 'UNDER_APPROVAL';
}
}

31
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -194,19 +194,25 @@
<mat-icon svgIcon="red:edit"></mat-icon>
</button>
<button
mat-icon-button
(click)="downloadRedactionReport($event, pw.project)"
*ngIf="
appStateService.isManagerAndOwner(user, pw.project) &&
pw.hasFiles
<div
[matTooltip]="
(pw.allFilesApproved ? 'report.action' : 'report.unavailable')
| translate
"
[matTooltip]="'project-listing.report.action' | translate"
[matTooltipPosition]="'above'"
color="accent"
>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<button
mat-icon-button
(click)="downloadRedactionReport($event, pw.project)"
*ngIf="
appStateService.isManagerAndOwner(pw.project) && pw.hasFiles
"
[disabled]="!pw.allFilesApproved"
color="accent"
>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
</div>
<button
(click)="openAssignProjectOwnerDialog($event, pw.project)"
[matTooltip]="'project-listing.assign.action' | translate"
@ -219,10 +225,7 @@
</button>
<button
color="accent"
*ngIf="
appStateService.isManagerAndOwner(user, pw.project) &&
pw.hasFiles
"
*ngIf="appStateService.isManagerAndOwner(pw.project) && pw.hasFiles"
(click)="reanalyseProject($event, pw.project)"
mat-icon-button
[matTooltip]="'project-listing.reanalyse.action' | translate"

5
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
View File

@ -116,11 +116,6 @@ export class ProjectListingScreenComponent implements OnInit {
});
}
public downloadRedactionReport($event: MouseEvent, project: Project) {
$event.preventDefault();
this.appStateService.downloadRedactionReport(project);
}
public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) {
this._dialogService.openAssignProjectMembersAndOwnerDialog($event, project);
}

32
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -254,20 +254,30 @@
>
<mat-icon svgIcon="red:trash"></mat-icon>
</button>
<button
(click)="downloadFileRedactionReport($event, fileStatus)"
[matTooltip]="'project-overview.report.action' | translate"
<div
[matTooltip]="
(fileStatus.isApproved
? 'report.action'
: 'report.unavailable-single'
) | translate
"
[matTooltipPosition]="'above'"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
<button
(click)="downloadFileRedactionReport($event, fileStatus)"
[disabled]="!fileStatus.isApproved"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:report"></mat-icon>
</button>
</div>
<button
(click)="assignReviewer($event, fileStatus)"
*ngIf="
appStateService.isActiveProjectMember &&
!isApprovedOrUnderApproval(fileStatus)
!fileStatus.isApprovedOrUnderApproval
"
[matTooltip]="'project-overview.assign.action' | translate"
[matTooltipPosition]="'above'"
@ -278,7 +288,7 @@
</button>
<button
(click)="reanalyseFile($event, fileStatus)"
*ngIf="!isApproved(fileStatus)"
*ngIf="appStateService.canReanalyseFile(fileStatus)"
[matTooltip]="'project-overview.reanalyse.action' | translate"
[matTooltipPosition]="'above'"
color="accent"
@ -289,7 +299,7 @@
<button
(click)="requestApprovalOrApproveFile($event, fileStatus)"
*ngIf="
canApprove(fileStatus) &&
fileStatus.canApprove &&
appStateService.isActiveProjectOwnerAndManager
"
[matTooltip]="
@ -307,7 +317,7 @@
<button
(click)="undoApproveOrUnderApproval($event, fileStatus)"
*ngIf="
isApprovedOrUnderApproval(fileStatus) &&
fileStatus.isApprovedOrUnderApproval &&
appStateService.isActiveProjectOwnerAndManager
"
[matTooltip]="

17
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -343,21 +343,4 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
this.reloadProjects();
});
}
isApprovedOrUnderApproval(fileStatusWrapper: FileStatusWrapper) {
return (
fileStatusWrapper.status === 'APPROVED' || fileStatusWrapper.status === 'UNDER_APPROVAL'
);
}
canApprove(fileStatusWrapper: FileStatusWrapper) {
return (
fileStatusWrapper.status === 'UNDER_REVIEW' ||
fileStatusWrapper.status === 'UNDER_APPROVAL'
);
}
isApproved(fileStatusWrapper: FileStatusWrapper) {
return fileStatusWrapper.status === 'APPROVED';
}
}

29
apps/red-ui/src/app/state/app-state.service.ts
View File

@ -39,6 +39,9 @@ export class ProjectWrapper {
hasHints?: boolean;
hasRedactions?: boolean;
hasRequests?: boolean;
allFilesApproved?: boolean;
private _files: FileStatusWrapper[];
constructor(public project: Project, files: FileStatusWrapper[]) {
@ -87,10 +90,12 @@ export class ProjectWrapper {
this.hasHints = false;
this.hasRedactions = false;
this.hasRequests = false;
this.allFilesApproved = true;
this._files.forEach((f) => {
this.hasHints = this.hasHints || f.hasHints;
this.hasRedactions = this.hasRedactions || f.hasRedactions;
this.hasRequests = this.hasRequests || f.hasRequests;
this.allFilesApproved = this.allFilesApproved && f.isApproved;
});
}
}
@ -467,7 +472,10 @@ export class AppStateService {
await this.reloadActiveProjectFiles();
}
downloadFileRedactionReport(file: FileStatusWrapper) {
downloadFileRedactionReport(file?: FileStatusWrapper) {
if (!file) {
file = this.activeFile;
}
this._fileUploadControllerService
.downloadRedactionReport({ fileIds: [file.fileId] }, true, 'response')
.subscribe((data) => {
@ -536,7 +544,10 @@ export class AppStateService {
return data ? data : this._dictionaryData['default'];
}
isManagerAndOwner(user: UserWrapper, project: Project) {
isManagerAndOwner(project: Project, user?: UserWrapper) {
if (!user) {
user = this._userService.user;
}
return user.isManager && project.ownerId === user.id;
}
@ -566,12 +577,24 @@ export class AppStateService {
);
}
canReanalyseFile(fileStatus?: FileStatusWrapper) {
if (!fileStatus) {
fileStatus = this.activeFile;
}
return (
(!fileStatus.isApproved && this.fileNotUpToDateWithDictionary(fileStatus)) ||
fileStatus.isError
);
}
fileNotUpToDateWithDictionary(fileStatus?: FileStatusWrapper) {
if (!fileStatus) {
fileStatus = this.activeFile;
}
return (
(fileStatus.status === 'UNASSIGNED' || fileStatus.status === 'UNDER_REVIEW') &&
(fileStatus.status === 'UNASSIGNED' ||
fileStatus.status === 'UNDER_REVIEW' ||
fileStatus.status === 'UNDER_APPROVAL') &&
fileStatus.dictionaryVersion !== this.dictionaryVersion
);
}

8
apps/red-ui/src/assets/i18n/en.json
View File

@ -90,10 +90,12 @@
"document": "Document",
"needs-work": "Analysed"
},
"report": {
"unavailable": "Redaction Report is only available once all files have been approved.",
"unavailable-single": "Redaction Report is only available once this file has been approved.",
"action": "Download Redaction Report"
},
"project-listing": {
"report": {
"action": "Download Redaction Report"
},
"reanalyse": {
"action": "Reanalyse entire Project"
},

15
apps/red-ui/src/assets/styles/red-tooltips.scss
View File

@ -16,13 +16,22 @@
.mat-tooltip:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-top: solid 6px $accent;
z-index: 3000;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
z-index: 3000;
border-top: solid 6px $accent;
}
.mat-tooltip[style*='transform-origin: center top']:after {
top: -6px;
transform: rotate(180deg);
}
.mat-tooltip[style*='transform-origin: center bottom']:after {
top: 100%;
border-top: solid 6px $accent;
}