# 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).