From 39cc690ed6cae0047e6be04ba884a5fab7234a45 Mon Sep 17 00:00:00 2001 From: wastilla Date: Fri, 14 Apr 2023 17:38:20 -0400 Subject: [PATCH 1/2] Progress on pagination --- .../app/viewforum/viewforum.component.html | 23 ++++++++- .../src/app/viewforum/viewforum.component.ts | 50 ------------------- 2 files changed, 21 insertions(+), 52 deletions(-) diff --git a/frontend/src/app/viewforum/viewforum.component.html b/frontend/src/app/viewforum/viewforum.component.html index bfc99e9..98a705c 100644 --- a/frontend/src/app/viewforum/viewforum.component.html +++ b/frontend/src/app/viewforum/viewforum.component.html @@ -3,8 +3,27 @@

Forum

New Post - +
+
+ +
{{ post.user.first_name}} {{ post.user.last_name}} {{ post.timestamp }}
+

{{ post.title }}

+

{{ post.content }}

+ +
+
+ +
+
+
Page {{currentPage}} of {{numPosts}}
+ + + + + + + diff --git a/frontend/src/app/viewforum/viewforum.component.ts b/frontend/src/app/viewforum/viewforum.component.ts index 431ed30..e69de29 100644 --- a/frontend/src/app/viewforum/viewforum.component.ts +++ b/frontend/src/app/viewforum/viewforum.component.ts @@ -1,50 +0,0 @@ -import { Component } from '@angular/core'; -import { Post, PostService } from '../post.service'; -import { Observable } from 'rxjs'; -import { PermissionService } from '../permission.service'; -import { HttpErrorResponse } from '@angular/common/http'; - -@Component({ - selector: 'app-getforum', - templateUrl: './viewforum.component.html', - styleUrls: ['./viewforum.component.css'] -}) -export class viewforumComponent { - public adminPermission$: Observable; - public post$: Observable; - - public static Route = { - path: 'viewforum', - component: viewforumComponent - }; - - constructor( - private postService: PostService, - private permission: PermissionService, - ) { - this.post$ = postService.getPosts() - this.adminPermission$ = this.permission.check('admin.view', 'admin/') - } - - onDelete(id: number): void { - this.postService - .deletePost(id) - .subscribe({ // stopping here when we use the /api/posts + id route) - next: () => this.onSuccess(), - error: (err) => this.onError(err) - }) - } - - private onSuccess(): void { // get new posts after deletion - this.post$ = this.postService.getPosts() - } - - private onError(err: HttpErrorResponse) { - if (err.error.detail) { - window.alert(err.error.detail); - } else { - console.log(JSON.stringify(err)); // see what error is - } - } - -} From 515fdaa93eba911833236722a6678c49b928cb51 Mon Sep 17 00:00:00 2001 From: wastilla Date: Sun, 16 Apr 2023 10:47:09 -0400 Subject: [PATCH 2/2] Update numPages when post is deleted --- .../src/app/viewforum/viewforum.component.css | 16 ++++ .../app/viewforum/viewforum.component.html | 24 +---- .../src/app/viewforum/viewforum.component.ts | 92 +++++++++++++++++++ 3 files changed, 113 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/viewforum/viewforum.component.css b/frontend/src/app/viewforum/viewforum.component.css index 18096a6..ccf3cfb 100644 --- a/frontend/src/app/viewforum/viewforum.component.css +++ b/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; } \ No newline at end of file diff --git a/frontend/src/app/viewforum/viewforum.component.html b/frontend/src/app/viewforum/viewforum.component.html index 98a705c..d5bb742 100644 --- a/frontend/src/app/viewforum/viewforum.component.html +++ b/frontend/src/app/viewforum/viewforum.component.html @@ -16,25 +16,11 @@

{{ post.content }}

-
Page {{currentPage}} of {{numPosts}}
- - - - - + - diff --git a/frontend/src/app/viewforum/viewforum.component.ts b/frontend/src/app/viewforum/viewforum.component.ts index e69de29..cba8db8 100644 --- a/frontend/src/app/viewforum/viewforum.component.ts +++ b/frontend/src/app/viewforum/viewforum.component.ts @@ -0,0 +1,92 @@ +import { Component } from '@angular/core'; +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', + templateUrl: './viewforum.component.html', + styleUrls: ['./viewforum.component.css'] +}) +export class viewforumComponent { + public adminPermission$: Observable; + public post$: Observable; + public displayPost$: Observable; + 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 + }; + + constructor( + 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/') + } + + onDelete(id: number): void { + this.postService + .deletePost(id) + .subscribe({ // stopping here when we use the /api/posts + id route) + next: () => this.onSuccess(), + error: (err) => this.onError(err) + }) + } + + 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) { + if (err.error.detail) { + window.alert(err.error.detail); + } else { + console.log(JSON.stringify(err)); // see what error is + } + } + + public getCurrentPage(pageNumber: number): Observable { + 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); + }) + ); + } + +}