### Install and Build Dependencies

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Run these commands to install project dependencies and build the TypeScript sources.

```bash
npm install
npm run build
```

--------------------------------

### Install Local Package (Not Recommended)

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Install a local `.tgz` file of the generated package. This is not recommended for production use.

```bash
npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save
```

--------------------------------

### Install Published Package

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Install the published package into your consuming project using npm.

```bash
npm install @ --save
```

--------------------------------

### Basic API Provider Setup

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Configure your Angular application to use the generated API client by providing the `provideApi` function.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideApi } from '';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(),
    provideApi(),
  ],
};

```

--------------------------------

### Get Orders

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Retrieves all orders, optionally filtered by supplier PermID. Used by OrdersComponent on initialization and after mutations.

```APIDOC
## GET /api/v1/orders

### Description
Retrieves all orders, optionally filtered by supplier PermID.

### Method
GET

### Endpoint
/api/v1/orders

### Parameters
#### Query Parameters
- **supplierId** (string) - Optional - Filters orders by the supplier's PermID.
```

--------------------------------

### Extending Form Configuration with Custom Sections

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Dynamically renders form fields based on a declarative configuration. Components iterate over `FormSection[]` to build `FormGroup` controls. This example shows how to extend the default supplier configuration with a custom section for notes.

```typescript
// src/app/models/supplier.config.ts — extend with a custom section
import { SUPPLIER_FORM_CONFIG, FormSection } from './supplier.config';

const customSection: FormSection = {
  sectionTitle: 'Custom Notes',
  fields: [
    {
      key: 'internalNote',
      label: 'Internal Note',
      required: false,
      type: 'textarea',
      gridClass: 'col-12',
    },
  ],
};

// Merge for display (do not mutate original)
const extendedConfig = [...SUPPLIER_FORM_CONFIG, customSection];

// ModalFormSupplierComponent / PanelFormSupplierComponent dynamically
// builds a FormGroup from this config:
const group: Record<string, AbstractControl> = {};
extendedConfig.forEach(section => {
  section.fields.forEach(field => {
    group[field.key] = new FormControl('', field.required ? [Validators.required] : []);
  });
});
const form = new FormGroup(group);

// RATING_FORM_CONFIG supports conditional validation:
// Fields with requiredIfContact: true are enabled/disabled
// based on whether the order has a contactPerson set.
// Example field in RATING_FORM_CONFIG:
// { key: 'availability', label: 'Verfügbarkeit', required: false, requiredIfContact: true, type: 'rating' }
```

--------------------------------

### GET /api/v1/suppliers/{id}

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Fetches detailed information for a specific supplier using their unique ID. This includes all associated orders and is used to populate detailed views.

```APIDOC
## GET /api/v1/suppliers/{id}

### Description
Fetches full supplier details by openBIS PermID, including all associated orders. Called when a supplier is selected in the list to populate the side-panel (offcanvas).

### Method
GET

### Endpoint
/api/v1/suppliers/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique openBIS PermID of the supplier.

### Response
#### Success Response (200)
- **supplierDetail** (SupplierDetailDTO) - An object containing the full details of the supplier and their orders.

### Response Example
```json
{
  "id": "20231005123456-1",
  "code": "LIEFERANT-001",
  "name": "Acme Corp",
  "customerNumber": "KD-1234",
  "street": "Industrial Ave 5",
  "country": "CH",
  "zipCode": "8005",
  "city": "Zurich",
  "website": "https://acme.com",
  "email": "contact@acme.com",
  "vatId": "CHE-123.456.789",
  "conditions": "Net 30",
  "stats": { "avgQuality": 4.5, "avgTotal": 4.4, "totalRatingCount": 12 },
  "orders": [ { "id": "...", "code": "BESTELLUNG-001", "name": "Lab material Q1", ... } ]
}
```
```

--------------------------------

### Get Rating by ID

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Retrieves details of a rating by its PermID. Called by OrdersComponent to populate the order detail panel.

```APIDOC
## GET /api/v1/ratings/{id}

### Description
Retrieves details of a rating by PermID.

### Method
GET

### Endpoint
/api/v1/ratings/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The PermID of the rating to retrieve.
```

--------------------------------

### GET /api/v1/suppliers

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Retrieves a list of all suppliers with their aggregated rating statistics. This endpoint is used to populate the main suppliers list.

```APIDOC
## GET /api/v1/suppliers

### Description
Retrieves the full list of all suppliers from the backend, each including their aggregated rating statistics (avgQuality, avgCost, avgReliability, avgAvailability, avgTotal, totalRatingCount). Used by `SuppliersComponent` on initialization.

### Method
GET

### Endpoint
/api/v1/suppliers

### Response
#### Success Response (200)
- **suppliers** (SupplierSummaryDTO[]) - An array of supplier summary objects.

### Response Example
```json
[
  {
    "id": "20231005123456-1",
    "code": "LIEFERANT-001",
    "name": "Acme Corp",
    "customerNumber": "KD-1234",
    "street": "Industrial Ave 5",
    "country": "CH",
    "zipCode": "8005",
    "city": "Zurich",
    "vatId": "CHE-123.456.789",
    "conditions": "Net 30",
    "stats": {
      "avgQuality": 4.5,
      "avgCost": 3.8,
      "avgReliability": 5.0,
      "avgAvailability": 4.2,
      "avgTotal": 4.4,
      "totalRatingCount": 12
    }
  }
]
```
```

--------------------------------

### Docker Build and Run Commands

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Provides the necessary bash commands to build the Docker image and run the container, making the application accessible via localhost.

```bash
# Build and run the container
docker build -t supplier-rating-frontend .
docker run -p 8080:80 supplier-rating-frontend

# Application available at: http://localhost:8080
# Default login credentials (school presentation only): test / test
```

--------------------------------

### Publishing the Package

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

After building, publish the package using `npm publish`, ensuring to specify the `dist` folder.

```bash
npm publish dist
```

--------------------------------

### Link Local Package using npm link

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Link a local package for development. First, link from the package's `dist` directory, then link to your project.

```bash
npm link
```

```bash
npm link
```

--------------------------------

### Configure Base URL for API

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Set the BASE_PATH provider to point to the correct backend API URL. This is typically done in a configuration file like app.config.ts or an environment file.

```typescript
import { BASE_PATH } from './openapi-gen';
providers: [
  { provide: BASE_PATH, useValue: 'http://localhost:8080/api/v1' }
]
```

--------------------------------

### Create Order REST API - Bash

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Records a new order (type BESTELLUNG) and assigns it to a supplier via supplierId (PermID). Called from OrdersComponent.createAndAddOrder().

```bash
curl -X POST http://localhost:8080/api/v1/orders \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Lab material Q1",
    "mainCategory": "Beschaffung",
    "subCategory": "Messmittel",
    "reason": "Annual restocking",
    "orderedBy": "John Doe",
    "orderDate": "2023-12-15",
    "deliveryDate": "2024-01-10",
    "details": "50x Precision scales",
    "supplierId": "20231005123456-1",
    "contactPerson": "Jane Smith",
    "contactEmail": "jane@acme.com",
    "orderMethod": "Email"
  }'
```

```json
# Response 201 (OrderDetailDTO):
# { "id": "20231010987654-2", "code": "BESTELLUNG-002", "ratingStatus": "PENDING", ... }
```

--------------------------------

### Create New Supplier - cURL

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Creates a new supplier entry in openBIS. The backend automatically generates the supplier code. Requires a JSON payload with supplier details.

```bash
curl -X POST http://localhost:8080/api/v1/suppliers \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Acme Corp",
    "customerNumber": "KD-1234",
    "street": "Industrial Ave 5",
    "country": "CH",
    "zipCode": "8005",
    "city": "Zurich",
    "vatId": "CHE-123.456.789",
    "conditions": "Net 30",
    "website": "https://acme.com",
    "email": "contact@acme.com",
    "phoneNumber": "+41441234567"
  }'

# Response 201 (SupplierDetailDTO):
# { "id": "20231005123456-2", "code": "LIEFERANT-002", "name": "Acme Corp", ... }
```

--------------------------------

### Using Multiple OpenAPI APIs with Aliases

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Configure multiple APIs generated from different OpenAPI files by providing aliases to avoid naming conflicts.

```typescript
import { provideApi as provideUserApi } from 'my-user-api-path';
import { provideApi as provideAdminApi } from 'my-admin-api-path';
import { HttpClientModule } from '@angular/common/http';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(),
    provideUserApi(environment.basePath),
    provideAdminApi(environment.basePath),
  ],
};

```

--------------------------------

### Create Order

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Records a new order and assigns it to a supplier via supplierId. Called from OrdersComponent.

```APIDOC
## POST /api/v1/orders

### Description
Records a new order and assigns it to a supplier.

### Method
POST

### Endpoint
/api/v1/orders

### Parameters
#### Request Body
- **name** (string) - Required - The name of the order.
- **mainCategory** (string) - Required - The main category of the order.
- **subCategory** (string) - Required - The sub-category of the order.
- **reason** (string) - Required - The reason for the order.
- **orderedBy** (string) - Required - The person who placed the order.
- **orderDate** (string) - Required - The date the order was placed (YYYY-MM-DD).
- **deliveryDate** (string) - Optional - The expected delivery date (YYYY-MM-DD).
- **details** (string) - Optional - Details about the order.
- **supplierId** (string) - Required - The PermID of the supplier.
- **contactPerson** (string) - Optional - The contact person for the order.
- **contactEmail** (string) - Optional - The contact email for the order.
- **orderMethod** (string) - Optional - The method used for the order.
```

--------------------------------

### API Provider with Factory for Custom Configuration

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Use a factory to dynamically build a custom API configuration, potentially fetching credentials from an authentication service.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideApi, Configuration } from '';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(),
    {
      provide: Configuration,
      useFactory: (authService: AuthService) =>
        new Configuration({
          basePath: 'http://localhost:9999',
          withCredentials: true,
          username: authService.getUsername(),
          password: authService.getPassword(),
        }),
      deps: [AuthService],
      multi: false,
    },
  ],
};

```

--------------------------------

### Create Rating REST API - Bash

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Creates a rating (type BESTELLBEWERTUNG) for an existing order. The backend computes totalScore automatically. Triggered when the edit modal returns with action "RATE" and the subsequent ModalRatingComponent modal is confirmed.

```bash
curl -X POST http://localhost:8080/api/v1/ratings \
  -H "Content-Type: application/json" \
  -d '{
    "orderId": "20231010987654-1",
    "quality": 5,
    "qualityReason": "Delivered exactly as specified",
    "cost": 3,
    "costReason": "Slightly over budget",
    "reliability": 5,
    "reliabilityReason": "Delivered on time",
    "availability": 4,
    "availabilityReason": "Contact person responsive",
    "ratingComment": "Overall great supplier"
  }'
```

```json
# Response 201 (RatingDetailDTO):
# {
#   "id": "20231020112233-1",
#   "code": "BESTELLBEWERTUNG-001",
#   "orderId": "20231010987654-1",
#   "totalScore": 4.25,
#   "quality": 5, "cost": 3, "reliability": 5, "availability": 4,
#   "supplierId": "20231005123456-1",
#   "supplierName": "Acme Corp"
# }
```

--------------------------------

### POST /api/v1/suppliers

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Creates a new supplier entry in the system. The backend automatically generates a unique code for the new supplier.

```APIDOC
## POST /api/v1/suppliers

### Description
Creates a new supplier in openBIS (type LIEFERANT). The backend generates the code automatically. Called from `SuppliersComponent.createAndAddSupplier()` after the `ModalFormSupplierComponent` modal closes with a result.

### Method
POST

### Endpoint
/api/v1/suppliers

### Parameters
#### Request Body
- **name** (string) - Required - The name of the supplier.
- **customerNumber** (string) - Required - The customer number associated with the supplier.
- **street** (string) - Required - The street address of the supplier.
- **country** (string) - Required - The country of the supplier's address.
- **zipCode** (string) - Required - The zip code of the supplier's address.
- **city** (string) - Required - The city of the supplier's address.
- **vatId** (string) - Required - The VAT identification number of the supplier.
- **conditions** (string) - Required - Payment or other conditions for the supplier.
- **website** (string) - Optional - The website URL of the supplier.
- **email** (string) - Optional - The contact email address for the supplier.
- **phoneNumber** (string) - Optional - The contact phone number for the supplier.

### Request Example
```json
{
  "name": "Acme Corp",
  "customerNumber": "KD-1234",
  "street": "Industrial Ave 5",
  "country": "CH",
  "zipCode": "8005",
  "city": "Zurich",
  "vatId": "CHE-123.456.789",
  "conditions": "Net 30",
  "website": "https://acme.com",
  "email": "contact@acme.com",
  "phoneNumber": "+41441234567"
}
```

### Response
#### Success Response (201)
- **supplierDetail** (SupplierDetailDTO) - The newly created supplier's details.

### Response Example
```json
{ "id": "20231005123456-2", "code": "LIEFERANT-002", "name": "Acme Corp", ... }
```
```

--------------------------------

### Theme Switcher Component for Dark/Light Mode

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Manages dark/light theme switching by applying the 'data-bs-theme' attribute and persisting the user's preference in localStorage. Initializes the theme on component load.

```typescript
// ThemeSwitcherComponent — persists preference across sessions
import { Component, inject, OnInit, Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';

// On init: restore saved preference or default to 'light'
ngOnInit(): void {
  const storedTheme = localStorage.getItem('app-theme-preference');
  const initialTheme = storedTheme || 'light';
  this.isDarkMode = initialTheme === 'dark';
  this.renderer.setAttribute(this.document.documentElement, 'data-bs-theme', initialTheme);
}

// On toggle: update attribute + save to localStorage
toggleTheme(event: Event): void {
  this.isDarkMode = (event.target as HTMLInputElement).checked;
  const newTheme = this.isDarkMode ? 'dark' : 'light';
  this.renderer.setAttribute(this.document.documentElement, 'data-bs-theme', newTheme);
  localStorage.setItem('app-theme-preference', newTheme);
}

// Template usage:
// <app-theme-switcher></app-theme-switcher>
// Renders a checkbox toggle; works standalone on the login page and inside the navbar.
```

--------------------------------

### API Provider with Custom Base Path

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Provide a custom base path to the API client during application bootstrap if it differs from the default.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideApi } from '';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(),
    provideApi('http://localhost:9999'),
  ],
};

```

--------------------------------

### API Module Import for AppModule

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

If still using `AppModule`, import the generated `ApiModule` instead of using `provideApi`.

```typescript
import { ApiModule } from '';
```

--------------------------------

### Docker Multi-Stage Build for Angular Application

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Defines a two-stage Docker build process. The first stage compiles the Angular application using Node.js, and the second stage serves the static files using Nginx.

```dockerfile
# Build stage — compile Angular for production
FROM node:20-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npx ng build --configuration=production
# Output: /app/dist/supplierRatingFrontend/browser

# Serve stage — Nginx serves the static files
FROM nginx:alpine
COPY --from=build-stage /app/dist/supplierRatingFrontend/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

--------------------------------

### API Provider with Custom Credentials

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Configure the API client to use custom credentials, such as `withCredentials`, `username`, and `password`.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideApi } from '';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(),
    provideApi({
      withCredentials: true,
      username: 'user',
      password: 'password',
    }),
  ],
};

```

--------------------------------

### Fetch Supplier Details by ID - cURL

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Retrieves detailed information for a specific supplier using their openBIS PermID. This is typically called when a supplier is selected to populate a side panel. Requires the supplier's ID in the URL.

```bash
# curl example
curl -X GET http://localhost:8080/api/v1/suppliers/20231005123456-1 \
  -H "Accept: application/json"

# Response (SupplierDetailDTO):
# {
#   "id": "20231005123456-1",
#   "code": "LIEFERANT-001",
#   "name": "Acme Corp",
#   "customerNumber": "KD-1234",
#   "street": "Industrial Ave 5",
#   "country": "CH",
#   "zipCode": "8005",
#   "city": "Zurich",
#   "website": "https://acme.com",
#   "email": "contact@acme.com",
#   "vatId": "CHE-123.456.789",
#   "conditions": "Net 30",
#   "stats": { "avgQuality": 4.5, "avgTotal": 4.4, "totalRatingCount": 12 },
#   "orders": [ { "id": "...", "code": "BESTELLUNG-001", "name": "Lab material Q1", ... } ]
# }
```

--------------------------------

### Create Rating

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Creates a rating for an existing order. The backend computes totalScore automatically. Triggered when the edit modal returns with action "RATE".

```APIDOC
## POST /api/v1/ratings

### Description
Creates a rating for an existing order. The backend computes `totalScore` automatically.

### Method
POST

### Endpoint
/api/v1/ratings

### Parameters
#### Request Body
- **orderId** (string) - Required - The ID of the order to rate.
- **quality** (integer) - Required - The quality rating (1-5).
- **qualityReason** (string) - Optional - Reason for the quality rating.
- **cost** (integer) - Required - The cost rating (1-5).
- **costReason** (string) - Optional - Reason for the cost rating.
- **reliability** (integer) - Required - The reliability rating (1-5).
- **reliabilityReason** (string) - Optional - Reason for the reliability rating.
- **availability** (integer) - Required - The availability rating (1-5).
- **availabilityReason** (string) - Optional - Reason for the availability rating.
- **ratingComment** (string) - Optional - General comment about the rating.
```

--------------------------------

### Retrieve Orders REST API - Bash

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Retrieves all orders, optionally filtered by supplier PermID via query param supplierId. Used by OrdersComponent on initialization and after mutations.

```bash
# All orders
curl -X GET "http://localhost:8080/api/v1/orders" -H "Accept: application/json"
```

```bash
# Filtered by supplier
curl -X GET "http://localhost:8080/api/v1/orders?supplierId=20231005123456-1" \
  -H "Accept: application/json"
```

```json
# Response (OrderDetailDTO[]):
# [
#   {
#     "id": "20231010987654-1",
#     "code": "BESTELLUNG-001",
#     "name": "Lab material Q1",
#     "mainCategory": "Beschaffung",
#     "subCategory": "Messmittel",
#     "orderedBy": "John Doe",
#     "orderDate": "2023-12-15",
#     "supplierId": "20231005123456-1",
#     "supplierName": "Acme Corp",
#     "ratingStatus": "PENDING",
#     "ratingId": null
#   }
# ]
```

--------------------------------

### Sidebar Service for Mobile Menu State Management

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

A root-provided Angular service that uses Signals to manage the mobile sidebar's open/close state. It's shared between the Navbar and Sidebar components for toggling and closing the menu.

```typescript
import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SidebarService {
  isMobileMenuOpen = signal(false);

  toggleMobileMenu() {
    this.isMobileMenuOpen.update(value => !value);
  }

  closeMobileMenu() {
    this.isMobileMenuOpen.set(false);
  }
}

// In NavbarComponent:
// protected sidebarService = inject(SidebarService);
// <button (click)="sidebarService.toggleMobileMenu()">☰</button>

// In SidebarComponent:
// @if (sidebarService.isMobileMenuOpen()) { ... }
// (click on nav item) → sidebarService.closeMobileMenu()
```

--------------------------------

### Regenerate OpenAPI API Client

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Command to regenerate the TypeScript Angular API client from an OpenAPI specification file. This command should be run after updating the 'openapi.yaml' file.

```bash
# Regenerate the API client after updating openapi.yaml
npm run generate:api
# Equivalent to:
# openapi-generator-cli generate \
#   -g typescript-angular \
#   -i src/app/openapi/openapi.yaml \
#   -o src/app/openapi-gen

# The generator produces:
# - src/app/openapi-gen/api/default.service.ts  — all HTTP methods
# - src/app/openapi-gen/model/                  — all DTO interfaces
# - src/app/openapi-gen/configuration.ts        — base URL / auth config
```

--------------------------------

### Load Suppliers List - Angular Component

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Fetches the list of all suppliers with aggregated rating statistics. Handles loading and error states using Angular Signals. Requires `DefaultService` and RxJS operators.

```typescript
import { DefaultService, SupplierSummaryDTO } from '../../openapi-gen';
import { signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

readonly suppliers = signal<SupplierSummaryDTO[]>([]);
readonly errorMessage = signal<string | null>(null);

private loadSuppliers() {
  this.errorMessage.set(null);
  this.supplierService
    .getAllSuppliers()
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: data => this.suppliers.set(data),
      error: () => this.errorMessage.set(
        'Laden der Lieferanten fehlgeschlagen. Bitte überprüfe deine Verbindung und versuche erneut.'
      ),
    });
}

// Expected response shape (SupplierSummaryDTO[]):
// [
//   {
//     id: "20231005123456-1",        // openBIS PermID
//     code: "LIEFERANT-001",         // openBIS Code
//     name: "Acme Corp",
//     customerNumber: "KD-1234",
//     street: "Industrial Ave 5",
//     country: "CH",
//     zipCode: "8005",
//     city: "Zurich",
//     vatId: "CHE-123.456.789",
//     conditions: "Net 30",
//     stats: {
//       avgQuality: 4.5,
//       avgCost: 3.8,
//       avgReliability: 5.0,
//       avgAvailability: 4.2,
//       avgTotal: 4.4,
//       totalRatingCount: 12
//     }
//   }
// ]
```

--------------------------------

### Custom Parameter Encoding with Configuration

Source: https://github.com/supplierratingsoftware/supplierratingfrontend/blob/main/src/app/openapi-gen/README.md

Pass a custom function to `encodeParam` in the Configuration object to handle complex parameter encoding. This is useful when default encoding for styles other than 'simple' is not sufficient.

```typescript
new Configuration({
  encodeParam: (param: Param) => myFancyParamEncoder(param),
});
```

--------------------------------

### Real-time Total Score Calculation in Rating Modal

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Automatically recalculates the total score in the rating modal by subscribing to form value changes. It sums enabled rating fields and calculates the average, preventing infinite loops by using `{ emitEvent: false }`. The form is disabled if the order's rating status is 'RATED'.

```typescript
// Auto-calculation logic inside ModalRatingComponent
private setupAutoCalculation() {
  this.ratingForm.valueChanges.subscribe(() => this.calculateTotalScore());
}

private calculateTotalScore() {
  const ratingKeys = ['quality', 'cost', 'reliability', 'availability'];
  let sum = 0, count = 0;

  ratingKeys.forEach(key => {
    const control = this.ratingForm.get(key);
    if (control && control.enabled && Number(control.value) > 0) {
      sum += Number(control.value);
      count++;
    }
  });

  const average = count > 0 ? sum / count : 0;
  // emitEvent: false prevents infinite change loop
  this.ratingForm.get('totalScore')?.setValue(average, { emitEvent: false });
}

// The order's ratingStatus determines if the form is read-only:
if (this.order()?.ratingStatus === 'RATED') {
  this.ratingForm.disable(); // Entire form locked — no re-rating allowed
}

// On submit, the modal closes and passes form.value to the caller:
// modalRef.result.then((ratingResult: RatingCreateDTO) => { ... })
```

--------------------------------

### Update Order

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Updates data of an existing order. Triggered when the edit modal returns with action "SAVE".

```APIDOC
## PUT /api/v1/orders/{id}

### Description
Updates data of an existing order.

### Method
PUT

### Endpoint
/api/v1/orders/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the order to update.

#### Request Body
- **field** (any) - Optional - Fields to update in the order. The exact fields depend on the `OrderUpdateDTO`.
```

--------------------------------

### Angular Signal State Management for Suppliers

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Manages reactive UI state for the Suppliers page using Angular Signals. The `filteredSuppliers` computed signal automatically updates when the supplier list or search term changes. Use `signal.set()` to update writable signals.

```typescript
import { signal, computed } from '@angular/core';
import { SupplierSummaryDTO } from '../../openapi-gen';

// Writable signals
readonly suppliers        = signal<SupplierSummaryDTO[]>([]);
readonly selectedSupplierId = signal<string | null>(null);
readonly searchTerm       = signal<string>('');
readonly errorMessage     = signal<string | null>(null);

// Computed signal — recalculates automatically when suppliers() or searchTerm() changes
readonly filteredSuppliers = computed(() => {
  const list = this.suppliers();
  const term = this.searchTerm().toLowerCase();
  if (!term) return list;
  return list.filter(supplier =>
    (supplier.name         || '').toLowerCase().includes(term) ||
    (supplier.customerNumber || '').toLowerCase().includes(term) ||
    (supplier.city         || '').toLowerCase().includes(term) ||
    (supplier.email        || '').toLowerCase().includes(term) ||
    (supplier.vatId        || '').toLowerCase().includes(term)
  );
});

// Usage in template: @for (s of filteredSuppliers(); track s.id)
// Usage in component: this.searchTerm.set('Acme'); // triggers recompute
```

--------------------------------

### Retrieve Rating REST API - TypeScript

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Retrieves details of a rating by PermID. Called by OrdersComponent.loadRatingForPanel() when a rated order is selected in the list, to populate the order detail panel.

```typescript
// In OrdersComponent
private loadRatingForPanel(ratingId: string, panelInstance: PanelFormOrderComponent) {
  this.ratingService
    .getRatingById(ratingId)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: ratingData => panelInstance.rating.set(ratingData),
      error: () => console.error('Rating konnte nicht geladen werden'),
    });
}
```

--------------------------------

### Update Supplier

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Updates master data for an existing supplier. This endpoint is called from the SuppliersComponent.

```APIDOC
## PUT /api/v1/suppliers/{id}

### Description
Updates master data for an existing supplier.

### Method
PUT

### Endpoint
/api/v1/suppliers/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the supplier to update.
```

--------------------------------

### Update Order REST API - TypeScript

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Updates data of an existing order. Triggered from OrdersComponent when the edit modal (ModalEditOrderComponent) returns with action "SAVE".

```typescript
// In OrdersComponent
private updateExistingOrder(id: string, formData: Partial<OrderDetailDTO>) {
  const existingOrder = this.orders().find(o => o.id === id);
  const updatedOrder: OrderUpdateDTO = { ...existingOrder, ...formData } as OrderUpdateDTO;

  this.orderService
    .updateOrder(id, updatedOrder)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: () => this.loadOrders(),
      error: () => this.errorMessage.set('Fehler beim Aktualisieren.'),
    });
}
```

--------------------------------

### Update Supplier REST API - TypeScript

Source: https://context7.com/supplierratingsoftware/supplierratingfrontend/llms.txt

Updates master data for an existing supplier. Called from SuppliersComponent.updateExistingSupplier(). The Angular component merges existing signal state with the form result before sending.

```typescript
// In SuppliersComponent
private updateExistingSupplier(id: string, formData: SupplierUpdateDTO) {
  const existing = this.suppliers().find(s => s.id === id);
  const updatedPayload = { ...existing, ...formData, id };

  this.supplierService
    .updateSupplier(id, updatedPayload)
    .pipe(takeUntilDestroyed(this.destroyRef))
    .subscribe({
      next: updated => {
        this.loadSuppliers();          // refresh the list
        this.selectSupplier(updated);  // re-open the detail panel
      },
      error: () => this.errorMessage.set('Fehler beim Aktualisieren.'),
    });
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.