Merge pull request 'feat: add transaction history to homepage (CAS-56)' (!137) from feature/transaction-history into main

Reviewed-on: #137
Reviewed-by: Phan Huy Tran <ptran@noreply.localhost>

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

@@ -6,6 +6,7 @@ import lombok.Getter;
 import lombok.Setter;
 
 import java.math.BigDecimal;
+import java.util.Date;
 
 @Setter
 @Getter
@@ -26,4 +27,7 @@ public class TransactionEntity {
 
     @Enumerated(EnumType.STRING)
     private TransactionStatus status = TransactionStatus.PROCESSING;
+
+    @Column(name = "created_at")
+    private Date createdAt = new Date();
 }

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

@@ -5,10 +5,20 @@ import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
 import java.util.Optional;
 
 @Service
 public interface TransactionRepository extends JpaRepository<TransactionEntity, Long> {
     @Query("SELECT t FROM TransactionEntity t WHERE t.sessionId = ?1")
     Optional<TransactionEntity> findOneBySessionID(String sessionId);
+
+    @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.createdAt DESC LIMIT ?2 OFFSET ?3")
+    List<TransactionEntity> findByUserIdWithLimit(UserEntity userEntity, Integer limit, Integer offset);
+
+    @Query("SELECT COUNT(t) > ?2 + ?3 FROM TransactionEntity t WHERE t.user = ?1")
+    Boolean hasMore(UserEntity userEntity, Integer limit, Integer offset);
 }

backend/src/main/java/de/szut/casino/user/UserController.java

@@ -4,12 +4,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestHeader;
-import org.springframework.web.bind.annotation.RestController;
-
 import de.szut.casino.user.dto.CreateUserDto;
 import de.szut.casino.user.dto.GetUserDto;
 import jakarta.validation.Valid;

backend/src/main/java/de/szut/casino/user/transaction/GetTransactionService.java

@@ -0,0 +1,45 @@
+package de.szut.casino.user.transaction;
+
+import de.szut.casino.deposit.TransactionEntity;
+import de.szut.casino.deposit.TransactionRepository;
+import de.szut.casino.user.UserEntity;
+import de.szut.casino.user.UserService;
+import de.szut.casino.user.transaction.dto.GetTransactionDto;
+import de.szut.casino.user.transaction.dto.UserTransactionsDto;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+import java.util.Optional;
+
+@Service
+public class GetTransactionService {
+
+    @Autowired
+    private UserService userService;
+
+    @Autowired
+    private TransactionRepository transactionRepository;
+
+    public UserTransactionsDto getUserTransactionsDto(String authToken, Integer limit, Integer offset) {
+        Optional<UserEntity> user = this.userService.getCurrentUser(authToken);
+        if (user.isPresent()) {
+            List<TransactionEntity> transactionEntities = this.transactionRepository.findByUserIdWithLimit(user.get(), limit, offset);
+            Boolean hasMore = this.transactionRepository.hasMore(user.get(), limit, offset);
+
+            return new UserTransactionsDto(mapTransactionsToDtos(transactionEntities), hasMore);
+        }
+
+        return new UserTransactionsDto(List.of(), false);
+    }
+
+    public List<GetTransactionDto> mapTransactionsToDtos(List<TransactionEntity> transactions) {
+        return transactions.stream()
+                .map(transaction -> new GetTransactionDto(
+                        transaction.getAmount(),
+                        transaction.getStatus(),
+                        transaction.getCreatedAt())
+                ).toList();
+    }
+}
+

backend/src/main/java/de/szut/casino/user/transaction/TransactionController.java

@@ -0,0 +1,32 @@
+package de.szut.casino.user.transaction;
+
+import de.szut.casino.deposit.TransactionEntity;
+import de.szut.casino.user.transaction.dto.GetTransactionDto;
+import de.szut.casino.user.transaction.dto.UserTransactionsDto;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestHeader;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+public class TransactionController {
+
+    @Autowired
+    private GetTransactionService transactionService;
+
+    @GetMapping("/user/transactions")
+    public ResponseEntity<UserTransactionsDto> getUserTransactions(
+            @RequestHeader("Authorization") String authToken,
+            @RequestParam(value = "limit", required = false) Integer limit,
+            @RequestParam(value = "offset", required = false) Integer offset
+            ) {
+        UserTransactionsDto transactionEntities = this.transactionService.getUserTransactionsDto(authToken, limit, offset);
+
+        return ResponseEntity.ok(transactionEntities);
+    }
+}
+

backend/src/main/java/de/szut/casino/user/transaction/dto/GetTransactionDto.java

@@ -0,0 +1,16 @@
+package de.szut.casino.user.transaction.dto;
+
+import de.szut.casino.deposit.TransactionStatus;
+import lombok.AllArgsConstructor;
+import lombok.NoArgsConstructor;
+
+import java.util.Date;
+
+@AllArgsConstructor
+@NoArgsConstructor
+public class GetTransactionDto {
+    public double amount = 0;
+    public TransactionStatus status = TransactionStatus.PROCESSING;
+    public Date createdAt = new Date();
+}
+

backend/src/main/java/de/szut/casino/user/transaction/dto/UserTransactionsDto.java

@@ -0,0 +1,12 @@
+package de.szut.casino.user.transaction.dto;
+
+import lombok.AllArgsConstructor;
+
+import java.util.List;
+
+@AllArgsConstructor
+public class UserTransactionsDto {
+    public List<GetTransactionDto> transactions;
+    public Boolean hasMore;
+}
+

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

@@ -81,9 +81,16 @@
             [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>
@@ -100,11 +107,13 @@
         <div class="space-y-3">
           <div
             class="flex justify-between items-center"
-            *ngFor="let transaction of recentTransactions"
+            *ngFor="let transaction of (recentTransactionData | async)?.transactions"
           >
             <div>
-              <p class="text-sm font-medium">{{ transaction.type }}</p>
+              <p class="text-sm font-medium">{{ transaction.status }}</p>
-              <p class="text-xs text-text-secondary">{{ transaction.date }}</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

@@ -1,22 +1,36 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
-import { CurrencyPipe, NgFor } from '@angular/common';
+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 } 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',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent],
+  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,
@@ -74,11 +88,13 @@ export default class HomeComponent implements OnInit {
 
   allGames: Game[] = [...this.featuredGames];
 
-  recentTransactions: Transaction[] = [];
+  recentTransactionData: Observable<TransactionData> =
+    inject(TransactionService).getUsersTransactions(5);
 
   openDepositModal() {
     this.isDepositModalOpen = true;
   }
+
   closeDepositModal() {
     this.isDepositModalOpen = false;
   }
@@ -86,11 +102,22 @@ 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.css

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

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

@@ -0,0 +1,60 @@
+<div *ngIf="isOpen" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed">
+  <div class="modal-card" [@cardAnimation]>
+    <button
+      type="button"
+      (click)="closeDialog()"
+      class="absolute top-2 right-2 text-text-secondary"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18 6L6 18M6 6l12 12"
+        />
+      </svg>
+    </button>
+    <h2 class="modal-heading mb-0">Transaktionen</h2>
+    <p class="pb-1 text-text-secondary mb-4">Hier siehst du alle vergangenen Einzahlungen</p>
+    @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>
+          <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' }}
+        </span>
+      </div>
+    } @empty {
+      <div class="flex justify-center items-center w-full h-32">
+        <div
+          class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full border-gray-300 border-t-gree-600"
+          role="status"
+        >
+          <span class="sr-only">Loading...</span>
+        </div>
+      </div>
+    }
+    <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"
+        [disabled]="!(transactionData$ | async)?.hasMore"
+      >
+        >
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core';
+import { TransactionService } from '@service/transaction.service';
+import { Observable } from 'rxjs';
+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;
+
+@Component({
+  standalone: true,
+  selector: 'app-transaction-history',
+  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 = false;
+  @Output()
+  closeEventEmitter = new EventEmitter<void>();
+
+  protected offset = 0;
+
+  private transactionService: TransactionService = inject(TransactionService);
+  transactionData$: Observable<TransactionData> = this.loadTransactions();
+
+  closeDialog() {
+    this.isOpen = false;
+    this.closeEventEmitter.emit();
+  }
+
+  forward() {
+    this.offset++;
+    this.transactionData$ = this.loadTransactions();
+  }
+
+  back() {
+    this.offset--;
+    this.transactionData$ = this.loadTransactions();
+  }
+
+  loadTransactions() {
+    return this.transactionService.getUsersTransactions(PER_PAGE, this.offset * PER_PAGE);
+  }
+}

frontend/src/app/model/Transaction.ts

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

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

@@ -0,0 +1,24 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TransactionData } from '../model/TransactionData';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TransactionService {
+  private http: HttpClient = inject(HttpClient);
+
+  public getUsersTransactions(limit: number | null = null, offset: number | null = null) {
+    const baseUrl = new URL(`${window.location.origin}/backend/user/transactions`);
+
+    if (limit !== null) {
+      baseUrl.searchParams.append('limit', limit.toString());
+    }
+
+    if (offset !== null) {
+      baseUrl.searchParams.append('offset', offset.toString());
+    }
+
+    return this.http.get<TransactionData>(`${baseUrl}`);
+  }
+}