Collection input component

About

The collection is a form input component for all kinds of collections:

selecting a single element from a collection (dropdown)
selecting multiple elements from a collection
input data can be fetched from an API or provided directly
preselected items can be specified

It is based on blade components and Select2 (see advanced documentation).

Example

Tne collection input component is usually used together with form-row.

<x-coreui::input-row
    :label="trans('domain.trainingPlans::exercise.attributes.main_foci')"
    horizontal
>
    <x-coreui::in.collection
        name="main_foci"
        :dataset="['ajax' => [
            'url' => route('exercises.main-foci.tabulate'),
            'getters' => ['text' => 'name'],
            'selected' => $exercise->mainFoci()->pluck('id')
        ]]"
        multiple
    />
</x-coreui::input-row>
<x-coreui::input-row
    :label="trans('domain.trainingPlans::exercise.attributes.difficulty')"
    horizontal
>
    <x-coreui::in.collection
        name="difficulty_level_id"
        :dataset="['ajax' => [
            'url' => route('exercises.difficulty-levels.tabulate'),
            'getters' => ['text' => 'name'],
            'selected' => $exercise->difficulty_level_id
        ]]"
    />
</x-coreui::input-row>
<x-coreui::input-row
    :label="trans('domain.trainingPlans::exercise.attributes.target_groups')"
    horizontal
>
    <x-coreui::in.collection
        name="target_groups"
        :dataset="['ajax' => [
            'url' => route('exercises.target-groups.tabulate'),
            'getters' => ['text' => 'name'],
            'selected' => $exercise->targetGroups()->pluck('id')
        ]]"
        multiple
    />
</x-coreui::input-row>
<x-coreui::input-row
    :label="trans('domain.trainingPlans::exercise.attributes.equipment')"
    horizontal
>
    <x-coreui::in.collection
        name="equipment"
        :dataset="['ajax' => [
            'url' => route('exercises.equipment.tabulate'),
            'getters' => ['text' => 'name'],
            'selected' => $exercise->equipment()->pluck('id')
        ]]"
        multiple
    />
</x-coreui::input-row>

The above example code looks like this:

Attributes

Name

Label

dataset

Ajax

The ajax property of the dataset attribute is used to connect the input component to a REST-API. The REST-API can be used to provide a list of input elements.

:dataset="[
    'ajax' => [
        'getters' => ['text' => 'name.' . config('app.locale')],
        'url' => route('tags.tabulate'),
        'selected' => $user->tags->pluck('id'),
    ],
]"

multiple

Required

Horizontal

Errors

Placeholder

Th following example shows a collection which an Empty preselected item.

<x-coreui::in.collection
    :options="$statuses"
    name="filter.{{ $name }}.status"
    :placeholder="['label' => null, 'value' => null]"
    :label="trans('bc-events-domain::event.attributes.status')"
/>