diff --git a/frontend/src/components/users/UserEditForm.tsx b/frontend/src/components/users/UserEditForm.tsx index b2114fb..06b0c4f 100644 --- a/frontend/src/components/users/UserEditForm.tsx +++ b/frontend/src/components/users/UserEditForm.tsx @@ -1,4 +1,4 @@ -import {useState} from "react"; +import {useEffect, useState} from "react"; import type {UserDto} from "../../api/dtos/UserDto"; import Button from "../basics/Button"; import {ButtonType} from "../basics/BasicButtonDefinitions"; @@ -33,6 +33,21 @@ export default function UserEditForm({ const [confirmPassword, setConfirmPassword] = useState(""); const [passwordError, setPasswordError] = useState(""); + /** + * React to changes in selected user. + * + * When a new user is selected, the edit user must be updated and password fields as well as error messege + * must be reset. + */ + useEffect(() => { + setEditedUser({...user}); + setPassword(""); + setConfirmPassword(""); + setPasswordError(""); + }, [user]); + /** + * Calls on save after validating passwords for new user. + */ const handleSave = async () => { if (!editedUser.id) { // New user - validate passwords @@ -52,7 +67,9 @@ export default function UserEditForm({ } }; - // @todo API string + /** + * All available roles + */ const roleOptions = UserRoleHelper.getRoleOptions(); return ( diff --git a/frontend/src/components/users/UserList.tsx b/frontend/src/components/users/UserList.tsx index c888a0a..51f705e 100644 --- a/frontend/src/components/users/UserList.tsx +++ b/frontend/src/components/users/UserList.tsx @@ -11,6 +11,7 @@ type UserListProps = { * UserList - Displays a list of users with selection */ export default function UserList({users, selectedUser, onSelectUser}: UserListProps) { + const formatUserName = (user: UserDto) => { const parts = []; if (user.lastName) parts.push(user.lastName); @@ -29,7 +30,10 @@ export default function UserList({users, selectedUser, onSelectUser}: UserListPr "px-4 py-3 cursor-pointer hover:bg-gray-200 transition-colors border-b border-gray-300", selectedUser?.id === user.id && "bg-blue-100 hover:bg-blue-200" )} - onClick={() => onSelectUser(user)} + onClick={() => { + console.log("selecting user", user.userName); + onSelectUser(user) + }} >