Vehicle Group

Overview

The Vehicle Group component displays a collection of vehicles belonging to a specific group with sorting capabilities. Users can sort the vehicles by price, mileage, or power in ascending or descending order.

Installation

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

Usage

To use the Vehicle Group component in a standard HTML page:

<div
  data-carpose-component="vehicle-group"
  data-api-key="your-api-key"
  data-car-group-id="your-car-group-id"
></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 "car-group"
data-api-key	string	-	API key for authentication with the Carpose backend services. Required for data fetching.
data-car-group-id	string	-	ID of the car group to display. Required to fetch the specific group of vehicles.

Features

• Displays a collection of vehicles belonging to a specific group

• Provides sorting options for the displayed vehicles:

  • Price (ascending/descending)

  • Mileage (ascending/descending)

  • Power (ascending/descending)

• Responsive layout that adapts to different screen sizes

• Each vehicle is displayed using the CarCard component

Example

<div
  data-carpose-component="vehicle-group"
  data-api-key="your-api-key"
  data-car-group-id="550e8400-e29b-41d4-a716-446655440000"
></div>

Behavior

1. Data Loading:

   • On initialization, the component fetches car group data from the API using the provided car group ID and API key.

   • The component loads all vehicles associated with the specified car group.

2. Sorting:

   • Users can sort the displayed vehicles using the dropdown menu at the top.

   • Sorting options include:

     • Price (ascending/descending)

     • Mileage (ascending/descending)

     • Power (ascending/descending)

   • The default sort order is determined by the car group configuration in the backend.

   • Users can clear the sorting to return to the default order.

3. Vehicle Display:

   • Vehicles are displayed in a responsive grid layout using the CarCard component.

   • Each card shows key information about the vehicle.