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

File details in file preview

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-16 20:14:49 +02:00 committed by Timo Bejan
parent 8d7dea5774
commit 72fa0a7f35
13 changed files with 155 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/red-ui/src/app/common/file-actions/file-actions.component.html
View File

@ -1,21 +1,4 @@
<div class="file-actions">
<div *ngIf="screen === 'file-preview'" class="reviewer">
<div class="reviewer-label"><span translate="file-preview.reviewer"></span>:</div>
<span *ngIf="fileStatus.reviewerName">{{ fileStatus.reviewerName }}</span>
<span *ngIf="!fileStatus.reviewerName" translate="file-preview.unassigned"></span>
</div>
<button
(click)="assignReviewer($event, fileStatus)"
*ngIf="permissionsService.canAssignReviewer(fileStatus)"
[matTooltipPosition]="tooltipPosition"
[matTooltip]="'project-overview.assign.action' | translate"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button
#reanalyseTooltip="matTooltip"
(click)="reanalyseFile($event, fileStatus)"
@ -39,6 +22,17 @@
<mat-icon svgIcon="red:refresh"></mat-icon>
</button>
<button
(click)="assignReviewer($event, fileStatus)"
*ngIf="permissionsService.canAssignReviewer(fileStatus) && screen !== 'file-preview'"
[matTooltipPosition]="tooltipPosition"
[matTooltip]="'project-overview.assign.action' | translate"
color="accent"
mat-icon-button
>
<mat-icon svgIcon="red:assign"></mat-icon>
</button>
<button
(click)="openDeleteFileDialog($event, fileStatus)"
*ngIf="permissionsService.canDeleteFile(fileStatus)"

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

@ -1,10 +1,5 @@
<div [class]="'container flex ' + direction">
<svg
attr.height="{{ size }}"
attr.width="{{ size }}"
attr.viewBox="0 0 {{ size }} {{ size }}"
class="donut-chart"
>
<svg attr.height="{{ size }}" attr.width="{{ size }}" attr.viewBox="0 0 {{ size }} {{ size }}" class="donut-chart">
<g *ngFor="let value of parsedConfig; let i = index">
<circle
attr.cx="{{ cx }}"
@ -20,29 +15,21 @@
</g>
</svg>
<div
class="text-container"
[style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'"
>
<div class="text-container" [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'">
<div class="heading-xl">{{ dataTotal }}</div>
<div class="mt-5">{{ subtitle | translate }}</div>
</div>
<div class="breakdown-container">
<div>
<div
*ngFor="let val of parsedConfig"
[class.active]="val.checked"
[class.filter-disabled]="!filter"
(click)="toggleFilter.emit(val.label)"
>
<div *ngFor="let val of parsedConfig" [class.active]="val.checked" [class.filter-disabled]="!filter" (click)="toggleFilter.emit(val.label)">
<redaction-status-bar
[small]="true"
[config]="[
{
length: val.value,
color: val.color,
label: val.value + ' ' + (val.label | humanize)
label: val.value + ' ' + (val.label.toLowerCase().replace('_', '-') | translate)
}
]"
>

10
apps/red-ui/src/app/dialogs/dialog.service.ts
View File

@ -178,6 +178,16 @@ export class DialogService {
return ref;
}
public openAssignFileToMeDialog(file: FileStatus, cb?: Function): MatDialogRef<ConfirmationDialogComponent> {
const ref = this._dialog.open(ConfirmationDialogComponent, dialogConfig);
ref.afterClosed().subscribe((result) => {
if (result && cb) cb(result);
});
return ref;
}
public openBulkAssignFileReviewerDialog(fileIds: string[], cb?: Function): MatDialogRef<AssignOwnerDialogComponent> {
const projectId = this._appStateService.activeProject.project.projectId;
const ref = this._dialog.open(AssignOwnerDialogComponent, {

1
apps/red-ui/src/app/icons/icons.module.ts
View File

@ -17,6 +17,7 @@ export class IconsModule {
'arrow-up',
'arrow-right',
'assign',
'assign-me',
'calendar',
'check',
'close',

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

@ -11,13 +11,51 @@
</div>
</div>
<div class="flex-1 filename page-title">
<span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill" translate="readonly-pill"></span>&nbsp;<span>{{
appStateService.activeFile.filename
}}</span>
<div class="page-title">
<span *ngIf="!permissionsService.canPerformAnnotationActions()" class="pill" translate="readonly-pill"></span>
</div>
<div class="flex-1 actions-container">
<div class="flex-1 actions-container" *ngIf="viewReady">
<redaction-status-bar
[small]="true"
[config]="[
{
length: 1,
color: fileData.fileStatus.status
}
]"
>
</redaction-status-bar>
<div class="all-caps-label mr-8">{{ fileData.fileStatus.status.toLowerCase().replace('_', '-') | translate }}</div>
<redaction-initials-avatar
[userId]="fileData.fileStatus.currentReviewer"
[withName]="fileData.fileStatus.currentReviewer"
></redaction-initials-avatar>
<div
*ngIf="!fileData.fileStatus.currentReviewer && permissionsService.canAssignReviewer(fileData.fileStatus)"
class="assign-reviewer pointer"
translate="file-preview.assign-reviewer"
(click)="assignReviewer()"
></div>
<button
mat-icon-button
matTooltipPosition="below"
[matTooltip]="'project-overview.assign.action' | translate"
*ngIf="permissionsService.canAssignReviewer(fileData.fileStatus) && fileData.fileStatus.currentReviewer"
(click)="assignReviewer()"
>
<mat-icon svgIcon="red:edit"></mat-icon>
</button>
<button
mat-icon-button
matTooltipPosition="below"
[matTooltip]="'file-preview.assign-me' | translate"
*ngIf="permissionsService.canAssignReviewer(fileData.fileStatus) && !permissionsService.isFileReviewer()"
(click)="assignToMe()"
>
<mat-icon svgIcon="red:assign-me"></mat-icon>
</button>
<div class="vertical-line"></div>
<redaction-file-actions (actionPerformed)="fileActionPerformed($event)" *ngIf="viewReady"></redaction-file-actions>
<button [routerLink]="['/ui/projects/' + appStateService.activeProjectId]" mat-icon-button>
<mat-icon svgIcon="red:close"></mat-icon>

22
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -9,6 +9,21 @@ redaction-pdf-viewer {
z-index: 2;
}
.vertical-line {
width: 1px;
height: 30px;
background-color: $grey-4;
margin: 0 8px;
}
.mr-8 {
margin-right: 8px;
}
.assign-reviewer {
text-decoration: underline;
}
.actions-container {
display: flex;
justify-content: flex-end;
@ -16,13 +31,6 @@ redaction-pdf-viewer {
gap: 10px;
}
.filename {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.right-fixed-container {
padding: 0;
width: $right-container-width;

13
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -442,6 +442,7 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
break;
}
await this._loadFileData().toPromise();
this.canPerformAnnotationActions = this.permissionsService.canPerformAnnotationActions();
await this.appStateService.reloadActiveProjectFiles();
}
@ -449,4 +450,16 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
get displayData() {
return this.fileData ? (this.redactedView ? this.fileData.redactedFileData : this.fileData.annotatedFileData) : null;
}
public assignReviewer() {
this._fileActionService.assignProjectReviewer(this.fileData.fileStatus, async () => {
await this._loadFileData().toPromise();
});
}
public assignToMe() {
this._fileActionService.assignToMe(this.fileData.fileStatus, async () => {
await this._loadFileData().toPromise();
});
}
}

12
apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
View File

@ -204,6 +204,18 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
private _configureHeader() {
this.instance.setToolbarGroup('toolbarGroup-View');
this.instance.setHeaderItems((header) => {
const items = header.getItems();
const idx = items.findIndex((el) => el['dataElement'] === 'searchButton');
const title = document.createElement('div');
title.innerText = this.fileStatus.filename;
title.style.cssText = 'text-align: right; font-size: 11px; color: #283241; line-height: 14px;';
items.splice(idx, 0, {
type: 'customElement',
render: () => title
});
header.update(items);
});
}
public selectAnnotation(annotation: AnnotationWrapper) {

10
apps/red-ui/src/app/screens/file/service/file-action.service.ts
View File

@ -47,6 +47,16 @@ export class FileActionService {
}
}
public assignToMe(file?: FileStatus, callback?: Function) {
this._dialogService.openAssignFileToMeDialog(file ? file : this._appStateService.activeFile, async () => {
await this._statusControllerService.assignProjectOwner(this._appStateService.activeProjectId, file.fileId, this._userService.userId).toPromise();
await this._appStateService.reloadActiveProjectFiles();
if (callback) {
await callback();
}
});
}
setFileUnderApproval(fileStatus: FileStatusWrapper) {
return this._statusControllerService.setStatusUnderApproval(this._appStateService.activeProjectId, fileStatus.fileId);
}

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

@ -237,7 +237,9 @@
}
},
"reviewer": "Assigned to",
"unassigned": "Unassigned"
"unassigned": "Unassigned",
"assign-reviewer": "Assign Reviewer",
"assign-me": "Assign to me"
},
"annotation-actions": {
"message": {

31
apps/red-ui/src/assets/icons/general/assign-me.svg Normal file
View File

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>A52380C8-F72C-425E-8B18-75F0A16E2FA9</title>
<defs>
<rect id="path-1" x="0" y="61" width="1440" height="50"></rect>
<filter x="-0.5%" y="-10.0%" width="101.0%" height="128.0%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.88627451 0 0 0 0 0.894117647 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Assignee" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="01.-Unassigned" transform="translate(-1066.000000, -79.000000)">
<rect fill="#FFFFFF" x="0" y="0" width="1440" height="750"></rect>
<g id="Header-Document">
<g id="Rectangle">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="Group-13" transform="translate(917.000000, 69.000000)" fill="#283241" fill-rule="nonzero">
<g id="Group-6" transform="translate(139.000000, 0.000000)">
<g id="status" transform="translate(10.000000, 10.000000)">
<path d="M4.61951123,7.00768239 L4.6192693,8.41063592 C2.85882948,8.544763 1.4982383,9.93223022 1.40509185,11.7054415 L1.4,11.9 L1.4,12.6 L4.619,12.599 L4.62,14 L0,14 L0,11.9 C0,9.26418483 2.0228531,7.15039627 4.61951123,7.00768239 Z M4.9,0.7 C6.44,0.7 7.7,1.96 7.7,3.5 C7.7,5.04 6.44,6.3 4.9,6.3 C3.36,6.3 2.1,5.04 2.1,3.5 C2.1,1.96 3.36,0.7 4.9,0.7 Z M4.9,2.1 C4.13,2.1 3.5,2.73 3.5,3.5 C3.5,4.27 4.13,4.9 4.9,4.9 C5.67,4.9 6.3,4.27 6.3,3.5 C6.3,2.73 5.67,2.1 4.9,2.1 Z" id="Combined-Shape"></path>
<polygon id="Path" points="8.05 7 9.03 7.98 7.28 9.8 14 9.8 14 11.2 7.28 11.2 9.03 13.02 8.05 14 4.62 10.5"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

1
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -8,6 +8,7 @@
align-items: center;
height: 24px;
width: 24px;
min-width: 24px;
font-size: 10px;
line-height: 12px;
text-align: center;

1
apps/red-ui/src/assets/styles/red-text-styles.scss
View File

@ -34,6 +34,7 @@ a {
font-weight: 600;
line-height: 18px;
text-align: center;
padding: 0 20px;
}
.all-caps-label {