Eliminar Rodadas

¿Cómo eliminar una rodada de la aplicación de programación?

Eliminar una rodada de una aplicación puede parecer una tarea sencilla, pero tiene sus particularidades, especialmente si la acción de eliminar es irreversible, como en este caso. A lo largo de este contenido, veremos cómo modificar el código de una aplicación para añadir la funcionalidad de eliminar, asegurando todas las medidas necesarias para hacerlo de forma segura y comprensible.

¿Dónde hacer los cambios iniciales en el código?

Para comenzar, debemos ubicar el archivo donde se encuentran los botones de interacción con el usuario. En este caso, el archivo raiz.html es el adecuado. Dentro de él, tenemos un botón para editar, que utilizaremos como base para crear el botón de eliminar.

1. Copiar y modificar el botón de editar:
   • Cambiar el texto de "editar" a "eliminar".
   • Modificar el icono para que represente una acción de eliminación.
   • Asignar un color rojo al botón para dar un indicativo visual de peligro o acción irreversible.

<!-- Botón eliminar modificado -->
<button @click="deleteRide(ride.id)" style="color: red;">
  <i class="icon-trash"></i> Eliminar
</button>

¿Cómo implementar el método para eliminar?

Una vez preparado el botón, es momento de implementar la funcionalidad que gestionará la eliminación de la rodada. Añadimos un método llamado deleteRide.

1. Implementar el método deleteRide: Se hace en el archivo raiz.js llamando a un servicio de eliminación que desarrollaremos a continuación.

methods: {
  deleteRide(rideId) {
    this.rideService.deleteRide(rideId).subscribe({
      next: () => {
        alert('Rodada eliminada con éxito');
        this.refreshRideList();
      },
      error: (err) => {
        console.error('Error al eliminar la rodada: ', err);
        alert('No se pudo eliminar la rodada');
      }
    });
  }
}

¿Cómo crear el servicio de eliminación?

Llevamos la lógica un paso más allá implementando un servicio que se encargará de hacer la solicitud al servidor para eliminar la rodada.

1. Crear el servicio deleteRide: Se define en ride.service.js, y se encarga de enviar la petición DELETE al servidor.

class RideService {
  deleteRide(id) {
    return axios.delete(`/api/rides/${id}`);
  }
}

¿Por qué añadir una confirmación antes de eliminar?

La funcionalidad de eliminar debe incorporar una confirmación para evitar eliminaciones accidentales, ya que esta acción es irreversible. Aquí recomendamos la implementación de un modal que pregunte al usuario si realmente desea eliminar la rodada.

1. Agregar un modal de confirmación:
   • Preguntar al usuario si está seguro de eliminar la rodada.
   • Continuar con la eliminación o cancelar según la respuesta del usuario.

Este enfoque no solo mejora la experiencia del usuario, sino que reduce el riesgo de errores irreversibles al brindar una capa adicional de seguridad. Al implementar estas funcionalidades, logramos una aplicación más robusta y amigable.