feat(post) : feat design card listPost

src/app/post/components/post-card/post-card.component.html

-<p>post-card works!</p>
+<div fxLayout="column" *ngIf="post" class="post" fxLayoutGap="12px">
+  <div fxLayout="row"></div>
+  <div fxLayout="row" class="title">
+    {{ post.title }}
+  </div>
+  <div fxLayout="row" class="description">
+    {{ post.custom_excerpt }}
+  </div>
+  <div fxLayout="column" class="informations">
+    <div fxLayout="row">
+      {{ post.published_at | date: 'shortDate' }}
+    </div>
+    <div fxLayout="row">par auteurICI</div>
+  </div>
+</div>

src/app/post/components/post-card/post-card.component.scss

+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+
+.post {
+  padding: 24px 6px;
+  border-bottom: 1px dashed $grey-3;
+  .title {
+    @include cn-bold-20;
+    color: $grey-1;
+  }
+  .description {
+    @include cn-regular-16;
+    color: $black;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box !important;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .informations {
+    @include cn-regular-16;
+    color: $grey-3;
+    font-style: italic;
+  }
+}

src/app/post/components/post-card/post-card.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Post } from '../../models/post.model';
 
 @Component({
   selector: 'app-post-card',
   templateUrl: './post-card.component.html',
-  styleUrls: ['./post-card.component.scss']
+  styleUrls: ['./post-card.component.scss'],
 })
 export class PostCardComponent implements OnInit {
+  @Input() post: Post;
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

src/app/post/components/post-list/post-list.component.html

@@ -16,8 +16,13 @@
       <div fxLayout="row" class="row-border">
         <h2>autres actualités</h2>
       </div>
-      <div *ngFor="let new of news">
-        <app-post-card></app-post-card>
+      <div fxLayout="row" fxLayoutGap="33px">
+        <div fxLayout="column" class="columnPosts">
+          <app-post-card [post]="news" *ngFor="let news of leftColumnPosts"></app-post-card>
+        </div>
+        <div fxLayout="column" class="columnPosts">
+          <app-post-card [post]="news" *ngFor="let news of rightColumnPosts"></app-post-card>
+        </div>
       </div>
     </div>
   </div>

src/app/post/components/post-list/post-list.component.scss

@@ -20,6 +20,9 @@
     @include cn-bold-28;
     color: $grey-2;
   }
+  .columnPosts {
+    width: 50%;
+  }
 }
 .project-container {
   width: 20%;

src/app/post/components/post-list/post-list.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Post } from '../../models/post.model';
+import { PostWithMeta } from '../../models/postWithMeta.model';
+import { PostService } from '../../services/post.service';
 
 @Component({
   selector: 'app-post-list',
@@ -6,9 +9,21 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./post-list.component.scss'],
 })
 export class PostListComponent implements OnInit {
-  constructor() {}
-  news = ['', '', '', '', '', '', '', '', '', ''];
-  ngOnInit(): void {}
+  constructor(private postService: PostService) {}
+  news: PostWithMeta;
+  leftColumnPosts: Post[] = [];
+  rightColumnPosts: Post[] = [];
+  ngOnInit(): void {
+    this.postService.getAllPosts().subscribe((news) => {
+      news.posts.forEach((val, index) => {
+        if (index % 2 == 0) {
+          this.leftColumnPosts.push(val);
+        } else {
+          this.rightColumnPosts.push(val);
+        }
+      });
+    });
+  }
 
   public publishNews(): void {}
 }

src/app/post/models/pagination.model.ts

+export class Pagination {
+  limit: number;
+  next: any;
+  page: number;
+  pages: number;
+  prev: any;
+  total: number;
+}

src/app/post/models/post.model.ts

+export class Post {
+  id: number;
+  published_at: Date;
+  title: string;
+  custom_excerpt: string;
+  feature_image: string;
+}

src/app/post/models/postWithMeta.model.ts

+import { Pagination } from './pagination.model';
+import { Post } from './post.model';
+
+export class PostWithMeta {
+  posts: Post[];
+  meta: { pagination: Pagination };
+
+  constructor(obj?: any) {
+    Object.assign(this, obj);
+  }
+}

src/app/post/services/post.service.ts

+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { PostWithMeta } from '../models/postWithMeta.model';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PostService {
+  private readonly baseUrl = 'api/posts';
+  constructor(private http: HttpClient) {}
 
-  constructor() { }
+  public getAllPosts(): Observable<PostWithMeta> {
+    return this.http.get<PostWithMeta>(`${this.baseUrl}`).pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+  }
 }