Generic MultiSelect

The GenericMultiSelectComponent is a customizable multi-select input component used for selecting multiple options from a list. It supports both static and remote data sources and integrates with the PrimeNG library for enhanced UI elements. This component is suitable for scenarios where a user needs to select multiple options from a set of choices, including handling asynchronous data fetching and caching.

How to use the component in your app :

1. import the component :

import {GenericMultiSelectComponent} from '@tradinos/cms-frontend-form';

1. The selector for component , like it :

<lib-cms-generic-multi-select></lib-cms-generic-multi-select>

GenericMultiSelectComponent Overview

The GenericMultiSelectComponent is a customizable multi-select input component used for selecting multiple options from a list. It supports both static and remote data sources and integrates with the PrimeNG library for enhanced UI elements. This component is suitable for scenarios where a user needs to select multiple options from a set of choices, including handling asynchronous data fetching and caching.

Features

1. Dynamic Data Handling:

   • Supports both static (options array) and remote (endPoint, queryParams) data sources.

   • Fetches data asynchronously using HTTP requests and populates the options list.

2. Translation Support:

   • Supports translation of option labels using the PrimeNG translation service (primeNGConfig).

3. Cache Management:

   • Integrates caching mechanisms to optimize repeated HTTP requests, using the HttpCacheManager and CacheBucket for managing HTTP responses.

4. Customizable:

   • Configuration options can be provided to define the behavior and appearance of the component (optionLabel, valueBy, index, etc.).

5. Events:

   • Emits changes when the selected options change via optionChange and valueChange events.

   • Supports custom change handling with the onChange method defined in the configuration.

6. Loading State:

   • Displays a loading state (loading) while fetching data from the server.

7. Support for Index-based Selection:

   • Options can be selected based on indexes or dynamically through an index function (indexFn).

Inputs

Input	Type	Description	Required	Default Value
configuration	MultiSelectConfiguration	Configuration object that defines how the multi-select works, including options, translation, data source, etc.	Yes	-
disabled	boolean | null	Controls whether the multi-select is disabled.	No	null
option	any	The selected option(s) in the multi-select, initially.	No	-
loading	boolean	Indicates whether the component is currently loading data.	No	false
invalid	boolean	Indicates if the multi-select is in an invalid state.	No	false

MultiSelectConfiguration:

{
  showClear?: boolean;
  filter?: boolean;
  filterBy: string;
  translate?: boolean;
  optionLabel: string;
  options: any[];
  optionsFn?: () => any[];
  valueBy: string;
  remoteDataConfiguration?: RemoteDataConfiguration;
  index?: number[];
  index$?: BehaviorSubject<number[] | undefined>;
  indexFn?: (items: any[]) => number[];
  onChange?: (value: any) => void;
  display?: string | "comma" | "chip";
  template?: OptionTemplate;
}

Outputs

Output	Type	Description
optionChange	EventEmitter<any>	Emits the updated selected options whenever the selection changes.
valueChange	EventEmitter<any>	Emits the corresponding values of the selected options.

Methods

1. ngOnInit()

• Description:

  • Initializes the component by setting up configurations such as loading data from an API, translating option labels, and selecting initial values.

  • It listens for changes in index$ to update the selection based on external triggers.

• Parameters: None.

• Returns: void.

2. fetchOptions(endPoint: string, queryParams?: any)

• Description:

  • Fetches options data from the server using an HTTP GET request. Handles optional query parameters and cache management.

• Parameters:

  • endPoint (string): The endpoint URL to fetch data from.

  • queryParams (any, optional): Query parameters to be sent with the request.

3. selectIndex(value?: number[])

• Description:

  • Selects the options based on the provided index array or the default index from the configuration.

• Parameters:

  • value (optional, number[]): An array of indexes for selecting options. Defaults to index from the configuration if not provided.

4. onChange(event: Partial<MultiSelectChangeEvent>)

• Description:

  • Emits the selected options via the optionChange and valueChange events.

  • Triggers any custom onChange handler defined in the configuration.

• Parameters:

  • event (Partial<MultiSelectChangeEvent>): The event containing the updated selection data.