CRUD: Edit Task Form

Now, let's build the page to edit the task. It will be structurally similar to the Create form but with a few differences.

Table: Link to Edit Route

We need to add the "Edit" button to the table. But before that, we need a Livewire component and a Route.

php artisan make:livewire Tasks/Edit

routes/web.php:

use App\Livewire\Tasks;
use App\Livewire\Settings\Appearance;
use App\Livewire\Settings\Password;
use App\Livewire\Settings\Profile;
use Illuminate\Support\Facades\Route;
 
Route::get('/', function () {
    return view('welcome');
})->name('home');
 
Route::view('dashboard', 'dashboard')
    ->middleware(['auth', 'verified'])
    ->name('dashboard');
 
Route::middleware(['auth'])->group(function () {
    Route::redirect('settings', 'settings/profile');
 
    Route::get('settings/profile', Profile::class)->name('settings.profile');
    Route::get('settings/password', Password::class)->name('settings.password');
    Route::get('settings/appearance', Appearance::class)->name('settings.appearance');
 
    Route::get('tasks', Tasks\Index::class)->name('tasks.index');
    Route::get('tasks/create', Tasks\Create::class)->name('tasks.create');
    Route::get('tasks/{task}/edit', Tasks\Edit::class)->name('tasks.edit'); 
});
 
require __DIR__.'/auth.php';

Now, we can add link to the "Edit" button.

resources/views/livewire/tasks/index.blade.php

BEFORE:

<flux:button href="#" variant="filled">{{ __('Edit') }}</flux:button>

AFTER:

<flux:button href="{{ route('tasks.edit', $task) }}" variant="filled">{{ __('Edit') }}</flux:button>

Edit Form

Now, we can inputs and the form.

resources/views/livewire/tasks/edit.blade.php:

<section class="max-w-5xl">
    <form wire:submit="save" class="flex flex-col gap-6">
        <flux:input
            wire:model="name"
            :label="__('Task Name')"
            required
            badge="required"
        />
 
        <flux:checkbox
            wire:model="is_completed"
            label="Completed?"
        />
 
        <div>
            <flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
        </div>
    </form>
</section>

Of course, when you visit the edit page inputs won't be filled with the data. Let's do that.

app/Livewire/Tasks/Edit.php:

<?php
 
namespace App\Livewire\Tasks;
 
use App\Models\Task;
use Livewire\Component;
use Illuminate\View\View;
use Livewire\Attributes\Validate;
 
class Edit extends Component
{
    #[Validate('required|string|max:255')]
    public string $name;
 
    #[Validate('nullable|boolean')]
    public bool $is_completed;
 
    public Task $task;
 
    public function mount(Task $task): void
    {
        $this->task = $task;
        $this->name = $task->name;
        $this->is_completed = $task->is_completed;
    }
 
    public function save(): void
    {
        $this->validate();
 
        $this->task->update([
            'name'         => $this->name,
            'is_completed' => $this->is_completed,
        ]);
 
        session()->flash('success', 'Task successfully updated.');
 
        $this->redirectRoute('tasks.index', navigate: true);
    }
 
    public function render(): View
    {
        return view('livewire.tasks.edit');
    }
}

Now, after visiting the edit page the form is filled.

And the update is working.

That's it. We have built the full CRUD!

Quick "Bonus" 1: Switch Checkbox

Instead of a regular checkbox, you may want to choose the Flux component called Switch.

This would be the visual result:

To achieve this, just replace checkbox component with the switch:

<section class="max-w-5xl">
    <form wire:submit="save" class="flex flex-col gap-6">
        <flux:input
            wire:model="name"
            :label="__('Task Name')"
            required
            badge="required"
        />
 
        <flux:checkbox 
        <flux:switch 
            wire:model="is_completed"
            label="Completed?"
            align="left" 
        />
 
        <div>
            <flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
        </div>
    </form>
</section>

The repository for this starter kit project section is here on GitHub.