Laravel 11 Livewire CRUD Application Tutorial Part 2

4 months ago admin Laravel

In the second part of this tutorial, we will display all the tasks on the home page and later we will add the links so the user can create update, and delete tasks.

Create the Tasks component

First, let's create the Tasks component run the command:

php artisan make:livewire Tasks

Once done inside "app/Livewire/Tasks.php" add the following code:

show or hide the code

                                                    
                                                                                                                <?php

namespace App\Livewire;

use App\Models\Task;
use Livewire\Attributes\Validate; 
use Livewire\Component;
use Livewire\WithPagination;

class Tasks extends Component
{
    use WithPagination;

    #[Validate('required',message:'Please provide the task details.')] 
    public $body = '';
    public $taskToUpdate = null;
    public $updating = false;

    public function storeTask()
    {
        $validated = $this->validate();
        Task::create($validated);
        $this->clearData();
    }

    public function editTask(Task $task)
    {
        $this->resetValidation();
        $this->body = $task->body;
        $this->taskToUpdate = $task;
        $this->updating = true;
    }

    public function updateTask()
    {
        $validated = $this->validate();
        $this->taskToUpdate->update($validated);
        $this->clearData();
    }

    public function taskDone()
    {
        $this->taskToUpdate->update([
            'done' => 1
        ]);
        $this->clearData(); 
    }

    public function deleteTask(Task $task)
    {
        $task->delete();
        $this->clearData();
        return redirect('/');
    }

    public function clearData()
    {
        $this->body = '';
        if($this->updating) {
            $this->taskToUpdate = null;
            $this->updating = false;
        }
        $this->resetValidation();
    }

    public function render()
    {
        return view('livewire.task',[
            'tasks' => Task::latest()->simplePaginate(3)
        ]);
    }
}

Display all the tasks

Next, inside "resources/views/livewire/tasks.blade.php" add the following code:

show or hide the code

                                                        
                                                                                                                        <div class="container">
    <div class="row my-5">
        <div class="col-md-10 mx-auto">
            <div class="row my-5">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            @if ($tasks->count())
                                <ul class="list-group">
                                    @foreach ($tasks as $task)
                                        <li 
                                            wire:key="{{$task->id}}"
                                            class="list-group-item d-flex justify-content-between align-items-center">
                                            <p @class(['text-decoration-line-through' => $task->done])>
                                                {{ $task->body }}
                                            </p>
                                            <div class="dropdown ms-auto">
                                                <i class="fa-solid fa-ellipsis-vertical"
                                                    data-bs-toggle="dropdown"
                                                    style="cursor: pointer"
                                                    ></i>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <span class="dropdown-item"
                                                            style="cursor: pointer"
                                                            wire:click="editTask({{$task->id}})"
                                                        >
                                                            <i class="fas fa-edit text-warning"></i>
                                                        </span> 
                                                    </li>
                                                    <li>
                                                        <span class="dropdown-item"
                                                            style="cursor: pointer"
                                                            wire:click="deleteTask({{$task->id}})"
                                                            >
                                                            <i class="fas fa-trash text-danger"></i>
                                                        </span> 
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                                <div class="mt-3 d-flex justify-content-center">
                                    {{ $tasks->links() }}
                                </div>
                            @else 
                                <div class="alert alert-primary">
                                    No tasks yet!
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-3">
                                <textarea class="form-control @error('body') is-invalid @enderror" 
                                    name="body" 
                                    wire:model="body"
                                    placeholder="Task Details" 
                                    rows="5"></textarea>
                                @error('body')
                                    <div class="invalid-feedback">
                                        {{ $message }}    
                                    </div>   
                                @enderror
                            </div>
                        </div>
                        <div class="card-footer bg-white d-flex justify-content-between">
                            @if($updating)
                                @if(!$taskToUpdate->done)
                                    <button class="btn btn-sm btn-success"
                                        wire:click="taskDone"    
                                    >
                                        <i class="fas fa-check-double"></i>
                                    </button>
                                @endif
                                <div>
                                    <button class="btn btn-sm btn-primary"
                                        wire:click="clearData"    
                                    >
                                        <i class="fas fa-arrow-left"></i>
                                    </button>
                                    <button class="btn btn-sm btn-warning"
                                        wire:click="updateTask({{$task->id}})"    
                                    >
                                        <i class="fas fa-edit"></i>
                                    </button>
                                </div>
                            @else 
                                <button class="btn btn-sm btn-dark"
                                    wire:click="storeTask"    
                                >
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Add routes

Next, inside "routes/web.php" add the following code:

Download the source code from here.

show or hide the code

<?php use App\Livewire\Tasks; use Illuminate\Support\Facades\Route; Route::get('/', Tasks::class);