From 157e774e8602d8e24b3ec002ca6bfa9ef6eabf03 Mon Sep 17 00:00:00 2001
From: csimonis <c.simonis@neusta.de>
Date: Wed, 23 Apr 2025 11:54:30 +0200
Subject: [PATCH] feat(transaction-history): add disabled state styling for
 buttons

---
 .../transaction-history.component.css         |  9 +++++
 .../transaction-history.component.html        | 40 +++++++++----------
 .../transaction-history.component.ts          | 23 ++---------
 3 files changed, 30 insertions(+), 42 deletions(-)

diff --git a/frontend/src/app/feature/transaction-history/transaction-history.component.css b/frontend/src/app/feature/transaction-history/transaction-history.component.css
index e69de29..c3fdef2 100644
--- a/frontend/src/app/feature/transaction-history/transaction-history.component.css
+++ b/frontend/src/app/feature/transaction-history/transaction-history.component.css
@@ -0,0 +1,9 @@
+button[disabled] {
+  cursor: not-allowed;
+  background-color: #ccc;
+  box-shadow: none;
+}
+
+button[disabled]:hover {
+  background-color: #ccc;
+}
diff --git a/frontend/src/app/feature/transaction-history/transaction-history.component.html b/frontend/src/app/feature/transaction-history/transaction-history.component.html
index 78ad158..5d26590 100644
--- a/frontend/src/app/feature/transaction-history/transaction-history.component.html
+++ b/frontend/src/app/feature/transaction-history/transaction-history.component.html
@@ -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">
diff --git a/frontend/src/app/feature/transaction-history/transaction-history.component.ts b/frontend/src/app/feature/transaction-history/transaction-history.component.ts
index 2b658fe..30b9102 100644
--- a/frontend/src/app/feature/transaction-history/transaction-history.component.ts
+++ b/frontend/src/app/feature/transaction-history/transaction-history.component.ts
@@ -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);
   }
 }