Skip to content

Commit 995fbda

Browse files
merikbestmerikbest
committed
Added create and update employee methods.
Added React components create-employee.jsx and update-employee.jsx
1 parent 7cbfd35 commit 995fbda

File tree

8 files changed

+410
-23
lines changed

8 files changed

+410
-23
lines changed

‎react-frontend/package-lock.json‎

Lines changed: 96 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎react-frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"react": "^16.14.0",
1010
"react-dom": "^16.14.0",
1111
"react-scripts": "3.4.3",
12+
"react-router-dom": "^5.2.0",
1213
"bootstrap": "^4.5.3",
1314
"axios": "0.20.0"
1415
},

‎react-frontend/src/components/app/app.js‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
import React, {Component} from 'react';
2-
import ListEmployees from "../list-employees/list-employees.jsx";
2+
import ListEmployees from "../employees-components/list-employees.jsx";
33
import "./app.css"
44
import Header from "../parts/header";
55
import Footer from "../parts/footer";
6+
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
7+
import CreateEmployee from "../employees-components/create-employee";
8+
import UpdateEmployee from "../employees-components/update-employee";
69

710
class App extends Component {
811
render() {
912
return (
1013
<div>
11-
<Header/>
12-
<div className="container">
13-
<ListEmployees/>
14-
</div>
15-
<Footer/>
14+
<Router>
15+
<Header/>
16+
<div className="container">
17+
<Switch>
18+
<Route path="/" component={ListEmployees} exact />
19+
<Route path="/employees" component={ListEmployees} exact/>
20+
<Route path="/employees/add" component={CreateEmployee} exact/>
21+
<Route path="/employees/update/:id" component={UpdateEmployee} exact/>
22+
</Switch>
23+
</div>
24+
<Footer/>
25+
</Router>
1626
</div>
1727
);
1828
}

‎react-frontend/src/components/employees-components/create-employee.jsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React, {Component} from 'react';
2+
import EmployeeService from "../../services/employee-service";
3+
4+
class CreateEmployee extends Component {
5+
6+
constructor(props) {
7+
super(props);
8+
9+
this.state = {
10+
firstName: "",
11+
lastName: "",
12+
email: ""
13+
}
14+
15+
this.changeFirstNameHandler = this.changeFirstNameHandler.bind(this);
16+
this.changeLastNameHandler = this.changeLastNameHandler.bind(this);
17+
this.changeEmailHandler = this.changeEmailHandler.bind(this);
18+
this.saveEmployee = this.saveEmployee.bind(this);
19+
}
20+
21+
changeFirstNameHandler(event) {
22+
this.setState({firstName: event.target.value})
23+
}
24+
25+
changeLastNameHandler(event) {
26+
this.setState({lastName: event.target.value})
27+
}
28+
29+
changeEmailHandler(event) {
30+
this.setState({email: event.target.value})
31+
}
32+
33+
saveEmployee = (event) => {
34+
event.preventDefault();
35+
36+
let employee = {
37+
firstName: this.state.firstName,
38+
lastName: this.state.lastName,
39+
email: this.state.email
40+
};
41+
42+
EmployeeService.createEmployee(employee)
43+
.then((response) => {
44+
this.props.history.push("/employees")
45+
});
46+
}
47+
48+
cancel() {
49+
this.props.history.push("/employees");
50+
}
51+
52+
// onChange = (event) => {
53+
// const {name, value} = event.target;
54+
//
55+
// this.setState({
56+
// [name]: value
57+
// })
58+
// }
59+
60+
render() {
61+
return (
62+
<div>
63+
<div className="container">
64+
<div className="row">
65+
<div className="card col-md-6 offset-md-3 offset-md-3">
66+
<h3 className="text-center">Add Employee</h3>
67+
<div className="card-body">
68+
<form action="">
69+
<div className="form-group">
70+
<label>First Name</label>
71+
<input placeholder="first name"
72+
name="firstName"
73+
className="form-control"
74+
value={this.state.firstName}
75+
onChange={this.changeFirstNameHandler}/>
76+
</div>
77+
<div className="form-group">
78+
<label>Last Name</label>
79+
<input placeholder="last name"
80+
name="lastName"
81+
className="form-control"
82+
value={this.state.lastName}
83+
onChange={this.changeLastNameHandler}/>
84+
</div>
85+
<div className="form-group">
86+
<label>Email</label>
87+
<input placeholder="email"
88+
name="email"
89+
className="form-control"
90+
value={this.state.email}
91+
onChange={this.changeEmailHandler}/>
92+
</div>
93+
<button className="btn btn-success" onClick={this.saveEmployee}>Save</button>
94+
<button className="btn btn-danger" onClick={this.cancel.bind(this)}
95+
style={{marginLeft: "10px"}}>Cancel
96+
</button>
97+
</form>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
);
104+
}
105+
}
106+
107+
export default CreateEmployee;

react-frontend/src/components/list-employees/list-employees.jsx renamed to react-frontend/src/components/employees-components/list-employees.jsx

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ class ListEmployees extends Component {
88
this.state = {
99
employees: []
1010
}
11+
12+
this.addEmployee = this.addEmployee.bind(this);
13+
this.editEmployee = this.editEmployee.bind(this);
1114
}
1215

1316
componentDidMount() {
@@ -17,13 +20,23 @@ class ListEmployees extends Component {
1720
});
1821
}
1922

23+
addEmployee() {
24+
this.props.history.push("/employees/add")
25+
}
26+
27+
editEmployee(id) {
28+
this.props.history.push(`/employees/update/${id}`)
29+
}
30+
2031
render() {
2132
return (
2233
<div>
2334
<h2 className="text-center">Employees List</h2>
35+
<div className="row">
36+
<button className="btn btn-primary" onClick={this.addEmployee}>Add Employee</button>
37+
</div>
2438
<div className="row">
2539
<table className="table table-striped table-bordered">
26-
2740
<thead>
2841
<tr>
2942
<th> Employee First Name</th>
@@ -33,18 +46,19 @@ class ListEmployees extends Component {
3346
</tr>
3447
</thead>
3548
<tbody>
36-
{
37-
this.state.employees.map(
38-
employee =>
39-
<tr key = {employee.id}>
40-
<td> {employee.firstName} </td>
41-
<td> {employee.lastName}</td>
42-
<td> {employee.email}</td>
43-
</tr>
44-
)
45-
}
49+
{this.state.employees.map((employee) =>
50+
<tr key={employee.id}>
51+
<td> {employee.firstName} </td>
52+
<td> {employee.lastName}</td>
53+
<td> {employee.email}</td>
54+
<td>
55+
<button onClick={() => this.editEmployee(employee.id)}
56+
className="btn btn-primary">Update
57+
</button>
58+
</td>
59+
</tr>
60+
)}
4661
</tbody>
47-
4862
</table>
4963
</div>
5064
</div>

0 commit comments

Comments
 (0)