Use Select Field WITH the Listener

[mahmoudmohamedramadan]

I have two Select Fields and I want to set the second Select Field WITH the data according to the selected option in the first Select Field So I decided to use the Listener Class like so,

<?php

namespace App\Orchid\Layouts;

use App\Models\Field;
use Orchid\Screen\Fields\Select;
use Orchid\Screen\Layouts\Listener;
use Orchid\Support\Facades\Layout;

class PostListener extends Listener
{
    /**
     * List of field names for which values will be listened.
     *
     * @var string[]
     */
    protected $targets = [
        'post.field_id'
    ];

    /**
     * What screen method should be called
     * as a source for an asynchronous request.
     *
     * The name of the method must
     * begin with the prefix "async"
     *
     * @var string
     */
    protected $asyncMethod = 'asyncFieldCategory';

    /**
     * @return Layout[]
     */
    protected function layouts(): array
    {
        return [
            Layout::rows([
                Select::make('post.field_id')
                    ->required()
                    ->fromModel(Field::class, 'name')
                    ->title(__('Name Field'))
                    ->help('Specify which field this post should belong to (Select the field to get it\'s categories)')
                    ->popover('If your field does not exist please connect with the admin)'),

                Select::make('post.category_id')
                    ->required()
                    ->title(__('Name Category'))
                    ->help('Specify which category this post should belong to')
                    ->popover('If your category does not exist please connect with the admin'),
            ])
        ];
    }
}

and the code in PostEditScreen.php like so,

 public function asyncFieldCategory($field)
    {
        return [
            'post.field_id' => $field['field_id'],
            'post.category_id' => Field::find($field['field_id'])->categories()->get(),
        ];
    }

But for sorry I do not get the data. Any Help? 🙄

[EeKay]

@tabuna I've a similar issue regarding to related select boxes: I have "Book" select and "Chapters" select.

What i'd expect is that i can select a book, and its "Chapters" are loaded using the async function and immediately shown for the second select box.

But now, i have to save the record, and only then I see the chapters in the dropdown. Is there an example for this kind of setup/scenario that @mahmoudmohamedramadan also indicated?

Thanks!

[EeKay]

@tabuna I currently have this:

Step 1. Select input 1: choose book
Step 2. need to save record to update value of record
Step 3. Chapters for that book are now visible in Select input 2
Step 4. Select chapter of book
Step 5. save record to have book and chapter selected.

What I need is:

Step 1. Select book
Step 2. Dynamically the chapters for that book are shown in select input 2
Step 3. Select chapter
Step 4. Save selected values (not earlier than selecting it all).

I think this is easy to implement but I can't figure out how right now. Is there any evident way to implement this using orchid easily? (willing to compensate / tip for your effort).

[ega22a]

Hi. I know how to help in this regard. You need to create a Listener and write two Selects in it.

class BooksAndChapters extends Listener {
    protected $targets = [
        'book',
        'chapter'
    ];

    protected $asyncMethod = 'asyncBookAndChapters';

    protected layouts() {
        return [
            Layouts::rows([
                Select::make('book')
                    -> title('Select book')
                    -> fromModel(Book::class),
                Select::make('chapter')
                    -> title('Select chapter')
                    -> fromQuery(Chapter::where('bookId', '=', $this -> query['book'])),
            ]);
        ];
    }
}

Next, you need to create an asynchronous function in Screen and pass values to the fields.

public function asyncBookAndChapters($book, $chapter) {
    return [
        'book' => $book,
        'chapter' => $chapter,
    ];
}

[itpmsoftware]

I think because don't use options in post.category_id Select, try to add option method and ->options($this->query[post.category_id]) or ->options($this->query[post][category_id]