feat: pagination

apps/frontend/src/app/components/art/art-gallery.component.ts

@@ -4,7 +4,7 @@
  * @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 { ArtService } from '../../services/art.service';
@@ -12,12 +12,13 @@ import { AuthService } from '../../services/auth.service';
 import { CommentsService } from '../../services/comments.service';
 import { SanitizeService } from '../../services/sanitize.service';
 import { SuggestionService } from '../../services/suggestion.service';
+import { PaginationComponent } from '../shared/pagination.component';
 import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
 
 @Component({
   selector: 'app-art-gallery',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, PaginationComponent],
   template: `
     <div class="container">
       <div class="header-section">
@@ -337,8 +338,16 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
           <p>No artwork in the gallery yet.</p>
         </div>
       } @else {
+        <app-pagination
+          [currentPage]="currentPage()"
+          [pageSize]="pageSize()"
+          [totalItems]="totalArtPieces()"
+          (pageChange)="onPageChange($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        ></app-pagination>
+
         <div class="gallery-grid">
-          @for (art of artPieces(); track art.id) {
+          @for (art of paginatedArtPieces(); track art.id) {
             <div class="art-card">
               <div class="art-image-container">
                 <img
@@ -465,6 +474,14 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
             </div>
           }
         </div>
+
+        <app-pagination
+          [currentPage]="currentPage()"
+          [pageSize]="pageSize()"
+          [totalItems]="totalArtPieces()"
+          (pageChange)="onPageChange($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        ></app-pagination>
       }
 
       @if (lightboxArt()) {
@@ -1047,6 +1064,10 @@ export class ArtGalleryComponent implements OnInit {
   editingArt = signal<Art | null>(null);
   lightboxArt = signal<Art | null>(null);
 
+  // Pagination state
+  currentPage = signal(1);
+  pageSize = signal(25);
+
   // Comments state
   comments = signal<Record<string, Comment[]>>({});
   commentsLoading = signal<Record<string, boolean>>({});
@@ -1083,6 +1104,16 @@ export class ArtGalleryComponent implements OnInit {
   editLinkTitle = '';
   editLinkUrl = '';
 
+  // Computed properties for pagination
+  paginatedArtPieces = computed(() => {
+    const artPieces = this.artPieces();
+    const start = (this.currentPage() - 1) * this.pageSize();
+    const end = start + this.pageSize();
+    return artPieces.slice(start, end);
+  });
+
+  totalArtPieces = computed(() => this.artPieces().length);
+
   ngOnInit() {
     this.loadArt();
   }
@@ -1388,4 +1419,16 @@ export class ArtGalleryComponent implements OnInit {
       alert('Failed to submit suggestion. Please try again.');
     }
   }
+
+  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);
+  }
 }