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 8d99239843de79b12a40c5a6c2990b07e204987a..c73c0f0fa5ddc34a19c38a6c039669359a472be1 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -1 +1,15 @@
-<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>
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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..5c3546ce8f359bab2925f5eb7ce2d00f53927aa6 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -0,0 +1,25 @@
+@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;
+ }
+}
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 53fa6b42c7758068bd5f64616ed7534b3312c760..a5067fe2cdb69c05aa42c28d2b65994892e9db49 100644
--- a/src/app/post/components/post-card/post-card.component.ts
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -1,15 +1,14 @@
-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 {}
}
diff --git a/src/app/post/components/post-list/post-list.component.html b/src/app/post/components/post-list/post-list.component.html
index d0f59b635281802c09276b8e1a8cff14a70a7d3f..4affb6c0abb030765376783c871ac9c75fdc238b 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/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>
diff --git a/src/app/post/components/post-list/post-list.component.scss b/src/app/post/components/post-list/post-list.component.scss
index 342fced693896fb65732243a8ef6a4df15b18225..379c78857e5991a10675da530bacf77eed986885 100644
--- a/src/app/post/components/post-list/post-list.component.scss
+++ b/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%;
diff --git a/src/app/post/components/post-list/post-list.component.ts b/src/app/post/components/post-list/post-list.component.ts
index 4a013c29aad5c996e4d640d235cd86d067c4c919..9fa76c79013833fefec3e769092b62b6bcd3f88c 100644
--- a/src/app/post/components/post-list/post-list.component.ts
+++ b/src/app/post/components/post-list/post-list.component.ts
@@ -1,4 +1,7 @@
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 {}
}
diff --git a/src/app/post/models/pagination.model.ts b/src/app/post/models/pagination.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f9ecaaec31d12a488d1ea219500d1fef26da007
--- /dev/null
+++ b/src/app/post/models/pagination.model.ts
@@ -0,0 +1,8 @@
+export class Pagination {
+ limit: number;
+ next: any;
+ page: number;
+ pages: number;
+ prev: any;
+ total: number;
+}
diff --git a/src/app/post/models/post.model.ts b/src/app/post/models/post.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f65d0452e5fdce7a73919289153be571eea2a35
--- /dev/null
+++ b/src/app/post/models/post.model.ts
@@ -0,0 +1,7 @@
+export class Post {
+ id: number;
+ published_at: Date;
+ title: string;
+ custom_excerpt: string;
+ feature_image: string;
+}
diff --git a/src/app/post/models/postWithMeta.model.ts b/src/app/post/models/postWithMeta.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b8dcb357850a343c8fe624f133f868924ebd33c8
--- /dev/null
+++ b/src/app/post/models/postWithMeta.model.ts
@@ -0,0 +1,11 @@
+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);
+ }
+}
diff --git a/src/app/post/services/post.service.ts b/src/app/post/services/post.service.ts
index cbadae187ae455a61519cadc391221ad60c06a58..903f655f57c8e48acf6978e4351d72cd6812ff77 100644
--- a/src/app/post/services/post.service.ts
+++ b/src/app/post/services/post.service.ts
@@ -1,9 +1,17 @@
+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)));
+ }
}