feat(pmp-web): single user statistics component init with mocked data

angular.json

@@ -675,6 +675,7 @@
       "sourceRoot": "libs/pmp-web/user/single-user-statistics/feature/src",
       "projectType": "library",
       "schematics": {},
+      "prefix": "pimp-my-pr",
       "architect": {
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",

libs/pmp-web/user/shell/src/lib/containers/user/user.component.html

@@ -1,5 +1,7 @@
 <div class="user-component__container">
   <pmp-navbar class="navbar"></pmp-navbar>
   <pmp-sidebar class="sidebar"></pmp-sidebar>
-  <router-outlet></router-outlet>
+  <div class="router-outlet__wrapper">
+    <router-outlet></router-outlet>
+  </div>
 </div>

libs/pmp-web/user/shell/src/lib/containers/user/user.component.scss

@@ -21,3 +21,10 @@
   overflow-x: hidden;
   box-shadow: 0 1px 2px rgb(0, 0, 0, 0.2);
 }
+
+.router-outlet__wrapper {
+  position: absolute;
+  left: 60px;
+  top: 64px;
+  right: 0;
+}

libs/pmp-web/user/shell/src/lib/shell-routing.module.ts

@@ -13,6 +13,13 @@ const routes: Routes = [
           import('@pimp-my-pr/pmp-web/user/users-statistics/feature').then(
             m => m.PmpWebUserUsersStatisticsFeatureModule
           )
+      },
+      {
+        path: 'statistics',
+        loadChildren: () =>
+          import('@pimp-my-pr/pmp-web/user/single-user-statistics/feature').then(
+            m => m.PmpWebUserSingleUserStatisticsFeatureModule
+          )
       }
     ]
   }

libs/pmp-web/user/single-user-statistics/feature/src/index.ts

@@ -1 +1 @@
-export * from './lib/pmp-web-user-single-user-statistics-feature';
+export * from './lib/pmp-web-user-single-user-statistics-feature.module';

libs/pmp-web/user/single-user-statistics/feature/src/lib/containers/single-user-statistics/single-user-statistics.component.html

@@ -0,0 +1,5 @@
+<div class="user-statistics">
+  <div *ngFor="let repo of mockedData">
+    {{ repo.repository.name }}
+  </div>
+</div>

libs/pmp-web/user/single-user-statistics/feature/src/lib/containers/single-user-statistics/single-user-statistics.component.scss

@@ -0,0 +1,7 @@
+:host {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

libs/pmp-web/user/single-user-statistics/feature/src/lib/containers/single-user-statistics/single-user-statistics.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SingleUserStatisticsComponent } from './single-user-statistics.component';
+
+describe('SingleUserStatisticsComponent', () => {
+  let component: SingleUserStatisticsComponent;
+  let fixture: ComponentFixture<SingleUserStatisticsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SingleUserStatisticsComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SingleUserStatisticsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/pmp-web/user/single-user-statistics/feature/src/lib/containers/single-user-statistics/single-user-statistics.component.ts

@@ -0,0 +1,101 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { first } from 'rxjs/operators';
+
+const mockedData = [
+  {
+    repository: { name: 'java', picture: '' },
+    data: [
+      {
+        title: 'crud users',
+        id: '#1',
+        waitingTime: '35 hours',
+        codeLines: 540,
+        author: { name: 'Filip Chajzer', picture: '' },
+        comments: []
+      },
+      {
+        title: 'crud comments',
+        id: '#3',
+        waitingTime: '28 hours',
+        codeLines: 20,
+        author: { name: 'Filip Chajzer', picture: '' },
+        comments: []
+      },
+      {
+        title: 'unit tests for users',
+        id: '#4',
+        waitingTime: '4 hours',
+        codeLines: 145,
+        author: { name: 'Filip Chajzer', picture: '' },
+        comments: []
+      },
+      {
+        title: 'unit tests for comments',
+        id: '#5',
+        waitingTime: '34 minutes',
+        codeLines: 4,
+        author: { name: 'Filip Chajzer', picture: '' },
+        comments: []
+      }
+    ]
+  },
+  {
+    repository: { name: 'php', picture: '' },
+    data: [
+      {
+        title: 'crud users',
+        id: '#1',
+        waitingTime: '35 hours',
+        codeLines: 540,
+        author: { name: 'Filip Chajzer', picture: '' },
+        comments: []
+      },
+      {
+        title: 'crud comments',
+        id: '#3',
+        waitingTime: '28 hours',
+        codeLines: 20,
+        author: { name: 'Filip Chajzer', picture: '' },
+        comments: []
+      },
+      {
+        title: 'unit tests for users',
+        id: '#4',
+        waitingTime: '4 hours',
+        codeLines: 145,
+        author: { name: 'Filip Chajzer', picture: '' },
+        comments: []
+      },
+      {
+        title: 'unit tests for comments',
+        id: '#5',
+        waitingTime: '34 minutes',
+        codeLines: 4,
+        author: { name: 'Filip Chajzer', picture: '' },
+        comments: []
+      }
+    ]
+  }
+];
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'pimp-my-pr-single-user-statistics',
+  templateUrl: './single-user-statistics.component.html',
+  styleUrls: ['./single-user-statistics.component.scss']
+})
+export class SingleUserStatisticsComponent implements OnInit {
+  mockedData = mockedData;
+  user: string | null;
+
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.readRouteUserId();
+  }
+
+  private readRouteUserId(): void {
+    this.route.params.pipe(first()).subscribe(params => (this.user = params.id));
+  }
+}

libs/pmp-web/user/single-user-statistics/feature/src/lib/pmp-web-user-single-user-statistics-feature.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PmpWebUserSingleUserStatisticsRoutingModule } from './pmp-web-user-single-user-statistics-routing.module';
+import { SingleUserStatisticsComponent } from './containers/single-user-statistics/single-user-statistics.component';
+
+@NgModule({
+  imports: [CommonModule, PmpWebUserSingleUserStatisticsRoutingModule],
+  declarations: [SingleUserStatisticsComponent]
+})
+export class PmpWebUserSingleUserStatisticsFeatureModule {}

libs/pmp-web/user/single-user-statistics/feature/src/lib/pmp-web-user-single-user-statistics-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { SingleUserStatisticsComponent } from './containers/single-user-statistics/single-user-statistics.component';
+
+const routes: Routes = [
+  {
+    path: ':id',
+    component: SingleUserStatisticsComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PmpWebUserSingleUserStatisticsRoutingModule {}