mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
cc25336d79
fix(customer-card): implement navigation flow from customer card to reward selection Add navigation logic to Kundenkarte component that allows users to select a customer and navigate to the reward shop. The flow now properly preserves navigation context using NavigationStateService scoped to the active tab. Changes include: - Add customerId input to KundenkarteComponent for customer identification - Replace placeholder onRewardShop() with navigateToReward() method - Preserve navigation context with returnUrl and autoTriggerContinueFn flag - Update kundenkarte-main-view to pass customerId to child component - Modify details-main-view to auto-trigger continue() when returning from Kundenkarte with the appropriate context flag - Add loading state handling during navigation from customer card - Update button disabled logic to check both card availability and loading The navigation context is automatically scoped to the current tab and cleaned up after use, ensuring proper isolation between tabs. Ref: #5400
77 lines
2.3 KiB
HTML
77 lines
2.3 KiB
HTML
<div
|
|
class="wrapper text-center"
|
|
[@cardFlip]="state"
|
|
(@cardFlip.done)="flipAnimationDone($event)"
|
|
>
|
|
@if (cardDetails) {
|
|
<div class="card-main">
|
|
<div class="icons text-brand">
|
|
@if (isCustomerCard && frontside) {
|
|
<button class="icon-barcode" (click)="flipCard()">
|
|
<shared-icon [size]="35" icon="barcode-scanner"></shared-icon>
|
|
</button>
|
|
}
|
|
@if (isCustomerCard && !frontside) {
|
|
<button class="icon-back" (click)="flipCard()">
|
|
<shared-icon [size]="35" icon="refresh"></shared-icon>
|
|
</button>
|
|
}
|
|
<!-- <div *ngIf="!isCustomerCard" class="icon-delete"><ui-icon (click)="onDeletePartnerCard()" size="25px" icon="trash"></ui-icon></div> -->
|
|
</div>
|
|
<div class="headline">
|
|
@if (isCustomerCard && frontside) {
|
|
<p>Ihre Lesepunkte</p>
|
|
}
|
|
@if (isCustomerCard && !frontside) {
|
|
<p>Kartennummer</p>
|
|
}
|
|
@if (!isCustomerCard) {
|
|
<p>Partnerkartennummer</p>
|
|
}
|
|
</div>
|
|
<div class="mt-2">
|
|
@if (!isCustomerCard || (isCustomerCard && !frontside)) {
|
|
<div class="card-number">{{ cardDetails.code }}</div>
|
|
}
|
|
@if (isCustomerCard && frontside) {
|
|
<div class="points">{{ cardDetails.totalPoints | number }}</div>
|
|
}
|
|
</div>
|
|
<div class="barcode-button">
|
|
@if (!isCustomerCard || (isCustomerCard && !frontside)) {
|
|
<div class="barcode-field">
|
|
<img
|
|
class="barcode"
|
|
src="/assets/images/barcode.png"
|
|
alt="Barcode"
|
|
/>
|
|
</div>
|
|
}
|
|
@if (isCustomerCard && frontside) {
|
|
<div>
|
|
<button class="button" (click)="navigateToReward()">
|
|
Zum Prämienshop
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
<div class="card-bottom">
|
|
@if (!isCustomerCard || (isCustomerCard && !frontside)) {
|
|
<div class="customer-name">
|
|
<p>{{ cardDetails.firstName }} {{ cardDetails.lastName }}</p>
|
|
</div>
|
|
}
|
|
@if (isCustomerCard && frontside) {
|
|
<div class="logo ml-2">
|
|
<img
|
|
class="logo-picture"
|
|
src="/assets/images/Hugendubel_Logo.png"
|
|
alt="Hugendubel Logo"
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|