diff --git a/my-app/src/App.js b/my-app/src/App.js
index 364b860985298851a8a38ef52ac289d694a512bd..bf5069ab5d20680996f03330a3efd7083db582c7 100644
--- a/my-app/src/App.js
+++ b/my-app/src/App.js
@@ -7,7 +7,6 @@ import UserManagement from './components/UserManagement';
import CreateNewUserForm from './components/CreateNewUser';
import { connect } from 'react-redux';
import { Routes, Route, Navigate } from 'react-router-dom';
-import EditUser from './components/EditUser';
const mapStateToProps = state => {
@@ -25,7 +24,6 @@ class App extends Component {
<Route path="/" element={<PrivatePage />}></Route>
<Route exact path="/userManagement" element={<UserManagement />}></Route>
<Route path='/createNewUserForm' element={<CreateNewUserForm />}></Route>
- <Route path='/editUserForm' element={<EditUser />}></Route>
<Route path='*' element={<Navigate to="/" />}></Route>
</Routes>
} else {
diff --git a/my-app/src/actions/UserManagementActions.js b/my-app/src/actions/UserManagementActions.js
index 2e5c7db88a33b440d731e15657c88b0a9e50c210..74c27d23234bf38cd2e1165de81000ee943fb684 100644
--- a/my-app/src/actions/UserManagementActions.js
+++ b/my-app/src/actions/UserManagementActions.js
@@ -78,16 +78,14 @@ export function getCreateNewUserErrorAction(error) {
export function getEditUserSuccessAction(editUserData) {
console.log("GetEditUserSuccessAction")
return {
- type: EDIT_USER_SUCCESS,
- editUserData: editUserData
+ type: EDIT_USER_SUCCESS
}
}
-export function getEditUserErrorAction(editUserData) {
+export function getEditUserErrorAction() {
console.log("GetEditUserSuccessAction")
return {
- type: EDIT_USER_ERROR,
- editUserData: editUserData
+ type: EDIT_USER_ERROR
}
}
@@ -116,16 +114,21 @@ export function displayUsers(token) {
}
}
-export function editingUserWithID(userID, token) {
+export function editUserWithID(updateData, userID, token) {
console.log("editing user")
return dispatch => {
dispatch(getEditUserSuccessAction());
- getOneUser(userID, token)
+ updateUser(updateData, userID, token)
.then(user => {
console.log(user)
const action = getEditUserSuccessAction(user)
dispatch(action);
+ getAllUsers(token)
+ .then(users => {
+ const action = getAllUsersAction(users)
+ dispatch(action)
+ })
},
error => {
dispatch(getEditUserErrorAction(error));
@@ -279,3 +282,28 @@ export function deleteUser(userID, token) {
})
}
+
+export function updateUser(updateData, userID, token) {
+ console.log("updating user with id: " + userID)
+ console.log(userID)
+ console.log(updateData)
+ const requestOptions = {
+ method: 'PUT',
+ headers: {
+ 'Authorization': token,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(updateData)
+ }
+
+ return fetch(`https://localhost/api/users/${userID}`, requestOptions)
+ .then(response => {
+ console.log(response)
+ return response.json().then(body => {
+ if (response.status === 200) {
+ console.log(body)
+ return body
+ }
+ })
+ })
+}
diff --git a/my-app/src/components/CreateNewUser.js b/my-app/src/components/CreateNewUser.js
index bd98e665f7a331fd0fe5599826fab6da3e7a4482..a3c3d97a89d5cebf5cd1dd806e6527dcc7261c7e 100644
--- a/my-app/src/components/CreateNewUser.js
+++ b/my-app/src/components/CreateNewUser.js
@@ -1,6 +1,7 @@
import React, { Component } from "react";
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
+import Button from "react-bootstrap/esm/Button";
import { connect } from "react-redux";
import { LinkContainer } from "react-router-bootstrap";
@@ -40,11 +41,12 @@ class CreateNewUserForm extends Component {
console.log(JSON.stringify(this.state))
}
- handleSubmit(e) {
+ async handleSubmit(e) {
e.preventDefault();
const { createNewUserAction } = this.props;
- createNewUserAction(this.state, this.props.accessToken)
console.log("user sollte angelegt werden")
+ this.props.goBack()
+ await createNewUserAction(this.state, this.props.accessToken)
}
render() {
@@ -77,14 +79,9 @@ class CreateNewUserForm extends Component {
<Form.Group className="mb-3">
<Form.Check id="CreateUserComponentEditIsAdministrator" name="isAdministrator" type="checkbox" label="Administrator-Rechte" onChange={this.handleChange} />
</Form.Group>
- <LinkContainer id="CreateUserComponentCreateUserButton" to="/userManagement">
- <Nav.Link id="CreateUserComponentCreateUserButton" >
- {/* <Button id="CreateUserComponentCreateUserButton" variant="primary" type="submit" onClick={this.handleSubmit}>
- Anlegen
- </Button> */}
- Anlegen
- </Nav.Link>
- </LinkContainer>
+ <Button id="CreateUserComponentCreateUserButton" variant="primary" type="submit" onClick={this.handleSubmit}>
+ Anlegen
+ </Button>
</Form>
</div >
)
diff --git a/my-app/src/components/EditUser.js b/my-app/src/components/EditUser.js
index bc691f8ac760c57aea403a6615c5a1ef7477510d..3761259009243906bef1f8ad8cc0d4075f0dc8c3 100644
--- a/my-app/src/components/EditUser.js
+++ b/my-app/src/components/EditUser.js
@@ -1,15 +1,59 @@
import React, { Component } from "react";
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+
+import * as userManagementActions from '../actions/UserManagementActions'
+
+const mapStateToProps = state => {
+ return state;
+}
class EditUser extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ userID: '',
+ firstName: '',
+ lastName: '',
+ password: '',
+ isAdministrator: this.props.editUser.isAdministrator
+ }
+ this.handleChange = this.handleChange.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+ }
+
+ handleChange(e) {
+ const { name, value } = e.target;
+ if (name === 'isAdministrator') {
+ if (e.target.checked) {
+ this.setState({ [name]: true })
+ } else {
+ this.setState({ [name]: false })
+ }
+ } else {
+ this.setState({ [name]: value })
+ }
+ console.log(JSON.stringify(this.state))
+ }
+
+ handleSubmit(e) {
+ e.preventDefault()
+ const { editUserWithIDAction } = this.props
+ editUserWithIDAction(this.state, this.props.editUser.userID, this.props.accessToken)
+ }
+
+
+
render() {
return (
<div id="UserManagementPageEditComponent" style={{ display: 'flex', justifyContent: 'center', textAlign: 'left' }}>
<Form style={{ width: '60rem' }}>
<Form.Group className="mb-3">
<Form.Label>User-ID</Form.Label>
- <Form.Control id="EditUserComponentEditUserID" type="text" disabled="true" />
+ <Form.Control name="userID" id="EditUserComponentEditUserID" type="text" disabled={true} defaultValue={this.props.editUser.userID} />
<Form.Text className="text-muted">
Die User-ID kann nicht geändert werden.
</Form.Text>
@@ -17,32 +61,40 @@ class EditUser extends Component {
<Form.Group className="mb-3">
<Form.Label>Vorname</Form.Label>
- <Form.Control id="EditUserComponentEditFirstName" type="text" placeholder="Bitte Vornamen eingeben" />
+ <Form.Control name="firstName" id="EditUserComponentEditFirstName" type="text" placeholder="Bitte Vornamen eingeben" defaultValue={this.props.editUser.firstName} onChange={this.handleChange} />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Nachname</Form.Label>
- <Form.Control id="EditUserComponentEditLastName" type="text" placeholder="Bitte Nachnamen eingeben" />
+ <Form.Control name="lastName" id="EditUserComponentEditLastName" type="text" placeholder="Bitte Nachnamen eingeben" defaultValue={this.props.editUser.lastName} onChange={this.handleChange} />
</Form.Group>
- <Form.Group className="mb-3" controlId="formBasicPassword">
+ <Form.Group className="mb-3">
<Form.Label>Passwort</Form.Label>
- <Form.Control id="EditUserComponentEditPassword" type="password" placeholder="Bitte Passwort eingeben" />
+ <Form.Control name="password" id="EditUserComponentEditPassword" type="password" placeholder="Passwort" onChange={this.handleChange} />
<Form.Text className="text-muted">
Wenn das Passwort gesetzt wird, wird es im Backend geändert!
</Form.Text>
</Form.Group>
- <Form.Group className="mb-3" controlId="formBasicCheckbox">
- <Form.Check id="EditUserComponentEditIsAdministrator" type="checkbox" label="Administrator-Rechte" style={{color: '#0eb30e'}} />
+ <Form.Group className="mb-3">
+ <Form.Check name="isAdministrator" id="EditUserComponentEditIsAdministrator" type="checkbox" label="Administrator-Rechte" style={{ color: '#0eb30e' }} defaultChecked={this.props.editUser.isAdministrator} />
</Form.Group>
- <Button id="OpenUserManagementPageListComponentButton" variant="primary" type="submit">
+ <Button id="OpenUserManagementPageListComponentButton" variant="primary" type="submit" onClick={this.handleSubmit}>
Speichern
</Button>
+ <Button id="backToList" variant="primary" type="submit" onClick={this.props.goBack}>
+ User-Liste
+ </Button>
</Form>
</div >
)
}
}
-export default EditUser
\ No newline at end of file
+const mapDispatchToProps = dispatch => bindActionCreators({
+ editUserWithIDAction: userManagementActions.editUserWithID
+}, dispatch)
+
+const ConnectedEditUser = connect(mapStateToProps, mapDispatchToProps)(EditUser)
+export default ConnectedEditUser
\ No newline at end of file
diff --git a/my-app/src/components/UserItem.js b/my-app/src/components/UserItem.js
index ade9a608afd7e730dc82108ec46a06118a620280..7d143f03f8fa646ed28801d1858af8a27964d931 100644
--- a/my-app/src/components/UserItem.js
+++ b/my-app/src/components/UserItem.js
@@ -6,6 +6,9 @@ import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import DeleteUserModal from './DeleteUserModal'
import EditUser from './EditUser'
+import CreateNewUser from './CreateNewUser'
+import { LinkContainer } from "react-router-bootstrap";
+import Nav from 'react-bootstrap/Nav';
import * as userManagementActions from '../actions/UserManagementActions'
@@ -16,7 +19,8 @@ const mapStateToProps = state => {
const DISPLAY = {
LIST: "list",
- EDIT: "edit"
+ EDIT: "edit",
+ CREATE: "create"
}
class UserItem extends Component {
@@ -29,6 +33,8 @@ class UserItem extends Component {
this.MapAllUsers = this.MapAllUsers.bind(this);
this.handleShowDeleteModal = this.handleShowDeleteModal.bind(this);
this.handleClose = this.handleClose.bind(this);
+ this.handleSwitchToList = this.handleSwitchToList.bind(this);
+ this.handleShowCreatePage = this.handleShowCreatePage.bind(this);
}
handleShowDeleteModal(e, dialogModalData) {
@@ -37,16 +43,25 @@ class UserItem extends Component {
showDeleteUserModalAction(dialogModalData)
}
- handleShowEditPage(e, userID) {
+ handleShowEditPage(e) {
e.preventDefault();
this.setState({ displayingPage: DISPLAY.EDIT })
}
+ handleShowCreatePage(e) {
+ e.preventDefault();
+ this.setState({ displayingPage: DISPLAY.CREATE })
+ }
+
handleClose() {
const { hideDeleteUserModalAction } = this.props;
hideDeleteUserModalAction();
}
+ handleSwitchToList(e) {
+ this.setState({ displayingPage: DISPLAY.LIST })
+ }
+
MapAllUsers() {
const allUsers = this.props.userList
if (allUsers) {
@@ -71,26 +86,28 @@ class UserItem extends Component {
switch (this.state.displayingPage) {
case DISPLAY.LIST:
return (
- <div key={user.userID}>
- <DeleteUserModal />
- <Card style={{ width: "18rem", background: '#ebebeb' }} id={itemID}>
- <Card.Header>{user.firstName} {user.lastName}</Card.Header>
- <ListGroup variant="flush">
- <ListGroup.Item >User ID: {user.userID}</ListGroup.Item>
- <ListGroup.Item >First Name: {user.firstName}</ListGroup.Item>
- <ListGroup.Item >Last Name: {user.lastName}</ListGroup.Item>
- </ListGroup>
- <Card.Footer style={{ display: 'flex', justifyContent: 'space-evenly' }}>
- <Button variant="primary" onClick={(e) => this.handleShowEditPage(e, currentUserID)} id={editButtonID} >Edit</Button>
- <Button variant="primary" type="submit" onClick={(e) => this.handleShowDeleteModal(e, dialogData)} id={deleteButtonID} style={{ background: '#ffc800', color: 'black', border: 'none' }}>
- Delete
- </Button>
- </Card.Footer>
- </Card>
- </div>
+ <div key={user.userID}>
+ <DeleteUserModal />
+ <Card style={{ width: "18rem", background: '#ebebeb' }} id={itemID}>
+ <Card.Header>{user.firstName} {user.lastName}</Card.Header>
+ <ListGroup variant="flush">
+ <ListGroup.Item >User ID: {user.userID}</ListGroup.Item>
+ <ListGroup.Item >First Name: {user.firstName}</ListGroup.Item>
+ <ListGroup.Item >Last Name: {user.lastName}</ListGroup.Item>
+ </ListGroup>
+ <Card.Footer style={{ display: 'flex', justifyContent: 'space-evenly' }}>
+ <Button variant="primary" onClick={(e) => this.handleShowEditPage(e, currentUserID)} id={editButtonID} >Edit</Button>
+ <Button variant="primary" type="submit" onClick={(e) => this.handleShowDeleteModal(e, dialogData)} id={deleteButtonID} style={{ background: '#ffc800', color: 'black', border: 'none' }}>
+ Delete
+ </Button>
+ </Card.Footer>
+ </Card>
+ </div>
)
case DISPLAY.EDIT:
- return (<EditUser />)
+ return (<EditUser goBack={this.handleSwitchToList} editUser={user} />)
+ case DISPLAY.CREATE:
+ return (<CreateNewUser goBack={this.handleSwitchToList} />)
default:
return null
}
@@ -101,7 +118,10 @@ class UserItem extends Component {
render() {
return (
- <div>
+ <div >
+ <Button onClick={this.handleShowCreatePage}>
+ <img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img>
+ </Button>
{this.MapAllUsers()}
</div>
)
@@ -110,8 +130,7 @@ class UserItem extends Component {
const mapDispatchToProps = dispatch => bindActionCreators({
showDeleteUserModalAction: userManagementActions.getShowDeleteUserModalAction,
- hideDeleteUserModalAction: userManagementActions.getHideDeleteUserModalAction,
- passEditUserData: userManagementActions.editingUserWithID
+ hideDeleteUserModalAction: userManagementActions.getHideDeleteUserModalAction
}, dispatch)
const ConnectedUserItems = connect(mapStateToProps, mapDispatchToProps)(UserItem)
diff --git a/my-app/src/components/UserManagement.js b/my-app/src/components/UserManagement.js
index 92f843097be071818e1e29b2dd63587c60ed8ff7..49a9bbc730e95c907bce4d283cabd9c650acceb6 100644
--- a/my-app/src/components/UserManagement.js
+++ b/my-app/src/components/UserManagement.js
@@ -1,16 +1,13 @@
import React, { Component } from "react";
import UserItem from "./UserItem";
-import { LinkContainer } from "react-router-bootstrap";
-import Nav from 'react-bootstrap/Nav';
+
class UserManagement extends Component {
render() {
return (
<div>
<div id="userManagementPage" style={{ height: '50vw', backgroundColor: '#2b3648', padding: '10rem', display: 'flex', justifyContent: 'center' }}>
- <LinkContainer to="/createNewUserForm" id="UserManagementPageCreateComponent">
- <Nav.Link><img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img></Nav.Link>
- </LinkContainer>
+
<UserItem />
</div>
</div>