ISA-Frontend/libs/remission/feature/remission-return-receipt-details

@isa/remission/feature/remission-return-receipt-details

Feature component for displaying detailed view of a return receipt ("Warenbegleitschein") with items, actions, and completion workflows.

Overview

The Remission Return Receipt Details feature provides a comprehensive view of a single return receipt including all items, receipt metadata, package information, and action buttons for managing the receipt. It integrates with return-receipt-actions components for deletion, continuation, and completion workflows.

Features

• Receipt Details Display - Receipt number, creation date, status
• Item List - All items in the receipt with product information
• Package Information - Assigned package numbers
• Action Buttons - Delete, continue, complete actions
• Empty State - User-friendly empty receipt view
• Loading States - Skeleton loaders during data fetch
• Resource-Based Data - Efficient return data fetching
• Navigation - Back button to return to previous view
• Eager Loading - Preload 3 levels of related data

Quick Start

import { RemissionReturnReceiptDetailsComponent } from '@isa/remission/feature/remission-return-receipt-details';

// In routes
{
  path: 'receipt/:returnId/:receiptId',
  component: RemissionReturnReceiptDetailsComponent
}

// Usage
<a [routerLink]="['/receipt', returnId, receiptId]">View Receipt</a>

Component API

RemissionReturnReceiptDetailsComponent

Standalone component for receipt details view.

Selector: remi-remission-return-receipt-details

Inputs (from route params):

• returnId: number (required, coerced from string)
• receiptId: number (required, coerced from string)

Computed Signals:

returnLoading = computed(() => returnResource.isLoading());
returnData = computed(() => returnResource.value());
receiptNumber = computed(() => getReceiptNumberFromReturn(returnData()));
receiptItems = computed(() => getReceiptItemsFromReturn(returnData()));
canRemoveItems = computed(() => !returnData().completed);
hasAssignedPackage = computed(() => getPackageNumbersFromReturn(returnData()) !== '');

Resources

ReturnResource

Fetches return with receipt data.

Parameters:

• returnId: number
• eagerLoading: number (levels to preload, default 3)

Returns: Return with nested receipts and items

Usage Example

import { Component } from '@angular/core';
import { RemissionReturnReceiptDetailsComponent } from '@isa/remission/feature/remission-return-receipt-details';

@Component({
  selector: 'app-receipt-page',
  imports: [RemissionReturnReceiptDetailsComponent],
  template: `
    <remi-remission-return-receipt-details
      [returnId]="returnId()"
      [receiptId]="receiptId()"
    ></remi-remission-return-receipt-details>
  `
})
export class ReceiptPageComponent {
  returnId = input.required<number>();
  receiptId = input.required<number>();
}

Components

RemissionReturnReceiptDetailsCardComponent

Card displaying receipt metadata.

RemissionReturnReceiptDetailsItemComponent

Individual receipt item display.

RemissionReturnReceiptActionsComponent

Action buttons (delete, continue) from shared library.

RemissionReturnReceiptCompleteComponent

Complete button from shared library.

Helper Functions

// From @isa/remission/data-access
getReceiptNumberFromReturn(return: Return): string
getReceiptItemsFromReturn(return: Return): ReceiptItem[]
getPackageNumbersFromReturn(return: Return): string

Empty State

When Shown: No return data or empty receipt

Content:

• Title: "Kein Warenbegleitschein vorhanden"
• Description: "Es wurde kein Warenbegleitschein gefunden."

Testing

npx nx test remission-return-receipt-details --skip-nx-cache

Dependencies

• @angular/core - Angular framework
• @angular/common - Location service
• @isa/remission/data-access - Return types, helper functions
• @isa/remission/shared/return-receipt-actions - Action components
• @isa/ui/buttons - Button components
• @isa/ui/empty-state - Empty state component
• @isa/icons - Icons

License

Internal ISA Frontend library - not for external distribution.