ISA-Frontend/libs/remission/feature/remission-list

@isa/remission/feature/remission-list

Feature module providing the main remission list view with filtering, searching, item selection, and remitting capabilities for department ("Abteilung") and mandatory ("Pflicht") return workflows.

Overview

The Remission List Feature library implements the core remission workflow interface where users search, select, and remit items. It supports two remission types: Abteilung (department-based suggestions) and Pflicht (mandatory returns). The component integrates filtering, stock information, product groups, and provides sophisticated user interactions including automatic item selection (#5338), empty search handling, and batch remitting operations.

Features

• Dual Remission Types - Abteilung (suggestions) and Pflicht (mandatory) lists
• Advanced Filtering - FilterService integration with query parameter sync
• Product Search - Real-time search with scanner support
• Stock Information - Batched stock fetching for displayed items
• Product Groups - Dynamic product group resolution
• Item Selection - Multi-select with quantity tracking
• Batch Remitting - Add multiple items to return receipt
• Auto-Selection - Single item auto-select (#5338)
• Empty Search Handling - Dialog to add unlisted items
• Resource-Based Data - Efficient data fetching with resource pattern
• State Management - RemissionStore integration
• Error Handling - Comprehensive error dialogs
• Scroll Position - Automatic scroll restoration

Quick Start

import { RemissionListComponent } from '@isa/remission/feature/remission-list';
import { provideRemissionListRoutes } from '@isa/remission/feature/remission-list';

// In routes configuration
export const routes: Routes = [
  {
    path: 'remission',
    loadChildren: () => import('@isa/remission/feature/remission-list').then(m => m.routes)
  }
];

// Routes include:
// - remission (default Pflicht list)
// - remission/abteilung (department list)

Component API

RemissionListComponent

Main list view component for remission workflows.

Selector: remi-feature-remission-list

Route Data Requirements:

• querySettings: Filter query settings from resolver

Key Signals:

selectedRemissionListType = injectRemissionListType(); // 'Abteilung' | 'Pflicht'
remissionStarted = computed(() => store.remissionStarted());
items = computed(() => remissionResource.value()?.result || []);
stockInfoMap = computed(() => new Map(stockData.map(i => [i.itemId, i])));
hasSelectedItems = computed(() => Object.keys(store.selectedItems()).length > 0);

Key Methods:

• search(trigger: SearchTrigger): void - Trigger filtered search
• remitItems(options?): Promise<void> - Remit selected items to receipt
• reloadListAndReturnData(): void - Refresh list and receipt data
• getStockForItem(item): StockInfo | undefined - Get stock for item
• getProductGroupValueForItem(item): string | undefined - Get product group name

Resources

RemissionListResource

Fetches remission items based on type and filters.

Parameters:

• remissionListType: 'Abteilung' | 'Pflicht'
• queryToken: Filter query
• searchTrigger: Trigger type

RemissionInStockResource

Batches stock information for visible items.

Parameters:

• itemIds: Array of catalog product numbers

RemissionProductGroupResource

Fetches product group key-value mappings.

Usage Examples

Basic Remission List Integration

import { Component } from '@angular/core';
import { RemissionListComponent } from '@isa/remission/feature/remission-list';

@Component({
  selector: 'app-remission-page',
  imports: [RemissionListComponent],
  template: `
    <remi-feature-remission-list></remi-feature-remission-list>
  `
})
export class RemissionPageComponent {}

Remitting Items Programmatically

import { RemissionListComponent } from '@isa/remission/feature/remission-list';

@Component({
  selector: 'app-custom-remission',
  viewChild: RemissionListComponent
})
export class CustomRemissionComponent {
  remissionList = viewChild.required(RemissionListComponent);

  async remitSelectedItems() {
    await this.remissionList().remitItems();
  }
}

Custom Search Handling

import { RemissionListComponent } from '@isa/remission/feature/remission-list';

@Component({})
export class EnhancedRemissionListComponent extends RemissionListComponent {
  override async search(trigger: SearchTrigger) {
    console.log('Search triggered:', trigger);
    super.search(trigger);
  }
}

Workflow Details

Search Flow

1. User enters search term or scans barcode
2. FilterService commits query
3. RemissionListResource fetches filtered items
4. InStockResource fetches stock for results
5. ProductGroupResource resolves group names
6. Items displayed with stock/group information

Empty Search Handling

If search returns no results:

1. Check if search was user-initiated (#5338)
2. Open SearchItemToRemitDialog
3. User searches catalog and selects item
4. If remission started, add item and remit automatically
5. If Abteilung list, navigate to default Pflicht list
6. Reload list data

Auto-Selection (#5338)

When search returns single item and remission started:

• Automatically select the item
• Pre-fill with calculated stock to remit
• User can adjust quantity before remitting

Remitting Flow

1. User selects items from list
2. For each item:
   • Calculate quantity to remit
   • Get available stock
   • Call remitItem API with returnId/receiptId
3. Handle errors with dialog
4. Clear selections
5. Reload list and receipt data
6. Show success/error state

Error Handling

RemissionResponseArgsErrorMessage.AlreadyCompleted:

• Clear RemissionStore state
• Show error dialog
• Reload data

Other Errors:

• Log error with context
• Show error dialog with message
• Set button to error state
• Reload data

Components

RemissionListItemComponent

Individual list item with selection controls.

Features:

• Product information display
• Stock information
• Quantity input
• Selection checkbox
• Delete action

RemissionListSelectComponent

Type selector (Abteilung/Pflicht).

RemissionStartCardComponent

Card for starting new remission.

RemissionReturnCardComponent

Card showing current return receipt.

RemissionListEmptyStateComponent

Empty state when no items found.

Routing

import { routes } from '@isa/remission/feature/remission-list';

// Default route: Pflicht list
{
  path: '',
  component: RemissionListComponent,
  resolve: {
    querySettings: querySettingsResolverFn
  }
}

// Abteilung route
{
  path: 'abteilung',
  component: RemissionListComponent,
  resolve: {
    querySettings: querySettingsDepartmentResolverFn
  }
}

State Management

RemissionStore Integration:

// Selection
store.selectRemissionItem(itemId, item);
store.clearSelectedItems();

// Quantity
store.selectedQuantity()[itemId];

// Current remission
store.remissionStarted();
store.returnId();
store.receiptId();

// State clearing
store.clearState();

Testing

npx nx test remission-feature-remission-list --skip-nx-cache

Dependencies

• @angular/core - Angular framework
• @angular/router - Routing
• @isa/remission/data-access - RemissionStore, services, types
• @isa/remission/shared/product - Product components
• @isa/remission/shared/search-item-to-remit-dialog - Search dialog
• @isa/shared/filter - Filtering infrastructure
• @isa/ui/buttons - Button components
• @isa/ui/dialog - Dialogs
• @isa/utils/scroll-position - Scroll restoration

Architecture Notes

Resource Pattern: Uses Angular resource pattern for efficient data fetching with automatic dependency tracking.

Filter Integration: Deep FilterService integration with query parameter synchronization for shareable URLs.

Computed Signals: Extensive use of computed signals for derived state.

Effects: React to search results with automatic UI interactions (dialogs, auto-select).

License

Internal ISA Frontend library - not for external distribution.