Livewire ToDo List with in-place edit and delete

Usage

      @livewire('to-do-list')
    

Documentation

Let's go through the ToDo List Component step by step.

Rendering Component

Rendering the component is strightforward, along with the component's view file we send all the available tasks to the view page

public function render()
    {
        return view('livewire.to-do-list', [
            'tasks' => DummyTask::orderBy('completed_at', 'asc')
                          ->orderBy('created_at','desc')
                          ->get()
        ]);
    }

In the view file, we loop over the tasks variable and display the task title along with the edit and delete button for each of them

@foreach($tasks as $task)
..
.
@endforeach

Adding new Task

To add a new task we have defined a new variable inside the Component named $taskTitle

Inside the view file we have bound this property to an input field using wire:model directive

Notice that we have defined two actions one on enterkeydown on the input field and another on pressing the add button. They both call the addTask method.

public function addTask(){
        $this->validateOnly('taskTitle');

        DummyTask::create([
            'title' => $this->taskTitle
        ]);

        $this->reset('taskTitle');
    }

Deleting and Marking the Task Complete

These two actions are simple, we call the component method to delete and update the database fields on user action on the view file.

Editing the task

To achieve in-place edit we have defined a new field in the component named public ?DummyTask $editing;

When the user clicks on the edit button, we simply assign the associated task to the editing field.

public function selectTaskForEdit(DummyTask $task){
        $this->editing = $task;
    }

In the view file, we show the input field in place of the task title if the editing task id matches the id in the loop. Also, we have used model property binding directly to bind the input field to the editing task. editing.title

We call the update method once the user clicks the save button.

That's about it.