feat(transactions): add pagination support for user transactions

frontend/src/app/feature/home/home.component.html

@@ -101,7 +101,7 @@
         <div class="space-y-3">
           <div
             class="flex justify-between items-center"
-            *ngFor="let transaction of recentTransactions|async"
+            *ngFor="let transaction of (recentTransactionData | async)?.transactions"
           >
             <div>
               <p class="text-sm font-medium">{{ transaction.status }}</p>

frontend/src/app/feature/home/home.component.ts

@@ -3,13 +3,13 @@ import { AsyncPipe, CurrencyPipe, DatePipe, NgFor } from '@angular/common';
 import { DepositComponent } from '../deposit/deposit.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ConfirmationComponent } from '@shared/components/confirmation/confirmation.component';
-import { Transaction } from 'app/model/Transaction';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { Game } from 'app/model/Game';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { TransactionService } from '@service/transaction.service';
 import format from 'ajv/dist/vocabularies/format';
 import { TransactionHistoryComponent } from '../transaction-history/transaction-history.component';
+import { TransactionData } from '../../model/TransactionData';
 
 @Component({
   selector: 'app-homepage',
@@ -80,7 +80,7 @@ export default class HomeComponent implements OnInit {
 
   allGames: Game[] = [...this.featuredGames];
 
-  recentTransactions: Observable<Transaction[]> = inject(TransactionService).getUsersTransactions(5);
+  recentTransactionData: Observable<TransactionData> = inject(TransactionService).getUsersTransactions(5);
 
   openDepositModal() {
     this.isDepositModalOpen = true;

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

@@ -1,9 +1,8 @@
 button[disabled] {
   cursor: not-allowed;
-  background-color: #ccc;
+  background-color: #077b58;
   box-shadow: none;
 }
-
 button[disabled]:hover {
-  background-color: #ccc;
+  background-color: #077b58;
 }

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

@@ -8,7 +8,7 @@
     </button>
     <h2 class="modal-heading">Transaktionen</h2>
     <p class="py-2 text-text-secondary mb-4">Hier siehst du alle vergangenen Einzahlungen</p>
-    @for (transaction of transactions$ | async; track null) {
+    @for (transaction of (transactionData$ | async)?.transactions; track null) {
       <div class="flex justify-between items-center mb-4">
         <div>
           <p class="text-sm font-medium">{{ transaction.status }}</p>
@@ -25,11 +25,11 @@
         </div>
       </div>
     }
-    <div class="inline inline-flex w-full">
+    <div class="inline inline-flex w-full gap-2">
       <button type="button" (click)="back()" class="button-primary w-full py-2" [disabled]="offset <= 0">
         <
       </button>
-      <button type="button" (click)="forward()" class="button-primary w-full py-2">
+      <button type="button" (click)="forward()" class="button-primary w-full py-2" [disabled]="!(transactionData$|async)?.hasMore">
         >
       </button>
     </div>

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

@@ -4,6 +4,7 @@ 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';
+import { TransactionData } from '../../model/TransactionData';
 
 const PER_PAGE = 5
 
@@ -31,7 +32,7 @@ export class TransactionHistoryComponent {
   protected offset: number = 0;
 
   private transactionService: TransactionService = inject(TransactionService);
-  transactions$: Observable<Transaction[]> = this.loadTransactions();
+  transactionData$: Observable<TransactionData> = this.loadTransactions();
 
   closeDialog() {
     this.isOpen = false;
@@ -40,12 +41,12 @@ export class TransactionHistoryComponent {
 
   forward() {
     this.offset++;
-    this.transactions$ = this.loadTransactions();
+    this.transactionData$ = this.loadTransactions();
   }
 
   back() {
     this.offset--;
-    this.transactions$ = this.loadTransactions();
+    this.transactionData$ = this.loadTransactions();
   }
 
   loadTransactions() {

frontend/src/app/model/TransactionData.ts

@@ -0,0 +1,6 @@
+import { Transaction } from './Transaction';
+
+export interface TransactionData {
+  transactions: Transaction[];
+  hasMore: boolean;
+}

frontend/src/app/service/transaction.service.ts

@@ -1,5 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { TransactionData } from '../model/TransactionData';
 
 @Injectable({
   providedIn: 'root',
@@ -18,6 +19,6 @@ export class TransactionService {
       baseUrl.searchParams.append('offset', offset.toString());
     }
 
-    return this.http.get<any[]>(`${baseUrl}`);
+    return this.http.get<TransactionData>(`${baseUrl}`);
   }
 }