Todo Laravel Project

Todo Laravel Project - Getting StartedTodo Laravel Project - Migration - Creating todos tableTodo Laravel Project - Model - Working with todos tableTodo Laravel Project - Laravel TinkerTodo Laravel Project - RoutesTodo Laravel Project - Routes - Home page routeTodo Laravel Project - Routes - Active, Done, Deleted page routesTodo Laravel Project - Blade Template - The master layoutTodo Laravel Project - Home page viewTodo Laravel Project - Navigation barTodo Laravel Project - Views for Active, Done and Deleted pagesTodo Laravel Project - Form to create new todo tasksTodo Laravel Project - Handle form submission - Create new todo taskTodo Laravel Project - Show todo task detailTodo Laravel Project - Controller - Creating the TodoControllerTodo Laravel Project - Form to edit todo tasksTodo Laravel Project - Edit action button for the todo tasksTodo Laravel Project - Handling update requestTodo Laravel Project - Delete action button for the todo tasksTodo Laravel Project - Handling delete request

Todo Laravel Project - Show todo task detail

Laravel Project

← PrevNext →

In this Laravel project tutorial we will learn to show the detail of selected todo tasks.

Making Todo tasks clickable

Open home.blade.php file which is inside the resources/views directory.

We have the following logic to render the ACTIVE todo tasks list.

@if (count($todos) > 0)
  <ul class="list-group">
  @foreach ($todos as $todo)
    <li class="list-group-item">{{ $todo->title }}</li>
  @endforeach
  </ul>
@else
  <p class="lead">No ACTIVE todo tasks</p>
@endif

Convert the list item <li class="list-group-item">{{ $todo->title }}</li> into the following.

<li class="list-group-item">
  <p>
    <a data-toggle="collapse" href="#collapse-id-{{ $todo->id }}">{{ $todo-> title }}</a>
  </p>
  <div class="collapse" id="collapse-id-{{ $todo->id }}">
    <div class="card card-body">
      <div class="todo-description">{{ $todo->description }}</div>
      <hr>
      <p>Status: {{ $todo->status }}</p>
      <p title="{{ $todo->created_at }}">Created: {{ $todo->created_at->diffForHumans() }}</p>
    </div>
  </div>
</li>

In the above code we are taking help of Bootstrap 4 collapse component.

When user will click on the title of the todo task till will reveal the detail of the task. If the title is clicked again then the detail will be hidden.

The code $todo->created_at->diffForHumans() will show the time in format like 1 hour ago.

Open the home page in the browser and click on any todo task to reveal its detail.

Modify other views

Open the active.blade.php, done.blade.php and deleted.blade.php files which are inside the resources/views directory and make the list item clickable.

The code of this project is there in my GitHub repository todo-laravel. Feel free to check that out.

Alright this brings us to the end of this section. In the next tutorial we will be working on how to update todo tasks.

See you there. Have fun coding :-)

← PrevNext →