CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.16.2](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.16.1...v1.16.2) (2022-03-31)
+
+
+### Bug Fixes
+
+* **news:** broken layout with double scroll ([44757f6](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/44757f619e9f23535cbf9c2dba502c6066732728))
+
+### [1.16.1](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.16.0...v1.16.1) (2022-03-29)
+
+
+### Features
+
+* **cicd:** temp remove of mr jobs ([5c9a74a](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/5c9a74ad2916b986a7626ffb8726db3260d8990a))
+* **posts:** add button to show more ([0211de8](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/0211de8fe54ad9c1b494b824ba59183041b9f91f))
+* **posts:** restore window scroll service ([3a4b521](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/3a4b521cf5106f8175897d2c09a8963d56d279dc))
+
+
+### Bug Fixes
+
+* default limit ([2a9a707](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/2a9a707fc98046d2313b64890485ecaef22439ee))
+* no display if empty post ([44f089f](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/44f089f9819b8d6dedafa39cd470adf38409a67b))
+* **posts:** load more posts with tag (cf. MR !225 ) ([2721c9e](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/2721c9e9f86610e43455a1e6ba9d12415c91f29e))
+* **posts:** remove scroll service from app component ([6a7d319](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/commit/6a7d319061ee4c4ea6e6d4b32a32b86039844e14))
+
 ## [1.16.0](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/compare/v1.15.0...v1.16.0) (2022-03-18)
 
 

README.md

@@ -5,12 +5,14 @@
 [![Security Rating](https://sonarqube.forge.grandlyon.com/api/project_badges/measure?project=pamn_client&metric=security_rating)](https://sonarqube.forge.grandlyon.com/dashboard?id=pamn_client)
 [![Vulnerabilities](https://sonarqube.forge.grandlyon.com/api/project_badges/measure?project=pamn_client&metric=vulnerabilities)](https://sonarqube.forge.grandlyon.com/dashboard?id=pamn_client)
 
-
-
 # Pamn
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.3.
 
+## Wikis
+
+Find [here](https://forge.grandlyon.com/web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client/-/wikis/home) wikis about useful informations like installation and gitflow.
+
 ## Development server
 
 Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -35,12 +37,16 @@ Run `npm run e2e` to execute the end-to-end tests via [Protractor](http://www.pr
 
 Use conventional commit format. For more info please read this article on [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
 
-## Documentation 
+## Documentation
+
 A documentation is generated with compodoc in addition of the existing documentation on the wiki.
+
 ```sh
 npm run doc:serve
 ```
+
 You can now visualize it at : `localhost:8080`
+
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package-lock.json

 {
   "name": "pamn",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

 {
   "name": "pamn",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration=fr --proxy-config proxy.conf.json",

src/app/app.component.html

 <div class="app-container">
   <app-header></app-header>
-  <div (scroll)="onScrollDown($event)" class="app-body">
+  <div class="app-body">
     <router-outlet></router-outlet>
     <router-outlet name="print"></router-outlet>
     <app-footer></app-footer>

src/app/app.component.ts

@@ -5,7 +5,6 @@ import { AuthService } from './services/auth.service';
 import { RouterListenerService } from './services/routerListener.service';
 import { UpdateService } from './services/update.service';
 import { PrintService } from './shared/service/print.service';
-import { WindowScrollService } from './shared/service/windowScroll.service';
 
 @Component({
   selector: 'app-root',
@@ -19,7 +18,6 @@ export class AppComponent implements OnInit {
     public printService: PrintService,
     private authService: AuthService,
     private profilService: ProfileService,
-    private windowScrollService: WindowScrollService,
     private routerListener: RouterListenerService,
     private updateService: UpdateService,
     private router: Router
@@ -52,7 +50,4 @@ export class AppComponent implements OnInit {
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
   }
-  public onScrollDown(event): void {
-    this.windowScrollService.scrollY.next(event);
-  }
 }

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

 <div class="section-container no-padding" fxLayout="row" fxLayoutGap="32px">
-  <div *ngIf="isLoading" class="loader">
-    <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
-  </div>
-  <div *ngIf="!isLoading" fxLayout="column" class="list-container" fxLayoutGap="16px">
+  <div fxLayout="column" class="list-container" fxLayoutGap="16px">
     <!-- <div fxLayout="column" *ngIf="displayTags()">
       <div fxLayout="row wrap" fxLayoutAlign="none center" fxLayoutGap="8px">
         <div
@@ -27,6 +24,14 @@
           <app-post-card [post]="news" class="col" *ngFor="let news of allPosts"></app-post-card>
         </div>
       </div>
+      <div *ngIf="isLoading" class="loader">
+        <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
+      </div>
+      <div *ngIf="!isLastPage && !isLoading" fxLayout="row" fxLayoutAlign="center center">
+        <button class="btn-primary small" (click)="loadMore()">
+          <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">Voir plus</div>
+        </button>
+      </div>
     </div>
   </div>
 </div>

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

@@ -27,9 +27,7 @@ h2 {
   }
 }
 .list-container {
-  @media #{$tablet} {
-    width: 100%;
-  }
+  width: 100%;
 
   h2 {
     @media #{$large-phone} {
@@ -239,3 +237,6 @@ h2 {
     margin-bottom: 0;
   }
 }
+.btn-primary {
+  margin-bottom: 20px;
+}

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

 import { Component, OnInit } from '@angular/core';
-import { WindowScrollService } from '../../../shared/service/windowScroll.service';
 import { TagEnum } from '../../enum/tag.enum';
 import { Pagination } from '../../models/pagination.model';
 import { Post } from '../../models/post.model';
@@ -24,21 +23,9 @@ export class PostListComponent implements OnInit {
   public pagination: Pagination;
   public isLoading = false;
   public isPublishMode = false;
+  public isLastPage: boolean;
 
-  constructor(
-    private postService: PostService,
-    private windowScrollService: WindowScrollService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
-    this.windowScrollService.scrollY$.subscribe((evt: any) => {
-      if (evt && evt.target.offsetHeight + evt.target.scrollTop >= evt.target.scrollHeight - 200) {
-        if (!this.isLoading) {
-          this.loadMore();
-        }
-      }
-    });
-  }
+  constructor(private postService: PostService, private route: ActivatedRoute, private router: Router) {}
 
   ngOnInit(): void {
     this.isLoading = true;
@@ -77,12 +64,15 @@ export class PostListComponent implements OnInit {
    */
   public fillArticles(news: PostWithMeta): void {
     this.setNews(news);
+    news.meta.pagination.pages > news.meta.pagination.page ? (this.isLastPage = false) : (this.isLastPage = true);
     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);
+    if (headLineTag.length) {
+      const headIndex = this.allPosts.findIndex((post) => post.id === headLineTag[0].id);
+      this.allPosts.splice(headIndex, 1);
+    }
 
     this.allPosts = [...headLineTag, ..._.difference(this.allPosts, headLineTag)];
   }
@@ -127,12 +117,12 @@ export class PostListComponent implements OnInit {
   // Transform excerpt post to have a custom author.
   private addAuthorToPost(post: Post): Post {
     post.author = post.excerpt;
-    post.excerpt = post.html.replace(/<[^>]*>/g, '');
+    if (post.html) post.excerpt = post.html.replace(/<[^>]*>/g, '');
     return post;
   }
 
   // Load more news on scroll event.
-  private loadMore(): void {
+  public loadMore(): void {
     if (this.pagination && this.pagination.page < this.pagination.pages) {
       this.isLoading = true;
       if (this.filters) {
@@ -148,10 +138,8 @@ export class PostListComponent implements OnInit {
   // Split news on two columns on desktop mode or one column in mobile mode.
   private setNews(news: PostWithMeta): void {
     this.pagination = news.meta.pagination;
-    const customIndex = this.allPosts.length; // For scroll loading, start with previous index.
-    const newPosts = news.posts.map((val, index) => {
+    const newPosts = news.posts.map((val) => {
       val = this.addAuthorToPost(val);
-      index += customIndex;
       return val;
     });
     this.allPosts = [...this.allPosts, ...newPosts];

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

@@ -22,9 +22,11 @@ export class PostService {
     );
   }
 
-  public getPosts(page: number, tags?: string[]): Observable<PostWithMeta> {
+  /**
+   * 12 posts to fit new design (1 + 3 + 2 + 1 + 3 + 2)
+   */
+  public getPosts(page: number, tags?: string[], limit: string = '12'): Observable<PostWithMeta> {
     let tagsFilter = '';
-
     if (tags) {
       let tagsString = '';
       // Transform tab filters to string filters
@@ -37,7 +39,7 @@ export class PostService {
       tagsFilter = `&filter=tags:${encodeURIComponent(tagsString)}`;
     }
 
-    return this.http.get<PostWithMeta>(`${this.baseUrl}?page=${page}&include=tags,authors${tagsFilter}`);
+    return this.http.get<PostWithMeta>(`${this.baseUrl}?page=${page}&include=tags,authors${tagsFilter}&limit=${limit}`);
   }
 
   public getTags(): Observable<TagWithMeta> {
@@ -46,7 +48,7 @@ export class PostService {
 
   private addAuthorToPost(post: Post): Post {
     post.author = post.excerpt;
-    post.excerpt = post.html.replace(/<[^>]*>/g, '');
+    if (post.html) post.excerpt = post.html.replace(/<[^>]*>/g, '');
     return post;
   }
 }

src/styles.scss

@@ -26,6 +26,7 @@ body {
   background-color: $grey-6;
   min-height: 100vh;
   min-height: -webkit-fill-available;
+  overflow: hidden;
 }
 a {
   color: $default-link-color;