Simple To-Do List with Add/Delete Task With Laravel Livewire

Greetings, fellow developers! Today, we embark on a journey to create a Simple To-Do List application with the ability to add and delete tasks using Laravel Livewire. Dive into this comprehensive guide to enhance your Livewire skills. Don't forget to explore our recent posts:

• Event Creation and Management System With Laravel Livewire
• Project Creation with Milestones With Laravel Livewire
• Course Listing with Filters (Category, Difficulty) with Laravel Livewire

Step 1: Set Up Laravel Project with Livewire

Begin by creating a new Laravel project and installing Livewire. Ensure you have Livewire set up correctly in your project before proceeding to implement the To-Do List functionality.

Step 2: Create To-Do Component

Generate a Livewire component named ToDoList that will handle the tasks' logic. Add the necessary HTML structure to display a list of tasks along with input fields for adding new tasks.

php artisan make:livewire ToDoList

In the ToDoList component's blade file, include an input field for task entry and a button to add the task.

Step 3: Add Task Functionality

Implement the logic to add tasks to the list. Create a method in the ToDoList Livewire component to handle the task addition process.

public $tasks = [];

public function addTask($taskName)
{
    $this->tasks[] = $taskName;
}

After adding a task, remember to reset the input field for a seamless user experience.

Step 4: Display Tasks

Modify the blade file to render the list of tasks dynamically. Loop through the $tasks array and display each task along with a delete button for removing tasks.

<ul>
@foreach($tasks as $task)
    <li>{{ $task }}<button wire:click="removeTask('{{ $task }}')">Delete</button></li>
@endforeach
</ul>

This setup enables users to see their tasks and remove them as needed.

Step 5: Remove Task Functionality

Implement the removal functionality for tasks. Create a method in the Livewire component to remove tasks based on the task name.

public function removeTask($taskName)
{
    $this->tasks = array_diff($this->tasks, [$taskName]);
}

This method ensures tasks are removed from the array upon user interaction.

Step 6: Validate Task Input

Add validation to the task input field to ensure that users cannot submit empty tasks. Utilize Livewire's built-in validation capabilities to enhance the user experience.

protected $rules = [
    'taskName' => 'required'
];

By implementing validation rules, you can prevent empty tasks from being added to the list.

Step 7: Persist Tasks

Integrate with Laravel's Eloquent model to persist tasks in the database. Create a Task model and modify the addTask method to store tasks in the database.

public function addTask($taskName)
{
    Task::create(['name' => $taskName]);
    $this->tasks = Task::all()->pluck('name')->toArray();
}

This approach ensures that tasks are stored persistently for future use.

Step 8: Implement Task Deletion

Enhance the deletion functionality by deleting tasks from the database as well. Modify the removeTask method to delete tasks from the database table.

public function removeTask($taskName)
{
    Task::where('name', $taskName)->delete();
    $this->tasks = Task::all()->pluck('name')->toArray();
}

By deleting tasks from the database, you ensure data consistency between the UI and the backend.

Step 9: Pagination for Tasks

Implement pagination for tasks to handle large task lists efficiently. Utilize Livewire's pagination features to split the task list into manageable chunks.

public $pagination = 5;

Configure the pagination settings to display a limited number of tasks per page, improving performance and user experience.

Step 10: Enhance User Interaction

Improve user interaction by adding confirmation dialogs for task deletion. Use JavaScript alerts or modal dialogs to confirm task deletion actions.

public function confirmTaskDeletion($taskName)
{
    $this->dispatchBrowserEvent('confirm-task-deletion', ['task' => $taskName]);
}

By confirming deletions, users can make informed decisions about removing tasks.

Step 11: Add Search Functionality

Incorporate search functionality to allow users to search for specific tasks within the list. Implement a search method that filters tasks based on user input.

public function searchTask($query)
{
    $this->tasks = Task::where('name', 'like', '%'.$query.'%')->pluck('name')->toArray();
}

Users can now easily locate tasks by entering search queries.

Step 12: Conclusion

Congratulations! You've successfully built a Simple To-Do List application with add and delete task functionalities using Laravel Livewire. You've learned how to seamlessly integrate Livewire components to create dynamic and interactive user interfaces.

Explore further enhancements such as task prioritization, due dates, or user authentication to take your To-Do List application to the next level.