Menu

Spring Boot Aplicacion Web Parte 6.

0 Comment


Actualizar Usuario

Explicare el flujo que necesitamos seguir para poder conseguir actualizar nuestro usuario.

Primero necesitamos cargar la información existente de nuestro usuario en el formulario, eso lo vamos hacer al pulsar el icono de editar en la lista de usuarios en el HTML. Pero obviamente no queremos actualizar el password de un usuario cada vez que algún dato se modifico por lo cual esconderemos el campo de password y confirmar password.

Luego recibiremos la nueva informacion en nuestro controlador y tendremos que volver a buscar el usuario en la base de datos para poder tener una transaccion abierta, luego mapeamos los datos del usuario que viene del formulario dentro del usuario encontrado y listo, Hibernate se encargara de hacer el update.

En caso de que se quiera editar el username de una usuario se necesitara validar la disponibilidad de ese nuevo username.


Contenido

  • 1.Crear metodo get.
  • 2.Activar modoEdit en HTML.
  • 3.Crear metodo Post.
  • 4.Crear servicio para actualizar usuario.
  • 5.Cancelar edicion.
  • 6.Git Commit.

1.Crear metodo get.

Necesitamos recibir como parametro el id del usuario que queremos editar en la url, de esta manera /editUser/{id}.

Tambien crearemos un servicio para consultar el usuario correspondiente y para finalizar retornamos los mismo valores en el modelo como lo hicimos en el metodo getUserForm, pero en vez de asignar new User(), asignamos el usuario consultado.

UserService.java

User getUserById(Long id) throws Exception 
Java

UserServiceImpl.java

@Override
	public User getUserById(Long id) throws Exception {
		User user = userRepository.findById(id).orElseThrow(() -> new Exception("User does not exist"));
		return user;
	}
Java

UserController.java

@GetMapping("/editUser/{id}")
	public String getEditUserForm(Model model, @PathVariable(name="id") Long id) throws Exception {
		User user = userService.getUserById(id);
		
		model.addAttribute("userList", userService.getAllUsers());
		model.addAttribute("roles",roleRepository.findAll());
		model.addAttribute("userForm", user);
		model.addAttribute("formTab","active");//Activa el tab del formulario.
		
		model.addAttribute("editMode",true);//Mira siguiente seccion para mas informacion
		
		return "user-form/user-view";
	}
Java

user-view.html

Busca los enlaces de las pestañas y los divs con id list y form, asegurate de agregar el atributo de thymeleaf th:classapend, como lo hacemos mas abajo.

Recuerda que con cada llamado al controlador se recarga la pagina por lo mismo la pestana del div list sera siempre mostrada por defecto y con esto podemos dinamicamente seleccionar la pestaña que necesitemos.

<a class="nav-link" th:classappend=" ${listTab}" id="list-tab" data-toggle="tab" href="#list" role="tab" aria-controls="list" aria-selected="false">List</a>
<div class="tab-pane fade" th:classappend="${listTab}" id="list" role="tabpanel" aria-labelledby="list-tab">


<a class="nav-link" th:classappend=" ${formTab}" id="form-tab" data-toggle="tab" href="#form" role="tab" aria-controls="form" aria-selected="true">Form</a> <div class="tab-pane fade" th:classappend="${formTab}" id="form" role="tabpanel" aria-labelledby="form-tab">

2.Activar modoEdit en HTML

Algo que hay que tener claro es que podemos reutilizar el formulario de crear usuarios para editar usuarios.

En nuestro caso yo no quiero alctualizar el password cada vez que cambie algun dato del usuario, por lo cual tenemos que esconder ese campo, ademas renombraremos el texto del boton y cambiaremos el th:action del formulario.

Para lograr lo anterior descrito activaremos el modo de edicion en nuestro pantalla, enviando desde el controlador el atributo “editMode” verdadero (model.addAttribute("editMode",true);). Y verificando esa variable en el html.

user-form.html

<form id="userForm" th:object="${userForm}" method="post" class="form" role="form" th:action="${editMode}?@{/editUser}:@{/userForm}">

<!--Es necesario para poder pasar la validacion del Model-->
<input class="form-control" type=hidden th:field="${userForm.password}" th:if="${editMode}">

<!--Form group del campo password y condfirm password -->
<div class="form-group row" th:if="${editMode==null or editMode==false}">

<input type="submit" class="btn btn-primary" value="Create User" th:value="${editMode}?'Save User':'Create User'">

3.Crear metodo Post.

UserController.java

@PostMapping("/editUser")
	public String postEditUserForm(@Valid @ModelAttribute("userForm")User user, BindingResult result, ModelMap model) {
		try {
			if(result.hasErrors()) {
				model.addAttribute("userForm", user);
				model.addAttribute("formTab","active");
			}else {
				userService.updateUser(user);
			}
		} catch (Exception e) {
			model.addAttribute("editMode",true);
			model.addAttribute("userForm", user);
			model.addAttribute("formTab","active");
		} 
		return "redirect:/userForm";
	}

4.Crear servicio para actualizar usuario.

UserService.java

public User updateUser(User formUser) throws Exception;
Java

UserServiceImpl.java

public User updateUser(User formUser) throws Exception {
		
		User storedUser = userRepository.findById(formUser.getId())
				.orElseThrow(() -> new Exception("UsernotFound in updateUser -"+this.getClass().getName()));
		
		
		mapUser(formUser,storedUser);
		userRepository.save(storedUser);
		
		return storedUser;
	}
	
	protected void mapUser(User from,User to) {
		to.setUsername(from.getUsername());
		to.setFirstName(from.getFirstName());
		to.setLastName(from.getLastName());
		to.setEmail(from.getEmail());
		to.setRoles(from.getRoles());
		to.setPassword(from.getPassword());
	}
Java

5.Cancel Action

UserController.java

@GetMapping("/editUser/cancel")
	public String cancelEditUser(ModelMap model) {
		return "redirect:/userForm";
	}

user-form.html

<div class="form-group row">
		<div class="col-lg-12 text-center">
			<a class="btn btn-secondary"  th:href="@{'/editUser/cancel'}">Cancel</a>
			<input type="submit" class="btn btn-primary" value="Create User" th:value="${editMode}?'Save User':'Create User'">
		</div>
	</div>

6.Git Commit

Como el post anterior, les muestro la imagen del commit, recuerda que Github necesita que el final del commit sea “Close #7”, para poder mover tu tarea automaticamente a estado “Done”.

Github Repository

https://github.com/cruizg93/Spring-Boot-Web-Application/commit/3fdef5057d03a65c22f9a805f18383290520e1bc

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

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *