feat: pagination

apps/frontend/src/app/components/my-suggestions/my-suggestions.component.ts

@@ -4,16 +4,17 @@
  * @author Naomi Carrigan
  */
 
-import { Component, OnInit, inject, signal } from '@angular/core';
+import { Component, OnInit, inject, signal, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SuggestionService } from '../../services/suggestion.service';
 import { AuthService } from '../../services/auth.service';
+import { PaginationComponent } from '../shared/pagination.component';
 import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-types';
 
 @Component({
   selector: 'app-my-suggestions',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, PaginationComponent],
   template: `
     <div class="container">
       <div class="header-section">
@@ -64,8 +65,16 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
           </button>
         </div>
 
+        <app-pagination
+          [currentPage]="currentPage()"
+          [pageSize]="pageSize()"
+          [totalItems]="totalFilteredSuggestions()"
+          (pageChange)="onPageChange($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        ></app-pagination>
+
         <div class="suggestions-list">
-          @for (suggestion of filteredSuggestions(); track suggestion.id) {
+          @for (suggestion of paginatedSuggestions(); track suggestion.id) {
             <div class="suggestion-card" [class]="'status-' + suggestion.status.toLowerCase()">
               <div class="suggestion-header">
                 <span class="entity-badge" [class]="'entity-' + suggestion.entityType.toLowerCase()">
@@ -123,6 +132,14 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
             </div>
           }
         </div>
+
+        <app-pagination
+          [currentPage]="currentPage()"
+          [pageSize]="pageSize()"
+          [totalItems]="totalFilteredSuggestions()"
+          (pageChange)="onPageChange($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        ></app-pagination>
       }
     </div>
   `,
@@ -314,19 +331,32 @@ export class MySuggestionsComponent implements OnInit {
   loading = signal(true);
   statusFilter = signal<'all' | SuggestionStatus>('all');
 
+  // Pagination state
+  currentPage = signal(1);
+  pageSize = signal(25);
+
   SuggestionStatus = SuggestionStatus;
 
   unreviewedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.UNREVIEWED).length;
   acceptedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.ACCEPTED).length;
   declinedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.DECLINED).length;
 
-  filteredSuggestions = () => {
+  filteredSuggestions = computed(() => {
     const filter = this.statusFilter();
     if (filter === 'all') {
       return this.suggestions();
     }
     return this.suggestions().filter(s => s.status === filter);
-  };
+  });
+
+  paginatedSuggestions = computed(() => {
+    const suggestions = this.filteredSuggestions();
+    const start = (this.currentPage() - 1) * this.pageSize();
+    const end = start + this.pageSize();
+    return suggestions.slice(start, end);
+  });
+
+  totalFilteredSuggestions = computed(() => this.filteredSuggestions().length);
 
   ngOnInit() {
     if (this.authService.isAuthenticated()) {
@@ -350,6 +380,19 @@ export class MySuggestionsComponent implements OnInit {
 
   setFilter(filter: 'all' | SuggestionStatus) {
     this.statusFilter.set(filter);
+    this.currentPage.set(1); // Reset to first page when filter changes
+  }
+
+  onPageChange(page: number) {
+    this.currentPage.set(page);
+  }
+
+  onPageSizeChange(pageSize: number) {
+    this.pageSize.set(pageSize);
+    // Calculate new current page to stay on approximately the same content
+    const firstItemIndex = (this.currentPage() - 1) * this.pageSize();
+    const newPage = Math.floor(firstItemIndex / pageSize) + 1;
+    this.currentPage.set(newPage);
   }
 
   getStatusLabel(status: SuggestionStatus): string {