From 9d0be47f1e6fe7a4cd684d6c2b65299bc6ccb0f0 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Mon, 21 Feb 2022 10:44:22 +0100
Subject: [PATCH] fix(news): tag refactor for 'a-la-une' tag. This tag is no
longer display if there is another tag on the same post.
---
.../post-card/post-card.component.html | 8 +-----
.../post-card/post-card.component.scss | 8 +-----
.../post-card/post-card.component.ts | 4 +--
.../post-details/post-details.component.html | 7 +-----
.../post-details/post-details.component.scss | 7 ------
.../post-list/post-list.component.ts | 10 ++++++--
.../post-tag/post-tag.component.html | 8 ++++++
.../post-tag/post-tag.component.scss | 10 ++++++++
.../post-tag/post-tag.component.spec.ts | 25 +++++++++++++++++++
.../components/post-tag/post-tag.component.ts | 19 ++++++++++++++
src/app/post/post.module.ts | 2 ++
11 files changed, 77 insertions(+), 31 deletions(-)
create mode 100644 src/app/post/components/post-tag/post-tag.component.html
create mode 100644 src/app/post/components/post-tag/post-tag.component.scss
create mode 100644 src/app/post/components/post-tag/post-tag.component.spec.ts
create mode 100644 src/app/post/components/post-tag/post-tag.component.ts
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 67b2a52c3..ab4f7654d 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 68ff9e687..7eb738f67 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 36ce0ea85..fb67224b2 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 685c3b626..f46dad622 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 b2d99bb65..56d471bb1 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 e0e7f0e46..38cad37da 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 000000000..d25174f35
--- /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 000000000..6ea1a32bd
--- /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 000000000..0b1c7b465
--- /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 000000000..c39b2fb6f
--- /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 a4f190458..984af52e1 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],
--
GitLab