# Employee List

### Overview

The `EmployeeList` component displays a list of employees with optional grouping by teams. It provides a tabbed interface when multiple teams are present, making it easy to navigate between different team members.

### Installation

The component is part of the Carpose application and requires no separate installation.

### Usage

To use the EmployeeList component in a standard HTML page:

```html
<div 
  data-carpose-component="employee-list"
  data-api-key="your-api-key"
  data-show-team-headline="true"
></div>
```

### Configuration Attributes

The component reads configuration from data attributes on the provided element:

| Attribute                 | Type    | Default | Description                                                                                |
| ------------------------- | ------- | ------- | ------------------------------------------------------------------------------------------ |
| `data-carpose-component`  | string  | -       | Identifies the component type, must be set to "employee-list"                              |
| `data-api-key`            | string  | -       | API key for authentication with the Carpose backend services. Required for data fetching.  |
| `data-filter-team`        | string  | null    | Optional filter to show employees from a specific team only. Can be a team name or UUID.   |
| `data-filter-store`       | string  | null    | Optional filter to show employees from a specific store only. Can be a store name or UUID. |
| `data-show-team-headline` | boolean | false   | When true, displays the team name as a headline above the employee list.                   |

### Features

* Display employees with their details in a responsive grid layout
* Group employees by team with a tabbed interface
* Filter employees by team or store
* Sort employees based on their order property
* Organize teams based on their order property

### Examples

#### Basic Example - All Employees

```html
<div 
  data-carpose-component="employee-list"
  data-api-key="your-api-key"
></div>
```

#### Filtered by Team

```html
<div 
  data-carpose-component="employee-list"
  data-api-key="your-api-key"
  data-filter-team="Sales Team"
  data-show-team-headline="true"
></div>
```

#### Filtered by Store

```html
<div 
  data-carpose-component="employee-list"
  data-api-key="your-api-key"
  data-filter-store="Main Store"
></div>
```

#### Filtered by Team and Store IDs

```html
<div 
  data-carpose-component="employee-list"
  data-api-key="your-api-key"
  data-filter-team="550e8400-e29b-41d4-a716-446655440000"
  data-filter-store="550e8400-e29b-41d4-a716-446655440001"
></div>
```

### Behavior

1. **Data Loading**:
   * On initialization, the component fetches employee data from the API using the provided API key.
   * If filter attributes are set, the data is filtered accordingly.
2. **Team Grouping**:
   * Without filters, employees are grouped by their teams and displayed in tabs.
   * Teams are sorted based on their order property.
   * Within each team, employees are sorted based on their individual order property.
3. **Filtering**:
   * When `data-filter-team` is provided, only employees from that team are displayed.
   * When `data-filter-store` is provided, only employees from that store are displayed.
   * Filters can be applied using either names or UUIDs.
4. **Team Headlines**:
   * When `data-show-team-headline` is true, team names are displayed as headlines above the employee lists.
   * When employees are filtered by team, the team name is displayed as a headline (if `data-show-team-headline` is true).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carpose.de/misc-modules/employee-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.