Carpose.de - Documentation
Carpose.de
  • React Integration
    • Getting Started
    • Demo
  • Car Search Modules
    • Car Search Form
    • Car Search Small
    • Car Search (KI)
    • Car Group
  • Offer Modules
    • Offer Slider
    • Offer Item
  • Misc Modules
    • Employee List
    • Store List
  • Components
    • Image Slider Viewer
    • 360° Interior Viewer
    • 360° Exterior Viewer
    • CO2 Class Label
    • Consumption Box
  • Angular Integration [DEPRECATED]
    • Getting Started
    • Slider
    • 360° Interior Viewer
    • 360° Exterior Viewer
Powered by GitBook
On this page
  • Overview
  • Installation
  • Usage
  • Configuration Attributes
  • Features
  • Examples
  • Behavior
  1. Misc Modules

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

PreviousOffer ItemNextStore List

Last updated 5 days ago