From 7a46b6ae5c789b1b84c95256b50e509493143e9e Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Tue, 2 Mar 2021 16:58:01 +0100
Subject: [PATCH] fix(post) : fix routing lazy

---
 .../post-card/post-card.component.html        |  2 +-
 .../post-card/post-card.component.scss        |  3 ++-
 .../post-card/post-card.component.ts          | 13 ++++++-------
 .../post-details/post-details.component.ts    | 11 ++++++-----
 src/app/post/post-routing.module.ts           | 19 ++++++++++++++++++-
 src/app/post/post.component.html              |  2 +-
 src/assets/scss/_color.scss                   |  2 +-
 7 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html
index 3dc507bda..1f223f021 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px">
+<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px" (click)="showDetails(post)">
   <div fxLayout="column" fxLayoutGap="4px">
     <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="getIconOfTag(post.tags[0].slug)">
       <app-svg-icon
diff --git a/src/app/post/components/post-card/post-card.component.scss b/src/app/post/components/post-card/post-card.component.scss
index fd0d45d24..c4213f621 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -2,7 +2,8 @@
 @import '../../../../assets/scss/typography';
 
 .post {
-  padding: 24px 6px;
+  cursor: pointer;
+  margin: 24px 6px;
   border-bottom: 1px dashed $grey-3;
   &.bigNew {
     border: 0;
diff --git a/src/app/post/components/post-card/post-card.component.ts b/src/app/post/components/post-card/post-card.component.ts
index 317e19c03..24d4c1787 100644
--- a/src/app/post/components/post-card/post-card.component.ts
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { TagEnum } from '../../enum/tagEnum.enum';
 import { Post } from '../../models/post.model';
 
@@ -11,14 +12,9 @@ export class PostCardComponent implements OnInit {
   @Input() post: Post;
   @Input() class: string;
   test: string;
-  constructor() {}
+  constructor(private router: Router) {}
 
-  ngOnInit(): void {
-    /*ùif (this.post) {
-      console.log(this.post);
-      this.test = this.post.html.replace(/<[^>]*>/g, '');
-    }*/
-  }
+  ngOnInit(): void {}
 
   getIconOfTag(tag: string): string {
     switch (tag) {
@@ -40,4 +36,7 @@ export class PostCardComponent implements OnInit {
         return null;
     }
   }
+  public showDetails(post: Post): void {
+    this.router.navigateByUrl('posts/details/' + post.id);
+  }
 }
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
index adf283aa1..4cfba29e6 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-post-details',
   templateUrl: './post-details.component.html',
-  styleUrls: ['./post-details.component.scss']
+  styleUrls: ['./post-details.component.scss'],
 })
 export class PostDetailsComponent implements OnInit {
-
-  constructor() { }
-
+  constructor(private activatedRoute: ActivatedRoute) {}
+  postId: string;
   ngOnInit(): void {
+    this.postId = this.activatedRoute.snapshot.paramMap.get('id');
+    console.log(this.postId);
   }
-
 }
diff --git a/src/app/post/post-routing.module.ts b/src/app/post/post-routing.module.ts
index 2ec94d598..f8f06e2dd 100644
--- a/src/app/post/post-routing.module.ts
+++ b/src/app/post/post-routing.module.ts
@@ -1,8 +1,25 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { PostDetailsComponent } from './components/post-details/post-details.component';
+import { PostListComponent } from './components/post-list/post-list.component';
 import { PostComponent } from './post.component';
 
-const routes: Routes = [{ path: '', component: PostComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: PostComponent,
+    children: [
+      {
+        path: '',
+        component: PostListComponent,
+      },
+      {
+        path: 'details/:id',
+        component: PostDetailsComponent,
+      },
+    ],
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/post/post.component.html b/src/app/post/post.component.html
index 2ea36328d..8fe7258a1 100644
--- a/src/app/post/post.component.html
+++ b/src/app/post/post.component.html
@@ -1,2 +1,2 @@
 <app-post-header></app-post-header>
-<app-post-list></app-post-list>
+<router-outlet></router-outlet>
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 75dd41e99..7b72d6a99 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -7,7 +7,7 @@ $grey-1: #333333;
 $grey-2: #4f4f4f;
 $grey-3: #828282;
 $grey-4: #bdbdbd;
-$grey-6: #f2f2f2;
+$grey-6: #f8f8f8;
 /* form colors */
 $green-1: #47c562;
 /* Status colors */
-- 
GitLab