Spring Boot Aplicacion Web Parte 7.

Eliminar Usuario

En realidad sera bien sencillo este proceso ya que sabemos como pasar el id del usuario en la url. Una vez eliminado solo necesitamos recargar la pagina para reflejar el cambio en la tabla.

Contenido

1. Crear metodo Get.
2. Crear Servicio para eliminar usuario.
3. Actualizar HTML
4. Git Commit.
5. Video Paso a Paso

1.Crear método Get.

Necesitamos recibir como parametro el id del usuario que queremos eliminar en la url, de esta manera /deleteUser/{id}. Ademas necesitaremos validar si ese Id es valido.

UserController.java

@GetMapping("/deleteUser/{id}")
	public String deleteUser(Model model, @PathVariable(name="id") Long id) {
		try {
			userService.deleteUser(id);
		} catch (Exception e) {
			model.addAttribute("deleteError","The user could not be deleted.");
		}
		return getUserForm(model);
	}

Obviamente tendras error en el try, porque ese metodo todavia no existe, vamos a crearlos.

2.Crear Servicio para eliminar usuario.

UserService.java

public void deleteUser(Long id) throws Exception;

UserServiceImpl.java

	public void deleteUser(Long id) throws Exception {
		User user = userRepository.findById(id)
				.orElseThrow(() -> new Exception("UsernotFound in deleteUser -"+this.getClass().getName()));

		userRepository.delete(user);
	}

3.Actualizar HTML

Necesitamos agregar un dialogo de confirmacion, para darle la oportunidad al usuario de cambiar de opinion o si fue un error.
Agrega el siguiente javascript y asegurate que el link en la tabla llame la funcion.

Crear un nuevo archivo para el dialogo de confirmacion llamado “confirm-delete-dialog.html” en la carpeta de templates > user-form

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Confirm Delete</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this user?
        <input type="hidden" id="userIdHiddenInput" name="userIdHiddenInput"/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" th:onclick="deleteUser()">Delete User</button>
      </div>
    </div>
  </div>
</div>

user-view.html

Agrega el include antes de cerrar el body. Si lo pones dentro del div#container lo mas probable es que quede detras del escudo modal.

...<div th:include="user-form/confirm-delete-modal.html" th:remove="tag"></div>
</body>

user-list.html

<script type="text/javascript">
function confirmDelete(id){
	$('#deleteModal').modal('show');
	$("#userIdHiddenInput").val(id);
}

function deleteUser(){
	var id = $("#userIdHiddenInput").val();
    window.location = "deleteUser/"+id;
}
</script>

Ademas agregaremos un lugar donde se pueda mostrar errores como resultado de la accion delete.

<div id="deleteError" th:if="${deleteError}" class="alert alert-danger text-center" role="alert">
	<span th:text="${deleteError}"></span>
</div>

4.Git Commit

Github Repository

https://github.com/cruizg93/Spring-Boot-Web-Application/commit/7d75446b714785e949e235ccf0763337771bd7cc

5.Video Paso a Paso

Menu

1. Setup
2. Entidades y POJOS
3. Basic HTML
4. Lista de Usuarios
5. Crear Usuario y Validar Campos
6. Editar Usuario
7. Eliminar Usuario
8. Cambiar Contraseña
9. Spring Security
10. Paginas de Error
11. Bonus, Arreglando Cositas
12. Formulario de registro
13. Despliegue en Heroku

Gracias por llegar al final de este post.
No se te olvide dejar tus comentario o preguntas aca abajo o en mi twitter @Cruizg93