feat(transaction-history): add transaction history feature with modal

backend/src/main/java/de/szut/casino/deposit/TransactionRepository.java

@@ -16,6 +16,6 @@ public interface TransactionRepository extends JpaRepository<TransactionEntity,
     @Query("SELECT t FROM TransactionEntity t WHERE t.user = ?1")
     List<TransactionEntity> findAllByUserId(UserEntity id);
 
-    @Query("SELECT t FROM TransactionEntity t WHERE t.user = ?1 ORDER BY t.id DESC LIMIT ?2")
+    @Query("SELECT t FROM TransactionEntity t WHERE t.user = ?1 ORDER BY t.createdAt DESC LIMIT ?2")
     List<TransactionEntity> findByUserIdWithLimit(UserEntity userEntity, Integer limit);
 }

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

@@ -81,9 +81,10 @@
             [isOpen]="isDepositModalOpen"
             (closeModalEmitter)="closeDepositModal()"
           ></app-deposit>
-          <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
+          <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded" (click)="openTransactionModal()">
             Transaktionen
           </button>
+          <app-transaction-history [isOpen]="isTransactionModalOpen" (closeEventEmitter)="closeTransactionModal()" />
           <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
             Kontoeinstellungen
           </button>
@@ -103,8 +104,8 @@
             *ngFor="let transaction of recentTransactions|async"
           >
             <div>
-              <p class="text-sm font-medium">{{ transaction.type }}</p>
-              <p class="text-xs text-text-secondary">{{ transaction.createdAt | date }}</p>
+              <p class="text-sm font-medium">{{ transaction.status }}</p>
+              <p class="text-xs text-text-secondary">{{ transaction.createdAt | date : 'd.m.Y H:m'}}</p>
             </div>
             <span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
               {{ transaction.amount | currency: 'EUR' }}

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

@@ -8,22 +8,26 @@ import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { Game } from 'app/model/Game';
 import { Observable, of } from 'rxjs';
 import { TransactionService } from '@service/transaction.service';
+import format from 'ajv/dist/vocabularies/format';
+import { TransactionHistoryComponent } from '../transaction-history/transaction-history.component';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent, AsyncPipe, DatePipe],
+  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent, AsyncPipe, DatePipe, TransactionHistoryComponent],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class HomeComponent implements OnInit {
   isDepositModalOpen = false;
   isDepositSuccessful = false;
+  isTransactionModalOpen = false;
 
   constructor(
     public route: ActivatedRoute,
-    public router: Router
-  ) {}
+    public router: Router,
+  ) {
+  }
 
   ngOnInit() {
     this.isDepositSuccessful = this.route.snapshot.queryParams['success'] == 'true';
@@ -81,6 +85,7 @@ export default class HomeComponent implements OnInit {
   openDepositModal() {
     this.isDepositModalOpen = true;
   }
+
   closeDepositModal() {
     this.isDepositModalOpen = false;
   }
@@ -88,11 +93,23 @@ export default class HomeComponent implements OnInit {
   openDepositConfirmationModal() {
     this.isDepositSuccessful = true;
   }
+
+  openTransactionModal()
+  {
+    this.isTransactionModalOpen = true;
+  }
+
   closeDepositConfirmationModal() {
     this.isDepositSuccessful = false;
   }
 
+  closeTransactionModal() {
+    this.isTransactionModalOpen = false;
+  }
+
   navigateToGame(route: string) {
     this.router.navigate([route]);
   }
+
+  protected readonly format = format;
 }

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

@@ -1 +1,10 @@
-<p>transaction-history works!</p>
+<div *ngIf="isOpen" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
+  <div class="modal-card" [@cardAnimation]>
+    <h2 class="modal-heading">Transaktionen</h2>
+    <p class="py-2 text-text-secondary mb-4">Hier siehst du alle vergangenen Einzahlungen</p>
+    
+    <button type="button" (click)="closeDialog()" class="button-primary w-full py-2">
+      Verstanden
+    </button>
+  </div>
+</div>

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

@@ -1,17 +1,35 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } 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';
 
 @Component({
   standalone: true,
   selector: 'app-transaction-history',
-  imports: [],
+  imports: [
+    NgForOf,
+    AsyncPipe,
+    CurrencyPipe,
+    DatePipe,
+    AnimatedNumberComponent,
+    NgIf,
+  ],
   templateUrl: './transaction-history.component.html',
   styleUrl: './transaction-history.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TransactionHistoryComponent {
+  @Input()
+  isOpen: boolean = false;
   private transactionService: TransactionService = inject(TransactionService);
+  @Output()
+  closeEventEmitter = new EventEmitter<void>();
+  transactions$: Observable<Transaction[]> = this.transactionService.getUsersTransactions();
 
-  transactions$: Observable<> = this.transactionService.getUsersTransactions();
+  closeDialog() {
+    this.isOpen = false;
+    this.closeEventEmitter.emit();
+  }
 }

frontend/src/app/model/Transaction.ts

@@ -1,6 +1,6 @@
 export interface Transaction {
   id: string;
-  type: string;
+  status: string;
   amount: number;
   createdAt: string;
 }