Pull request #21: Project overview file status

Merge in RED/ui from ui-updates to master

* commit 'dfe82287d9236b25eb11d7af30d30858c26f32bf':
  Project overview file status

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

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

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

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

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

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

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

@@ -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:
+                                color: fileStatus.status,
-                                    fileStatus.status === 'PROCESSED'
-                                        ? 'finished'
-                                        : fileStatus.status === 'ERROR'
-                                        ? 'under-approval'
-                                        : 'under-review',
                                 length: 1
                             }
                         ]"

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

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

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

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

apps/red-ui/src/assets/i18n/en.json

@@ -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."
                 }
             }
         },

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

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

apps/red-ui/src/assets/styles/red-variables.scss

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