MultiSelect

Goal: Add MultiSelect Input

Add a MultiSelect as a search criteria input field for your search page.

Please replace all occurences of exampleEnum with the actual name in the following code snippets

1. Parameters

First, add a new member to the <%= featurePropertyName %>SearchCriteriasSchema:

Adapt in File: <feature>-search.parameters.ts

    exampleEnum: z
        .union([z.string(), z.array(z.string())])
        .transform(singleToArray)
        .transform((value) => value.map((v) => v as <%= featurePropertyName %>SearchRequestExampleEnum))
        .optional(),

2. HTML

Next, add the following code to your formGroup in the html file and adapt by replacing all occurences of exampleEnum with the actual name which is defined.

Adapt in File: <feature>-search.component.html

    <span class="p-float-label">
        <p-multiSelect
              id="exampleEnum"
              formControlName="exampleEnum"
              [options]="(exampleEnum$ | async) ?? []"
              optionLabel="label"
              optionValue="value"
              placeholder="{{ 'YOUR_PRODUCT_SEARCH.CRITERIA.EXAMPLE_ENUM.PLACEHOLDER' | translate }}"
              display="chip"
              appendTo="body"
        ></p-multiSelect>
        <label for="exampleEnum$">{{
            'YOUR_PRODUCT_SEARCH.CRITERIA.EXAMPLE_ENUM.TITLE' | translate
        }}</label>
    </span>

3. Component

Furthermore, the following needs to be done to have the correct translations displayed:

Adapt in File: <feature>-search.component.ts

    import { TranslateService } from '@ngx-translate/core';
    import { enumToDropdownOptions } from '@onecx/angular-accelerator';
    ...

    constructor(
        ...
        private translateService: TranslateService,
        ...
    ) {}
    ...

    exampleEnum$ = enumToDropdownOptions(
        this.translateService,
        <%= featurePropertyName %>SearchRequestExampleEnum,
        'YOUR_PRODUCT_SEARCH.CRITERIA.EXAMPLE_ENUM.OPTIONS.',
    );

Don’t forget to add the translations to your de.json and en.json.