feat: pagination

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

@@ -4,17 +4,18 @@
  * @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 { FormsModule } from '@angular/forms';
 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-admin-suggestions',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, PaginationComponent],
   template: `
     <div class="container">
       <div class="header-section">
@@ -65,8 +66,16 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
             <p>No suggestions found.</p>
           </div>
         } @else {
+          <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">
                   <div class="badges">
@@ -185,6 +194,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>
         }
       }
 
@@ -532,19 +549,32 @@ export class AdminSuggestionsComponent implements OnInit {
   decliningsuggestion = signal<Suggestion | null>(null);
   declineReason = '';
 
+  // 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.isAdmin()) {
@@ -568,6 +598,19 @@ export class AdminSuggestionsComponent 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 {