37 lines
1.8 KiB
HTML
37 lines
1.8 KiB
HTML
<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">Transaktionen</h2>
|
|
<p class="py-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>
|