Content
+{{ item.name }}
+
+
+
+// NEW
+@if (condition) {
+ A
+ Default
+Content
+}
+@for (item of items; track item.id) {
+ {{ item.name }}
+}
+@switch (value) {
+ @case ('a') { A
}
+ @default { Default
}
+}
+```
+
+### Step 7: Validate and Test
+
+1. **Compile Check**
+ ```bash
+ npx tsc --noEmit
+ ```
+
+2. **Run Tests**
+ ```bash
+ npx nx test [library-name] --skip-nx-cache
+ ```
+
+3. **Lint Check**
+ ```bash
+ npx nx lint [library-name]
+ ```
+
+4. **Verify Application Runs**
+ ```bash
+ npm start
+ ```
+
+## Common Import Patterns
+
+| Template Usage | Required Import |
+|---------------|-----------------|
+| `*ngIf`, `*ngFor`, `*ngSwitch` | `CommonModule` |
+| `ngModel` | `FormsModule` |
+| `formControl`, `formGroup` | `ReactiveFormsModule` |
+| `routerLink`, `router-outlet` | `RouterModule` |
+| `async`, `date`, `json` pipes | `CommonModule` |
+| Custom components | Direct component import |
+| Custom pipes | Direct pipe import |
+
+## Error Handling
+
+**Issue: Circular dependencies**
+- Extract shared interfaces to util library
+- Use dependency injection for services
+- Avoid component A importing component B when B imports A
+
+**Issue: Missing imports causing template errors**
+- Check browser console for specific errors
+- Verify all template dependencies are in imports array
+- Use Angular Language Service in IDE for hints
+
+## References
+
+- Angular Standalone Components: https://angular.dev/guide/components/importing
+- Modern Control Flow: https://angular.dev/guide/templates/control-flow
+- CLAUDE.md Component Architecture section
diff --git a/.claude/skills/swagger-sync-manager/SKILL.md b/.claude/skills/swagger-sync-manager/SKILL.md
new file mode 100644
index 000000000..12a715f29
--- /dev/null
+++ b/.claude/skills/swagger-sync-manager/SKILL.md
@@ -0,0 +1,134 @@
+---
+name: swagger-sync-manager
+description: This skill should be used when regenerating Swagger/OpenAPI TypeScript API clients in the ISA-Frontend monorepo. It handles generation of all 10 API clients (or specific ones), Unicode cleanup, breaking change detection, TypeScript validation, and affected test execution. Use this skill when the user requests API sync, mentions "regenerate swagger", or indicates backend API changes.
+---
+
+# Swagger Sync Manager
+
+## Overview
+
+Automate the regeneration of TypeScript API clients from Swagger/OpenAPI specifications. Handles 10 API clients with automatic post-processing, breaking change detection, impact analysis, and validation.
+
+## When to Use This Skill
+
+Invoke when user requests:
+- API client regeneration
+- "sync swagger" or "update API clients"
+- Backend API changes need frontend updates
+
+## Available APIs
+
+availability-api, cat-search-api, checkout-api, crm-api, eis-api, inventory-api, isa-api, oms-api, print-api, wws-api
+
+## Sync Workflow
+
+### Step 1: Pre-Generation Check
+
+```bash
+# Check uncommitted changes
+git status generated/swagger/
+```
+
+If changes exist, warn user and ask to proceed.
+
+### Step 2: Backup Current State (Optional)
+
+```bash
+cp -r generated/swagger generated/swagger.backup.$(date +%s)
+```
+
+### Step 3: Run Generation
+
+```bash
+# All APIs
+npm run generate:swagger
+
+# Specific API (if api-name provided)
+npm run generate:swagger:[api-name]
+```
+
+### Step 4: Verify Unicode Cleanup
+
+Check `tools/fix-files.js` executed. Scan for remaining Unicode issues:
+
+```bash
+grep -r "\\\\u00" generated/swagger/ || echo "โ
No Unicode issues"
+```
+
+### Step 5: Detect Breaking Changes
+
+For each modified API:
+
+```bash
+git diff generated/swagger/[api-name]/
+```
+
+Identify:
+- ๐ด Removed properties
+- ๐ด Changed types
+- ๐ด Removed endpoints
+- โ
Added properties (safe)
+- โ
New endpoints (safe)
+
+### Step 6: Impact Analysis
+
+Use `Explore` agent to find affected files:
+- Search for imports from `@generated/swagger/[api-name]`
+- List data-access services using changed APIs
+- Estimate refactoring scope
+
+### Step 7: Validate
+
+```bash
+# TypeScript compilation
+npx tsc --noEmit
+
+# Run affected tests
+npx nx affected:test --skip-nx-cache
+
+# Lint affected
+npx nx affected:lint
+```
+
+### Step 8: Generate Report
+
+```
+Swagger Sync Complete
+=====================
+
+APIs Regenerated: [all | specific]
+Files Changed: XX
+Breaking Changes: XX
+
+๐ด Breaking Changes
+-------------------
+- [API]: [Property removed/type changed]
+- Affected files: [list]
+
+โ
Compatible Changes
+---------------------
+- [API]: [New properties/endpoints]
+
+๐ Validation
+-------------
+TypeScript: โ
/โ
+Tests: XX/XX passing
+Lint: โ
/โ
+
+๐ก Next Steps
+-------------
+[Fix breaking changes / Deploy]
+```
+
+## Error Handling
+
+**Generation fails**: Check OpenAPI spec URLs in package.json
+
+**Unicode cleanup fails**: Run `node tools/fix-files.js` manually
+
+**TypeScript errors**: Review breaking changes, update affected services
+
+## References
+
+- CLAUDE.md API Integration section
+- package.json swagger generation scripts
diff --git a/.claude/skills/test-migration-specialist/SKILL.md b/.claude/skills/test-migration-specialist/SKILL.md
new file mode 100644
index 000000000..f442c685a
--- /dev/null
+++ b/.claude/skills/test-migration-specialist/SKILL.md
@@ -0,0 +1,344 @@
+---
+name: test-migration-specialist
+description: This skill should be used when migrating Angular libraries from Jest + Spectator to Vitest + Angular Testing Utilities. It handles test configuration updates, test file refactoring, mock pattern conversion, and validation. Use this skill when the user requests test framework migration, specifically for the 40 remaining Jest-based libraries in the ISA-Frontend monorepo.
+---
+
+# Test Migration Specialist
+
+## Overview
+
+Automate the migration of Angular library tests from Jest + Spectator to Vitest + Angular Testing Utilities. This skill handles the complete migration workflow including configuration updates, test file refactoring, dependency management, and validation.
+
+**Current Migration Status**: 40 libraries use Jest (65.6%), 21 libraries use Vitest (34.4%)
+
+## When to Use This Skill
+
+Invoke this skill when:
+- User requests test migration for a specific library
+- User mentions "migrate tests" or "Jest to Vitest"
+- User wants to update test framework for a library
+- User references the 40 remaining libraries to migrate
+
+## Migration Workflow
+
+### Step 1: Pre-Migration Analysis
+
+Before making any changes, analyze the current state:
+
+1. **Read Testing Guidelines**
+ - Use `docs-researcher` agent to read `docs/guidelines/testing.md`
+ - Understand migration patterns and best practices
+ - Note JUnit and Cobertura configuration requirements
+
+2. **Analyze Library Structure**
+ - Read `libs/[path]/project.json` to identify current test executor
+ - Count test files using Glob: `**/*.spec.ts`
+ - Scan for Spectator usage patterns using Grep: `createComponentFactory|createServiceFactory|Spectator`
+ - Identify complex mocking scenarios (ng-mocks, jest.mock patterns)
+
+3. **Determine Library Depth**
+ - Calculate directory levels from workspace root
+ - This affects relative paths in vite.config.mts (../../../ vs ../../../../)
+
+### Step 2: Update Test Configuration
+
+Update the library's test configuration to use Vitest:
+
+1. **Update project.json**
+ Replace Jest executor with Vitest:
+ ```json
+ {
+ "test": {
+ "executor": "@nx/vite:test",
+ "options": {
+ "configFile": "vite.config.mts"
+ }
+ }
+ }
+ ```
+
+2. **Create vite.config.mts**
+ Create configuration with JUnit and Cobertura reporters:
+ ```typescript
+ ///
-
-
- ![]()
-
-
-
-
-
-
-
+
+
+
+ ![]()
+
+
+
+
+
+
+
+@if (showLowStockMessage()) {
+
+
+}
diff --git a/apps/isa-app/src/modal/purchase-options/purchase-options-list-item/purchase-options-list-item.component.ts b/apps/isa-app/src/modal/purchase-options/purchase-options-list-item/purchase-options-list-item.component.ts
index 68e76960e..ab6f61d40 100644
--- a/apps/isa-app/src/modal/purchase-options/purchase-options-list-item/purchase-options-list-item.component.ts
+++ b/apps/isa-app/src/modal/purchase-options/purchase-options-list-item/purchase-options-list-item.component.ts
@@ -1,349 +1,467 @@
-import { CommonModule } from '@angular/common';
-import { Component, ChangeDetectionStrategy, Input, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { ProductImageModule } from '@cdn/product-image';
-import { InputControlModule } from '@shared/components/input-control';
-import { ElementLifecycleModule } from '@shared/directives/element-lifecycle';
-import { UiCommonModule, UiOverlayTriggerDirective } from '@ui/common';
-import { UiQuantityDropdownModule } from '@ui/quantity-dropdown';
-import { UiSpinnerModule } from '@ui/spinner';
-import { UiTooltipModule } from '@ui/tooltip';
-import { combineLatest, ReplaySubject, Subscription } from 'rxjs';
-import { IconComponent } from '@shared/components/icon';
-import { map, take, shareReplay, startWith, switchMap, withLatestFrom } from 'rxjs/operators';
-import { GIFT_CARD_MAX_PRICE, PRICE_PATTERN } from '../constants';
-import { Item, PurchaseOptionsStore, isItemDTO, isShoppingCartItemDTO } from '../store';
-import { OrderDeadlinePipeModule } from '@shared/pipes/order-deadline';
-import { UiSelectModule } from '@ui/select';
-import { KeyValueDTOOfStringAndString } from '@generated/swagger/cat-search-api';
-import { ScaleContentComponent } from '@shared/components/scale-content';
-import moment from 'moment';
-
-@Component({
- selector: 'shared-purchase-options-list-item',
- templateUrl: 'purchase-options-list-item.component.html',
- styleUrls: ['purchase-options-list-item.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [
- CommonModule,
- UiQuantityDropdownModule,
- UiSelectModule,
- ProductImageModule,
- IconComponent,
- UiSpinnerModule,
- ReactiveFormsModule,
- InputControlModule,
- FormsModule,
- ElementLifecycleModule,
- UiTooltipModule,
- UiCommonModule,
- ScaleContentComponent,
- OrderDeadlinePipeModule,
- ],
- host: { class: 'shared-purchase-options-list-item' },
-})
-export class PurchaseOptionsListItemComponent implements OnInit, OnDestroy, OnChanges {
- private _subscriptions = new Subscription();
-
- private _itemSubject = new ReplaySubjectGeringer Bestand - Artikel holen vor Abschluss
+
- Artikel suchen
-
+ Artikel suchen
+
@@ -24,11 +28,22 @@
Warenkorb
+
+
@if (!(isDesktop$ | async)) {
Warenkorb
+ @if (orderTypesExist$ | async) { +
@@ -40,20 +55,31 @@
>
}
@@ -62,20 +88,44 @@
group.orderType === 'Versand' ||
group.orderType === 'B2B-Versand' ||
group.orderType === 'DIG-Versand'
- ) {
-
- {{ group.orderType !== 'Dummy' ? group.orderType : 'Manuelle Anlage / Dummy Bestellung' }}
+ {{
+ group.orderType !== 'Dummy'
+ ? group.orderType
+ : 'Manuelle Anlage / Dummy Bestellung'
+ }}
@if (group.orderType === 'Dummy') {
}
- @if (group.orderType !== 'Download' && group.orderType !== 'Dummy') {
+ @if (
+ group.orderType !== 'Download' && group.orderType !== 'Dummy'
+ ) {
-
+
}
+ ) { +
} } - @for (item of group.items; track trackByItemId(i, item); let lastItem = $last; let i = $index) { - @if (group?.orderType !== undefined && (item.features?.orderType === 'Abholung' || item.features?.orderType === 'Rรผcklage')) { + @for ( + item of group.items; + track trackByItemId(i, item); + let lastItem = $last; + let i = $index + ) { + @if ( + group?.orderType !== undefined && + (item.features?.orderType === 'Abholung' || + item.features?.orderType === 'Rรผcklage') + ) { @if (item?.destination?.data?.targetBranch?.data; as targetBranch) { - @if (i === 0 || checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)) { + @if ( + i === 0 || + checkIfMultipleDestinationsForOrderTypeExist( + targetBranch, + group, + i + ) + ) {
+ {{ targetBranch?.name }} |
+ {{ targetBranch | branchAddress }}
- {{ targetBranch?.name }} | {{ targetBranch | branchAddress }}
} @@ -85,7 +135,9 @@ (changeItem)="changeItem($event)" (changeDummyItem)="changeDummyItem($event)" (changeQuantity)="updateItemQuantity($event)" - [quantityError]="(quantityError$ | async)[item.product.catalogProductNumber]" + [quantityError]=" + (quantityError$ | async)[item.product.catalogProductNumber] + " [item]="item" [orderType]="group?.orderType" [loadingOnItemChangeById]="loadingOnItemChangeById$ | async" @@ -109,7 +161,11 @@ }
- Zwischensumme {{ shoppingCart?.total?.value | currency: shoppingCart?.total?.currency : 'code' }}
+ Zwischensumme
+ {{
+ shoppingCart?.total?.value
+ | currency: shoppingCart?.total?.currency : 'code'
+ }}
ohne Versandkosten
@@ -119,11 +175,13 @@
(click)="order()"
[disabled]="
showOrderButtonSpinner ||
- ((primaryCtaLabel$ | async) === 'Bestellen' && !(checkNotificationChannelControl$ | async)) ||
+ ((primaryCtaLabel$ | async) === 'Bestellen' &&
+ !(checkNotificationChannelControl$ | async)) ||
notificationsControl?.invalid ||
- ((primaryCtaLabel$ | async) === 'Bestellen' && ((checkingOla$ | async) || (checkoutIsInValid$ | async)))
+ ((primaryCtaLabel$ | async) === 'Bestellen' &&
+ ((checkingOla$ | async) || (checkoutIsInValid$ | async)))
"
- >
+ >