Project listing details component

apps/red-ui/src/app/app.module.ts

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

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

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

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

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

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

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

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

@@ -229,38 +229,10 @@
         </div>
 
         <div class="right-fixed-container">
-            <div>
+            <redaction-project-listing-details
-                <redaction-simple-doughnut-chart
+                [projectsChartData]="projectsChartData"
-                    [config]="projectsChartData"
+                [documentsChartData]="documentsChartData"
-                    [strokeWidth]="15"
+            ></redaction-project-listing-details>
-                    [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>
         </div>
     </div>
 </section>

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

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

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

@@ -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),