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

Pull request #21: Project overview file status

Browse Source 
Merge in RED/ui from ui-updates to master

* commit 'dfe82287d9236b25eb11d7af30d30858c26f32bf':
  Project overview file status
This commit is contained in:
Timo Bejan 2020-10-28 10:13:04 +01:00
commit 75e8981671
9 changed files with 302 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@
[style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + strokeWidth + 'px;'"
>
<div class="heading-xl">{{ dataTotal }}</div>
<div class="projects-text mt-5">{{ subtitle | translate }}</div>
<div class="mt-5">{{ subtitle | translate }}</div>
</div>
<div class="breakdown-container">

4
apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
View File

@ -19,6 +19,10 @@
justify-content: center;
align-items: center;
box-sizing: border-box;
> div {
text-align: center;
}
}
.breakdown-container {

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

@ -89,7 +89,7 @@
[class.pointer]="canOpenProject(pw)"
>
<div>
<div class="table-item-title table-item-title--large">
<div class="table-item-title">
{{ pw.project.projectName }}
</div>
<div class="small-label stats-subtitle">

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

@ -123,14 +123,14 @@
<div
class="table-item"
[class.pointer]="canOpenFile(fileStatus.status)"
[class.pointer]="canOpenFile(fileStatus)"
*ngFor="
let fileStatus of appStateService.activeProject.files
| sortBy: sortingOption.order:sortingOption.column;
trackBy: fileId
"
[routerLink]="
canOpenFile(fileStatus.status)
canOpenFile(fileStatus)
? ['/ui/projects/' + activeProject.projectId + '/file/' + fileStatus.fileId]
: []
"
@ -144,7 +144,11 @@
</div>
<div [matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename">
<div class="table-item-title table-item-title--large">
<div
class="table-item-title"
[class.disabled]="isPending(fileStatus) || isProcessing(fileStatus)"
[class.error]="isError(fileStatus)"
>
{{ fileStatus.filename }}
</div>
<div class="small-label stats-subtitle">
@ -155,11 +159,13 @@
</div>
</div>
<div class="small-label">
<div>
<div class="small-label" [class.error]="isError(fileStatus)">
{{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
</div>
</div>
<div class="needs-work">
<div class="needs-work" *ngIf="!isError(fileStatus)">
<redaction-annotation-icon
[typeValue]="appStateService.getDictionaryTypeValue('redaction')"
></redaction-annotation-icon>
@ -168,23 +174,38 @@
></redaction-annotation-icon>
</div>
<div class="assigned-to">
<div class="assigned-to" *ngIf="!isError(fileStatus)">
<redaction-initials-avatar
withName="true"
[userId]="fileStatus.currentReviewer"
></redaction-initials-avatar>
</div>
<div class="status-container">
<div class="status-container" [class.extend-cols]="isError(fileStatus)">
<div
*ngIf="isError(fileStatus)"
class="small-label error"
translate="project-overview.file-listing.file-entry.file-error.label"
></div>
<div
class="small-label"
*ngIf="isPending(fileStatus)"
translate="project-overview.file-listing.file-entry.file-pending.label"
></div>
<div
class="small-label"
*ngIf="isProcessing(fileStatus)"
translate="processing"
></div>
<redaction-status-bar
*ngIf="
!isPending(fileStatus) &&
!isProcessing(fileStatus) &&
!isError(fileStatus)
"
[config]="[
{
color:
fileStatus.status === 'PROCESSED'
? 'finished'
: fileStatus.status === 'ERROR'
? 'under-approval'
: 'under-review',
color: fileStatus.status,
length: 1
}
]"

19
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
View File

@ -39,8 +39,21 @@
grid-template-columns: auto 3fr 2fr 1fr 2fr auto;
.table-item {
.disabled {
color: $grey-7;
}
.error {
color: $red-1;
}
.extend-cols {
grid-column-end: span 3;
align-items: flex-end;
}
.table-item-title {
//line-height: 80px;
max-width: 25vw;
}
.needs-work {
@ -50,6 +63,10 @@
justify-content: flex-start;
gap: 4px;
}
.status-container {
align-items: flex-end;
}
}
}

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

@ -98,6 +98,20 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
: 0;
}
public isPending(fileStatus: FileStatus) {
return fileStatus.status === FileStatus.StatusEnum.UNPROCESSED;
}
public isError(fileStatus: FileStatus) {
return fileStatus.status === FileStatus.StatusEnum.ERROR;
}
public isProcessing(fileStatus: FileStatus) {
return [FileStatus.StatusEnum.REPROCESS, FileStatus.StatusEnum.PROCESSING].includes(
fileStatus.status
);
}
private _reloadProjects() {
this.appStateService.loadAllProjects().then(() => {
this._calculateChartConfig();
@ -221,10 +235,9 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
this._fileUploadService.uploadFiles(uploadFiles);
this._uploadStatusOverlayService.openStatusOverlay();
}
public canOpenFile(fileStatus: FileStatus): boolean {
// TODO check correct condition for this
return fileStatus === 'PROCESSING' || fileStatus === 'REVIEWED' || true;
return !this.isError(fileStatus) && (fileStatus.status === 'PROCESSING' || true);
}
public toggleSortByAddedOn() {

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

@ -393,6 +393,15 @@
},
"last-updated": {
"label": "Last updated: {{lastUpdated}}"
},
"file-pending": {
"label": "Pending..."
},
"file-processing": {
"label": "Processing..."
},
"file-error": {
"label": "The file has encountered an error and cannot be opened."
}
}
},

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

@ -32,6 +32,7 @@ body {
.right-fixed-container {
border-left: 1px solid $grey-4;
background: $white;
height: 100%;
width: $right-container-inside-width;
padding: $right-container-padding;

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

@ -7,6 +7,7 @@ $grey-3: #aaacb3;
$grey-4: #e2e4e9;
$grey-5: #d3d5da;
$grey-6: #f0f1f4;
$grey-7: #9398a0;
$blue-1: #4875f7;
$blue-2: #48c9f7;