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 67b2a52c34a32dc2e40f2a64e99e2f9bafbed7c2..ab4f7654d1f3d3a5587714e31858730d75c14f81 100644 --- a/src/app/post/components/post-card/post-card.component.html +++ b/src/app/post/components/post-card/post-card.component.html @@ -17,13 +17,7 @@ /> </div> <div fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center"> - <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0]"> - <span>{{ post.tags[0].name }}</span> - </div> - <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="!post.tags[0]"> - <span>info</span> - </div> - + <app-post-tag [post]="post"></app-post-tag> <div fxLayout="row" class="title"> {{ post.title }} </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 68ff9e687b92e8a7bd271972ac59470a774c877b..7eb738f674dd2754aafa45c5dc3143585803365a 100644 --- a/src/app/post/components/post-card/post-card.component.scss +++ b/src/app/post/components/post-card/post-card.component.scss @@ -15,13 +15,7 @@ } } } - .tag { - @include cn-bold-16; - text-transform: uppercase; - color: $secondary-color; - fill: $secondary-color; - stroke: $secondary-color; - } + .title { @media #{$large-phone} { @include cn-bold-18; 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 36ce0ea85b5ab0cb5e0bc0a370ba37806d55ca64..fb67224b27e6f11a05c3a64617cfd967dd25cca7 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,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { Router } from '@angular/router'; import { TagEnum } from '../../enum/tag.enum'; import { Post } from '../../models/post.model'; @@ -19,6 +19,6 @@ export class PostCardComponent { } public isAppelAProjet(): boolean { - return this.post.tags[0].slug === this.tagEnum.appels; + return this.post.tags[0] && this.post.tags[0].slug === this.tagEnum.appels; } } diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html index 685c3b62632b9f6358e476e6ada9f46d18f7206d..f46dad6223ab782740b6db783a67e0dd3dcfa621 100644 --- a/src/app/post/components/post-details/post-details.component.html +++ b/src/app/post/components/post-details/post-details.component.html @@ -9,12 +9,7 @@ </div> <div class="gh-canvas"> <div fxLayout="column" fxLayoutAlign="center none"> - <div *ngIf="post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px"> - <span>{{ post.tags[0].name }}</span> - </div> - <div *ngIf="!post.tags[0]" fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px"> - <span>Infos</span> - </div> + <app-post-tag [post]="post"></app-post-tag> <div fxLayout="row" class="title">{{ post.title }}</div> <div fxLayout="column" class="informations"> <div>{{ post.author }}</div> diff --git a/src/app/post/components/post-details/post-details.component.scss b/src/app/post/components/post-details/post-details.component.scss index b2d99bb650cd7c0d88e343c0fb6f9e9f42d23013..56d471bb1debe7412cdbe32c6d26500d046e0aca 100644 --- a/src/app/post/components/post-details/post-details.component.scss +++ b/src/app/post/components/post-details/post-details.component.scss @@ -14,13 +14,6 @@ } } -.tag { - @include cn-bold-16; - text-transform: uppercase; - color: $secondary-color; - fill: $secondary-color; - stroke: $secondary-color; -} .informations { @include cn-regular-16; div:nth-child(2n) { 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 e0e7f0e46066abf99f8aade78cd5ad8cf5553245..38cad37daf6d207eb936368d670172180e72a887 100644 --- a/src/app/post/components/post-list/post-list.component.ts +++ b/src/app/post/components/post-list/post-list.component.ts @@ -68,14 +68,20 @@ export class PostListComponent implements OnInit { }); } + /** + * Fill articles list with headline handling + * @param news {PostWithMeta} + */ public fillArticles(news: PostWithMeta): void { this.setNews(news); - const headLineTag = this.allPosts.filter((post: Post) => post.tags.some((tag) => tag.slug === TagEnum.aLaUne)); + const headLineTag = this.allPosts.filter((post: Post) => + post.tags.some((tag) => tag && tag.slug === TagEnum.aLaUne) + ); const headIndex = this.allPosts.findIndex((post) => post.id === headLineTag[0].id); this.allPosts.splice(headIndex, 1); - this.allPosts = [...headLineTag, ...this.allPosts]; + this.allPosts = [...headLineTag, ..._.difference(this.allPosts, headLineTag)]; } public getPosts(filters?: Tag[]): void { diff --git a/src/app/post/components/post-tag/post-tag.component.html b/src/app/post/components/post-tag/post-tag.component.html new file mode 100644 index 0000000000000000000000000000000000000000..d25174f3589e978e81eb3a3375130161c3e13d3a --- /dev/null +++ b/src/app/post/components/post-tag/post-tag.component.html @@ -0,0 +1,8 @@ +<div> + <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="post.tags[0]"> + <span>{{ displayTag(post) }}</span> + </div> + <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="!post.tags[0]"> + <span>infos</span> + </div> +</div> diff --git a/src/app/post/components/post-tag/post-tag.component.scss b/src/app/post/components/post-tag/post-tag.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..6ea1a32bd9e425e5ad3e338bf1a571ae3f82dc98 --- /dev/null +++ b/src/app/post/components/post-tag/post-tag.component.scss @@ -0,0 +1,10 @@ +@import '../../../../assets/scss/typography'; +@import '../../../../assets/scss/color'; + +.tag { + @include cn-bold-16; + text-transform: uppercase; + color: $secondary-color; + fill: $secondary-color; + stroke: $secondary-color; +} diff --git a/src/app/post/components/post-tag/post-tag.component.spec.ts b/src/app/post/components/post-tag/post-tag.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..0b1c7b465cdd4e571bbd1c4ee5e21fa5395448fa --- /dev/null +++ b/src/app/post/components/post-tag/post-tag.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PostTagComponent } from './post-tag.component'; + +describe('PostTagComponent', () => { + let component: PostTagComponent; + let fixture: ComponentFixture<PostTagComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PostTagComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PostTagComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/post/components/post-tag/post-tag.component.ts b/src/app/post/components/post-tag/post-tag.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..c39b2fb6fc3da4f561d539ec66684f17bc81ecb1 --- /dev/null +++ b/src/app/post/components/post-tag/post-tag.component.ts @@ -0,0 +1,19 @@ +import { Component, Input } from '@angular/core'; +import { TagEnum } from '../../enum/tag.enum'; +import { Post } from '../../models/post.model'; + +@Component({ + selector: 'app-post-tag', + templateUrl: './post-tag.component.html', + styleUrls: ['./post-tag.component.scss'], +}) +export class PostTagComponent { + @Input() post: Post; + + public displayTag(post: Post): string { + if (post.tags.length > 1) { + return post.tags.filter((tag) => tag.slug !== TagEnum.aLaUne)[0].name; + } + return post.tags[0].name; + } +} diff --git a/src/app/post/post.module.ts b/src/app/post/post.module.ts index a4f19045817563190f78f433ecca44d8bf0b1cf1..984af52e1dac1df97998968cd40071811e856207 100644 --- a/src/app/post/post.module.ts +++ b/src/app/post/post.module.ts @@ -10,6 +10,7 @@ import { PostCardComponent } from './components/post-card/post-card.component'; import { PostPublishComponent } from './components/post-publish/post-publish.component'; import { PostModalFiltersComponent } from './components/post-modal-filters/post-modal-filters.component'; import { TagResolver } from './resolvers/tags.resolver'; +import { PostTagComponent } from './components/post-tag/post-tag.component'; @NgModule({ declarations: [ @@ -20,6 +21,7 @@ import { TagResolver } from './resolvers/tags.resolver'; PostCardComponent, PostModalFiltersComponent, PostPublishComponent, + PostTagComponent, ], imports: [CommonModule, PostRoutingModule, SharedModule], providers: [TagResolver],