SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 72 Wiki Activity Actions

feat: add transaction history to homepage (CAS-56) #137

Merged
csimonis merged 8 commits from feature/transaction-history into main 2025-04-23 10:38:31 +00:00
Conversation 6 Commits 8 Files changed 15 +30 -42
3 changed files with 30 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 157e774e86 - Show all commits

9
frontend/src/app/feature/transaction-history/transaction-history.component.css
View file

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

40
frontend/src/app/feature/transaction-history/transaction-history.component.html
View file

@ -1,36 +1,32 @@
<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="1em" height="1em" 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>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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">Transaktionen</h2>
<p class="py-2 text-text-secondary mb-4">Hier siehst du alle vergangenen Einzahlungen</p>
<div *ngIf="!loading()">
<div *ngFor="let transaction of transactions$ | async">
<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'">
@for (transaction of transactions$ | async; 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>
<div *ngIf="loading()">
<div *ngFor="let item of skeletonItems">
<div class="flex justify-between items-center mb-4 animate-pulse">
<div>
<div class="h-4 bg-gray-200 rounded w-20"></div>
<div class="h-3 bg-gray-200 rounded w-24 mt-2"></div>
</div>
<div class="h-4 bg-gray-200 rounded w-16"></div>
</div>
</div>
</div>
}
<div class="inline inline-flex w-full">
<button type="button" (click)="back()" class="button-primary w-full py-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">

23
frontend/src/app/feature/transaction-history/transaction-history.component.ts
View file

@ -1,13 +1,4 @@
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
inject,
Input,
Output,
signal,
WritableSignal,
} 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';
@ -34,12 +25,10 @@ const PER_PAGE = 5
export class TransactionHistoryComponent {
@Input()
isOpen: boolean = false;
loading: WritableSignal<boolean> = signal<boolean>(true);
skeletonItems = Array(PER_PAGE).fill({});
@Output()
closeEventEmitter = new EventEmitter<void>();
private offset: number = 0;
protected offset: number = 0;
private transactionService: TransactionService = inject(TransactionService);
transactions$: Observable<Transaction[]> = this.loadTransactions();
@ -60,12 +49,6 @@ export class TransactionHistoryComponent {
}
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$;
return this.transactionService.getUsersTransactions(PER_PAGE, this.offset * PER_PAGE);
}
}