Details Page and Updating ToDo Items

Welcome back! In our previous lessons, we set up the foundation of our MVC ToDo App in Symfony. We've learned how to manage our todos with a TodoService and added new items to our list. Now, it's time to enhance our application by allowing users to view and update individual ToDo items.

Being able to view and edit ToDo items is crucial for any todo list application, as it enables users to modify existing tasks as their needs change. By the end of this lesson, you will be able to view details of a ToDo item and update it through a dedicated details page.

First, let's implement the logic in our TodoService to handle fetching individual ToDo items.

<?php

namespace App\Service;

use App\Entity\Todo;
use Symfony\Component\HttpFoundation\RequestStack;

class TodoService
{
    // Existing code...
    
    // Find a ToDo item by its ID
    public function findOne($id): ?Todo
    {
        $todos = $this->findAll();
        // Iterating through the list of ToDo items
        foreach ($todos as $todo) {
            // Check if the current item matches the requested ID
            if ($todo->getId() == $id) {
                return $todo;
            }
        }
        return null;
    }
}

The findOne method iterates through the list of ToDo items to locate an item by its ID and return it. If there's no match, the method returns null.

The method returns a nullable type (?Todo) because it returns a Todo object when a ToDo item is found, and null if no matching item is found.

Next, let's implement the logic in our TodoService to handle updating ToDo items.

<?php

namespace App\Service;

use App\Entity\Todo;
use Symfony\Component\HttpFoundation\RequestStack;

class TodoService
{
    // Existing code...

    // Update a ToDo item by its ID
    public function update($id, $title, $description = null): ?Todo
    {
        $todos = $this->findAll();
        // Iterating through the list of ToDo items
        foreach ($todos as $key => $todo) {
            // Check if the current item matches the requested ID
            if ($todo->getId() == $id) {
                // Update the item with new title and description
                $todos[$key] = new Todo($id, $title, $description);
                // Save the updated list back to the session
                $this->getSession()->set('todos', $todos);
                return $todos[$key];
            }
        }
        return null;
    }
}

The update method iterates through the list of ToDo items to find an item with the matching ID. Unlike findOne, which returns a single item, we use findAll because we need access to the entire list to update the relevant item and then save the updated list back to the session.

Upon finding a match, it updates the title and description of the ToDo item, saves the updated list to the session, and returns the updated item. If no item with the specified ID is found, the method returns null.

Now, let's define the route and corresponding controller action to handle displaying individual ToDo items.

Here's the TodoController with the detail method:

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use App\Service\TodoService;

class TodoController extends AbstractController
{
    // Existing code...

    #[Route('/todos/{id}', name: 'todo_detail')]
    public function detail($id): Response
    {
        // Fetch the ToDo item using its ID
        $todo = $this->todoService->findOne($id);
        // Render the details page with the fetched ToDo item
        return $this->render('todo/detail.html.twig', ['todo' => $todo]);
    }
}

The detail method within the TodoController handles the fetching and displaying of details for a specific ToDo item. It uses the findOne method from the TodoService to fetch the item by its ID and then renders the detail.html.twig template, passing the fetched item as a parameter.

Next, we'll define the route and corresponding controller action to handle updating ToDo items.

Here's the TodoController with the update method:

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use App\Service\TodoService;

class TodoController extends AbstractController
{
    // Existing code...

    #[Route('/todos/{id}/update', name: 'todo_update', methods: ['POST'])]
    public function update($id, Request $request): Response
    {
        // Get the updated title and description from the request
        $title = $request->request->get('title');
        $description = $request->request->get('description');
        // Update the ToDo item using the TodoService
        $this->todoService->update($id, $title, $description);
        // Redirect to the list view after updating the item
        return $this->redirectToRoute('todo_list');
    }
}

The update method handles the updating process for a specific ToDo item. It retrieves the updated title and description from the request, calls the update method from the TodoService to make the changes, and then redirects the user back to the list view via the todo_list route.

We use the POST method for this route because forms natively support only GET and POST methods. Although PUT is also used for updates in the HTTP protocol, HTML forms do not support it directly. Thus, we can use POST to handle the update process securely and correctly.

Finally, let's create the Twig template that will render the details of a specific ToDo item. Here is the detail.html.twig template:

<!DOCTYPE html>
<html>
<head>
  <title>ToDo Details</title>
</head>
<body>
  <h1>Todo Details</h1>
  
  <!-- Form for updating the ToDo item -->
  <form action="{{ path('todo_update', {'id': todo.id}) }}" method="post">
    <div>
      <label for="title">Title:</label>
      <!-- Input for updating the title -->
      <input type="text" id="title" name="title" value="{{ todo.getTitle() }}" required>
    </div>
    <div>
      <label for="description">Description:</label>
      <!-- Input for updating the description -->
      <input type="text" id="description" name="description" value="{{ todo.getDescription() }}">
    </div>
    <div>
      <!-- Button to submit the form and update the ToDo item -->
      <button type="submit">Update To Do</button>
    </div>
  </form>
  
  <!-- Link to go back to the list view -->
  <p><a href="{{ path('todo_list') }}">Go back to the list</a></p>
</body>
</html>

In this template, we have a form that allows the user to edit the title and description of the ToDo item. The form's action attribute points to the todo_update route while passing the ToDo item's ID as a parameter. The fields are pre-filled with the current title and description values of the ToDo item. When the form is submitted via the "Update To Do" button, the data will be sent using the POST method to the update action in the controller.

To make it easy for users to navigate to the details page of any ToDo item, we need to update our list view. We will modify the list.html.twig template so that each ToDo item redirects to the details page when clicked.

Here is the updated list.html.twig template:

<!DOCTYPE html>
<html>
<head>
  <title>ToDo List</title>
</head>
<body>
  <h1>ToDo List</h1>
  <ul>
    {% for todo in todos %}
      <li>
        <!-- Link to the details page for each ToDo item -->
        <a href="{{ path('todo_detail', {'id': todo.id}) }}">
          {{ todo.getTitle() }} - {{ todo.getDescription() }}
        </a>
      </li> 
    {% else %}
      <li>No todos found</li>
    {% endfor %}
  </ul>
  
  <form action="{{ path('todo_create') }}" method="post">
    <input type="text" name="title" placeholder="Title" required>
    <input type="text" name="description" placeholder="Description">
    <button type="submit">Add To Do</button>
  </form>
</body>
</html>

In this updated template, we loop through all ToDo items and create a list item (<li>) for each one. Inside each list item, there's a link (<a>) that points to the todo_detail route, passing the respective ToDo item's ID as a parameter. This allows users to click on any ToDo item in the list and be redirected to the details page of that specific item. Additionally, the form at the bottom allows users to add new ToDo items.

Let's go through a complete example, from selecting an item from the list page to updating a ToDo item.

1. Navigate to details page: Click on a ToDo item link on the list page to access its details.
2. Edit form fields: Modify the title and description.
3. Submit form: Click "Update To Do" to send data via POST.
4. Controller processes update: update method in TodoController processes form data.
5. Service updates item: TodoService updates the ToDo item in the session.
6. View updated list: Redirected list view shows the updated item.

In this lesson, we enhanced our ToDo app by adding the functionality to view and update ToDo items. We created the details page by

• Setting up the route and controller action to handle displaying the details of a ToDo item
• Implementing the update logic in the service layer
• Building the details page view using Twig.

Finally, we walked through the entire process from accessing the details page to updating a ToDo item. Now it's your turn to practice what you've learned. Head over to the practice exercises and try updating ToDo items in your list. Remember, the more you practice, the better you'll become. Great job!