Actualizar el estado de los ToDos

Implementing the option to mark tasks as completed is an essential functionality in any task application. This allows users to keep a more accurate control over what they have done and what is still pending. Let's see how we can implement this feature in our application with a clear data structure and layout in mind.

What is the Todo Status View?

To indicate whether a task is completed or not, we first need to create a specific view that shows it visually in our application. This view can consist of a check or an empty circle depending on the status of the task.

Creating Todo Status View

The functionality will be added by creating a new view named TodoStatusView. Below, here is a basic structure you can use to create this component:

struct TodoStatusView: View { @EnvironmentObject private var viewModel: TodoViewModel @State private var todo: TodoEntity // Initialization setting up basic attributes init(todo: TodoEntity) { self.todo = todo } var body: some View { // Display using an image let imageName = todo.isComplete ? "checkmark.circle.fill" : "circle" return Image(systemName: imageName) .resizable() .frame(width: todo.isComplete ? 20 : 24, height: todo.isComplete ? 20 : 24) .onTapGesture { viewModel.updateTodoStatus(todo: todo) } .disabled(todo.isArchived) } } }

How to manage the status of the tasks in the ViewModel?

The next step is to manage the status of the tasks using the ViewModel. You need a function that changes the status of the task when it is marked as completed.

Implementing the UpdateAllStatus function

It is crucial to have a function that effectively toggles the status of tasks between completed and uncompleted. In the ViewModel, this function is simulated as follows:

{ func updateAllStatus(all: AllEntity) { if let index = all.firstIndex(where: { $0.id == all.id }) { all[index].isComplete.toggle() saveAll() } } }

Where to integrate the TodoStatusView view inside the application?

Once we have the functional part ready, the next step is to integrate our TodoStatusView view inside different sections of the application so that the user can see and mark that a task is completed.

Integration in the main and detail view

The integrations are mainly done in two places:

• ToDoItemView: This is the main view where the listed tasks appear.
• ToDoPreviewView: A more detailed view that allows you to see more information about the task.

ToDoItemView(all: $all) .overlay(TodoStatusView(all: all), alignment: .topTrailing) ToDoPreviewView(all: $all) .overlay(TodoStatusView(all: all), alignment: .topTrailing)

How do you display the changes in the archived view?

Finally, a detail to consider is how to present the archived elements. It is important that they cannot be altered directly, but they should still show their status.

Restructuring the archived items view

This view also refers to the status of the tasks but disables the possibility of modifying their status when they are archived:

Text(todo.title) Text(todo.formattedDate) TodoStatusView(todo: todo).disabled(true).

This implementation allows you to manage the final status of the tasks and offer users a more complete and visually understandable experience in task management. Go ahead and try these steps and see how your application improves significantly in usability!