ag grid

myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.html

@@ -151,50 +151,46 @@
       <p class="eyebrow">Journal</p>
       <h2>Alle Buchungen</h2>
     </div>
-    <span>{{ activities().length }} Einträge</span>
+    @if (journalTotal(); as total) {
+      <span>{{ total }} Einträge</span>
+    }
   </div>
 
-  @if (loading()) {
-    <div class="state"><mat-spinner diameter="36" /><span>Buchungen werden geladen …</span></div>
-  } @else if (activities().length === 0) {
-    <div class="state">
-      <mat-icon>receipt_long</mat-icon><span>Noch keine Buchungen vorhanden.</span>
-    </div>
-  } @else {
-    <div class="activity-list">
-      @for (activity of activities(); track activity.id) {
-        <article class="activity-item">
-          <div class="activity-icon" [class.team]="activity.isTeamWalletTransaction">
-            <mat-icon>{{
-              activity.isTeamWalletTransaction ? 'account_balance' : 'person'
-            }}</mat-icon>
-          </div>
-          <div class="activity-copy">
-            <strong>{{ activity.playerName || 'Teamkasse' }}</strong>
-            <span>{{ typeLabel(activity.type) }} · {{ activity.date | date: 'dd.MM.yyyy' }}</span>
-            @if (activity.note) {
-              <small>{{ activity.note }}</small>
-            }
-          </div>
-          <strong>
-            <app-transaction-amount
-              [amount]="activity.amount"
-              [type]="activity.type"
-              [context]="activity.isTeamWalletTransaction ? 'team' : 'player'"
-            />
-          </strong>
-          @if (canReverse(activity)) {
-            <button
-              mat-icon-button
-              data-testid="reverse-booking"
-              aria-label="Buchung stornieren"
-              (click)="reverseBooking(activity)"
-            >
-              <mat-icon>undo</mat-icon>
-            </button>
-          }
-        </article>
-      }
-    </div>
-  }
+  <div class="journal-toolbar">
+    <mat-form-field appearance="outline" class="journal-search">
+      <mat-label>Suche</mat-label>
+      <input
+        matInput
+        placeholder="Name oder Notiz"
+        [value]="journalSearch()"
+        (input)="onJournalSearchInput($any($event.target).value)"
+      />
+      <mat-icon matTextSuffix>search</mat-icon>
+    </mat-form-field>
+    <mat-form-field appearance="outline" class="journal-type">
+      <mat-label>Typ</mat-label>
+      <mat-select
+        [value]="journalTypeFilter()"
+        (selectionChange)="onJournalTypeChange($event.value)"
+      >
+        @for (option of journalTypeOptions; track option.value) {
+          <mat-option [value]="option.value">{{ option.label }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <ag-grid-angular
+    class="journal-grid"
+    [theme]="gridTheme"
+    [columnDefs]="journalColumnDefs"
+    [rowModelType]="'infinite'"
+    [pagination]="true"
+    [paginationPageSize]="25"
+    [paginationPageSizeSelector]="[10, 25, 50, 100]"
+    [cacheBlockSize]="25"
+    [getRowId]="journalGetRowId"
+    [suppressCellFocus]="true"
+    (gridReady)="onJournalGridReady($event)"
+  />
 </section>