feat: add pagination support for user transactions retrieval

frontend/src/app/feature/transaction-history/transaction-history.component.ts

@@ -1,10 +1,21 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  signal,
+  WritableSignal,
+} from '@angular/core';
 import { TransactionService } from '@service/transaction.service';
 import { Observable } from 'rxjs';
 import { Transaction } from '../../model/Transaction';
 import { AsyncPipe, CurrencyPipe, DatePipe, NgForOf, NgIf } from '@angular/common';
 import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
 
+const PER_PAGE = 5
+
 @Component({
   standalone: true,
   selector: 'app-transaction-history',
@@ -18,18 +29,43 @@ import { AnimatedNumberComponent } from '@blackjack/components/animated-number/a
   ],
   templateUrl: './transaction-history.component.html',
   styleUrl: './transaction-history.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TransactionHistoryComponent {
   @Input()
   isOpen: boolean = false;
-  private transactionService: TransactionService = inject(TransactionService);
+  loading: WritableSignal<boolean> = signal<boolean>(true);
+  skeletonItems = Array(PER_PAGE).fill({});
   @Output()
   closeEventEmitter = new EventEmitter<void>();
-  transactions$: Observable<Transaction[]> = this.transactionService.getUsersTransactions();
+
+  private offset: number = 0;
+
+  private transactionService: TransactionService = inject(TransactionService);
+  transactions$: Observable<Transaction[]> = this.loadTransactions();
 
   closeDialog() {
     this.isOpen = false;
     this.closeEventEmitter.emit();
   }
+
+  forward() {
+    this.offset++;
+    this.transactions$ = this.loadTransactions();
+  }
+
+  back() {
+    this.offset--;
+    this.transactions$ = this.loadTransactions();
+  }
+
+  loadTransactions() {
+    this.loading.set(true);
+
+    const transactions$ = this.transactionService.getUsersTransactions(PER_PAGE, this.offset * PER_PAGE);
+
+    transactions$.subscribe({complete: () => this.loading.set(false)})
+
+    return transactions$;
+  }
 }