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

Project status bar using real data

Browse Source
This commit is contained in:
Adina Țeudan 2020-10-27 02:49:41 +02:00
parent f80639def1
commit 205fe57422
5 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<div class="rectangle-container" [ngClass]="{ small: small }"> <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 [className]="'rectangle ' + rect.color "></div>
<div *ngIf="rect.label" [ngClass]="labelClass">{{ rect.label }}</div> <div *ngIf="rect.label" [ngClass]="labelClass">{{ rect.label }}</div>
</div> </div>

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

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

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

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

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

@ -1,11 +1,11 @@
import {Component, OnInit} from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {Project} from '@redaction/red-ui-http'; import { Project } from '@redaction/red-ui-http';
import {AppStateService, ProjectWrapper} from '../../state/app-state.service'; import { AppStateService, ProjectWrapper } from '../../state/app-state.service';
import {UserService} from '../../user/user.service'; import { UserService } from '../../user/user.service';
import {DoughnutChartConfig} from '../../components/simple-doughnut-chart/simple-doughnut-chart.component'; import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simple-doughnut-chart.component';
import {SortingOption} from '../../utils/types'; import { SortingOption } from '../../utils/types';
import {groupBy} from '../../utils/functions'; import { groupBy } from '../../utils/functions';
import {DialogService} from '../../dialogs/dialog.service'; import { DialogService } from '../../dialogs/dialog.service';
@Component({ @Component({
selector: 'redaction-project-listing-screen', selector: 'redaction-project-listing-screen',
@ -99,4 +99,14 @@ export class ProjectListingScreenComponent implements OnInit {
public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) { public openAssignProjectOwnerDialog($event: MouseEvent, project: Project) {
this._dialogService.openAssignProjectMembersAndOwnerDialog($event, 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 }));
}
} }

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

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