Filament•3mo ago

Incremental itemLabel for repeater

Hello everyone. 👋 I know this question has already been asked several times, but I haven't found any answers... Basically my question is simple: I'm creating a form with a repeater (questions). In this repeater, I've a second one (answers). And I want to put an itemLabel in this second repeater with an incremental number (Answer 1, Answer 2, Answer 3, etc.).

Repeater::make('questions')
    ->itemLabel(function () {
        static $position = 1;
        return 'Question n°'.$position++;
    })
    ->schema([
        textInput::make('title')
                ->required(),
        Select::make('need_id')
                ->options(Need::all()->pluck('name', 'id'))
                ->required(),
        Repeater::make('answers')
                ->itemLabel(function ($component, array $state, callable $get) {
                    $answers     = $get('answers');
                    $answerKeys  = array_keys($answers);
                   
                    /*And now, I don't know what to do. How to get the current index of actual answer but without                        uuid ?*/ 

                    return 'Réponse n°';
                })
                ->hiddenLabel()
                ->schema([
                    TextInput::make('title')
                            ->required(),
                    TextInput::make('ratio')
                            ->numeric()
                            ->suffix('%')
                            ->default('20')
                            ->required()
                ])
                ->minItems(5)
                ->maxItems(5)
                ->addActionLabel('Ajouter une réponse')
                ->required()
    ])
    ->minItems(2)
    ->maxItems(4)
    ->addActionLabel('Ajouter une question')
    ->collapsible()

Repeater::make('questions')
    ->itemLabel(function () {
        static $position = 1;
        return 'Question n°'.$position++;
    })
    ->schema([
        textInput::make('title')
                ->required(),
        Select::make('need_id')
                ->options(Need::all()->pluck('name', 'id'))
                ->required(),
        Repeater::make('answers')
                ->itemLabel(function ($component, array $state, callable $get) {
                    $answers     = $get('answers');
                    $answerKeys  = array_keys($answers);
                   
                    /*And now, I don't know what to do. How to get the current index of actual answer but without                        uuid ?*/ 

                    return 'Réponse n°';
                })
                ->hiddenLabel()
                ->schema([
                    TextInput::make('title')
                            ->required(),
                    TextInput::make('ratio')
                            ->numeric()
                            ->suffix('%')
                            ->default('20')
                            ->required()
                ])
                ->minItems(5)
                ->maxItems(5)
                ->addActionLabel('Ajouter une réponse')
                ->required()
    ])
    ->minItems(2)
    ->maxItems(4)
    ->addActionLabel('Ajouter une question')
    ->collapsible()

Thanks for you help 😅

Solution:

I found a solution on Github for those who are looking too : ```php ->itemLabel(function ($state, $component) { $key = array_search($state, $component->getState());...

GitHub

How to add index on Repeater itemLabel ? · filamentphp filament · D...

https://filamentphp.com/docs/3.x/forms/fields/repeater#adding-a-label-to-repeater-items-based-on-their-content ->itemLabel(fn (array $state): ?string => $state['name'] ?? null)

Jump to solution

3 Replies

Solution

Alexandre•3mo ago

I found a solution on Github for those who are looking too :

->itemLabel(function ($state, $component) {
  $key   = array_search($state, $component->getState());
  $index = array_search($key, array_keys($component->getState()));

  return 'Réponse n°'.$index + 1;
})

->itemLabel(function ($state, $component) {
  $key   = array_search($state, $component->getState());
  $index = array_search($key, array_keys($component->getState()));

  return 'Réponse n°'.$index + 1;
})

And that work like expected 🥳 Source : https://github.com/filamentphp/filament/discussions/8565#discussioncomment-7031649

GitHub

How to add index on Repeater itemLabel ? · filamentphp filament · D...

https://filamentphp.com/docs/3.x/forms/fields/repeater#adding-a-label-to-repeater-items-based-on-their-content ->itemLabel(fn (array $state): ?string => $state['name'] ?? null)

Expecto Patronum•4w ago

hi @Alexandre hi sorry for mentioned you here. may i know that this code still function ? because i try implement to my project but seems not working

AlexandreOP•4w ago

Hello, Yes, it still works. I've set it up in a quiz management system where I have groups of questions, with questions and answers. The questions are in a repeater and so are the answers. For the first group, I had to do it like this to manage the number (see screenshot one) :

Section::make()
    ->heading('Questions')
    ->icon('heroicon-m-question-mark-circle')
    ->schema([
        Repeater::make('questions')
                ->columns(2)
                ->hiddenLabel()
                ->itemLabel(function () {
                    static $position = 1;

                    return 'Question n°'.$position++;
                })
                ->schema([...])
                ->minItems(2)
                ->maxItems(4)
                ->addActionLabel('Ajouter une question')
                ->collapsed(fn($operation) => $operation == 'edit')
            ]);

Section::make()
    ->heading('Questions')
    ->icon('heroicon-m-question-mark-circle')
    ->schema([
        Repeater::make('questions')
                ->columns(2)
                ->hiddenLabel()
                ->itemLabel(function () {
                    static $position = 1;

                    return 'Question n°'.$position++;
                })
                ->schema([...])
                ->minItems(2)
                ->maxItems(4)
                ->addActionLabel('Ajouter une question')
                ->collapsed(fn($operation) => $operation == 'edit')
            ]);

I handled the reply counter in the same way as my post above (see screenshot 2):

Repeater::make('answers')
    ->columnSpanFull()
    ->columns(2)
    ->collapsed(fn($operation) => $operation == 'edit')
    ->itemLabel(function ($state, $component) {
        $key   = array_search($state, $component->getState());
        $index = array_search($key, array_keys($component->getState()));

        return 'Réponse n°'.$index + 1;
    })
    ->hiddenLabel()
    ->label('Réponses')
    ->schema([
        TextInput::make('title')
                ->label('Intitulé de la réponse')
                ->columnSpanFull()
                ->inlineLabel()
                ->required(),
    ])
    ->minItems(5)
    ->maxItems(5)
    ->addActionLabel('Ajouter une réponse')
    ->required()

Repeater::make('answers')
    ->columnSpanFull()
    ->columns(2)
    ->collapsed(fn($operation) => $operation == 'edit')
    ->itemLabel(function ($state, $component) {
        $key   = array_search($state, $component->getState());
        $index = array_search($key, array_keys($component->getState()));

        return 'Réponse n°'.$index + 1;
    })
    ->hiddenLabel()
    ->label('Réponses')
    ->schema([
        TextInput::make('title')
                ->label('Intitulé de la réponse')
                ->columnSpanFull()
                ->inlineLabel()
                ->required(),
    ])
    ->minItems(5)
    ->maxItems(5)
    ->addActionLabel('Ajouter une réponse')
    ->required()

Are you receiving an error?

Gaming

Programming

Incremental itemLabel for repeater