Implementación de Estado de Tarea en Aplicación de Tareas

Implementar la opción de marcar tareas como completadas es una funcionalidad esencial en cualquier aplicación de tareas. Esto permite a los usuarios llevar un control más exacto sobre lo que han realizado y lo que aún está pendiente. Vamos a ver cómo podemos implementar esta función en nuestra aplicación teniendo en cuenta una estructura de datos y diseño claro.

¿Qué es la vista Todo Status View?

Para indicar si una tarea está completada o no, primero necesitamos crear una vista específica que lo muestre visualmente en nuestra aplicación. Esta vista puede consiste en un check o círculo vacío dependiendo del estado de la tarea.

Creación de Todo Status View

La funcionalidad se añadirá creando una nueva vista denominada TodoStatusView. A continuación, aquí hay una estructura básica que puede usar para crear este componente:

struct TodoStatusView: View {
    @EnvironmentObject private var viewModel: TodoViewModel
    @State private var todo: TodoEntity

    // Inicialización que configura atributos básicos
    init(todo: TodoEntity) {
        self.todo = todo
    }

    var body: some View {
        // Visualización mediante una imagen
        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)
    }
}

¿Cómo gestionar el estado de las tareas en el ViewModel?

El siguiente paso es gestionar el estado de las tareas usando el ViewModel. Se necesita una función que cambie el estado de la tarea cuando se marque como completada.

Implementación de la función UpdateTodoStatus

Es crucial tener una función que alterne el estado de las tareas entre completadas y no completadas de manera efectiva. En el ViewModel, esta función se simula de la siguiente manera:

func updateTodoStatus(todo: TodoEntity) {
    if let index = todos.firstIndex(where: { $0.id == todo.id }) {
        todos[index].isComplete.toggle()
        saveTodos()
    }
}

¿Dónde integrar la vista TodoStatusView dentro de la aplicación?

Una vez que tenemos la parte funcional lista, el siguiente paso es integrar nuestra vista TodoStatusView dentro de diferentes secciones de la aplicación para que el usuario pueda ver y marcar que una tarea está completada.

Integración en la vista principal y detalle

Las integraciones se hacen principalmente en dos lugares:

• ToDoItemView: Es la vista principal donde aparecen las tareas listadas.
• ToDoPreviewView: Una vista más detallada que permite ver más información de la tarea.

ToDoItemView(todo: $todo)
    .overlay(TodoStatusView(todo: todo), alignment: .topTrailing)

ToDoPreviewView(todo: $todo)
    .overlay(TodoStatusView(todo: todo), alignment: .topTrailing)

¿Cómo despliega los cambios en la vista de archivados?

Finalmente, un detalle a considerar es cómo presentar los elementos archivados. Es importante que no puedan ser alterados directamente, pero aún así, deben mostrar su estado.

Reestructuración de la vista de items archivados

Esta vista también se refiere al estado de las tareas pero inhabilita la posibilidad de modificar su estado al estar archivadas:

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

Esta implementación permite manejar el estado final de las tareas y ofrecer a los usuarios una experiencia más completa y visualmente comprensible en la gestión de tareas. ¡Anímate a probar estos pasos y ver cómo tu aplicación mejora notablemente en usabilidad!