Welcome back! In the previous lessons, we set up SQLAlchemy, mapped our Todo model to a database table, and performed CRUD operations. This lesson focuses on enhancing our ToDo application by adding the ability to sort todos.

Sorting is an essential feature in any web application, as it improves user experience by making data easier to navigate and find. Today, we will learn how to implement this functionality step-by-step.

Before diving deeper, let's briefly remind ourselves of what sorting is.

Sorting arranges data in a specific order. Common types of sorting include:

• Alphabetical: Orders data from A-Z (ascending) or Z-A (descending).
• Numerical: Orders numbers in an ascending (0-9) or descending (9-0) sequence.
• Alphanumeric: Sorts data containing both letters and numbers, typically placing numbers before letters (e.g., '1 Task', '2 Task', 'Task 1', 'Task 2', 'Task 10').

In this lesson, we will implement alphanumeric sorting by the todo titles to help users find items more quickly.

Let’s start by updating the get_all method in app/services/todo_service.py to support sorting.

Here’s the updated method:

Let's break this down:

1. Initial Query:
   • We start by initializing a query on the Todo model: query = Todo.query. This sets up a base query to build on.
2. Sorting:
   • If sort_by is set to 'title', we sort the results: query = query.order_by(Todo.title). This arranges the todos alphanumerically by their titles. If sort_by is anything other than 'title', all items will be fetched without sorting.
3. Fetching Results:
   • Finally, return query.all() executes the query and returns all matching todos.

Now, we’ll modify app/controllers/todo_controller.py to capture the sort parameter from the URL and pass it to our updated service method.

Here’s the updated controller:

Let's break this down:

1. Capturing Parameter:

   • We capture the sort_by parameter from the URL query string using sort_by = request.args.get('sort_by'). This allows us to dynamically read this value whenever a GET request is made to the root route (/).

2. Fetching Sorted Data:

   • We call todo_service.get_all(sort_by=sort_by) with the captured parameter. This fetches the todos based on the sort criteria specified by the user. If the sort_by parameter is None, the method will return all todos.

3. Rendering the Template:

   • We render the todo_list.html template with the fetched todos using return render_template('todo_list.html', todos=todos). This passes the sorted list of todos to the template for display.

The final step is to modify app/templates/todo_list.html to add sort options in the form, enabling users to input their preferences.

Here’s the updated template:

Key Additions:

1. Form Setup: A form that submits GET requests to the list_todos route.
2. Sort By Dropdown: A dropdown menu to select sorting by title, with "None" as the default option.
3. Submit Button: A button to apply the selected sort option.

If no sorting option is selected, the submit button will send None to the sort_by parameter, resulting in all todos being returned. These enhancements enable users to specify their sorting preferences, while still allowing for all items to be displayed if no specific options are chosen. When the form is submitted, the selected options are sent as query parameters to the list_todos route, which then displays the sorted list of todos.

Now that we have implemented sorting, it’s essential to test the functionality.

1. Sorting:

   • Use the sort dropdown to select "Title" and submit the form.
   • The URL for sorting by title would be: /todos?sort_by=title
   • The items should be sorted alphanumerically by title.

2. Returning All Todos:

   • Submit the form without selecting a sort option.
   • The URL for returning all todos would be: /
   • All todos should be displayed without any sorting applied.

In this lesson, we enhanced our ToDo application by implementing sorting functionality. We:

1. Updated the service layer to support dynamic sorting.
2. Modified the controller to capture user input for sorting.
3. Enhanced the template to allow users to input their sorting preferences.
4. Provided strategies to test the new functionality.

These improvements make our application more robust and user-friendly. Now it’s time for you to practice these concepts. Head over to the practice exercises to solidify your understanding and gain hands-on experience with implementing sorting.