Laravel Orchid Editing an entry in a list - php

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.