Project status bar using real data

apps/red-ui/src/app/components/status-bar/status-bar.component.html

@@ -1,5 +1,5 @@
 <div class="rectangle-container" [ngClass]="{ small: small }">
-  <div *ngFor="let rect of config" [className]="'section-wrapper flex-' + rect.length">
+  <div *ngFor="let rect of config" class="section-wrapper" [style]="'flex: ' + rect.length + ';'">
     <div [className]="'rectangle ' + rect.color "></div>
     <div *ngIf="rect.label" [ngClass]="labelClass">{{ rect.label }}</div>
   </div>

apps/red-ui/src/app/components/status-bar/status-bar.component.scss

@@ -39,39 +39,39 @@
   .rectangle {
     height: 4px;
 
-    &.unassigned {
+    &.UNASSIGNED {
       background-color: $grey-5;
     }
 
-    &.under-review {
+    &.UNDER_REVIEW {
       background-color: $yellow-1;
     }
 
-    &.under-approval {
+    &.UNDER_APPROVAL {
       background-color: $red-1;
     }
 
-    &.approved {
+    &.APPROVED {
       background-color: $blue-2;
     }
 
-    &.submitted {
+    &.SUBMITTED {
       background-color: $blue-3;
     }
 
-    &.efsa {
+    &.EFSA {
       background-color: $blue-4;
     }
 
-    &.finished {
+    &.FINISHED {
       background-color: $green-2;
     }
 
-    &.active {
+    &.ACTIVE {
       background-color: $primary;
     }
 
-    &.archived {
+    &.ARCHIVED {
       background-color: rgba($red-1, 0.1);
     }
   }

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

@@ -92,7 +92,7 @@
         </div>
         <div class="status-container">
           <redaction-status-bar
-            [config]="[{ color: 'under-review', length: 2}, { length: 1, color: 'finished'}]"
+            [config]="getProjectStatusConfig(pw)"
           ></redaction-status-bar>
 
           <div class="action-buttons">

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

@@ -1,11 +1,11 @@
-import {Component, OnInit} from '@angular/core';
-import {Project} from '@redaction/red-ui-http';
-import {AppStateService, ProjectWrapper} from '../../state/app-state.service';
-import {UserService} from '../../user/user.service';
-import {DoughnutChartConfig} from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
-import {SortingOption} from '../../utils/types';
-import {groupBy} from '../../utils/functions';
-import {DialogService} from '../../dialogs/dialog.service';
+import { Component, OnInit } from '@angular/core';
+import { Project } from '@redaction/red-ui-http';
+import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
+import { UserService } from '../../user/user.service';
+import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { SortingOption } from '../../utils/types';
+import { groupBy } from '../../utils/functions';
+import { DialogService } from '../../dialogs/dialog.service';
 
 @Component({
   selector: 'redaction-project-listing-screen',
@@ -99,4 +99,14 @@ export class ProjectListingScreenComponent implements OnInit {
   public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) {
     this._dialogService.openAssignProjectMembersAndOwnerDialog($event, project);
   }
+
+  public getProjectStatusConfig(pw: ProjectWrapper) {
+    const obj = pw.files.reduce((acc, file) => {
+      const status = file.status;
+      acc[status]++ || (acc[status] = 1);
+      return acc;
+    }, {})
+
+    return Object.keys(obj).map(status => ({ length: obj[status], color: status }));
+  }
 }

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

@@ -88,22 +88,6 @@ html, body {
   flex: 2;
 }
 
-.flex-3 {
-  flex: 3;
-}
-
-.flex-4 {
-  flex: 4;
-}
-
-.flex-5 {
-  flex: 5;
-}
-
-.flex-6 {
-  flex: 6;
-}
-
 .mt-5 {
   margin-top: 5px;
 }