Paginate posts in forum (#53)

Paginate forum results with in-built function. Update number of pages when pages are added/deleted

frontend/src/app/viewforum/viewforum.component.css

@@ -78,4 +78,20 @@ tr:nth-child(even) {
     flex:8;
     font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size:xx-large;
+  }
+
+  .pagination{
+    display: flex;
+    flex-direction: row;
+    padding: 10px;
+  }
+
+  .pagination-button{
+    flex: 2;
+  }
+
+  .pagination-text{
+    flex: 6;
+    align-self: center;
+    text-align: center;
   }

frontend/src/app/viewforum/viewforum.component.html

@@ -3,19 +3,24 @@
     <h1 class ="title">Forum</h1>
     <a mat-list-item routerLink="/forum">New Post</a>
   </div>
-
+  
   <div class="forum-posts">
-      <div class="post-outline" *ngFor="let post of post$| async">
-
-        <div class="forum-user-name"> {{ post.user.first_name}} {{ post.user.last_name}} {{ post.timestamp }}</div>
+    <div class="post-outline" *ngFor="let post of displayPost$ | async">
+      <!-- display item properties here -->
+      <div class="forum-user-name"> {{ post.user.first_name}} {{ post.user.last_name}} {{ post.timestamp }}</div>
           <h1 class="post-body">{{ post.title }}</h1>
           <h2 class="post-body">{{ post.content }}</h2>
 
           <div></div>
           <div></div>
           <td *ngIf="adminPermission$ | async"> <button (click)="onDelete(post.id)">Delete</button> </td>
-
-      </div>
+    </div>
   </div>
+  <div class="pagination">
+    <button class="pagination-button" *ngIf = "currentPage != 1"(click)="currentPage = currentPage - 1; updateItems()">Previous</button>
+    <h2 class="pagination-text">Page {{currentPage}} of {{numPages}}</h2>
+    <button class="pagination-button" *ngIf = "currentPage < numPages"(click)="currentPage = currentPage + 1; updateItems()">Next</button>
+  </div>
+
 </body>
 

frontend/src/app/viewforum/viewforum.component.ts

@@ -3,6 +3,9 @@ import { Post, PostService } from '../post.service';
 import { Observable } from 'rxjs';
 import { PermissionService } from '../permission.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { MatPaginator } from '@angular/material/paginator';
+import { map } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-getforum',
@@ -12,7 +15,12 @@ import { HttpErrorResponse } from '@angular/common/http';
 export class viewforumComponent {
   public adminPermission$: Observable<boolean>;
   public post$: Observable<Post[]>;
-
+  public displayPost$: Observable<Post[]>;
+  public itemsPerPage: number = 5; // set the number of items to display per page
+  public currentPage: number = 1;
+  public numPosts: number;
+  public numPages: number;
+
   public static Route = {
     path: 'viewforum',
     component: viewforumComponent
@@ -22,7 +30,19 @@ export class viewforumComponent {
     private postService: PostService,
     private permission: PermissionService,
     ) {
+    this.numPosts = 0; //numPosts and numPages must be set to zero initially
+    this.numPages = 0;
     this.post$ = postService.getPosts()
+    this.displayPost$ = this.post$.pipe( //paginating total number of posts
+      map((items) => {
+        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
+        return items.slice(startIndex, startIndex + this.itemsPerPage);
+      }))
+    this.post$.subscribe((items) => { //set number of pages and number of total posts
+      this.numPosts = items.length;
+      this.numPages = Math.ceil(items.length / this.itemsPerPage)
+    });
+
     this.adminPermission$ = this.permission.check('admin.view', 'admin/')
   }
 
@@ -37,6 +57,15 @@ export class viewforumComponent {
 
   private onSuccess(): void { // get new posts after deletion
     this.post$ = this.postService.getPosts()
+    this.displayPost$ = this.post$.pipe(
+      map((items) => {
+        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
+        return items.slice(startIndex, startIndex + this.itemsPerPage);
+      }))
+      this.post$.subscribe((items) => { //update number of pages after deletion
+        this.numPosts = items.length;
+        this.numPages = Math.ceil(items.length / this.itemsPerPage)
+      });
   }
 
   private onError(err: HttpErrorResponse) {
@@ -47,4 +76,17 @@ export class viewforumComponent {
     }
   }
 
+  public getCurrentPage(pageNumber: number): Observable<any[]> {
+    return this.displayPost$
+  }
+
+  updateItems() { //updating displayedPosts based on what page is currently selected
+    this.displayPost$ = this.post$.pipe(
+      map((items) => {
+        const startIndex = (this.currentPage - 1) * this.itemsPerPage;
+        return items.slice(startIndex, startIndex + this.itemsPerPage);
+      })
+    );
+  }
+
 }