Laravel Orchid Editing an entry in a list

Question

I have a list, in which I have a delete button for each entry, which works flawlessly, as do the create function. I'm trying to add an edit button, and can manage to create the popup that requests the new name.

When I create a new entry and try to edit it, it shows me the create form again. When I try to edit an older entry, it tells me that

Oh snap! Change a few things up and try submitting again. The category.name field is required.

My full code is here, for completion:

namespace App\Orchid\Screens;

use Orchid\Screen\Screen;
use Orchid\Screen\Fields\Input;
use Orchid\Support\Facades\Layout;
use Orchid\Screen\TD;
use Orchid\Screen\Actions\ModalToggle;
use App\Models\Category;
use Illuminate\Http\Request;
use Orchid\Screen\Actions\Button;

class CategoryScreen extends Screen
{
    /**
     * Fetch data to be displayed on the screen.
     *
     * @return array
     */
    public function query(): iterable
    {
        return [
            'categories' => Category::latest()->get(),
        ];
    }

    /**
     * The name of the screen displayed in the header.
     *
     * @return string|null
     */
    public function name(): ?string
    {
        return 'Category Screen';
    }

    /**
     * The screen's action buttons.
     *
     * @return \Orchid\Screen\Action[]
     */
    public function commandBar(): iterable
    {
        return [
            ModalToggle::make('category')
                ->icon('plus')
                ->method('create')
                ->modal('createCategory'),
        ];
    }

    /**
     * The screen's layout elements.
     *
     * @return \Orchid\Screen\Layout[]|string[]
     */
    public function layout(): iterable
    {
        return [
            Layout::table('categories', [
                TD::make('name'),

                // Create a delete button
                TD::make('Actions')
                    ->alignRight()
                    ->render(function (Category $category) {
                        return Button::make('')
                                ->icon('trash')
                                ->confirm(
                                    'After deleting, the category will be gone forever.'
                                )
                                ->method('delete', [
                                    'category' => $category->id,
                                ]);
                    }),

                TD::make('Actions')
                    ->alignRight()
                    ->render(function (Category $category) {
                        return Button::make('')
                            ->icon('pencil')
                            ->modal('editCategoryModal', [
                                'category' => $category,
                            ])
                            ->method('edit', [
                                'category' => $category->id,
                            ]);
                    }),
            ]),

            Layout::modal('createCategory', [
                Layout::rows([
                    Input::make('category.name')
                        ->title('Name')
                        ->placeholder('Enter category name'),
                ]),
            ])
                ->title('Create category')
                ->applyButton('Create'),
        ];
    }

    // Make a create method that validates name field
    public function create(Request $request)
    {
        $request->validate([
            'category.name' => 'required|max:255',
        ]);

        // Create a new category
        $category = new Category();
        $category->organisation_id = auth()->user()->organisation_id;
        $category->name = $request->category['name'];
        $category->save();
    }

    // Make a delete method that deletes the category
    public function delete(Request $request)
    {
        $category = Category::find($request->category);
        $category->delete();
    }

    // Make an edit method that validates name field
    public function edit(Request $request)
    {
        $request->validate([
            'category.name' => 'required|max:255',
        ]);

        // Update the category
        $category = Category::find($request->category->id);
        $category->name = $request->category['name'];
        $category->save();
    }

    public function editCategoryModal(): iterable
    {
        return [
            Layout::modal('editCategory', [
                Layout::rows([
                    Input::make('category.name')
                        ->title('Name')
                        ->placeholder('Enter category name'),
                ]),
            ])
                ->title('Edit category')
                ->applyButton('Save')
        ];
    }
}

And my site, as it looks:

And the form, when I press the edit button (the pencil):

I am quite new to Laravel Orchid, so I admit that I might be going about this the totally wrong way, but the documentation does not include an example on how to do this. Thank you.

Answer 1

You should use async functions to edit a Model on the same page (with modal) Link : https://orchid.software/en/docs/modals/#asynchronous-data-loading

and you should also define all modals in the layouts section, not in a separate function.