Merged PR 2029: feature(crm, isa-app-customer-search): Adjustments to Card Transaction Histor...

feature(crm, isa-app-customer-search): Adjustments to Card Transaction History, Added Scroll Top Button, Show 50 last Transactions, Wording changes
Refs: #5316

apps/isa-app/src/page/customer/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.css

@@ -1,3 +1,3 @@
 :host {
-  @apply grid grid-flow-row items-center gap-4 bg-surface text-surface-content rounded px-4 py-6;
+  @apply max-h-[calc(100vh-14rem)] grid grid-flow-row items-center gap-4 bg-surface text-surface-content rounded px-4 py-6 overflow-hidden overflow-y-scroll;
 }

apps/isa-app/src/page/customer/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.html

@@ -14,3 +14,7 @@
   [cardCode]="firstActiveCardCode()"
   class="mt-8"
 />
+<utils-scroll-top-button
+  [target]="hostElement"
+  class="flex flex-col justify-self-end fixed bottom-6 right-6"
+></utils-scroll-top-button>

apps/isa-app/src/page/customer/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.ts

@@ -4,6 +4,7 @@ import {
   inject,
   computed,
   effect,
+  ElementRef,
 } from '@angular/core';
 import { CustomerSearchStore } from '../store';
 import { ActivatedRoute } from '@angular/router';
@@ -14,6 +15,7 @@ import { CustomerLoyaltyCardsComponent } from '@isa/crm/feature/customer-loyalty
 import { CrmFeatureCustomerCardTransactionsComponent } from '@isa/crm/feature/customer-card-transactions';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { CustomerBonusCardsResource } from '@isa/crm/data-access';
+import { ScrollTopButtonComponent } from '@isa/utils/scroll-position';
 
 @Component({
   selector: 'page-customer-kundenkarte-main-view',
@@ -26,6 +28,7 @@ import { CustomerBonusCardsResource } from '@isa/crm/data-access';
     AsyncPipe,
     CustomerLoyaltyCardsComponent,
     CrmFeatureCustomerCardTransactionsComponent,
+    ScrollTopButtonComponent,
   ],
   providers: [CustomerBonusCardsResource],
 })
@@ -34,6 +37,12 @@ export class KundenkarteMainViewComponent {
   private _activatedRoute = inject(ActivatedRoute);
   private _bonusCardsResource = inject(CustomerBonusCardsResource);
 
+  elementRef = inject(ElementRef);
+
+  get hostElement() {
+    return this.elementRef.nativeElement;
+  }
+
   customerId$ = this._activatedRoute.params.pipe(
     map((params) => params.customerId),
   );

libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.html

@@ -1,6 +1,6 @@
-<div class="flex flex-col gap-[24px] px-4">
+<div class="flex flex-col gap-[24px] px-4 overflow-hidden overflow-y-scroll">
   <h2 class="isa-text-body-1-bold text-isa-neutral-900">
-    Letzte 5 Transaktionen des Kunden
+    Letzte Transaktionen des Kunden
   </h2>
 
   @if (isLoading()) {
@@ -19,19 +19,18 @@
     <table cdk-table [dataSource]="dataSource()" [trackBy]="trackByDate">
       <!-- Date -->
       <ng-container cdkColumnDef="date">
-        <th cdk-header-cell *cdkHeaderCellDef>
-          Datum
-        </th>
+        <th cdk-header-cell *cdkHeaderCellDef>Datum</th>
         <td cdk-cell *cdkCellDef="let t" class="text-xs">
-          {{ t.date | date: 'dd.MM.yyyy' }} <span class="text-isa-neutral-500">{{ t.date | date: 'HH:mm.ss' }}</span>
+          {{ t.date | date: 'dd.MM.yyyy' }}
+          <span class="text-isa-neutral-500">{{
+            t.date | date: 'HH:mm.ss'
+          }}</span>
         </td>
       </ng-container>
 
       <!-- Type -->
       <ng-container cdkColumnDef="reason">
-        <th cdk-header-cell *cdkHeaderCellDef>
-          Buchungsart
-        </th>
+        <th cdk-header-cell *cdkHeaderCellDef>Buchungsart</th>
         <td cdk-cell *cdkCellDef="let t" class="text-xs">
           {{ t.reason || '-' }}
         </td>
@@ -39,19 +38,18 @@
 
       <!-- Amount -->
       <ng-container cdkColumnDef="amount">
-        <th cdk-header-cell *cdkHeaderCellDef class="text-right">
-          Umsatz
-        </th>
+        <th cdk-header-cell *cdkHeaderCellDef class="text-right">Umsatz</th>
         <td cdk-cell *cdkCellDef="let t" class="text-xs text-right">
-          @if (t.type === 'BURN') {-}{{ t.amount || 0 | number: '1.2-2' : 'de-DE' }} EUR
+          @if (t.type === 'BURN') {
+            -
+          }
+          {{ t.amount || 0 | number: '1.2-2' : 'de-DE' }} EUR
         </td>
       </ng-container>
 
       <!-- Reference -->
       <ng-container cdkColumnDef="reference">
-        <th cdk-header-cell *cdkHeaderCellDef class="text-right">
-          Bon-Nummer
-        </th>
+        <th cdk-header-cell *cdkHeaderCellDef class="text-right">Bon-Nummer</th>
         <td cdk-cell *cdkCellDef="let t" class="text-xs text-right">
           {{ t.reference || '-' }}
         </td>
@@ -59,9 +57,7 @@
 
       <!-- Points -->
       <ng-container cdkColumnDef="points">
-        <th cdk-header-cell *cdkHeaderCellDef class="text-right">
-          Lesepunkte
-        </th>
+        <th cdk-header-cell *cdkHeaderCellDef class="text-right">Lesepunkte</th>
         <td cdk-cell *cdkCellDef="let t" class="text-xs text-right">
           @if (t.type === 'EARN') {
             <span class="text-isa-accent-green inline-flex items-center gap-1">
@@ -80,16 +76,10 @@
       </ng-container>
 
       <!-- Header Row -->
-      <tr
-        cdk-header-row
-        *cdkHeaderRowDef="displayedColumns"
-      ></tr>
+      <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
 
       <!-- Data Rows -->
-      <tr
-        cdk-row
-        *cdkRowDef="let row; columns: displayedColumns"
-      ></tr>
+      <tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
     </table>
   }
 </div>

libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.ts

@@ -54,7 +54,7 @@ export class CrmFeatureCustomerCardTransactionsComponent {
   /**
    * Data source for CDK table - defaults to empty array when undefined
    */
-  readonly dataSource = computed(() => this.transactions()?.slice(0, 5) ?? []);
+  readonly dataSource = computed(() => this.transactions()?.slice(0, 50) ?? []);
 
   /**
    * Column definitions for the table