Edición de Tareas en Aplicaciones: Navegación y Manejo de ID

Clase 15 de 19 • Curso de Jetpack Compose en Android

Contenido del curso

Introducción a Jetpack Compose

Personalización de la UI con Material Design

Composición de layouts en Jetpack Compose

Construcción de funcionalidades

Navegación en Jetpack Compose

Creación de Bases de datos y dependencias

Finalización de la app

Tomar examen

Resumen

¿Cómo podemos editar tareas en nuestra aplicación?

La edición de tareas dentro de una aplicación no es solo sobre la modificación de datos; implica una serie de pasos técnicos que requieren navegación y el paso de argumentos. En esta clase, profundizamos en el proceso de edición de tareas, desde pasar el ID de la tarea a través de la navegación hasta asegurar que los datos se guarden correctamente. Te guiaré a través de este proceso de manera clara y precisa, destacando las mejores prácticas para asegurar que tus funcionalidades sean eficientes y efectivas.

¿Cómo recibir argumentos en Task Screen?

Para poder editar una tarea, primero debemos modificar nuestra Task Screen para que pueda recibir un argumento. En lugar de usar un object, necesitamos cambiar a una data class que pueda recibir un Task ID. Este Task ID puede ser nulo en caso de que estemos creando una tarea nueva. Aquí está el procedimiento:

data class TaskScreenDestination(val taskId: String? = null)

¿Cómo se modifica la navegación?

El siguiente paso crucial es modificar cómo navegamos por nuestra aplicación. Esto implica ajustar el método de navegación para que acepte argumentos opcionales, lo que le permite recibir un Task ID:

fun navigateToScreen(taskId: String? = null) {
    // Lógica de navegación
}

Al hacer clic en "Agregar tarea", debes pasar un argumento nulo, mientras que al hacer clic en un elemento existente, deberás pasar el Task ID correspondiente.

¿Cómo se pre-cargan los datos en el modelo Task?

Una vez que la navegación está configurada para enviar el ID de la tarea, el siguiente paso es precargar los datos para la edición. En el ViewModel, usamos el handle de estado guardado para recuperar los datos necesarios:

val savedTaskId = savedStateHandle.get<String>("taskId")

¿Cómo se actualiza o crea una tarea?

Prepárate para el desafío de distinguir entre la creación y la actualización de tareas. Aquí te mostramos cómo lograrlo usando la variable editTask que creamos:

editTask?.let {
    fakeLocalDataSource.updateTask(
        it.copy(
            title = taskTitle, 
            description = taskDescription, 
            isCompleted = taskDone
        )
    )
} ?: run {
    // lógica para crear una nueva tarea
}

Este enfoque asegura que reutilicemos el mismo código de creación y que nuestro Lazy Column no tenga errores debido a IDs duplicados.

¿Dónde se gestiona el evento de clic en la lista de tareas?

La interacción del usuario comienza en nuestra lista de tareas, donde debemos identificar cuando se hace clic en un ítem y así cargar los datos apropiados en la pantalla de edición. Lo configuramos de la siguiente manera:

taskItem.setOnClickListener {
    onAction(HomeScreenAction.OnClickTask(task.id))
}

¿Qué debemos considerar al actualizar la interfaz de usuario?

Finalmente, recuerda verificar que tanto la edición como la creación de tareas funcionen sin problemas y que cualquier cambio se refleje inmediatamente en la interfaz de usuario. Asegúrate de que las tareas completas se filtren y se muestren correctamente.

Al finalizar este proceso, habrás integrado exitosamente la funcionalidad de edición de tareas en tu aplicación, permitiéndote crear, editar y gestionar tareas de forma eficaz. Con esta base funcional en su lugar, estás listo para explorar implementaciones más avanzadas, como bases de datos e inyección de dependencias.

Johann Enrique Hurtado Salas

student•

Como yo no use navegacion tipada si no por string debido al problema que tenia con los @Serializable en la calse anterior tuve que implementar detalles minimos

NavigationRoot:

@Composable
fun NavigationRoot(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        NavHost(
            navController = navController,
            startDestination = "home"
        ) {
            composable(route = "home") { _: NavBackStackEntry ->
                HomeScreenRoot(
                    navigateToTaskScreen = { taskId ->
                        if (taskId != null) {
                            navController.navigate("task/$taskId")
                        } else {
                            navController.navigate("task")
                        }
                    }
                )
            }

            composable(route = "task") { _: NavBackStackEntry ->
                TaskScreenRoot(
                    navigateBack = { navController.navigateUp() }
                )
            }

            composable(
                route = "task/{taskId}",
                arguments = listOf(
                    navArgument("taskId") { type = NavType.StringType }
                )
            ) { _: NavBackStackEntry ->
                TaskScreenRoot(
                    navigateBack = { navController.navigateUp() }
                )
            }
        }
    }
}


HomeScreen:
@file:OptIn(ExperimentalMaterial3Api::class)

package com.juandgaines.todoapp.presentation.home

import android.widget.Toast
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.juandgaines.todoapp.domain.Task
import com.juandgaines.todoapp.R
import com.juandgaines.todoapp.presentation.screens.home.providers.HomeScreenPreviewProvider
import com.juandgaines.todoapp.ui.theme.TodoAppTheme

@Composable
fun HomeScreenRoot(
    navigateToTaskScreen: (String?)-> Unit
){
    val viewModel = viewModel<HomeScreenViewModel>()
    val state = viewModel.state
    val event = viewModel.event

    val context = LocalContext.current

    LaunchedEffect(true) {
        event.collect { event->
            when(event){
                HomeScreenEvent.DeletedAllTasks -> {
                    Toast.makeText(
                        context,
                        context.getString(R.string.all_task_deleted),
                        Toast.LENGTH_SHORT
                    ).show()
                }
                HomeScreenEvent.DeletedTask -> {
                    Toast.makeText(
                        context,
                        context.getString(R.string.task_deleted),
                        Toast.LENGTH_SHORT
                    ).show()
                }
                HomeScreenEvent.UpdatedTasks -> {
                    Toast.makeText(
                        context,
                        context.getString(R.string.task_updated),
                        Toast.LENGTH_SHORT
                    ).show()
                }
            }
        }
    }

    HomeScreen(
        state = state,
        onAction = { action ->
            when(action){
                is HomeScreenAction.OnClickTask -> {
                    navigateToTaskScreen(action.taskId)
                }
                HomeScreenAction.OnAddTask -> {
                    navigateToTaskScreen(null)
                }
                else -> viewModel.onAction(action)
            }
        }
    )
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HomeScreen(
    modifier: Modifier = Modifier,
    state: HomeDataState,
    onAction:(HomeScreenAction)-> Unit
){
    var isMenuExpanded by remember { mutableStateOf(false) }
    Scaffold(
        modifier = modifier.fillMaxSize(),
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        text = stringResource(id = R.string.app_name),
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.fillMaxSize()
                    )
                },
                actions = {
                    Box(
                        modifier = Modifier.padding(8.dp).clickable{
                            isMenuExpanded = true
                        }
                    ) {
                        Icon(
                            imageVector = Icons.Default.MoreVert,
                            contentDescription = "Add Task",
                            tint = MaterialTheme.colorScheme.onSurface
                        )
                        DropdownMenu(
                            expanded = isMenuExpanded,
                            modifier = Modifier.background(
                                color = MaterialTheme.colorScheme.surfaceContainerHighest
                            ),
                            onDismissRequest = { isMenuExpanded = false}
                        ) {
                            DropdownMenuItem(
                                text = {
                                    Text(
                                        text = stringResource(id = R.string.delete_all),
                                        color = MaterialTheme.colorScheme.onSurface
                                    )
                                },
                                onClick = {
                                    onAction(HomeScreenAction.OnDeleteAllTasks)
                                    isMenuExpanded = false

                                }

                            )
                        }
                    }
                }
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    onAction(HomeScreenAction.OnAddTask)
                },
                content = {
                    Icon(
                        imageVector = Icons.Default.Add,
                        contentDescription = "Add Task",
                        tint = MaterialTheme.colorScheme.onSurface
                    )
                }
            )
        }
    ) {
        paddingValues ->

        LazyColumn(
            modifier = Modifier.padding(paddingValues).padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(4.dp)
        ) {
            item{
                SummaryInfo(
                    date = state.date,
                    taskSymmary = state.summary,
                    completedTask = state.completedTask.size,
                    totalTask = state.completedTask.size + state.pendingTask.size
                )
            }

            stickyHeader {
                SectionTitle(
                    modifier = Modifier
                        .fillParentMaxWidth()
                        .background(
                            color = MaterialTheme.colorScheme.surface
                        ),
                    title = stringResource(R.string.completed_task)
                )
            }

            items(
                state.completedTask,
                key = { task -> task.id }
            ) { task ->
                TaskItem(
                    modifier = Modifier.clip(
                        RoundedCornerShape(
                            8.dp
                        )
                    ),
                    task = task,
                    onClickItem = {
                        onAction(HomeScreenAction.OnClickTask(task.id))
                    },
                    onDeleteItem = {
                        onAction(HomeScreenAction.OnDeleteTask(task))
                    },
                    onToggleCompletion = {
                        onAction(HomeScreenAction.OnToggleTask(task))
                    }
                )
            }


            stickyHeader {
                SectionTitle(
                    modifier = Modifier
                        .fillParentMaxWidth()
                        .background(
                            color = MaterialTheme.colorScheme.surface
                        ),
                    title = stringResource(R.string.pending_task)
                )
            }

            items(
                state.pendingTask,
                key = { task -> task.id }
            ) { task ->
                TaskItem(
                    modifier = Modifier.clip(
                        RoundedCornerShape(
                            8.dp
                        )
                    ),
                    task = task,
                    onClickItem = {
                        onAction(HomeScreenAction.OnClickTask(task.id))
                    },
                    onDeleteItem = {
                        onAction(HomeScreenAction.OnDeleteTask(task))
                    },
                    onToggleCompletion = {
                        onAction(HomeScreenAction.OnToggleTask(task))
                    }
                )
            }
        }
    }
}


@Preview
@Composable
fun HomeScreenPreviewLight(
    @PreviewParameter(HomeScreenPreviewProvider ::class) state: HomeDataState
) {
    TodoAppTheme {
        HomeScreen(
            state = HomeDataState(
                date = state.date,
                summary = state.summary,
                completedTask = state.completedTask,
                pendingTask =  state.pendingTask
            ),
            onAction = {}
        )
    }
}

@Preview(
    showBackground = true,
    uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES
)
@Composable
fun HomeScreenPreviewDark(
    @PreviewParameter(HomeScreenPreviewProvider::class) state: HomeDataState
) {
    TodoAppTheme {
        HomeScreen(
            state = HomeDataState(
                date = state.date,
                summary = state.summary,
                completedTask = state.completedTask,
                pendingTask =  state.pendingTask
            ),
            onAction = {}
        )
    }
}


TaskViewModel:
package com.juandgaines.todoapp.presentation.detail

import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.lifecycle.SavedStateHandle
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.juandgaines.todoapp.data.FakeTaskLocalDataSource
import com.juandgaines.todoapp.domain.Task
import kotlinx.coroutines.channels.Channel
import kotlinx.coroutines.flow.launchIn
import kotlinx.coroutines.flow.onEach
import kotlinx.coroutines.flow.receiveAsFlow
import kotlinx.coroutines.launch
import java.util.UUID

class TaskViewModel(
    savedStateHandle: SavedStateHandle
) : ViewModel() {

    private val fakeTaskLocalDataSource = FakeTaskLocalDataSource

    private val taskId: String? = savedStateHandle.get<String>("taskId")

    var state by mutableStateOf(TaskScreenState())
        private set

    private var eventChannel = Channel<TaskEvent>()
    val event = eventChannel.receiveAsFlow()
    private val canSaveTask = snapshotFlow { state.taskName.text.toString() }

    private var editedTask: Task? = null
    init {

        taskId?.let{
            viewModelScope.launch {
                val task = fakeTaskLocalDataSource.getTaskById(it)
                editedTask = task
                state = state.copy(
                    taskName = TextFieldState(task?.title?: ""),
                    taskDescription = TextFieldState(task?.description?: ""),
                    isTaskDone = task?.isCompleted?:false,
                    category = task?.category
                )
            }
        }

        canSaveTask.onEach {
            state = state.copy(canSaveTask = it.isNotEmpty())
        }.launchIn(viewModelScope)
    }

    fun onAction(action: ActionTask) {
        viewModelScope.launch {
            when (action) {

                is ActionTask.ChangeTaskCategory -> {
                    state = state.copy(category = action.category,)
                }
                is ActionTask.ChangeTaskDone -> {
                    state = state.copy(isTaskDone = action.isTaskDone,)
                }
                is ActionTask.SaveTask -> {
                    editedTask?.let {
                        fakeTaskLocalDataSource.updateTask(
                            updatedTask = it.copy(
                                id = it.id,
                                title = state.taskName.text.toString(),
                                description = state.taskDescription.text.toString(),
                                isCompleted = state.isTaskDone,
                                category = state.category
                            )
                        )
                    }?:run{
                        val task= Task(
                            id = UUID.randomUUID().toString(),
                            title = state.taskName.text.toString(),
                            description = state.taskDescription.text.toString(),
                            isCompleted = state.isTaskDone,
                            category = state.category
                        )
                        fakeTaskLocalDataSource.addTask(
                            task = task
                        )
                    }

                    eventChannel.send(TaskEvent.TaskCreated)
                }
                else -> Unit
            }
        }
    }
}

esta fue mi solucion y funciona excelente.

Edición de Tareas en Aplicaciones: Navegación y Manejo de ID

Introducción a Jetpack Compose

Desarrollo de Apps Android con Jetpack Compose

Clonación y Configuración Inicial de Proyecto en Android Studio

Personalización de la UI con Material Design

Diseño de Temas en Android con Material 3: Colores y Tipografía

Construcción de Interfaces con Composables en Android

Optimización de la Reposición en Interfaces con Jetpack Compose

Composición de layouts en Jetpack Compose

Modelado de Tareas y Operaciones CRUD en Kotlin

Creación de Componentes UI en Jetpack Compose: Summary y Task Item

Creación de una Pantalla con Componentes en Jetpack Compose

Creación de un Arco de Progreso Animado en Compose

Gestión de Acciones y Estados en ViewModel de Android

Formateo y Ajustes Finales en Pantalla Home de To Do App

Construcción de funcionalidades

Formulario de Creación de Tareas en Kotlin

Creación de un ViewModel para Gestión de Tareas en Pantalla

Navegación en Jetpack Compose

Navegación en Android con Nav Host Controller y Ordenamiento de Tareas