60 lines
2 KiB
HTML
60 lines
2 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 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>
|