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:

<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

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

Filtered by Team

<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

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

Filtered by Team and Store IDs

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