Merged PR 1909: fix(remission-data-access, remission-product-stock-info): improve stock infor...

fix(remission-data-access, remission-product-stock-info): improve stock information display and data handling

Enhance product stock info component with proper loading states.

- Add stockFetching input to ProductStockInfoComponent for loading states
- Update remission list components to properly handle stock fetching state
- Enhance type safety and documentation for better maintainability

The RemissionSearchService now provides clear documentation for all
methods including fetchList, fetchQuerySettings, and capacity fetching
operations. The ProductStockInfoComponent now properly displays loading
states during stock data retrieval.

Ref: #5243

libs/remission/data-access/src/lib/services/remission-search.service.ts

@@ -323,7 +323,6 @@ export class RemissionSearchService {
    *
    * @todo After fetching, StockInStock should be called in the old DomainRemissionService
    */
-  // TODO: Im alten DomainRemissionService wird danach StockInStock abgerufen
   async fetchDepartmentList(
     params: RemissionQueryTokenInput,
     abortSignal?: AbortSignal,
@@ -424,7 +423,10 @@ export class RemissionSearchService {
 
     const req$ = this.#remiService.RemiCreateReturnItem({
       data: items.map((i) => ({
-        product: i.item.product,
+        product: {
+          ...i.item.product,
+          catalogProductNumber: String(i.item.id),
+        },
         assortment: 'Basissortiment|B',
         predefinedReturnQuantity: i.quantity,
         retailPrice: i.item.catalogAvailability.price,
@@ -458,7 +460,10 @@ export class RemissionSearchService {
 
     const req$ = this.#remiService.RemiCreateReturnSuggestions({
       data: items.map((i) => ({
-        product: i.item.product,
+        product: {
+          ...i.item.product,
+          catalogProductNumber: String(i.item.id),
+        },
         assortment: 'Basissortiment|B',
         predefinedReturnQuantity: i.quantity,
         retailPrice: i.item.catalogAvailability.price,

libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.html

@@ -28,6 +28,7 @@
       [availableStock]="availableStock()"
       [stockToRemit]="selectedStockToRemit() ?? stockToRemit()"
       [targetStock]="targetStock()"
+      [stockFetching]="stockFetching()"
       [zob]="stock()?.minStockCategoryManagement ?? 0"
     ></remi-product-stock-info>
   </ui-item-row-data>

libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.ts

@@ -88,6 +88,14 @@ export class RemissionListItemComponent {
    */
   stock = input.required<StockInfo>();
 
+  /**
+   * InputSignal indicating whether the stock information is currently being fetched.
+   * Used to show loading states in the UI.
+   * @default false
+   *
+   */
+  stockFetching = input<boolean>(false);
+
   /**
    * ModelSignal indicating whether remission items are currently being processed.
    * Used to prevent multiple submissions or actions.

libs/remission/feature/remission-list/src/lib/remission-list.component.html

@@ -29,6 +29,7 @@
         #listElement
         [item]="item"
         [stock]="getStockForItem(item)"
+        [stockFetching]="inStockFetching()"
         [productGroupValue]="getProductGroupValueForItem(item)"
         (deleteRemissionListItemInProgressChange)="
           onDeleteRemissionListItem($event)

libs/remission/feature/remission-list/src/lib/remission-list.component.ts

@@ -204,6 +204,12 @@ export class RemissionListComponent {
    */
   inStockResponseValue = computed(() => this.inStockResource.value());
 
+  /**
+   * Computed signal indicating whether the in-stock resource is currently fetching data.
+   * @returns True if fetching, false otherwise.
+   */
+  inStockFetching = computed(() => this.inStockResource.status() === 'loading');
+
   /**
    * Computed signal for the product group response.
    * @returns Array of KeyValueStringAndString or undefined.

libs/remission/shared/product/src/lib/product-stock-info/product-stock-info.component.html

@@ -11,6 +11,7 @@
     Aktueller Bestand
   </div>
   <div
+    *uiSkeletonLoader="stockFetching()"
     class="isa-text-body-2-bold"
     data-what="stock-value"
     data-which="current-stock"
@@ -31,6 +32,7 @@
     Remi Menge
   </div>
   <div
+    *uiSkeletonLoader="stockFetching()"
     class="isa-text-body-2-bold"
     data-what="stock-value"
     data-which="remit-amount"
@@ -51,6 +53,7 @@
     Übriger Bestand
   </div>
   <div
+    *uiSkeletonLoader="stockFetching()"
     class="isa-text-body-2-bold"
     data-what="stock-value"
     data-which="remaining-stock"
@@ -63,6 +66,7 @@
     ZOB
   </div>
   <div
+    *uiSkeletonLoader="stockFetching()"
     class="isa-text-body-2-regular grid-flow-row"
     data-what="stock-value"
     data-which="zob"

libs/remission/shared/product/src/lib/product-stock-info/product-stock-info.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { SkeletonLoaderDirective } from '@isa/ui/skeleton-loader';
 
 /**
  * Displays and computes stock information for a product.
@@ -17,8 +18,17 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   templateUrl: './product-stock-info.component.html',
   styleUrls: ['./product-stock-info.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SkeletonLoaderDirective],
 })
 export class ProductStockInfoComponent {
+  /**
+   * InputSignal indicating whether the stock information is currently being fetched.
+   * Used to show loading states in the UI.
+   * @default false
+   *
+   */
+  stockFetching = input<boolean>(false);
+
   /**
    * Current available stock after removals.
    */