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

Project listing details component

Browse Source
This commit is contained in:
Adina Țeudan 2020-11-07 13:22:57 +02:00
parent 1c65ebdc1f
commit 095360012b
7 changed files with 90 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,6 +73,7 @@ import { PageIndicatorComponent } from './screens/file/page-indicator/page-indic
import { NeedsWorkBadgeComponent } from './screens/common/needs-work-badge/needs-work-badge.component';
import { ProjectOverviewEmptyComponent } from './screens/empty-states/project-overview-empty/project-overview-empty.component';
import { ProjectListingEmptyComponent } from './screens/empty-states/project-listing-empty/project-listing-empty.component';
import { ProjectListingDetailsComponent } from './screens/project-listing-screen/project-listing-details/project-listing-details.component';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@ -111,7 +112,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
PageIndicatorComponent,
NeedsWorkBadgeComponent,
ProjectOverviewEmptyComponent,
ProjectListingEmptyComponent
ProjectListingEmptyComponent,
ProjectListingDetailsComponent
],
imports: [
BrowserModule,

32
apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html Normal file
View File

@ -0,0 +1,32 @@
<div>
<redaction-simple-doughnut-chart
[config]="projectsChartData"
[strokeWidth]="15"
[subtitle]="'project-listing.stats.charts.projects'"
></redaction-simple-doughnut-chart>
<div class="project-stats-container">
<div class="project-stats-item">
<mat-icon svgIcon="red:document"></mat-icon>
<div>
<div class="heading">{{ totalPages }}</div>
<div translate="project-listing.stats.analyzed-pages"></div>
</div>
</div>
<div class="project-stats-item">
<mat-icon svgIcon="red:user"></mat-icon>
<div>
<div class="heading">{{ totalPeople }}</div>
<div translate="project-listing.stats.total-people"></div>
</div>
</div>
</div>
</div>
<div>
<redaction-simple-doughnut-chart
[config]="documentsChartData"
[strokeWidth]="15"
[subtitle]="'project-listing.stats.charts.total-documents'"
></redaction-simple-doughnut-chart>
</div>

26
apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss Normal file
View File

@ -0,0 +1,26 @@
:host {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.project-stats-container {
width: fit-content;
.project-stats-item {
display: flex;
width: fit-content;
gap: 5px;
margin-top: 25px;
&:first-of-type {
margin-top: 50px;
}
mat-icon {
height: 16px;
margin-top: 2px;
}
}
}

25
apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts Normal file
View File

@ -0,0 +1,25 @@
import { Component, Input, OnInit } from '@angular/core';
import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component';
import { AppStateService } from '../../../state/app-state.service';
@Component({
selector: 'redaction-project-listing-details',
templateUrl: './project-listing-details.component.html',
styleUrls: ['./project-listing-details.component.scss']
})
export class ProjectListingDetailsComponent implements OnInit {
@Input() public projectsChartData: DoughnutChartConfig[];
@Input() public documentsChartData: DoughnutChartConfig[];
constructor(private readonly _appStateService: AppStateService) {}
ngOnInit(): void {}
public get totalPages() {
return this._appStateService.totalAnalysedPages;
}
public get totalPeople() {
return this._appStateService.totalPeople;
}
}

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

@ -229,38 +229,10 @@
</div>
<div class="right-fixed-container">
<div>
<redaction-simple-doughnut-chart
[config]="projectsChartData"
[strokeWidth]="15"
[subtitle]="'project-listing.stats.charts.projects'"
></redaction-simple-doughnut-chart>
<div class="project-stats-container">
<div class="project-stats-item">
<mat-icon svgIcon="red:document"></mat-icon>
<div>
<div class="heading">{{ totalPages }}</div>
<div translate="project-listing.stats.analyzed-pages"></div>
</div>
</div>
<div class="project-stats-item">
<mat-icon svgIcon="red:user"></mat-icon>
<div>
<div class="heading">{{ totalPeople }}</div>
<div translate="project-listing.stats.total-people"></div>
</div>
</div>
</div>
</div>
<div>
<redaction-simple-doughnut-chart
[config]="documentsChartData"
[strokeWidth]="15"
[subtitle]="'project-listing.stats.charts.total-documents'"
></redaction-simple-doughnut-chart>
</div>
<redaction-project-listing-details
[projectsChartData]="projectsChartData"
[documentsChartData]="documentsChartData"
></redaction-project-listing-details>
</div>
</div>
</section>

27
apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
View File

@ -38,31 +38,4 @@
display: flex;
width: 430px;
padding-top: 50px;
> div {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.project-stats-container {
width: fit-content;
.project-stats-item {
display: flex;
width: fit-content;
gap: 5px;
margin-top: 25px;
&:first-of-type {
margin-top: 50px;
}
mat-icon {
height: 16px;
margin-top: 2px;
}
}
}
}

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

@ -72,14 +72,6 @@ export class ProjectListingScreenComponent implements OnInit {
return this.userService.user;
}
public get totalPages() {
return this.appStateService.totalAnalysedPages;
}
public get totalPeople() {
return this.appStateService.totalPeople;
}
public get activeProjects() {
return this.appStateService.allProjects.reduce(
(i, p) => i + (p.project.status === Project.StatusEnum.ACTIVE ? 1 : 0),