Skip to content

Commit 9abd713

Browse files
gerardpuiglgerardpuigl
committed
JS update Employee Implemented
1 parent 2ee0653 commit 9abd713

File tree

5 files changed

+91
-69
lines changed

5 files changed

+91
-69
lines changed

‎src/main/java/com/itacademy/CrudEmpleats/controller/ControllerEmployees.java‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,6 @@ public class ControllerEmployees {
1818

1919
@Autowired
2020
private EmployeeRepository repositori;
21-
22-
/*
23-
// Temporalment redirigim a la llista d'empleats
24-
@GetMapping("/")
25-
void start(HttpServletResponse reponse) throws IOException {
26-
reponse.sendRedirect("/Empleat");
27-
}*/
2821

2922
// Crear nou empleat
3023
@PostMapping( "/EmployeeList")

‎src/main/java/com/itacademy/CrudEmpleats/domain/Jobs.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ public enum Jobs {
88
Programador_Senior("Programador Senior",35000),
99
Programador_Mid("Programador Mid-Level",29000),
1010
Programador_Junior("Programador Junior",21000),
11-
Administrativa("Administrativa",25000);
11+
Administratiu("Administratiu",25000);
1212

1313
private String name;
1414
private double salary;

‎src/main/java/com/itacademy/CrudEmpleats/persistence/EmployeeRepository.java‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,12 @@ public class EmployeeRepository implements IEmployeeRepository{
1313
// Els objectes persistents únicament en memòria
1414

1515
private static int idcount=0;
16-
/*
17-
private List<Employee> repository = new ArrayList<>(
18-
Arrays.asList(
19-
new Employee("Joan", "Director_Projectes"),
20-
new Employee("Gerard", "Programador_Junior"),
21-
new Employee("Maria", "Administrativa")
22-
)
23-
);
24-
*/
16+
2517
private List<Employee> repository = new ArrayList<>(
2618
Arrays.asList(
2719
new Employee(idcount++,"Joan", "Director_Projectes"),
2820
new Employee(idcount++,"Gerard", "Programador_Junior"),
29-
new Employee(idcount++,"Maria", "Administrativa")
21+
new Employee(idcount++,"Maria", "Administratiu")
3022
)
3123
);
3224

‎src/main/resources/static/index.js‎

Lines changed: 78 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,30 @@
11

2-
$(document).ready(function() {
3-
$('#newEmployee').submit(function(evento) {
4-
evento.preventDefault();
2+
$(document).ready(updateTable());
3+
4+
//Read employee List & Update the table
5+
function updateTable() {
6+
$.get("/EmployeeList", function (data) {
7+
$('#employeeTable > tbody').empty();
8+
var table_data;
9+
$.each(data, function (i, employee) {
10+
table_data += "<tr>" +
11+
"<td>" + employee.id + "</td>" +
12+
"<td>" + employee.name + "</td>" +
13+
"<td>" + employee.job + "</td>" +
14+
"<td>" + employee.salary + "</td>" +
15+
"<td>" +
16+
"<button type='button'onclick='editEmployee(" + employee.id + ")'>Modificar</button>" +
17+
"<button type='button' onclick='deleteEmployee(" + employee.id + ")'>Eliminar</button>" +
18+
"</td>"
19+
});
20+
$('#employeeTable > tbody').append(table_data);
21+
});
22+
};
23+
24+
//Create & update
25+
function sendEmployee() {
26+
//create employee
27+
if ($('#action').val() == 'Afegir') {
528
$.ajax({
629
url: '/EmployeeList',
730
type: 'POST',
@@ -10,54 +33,75 @@ $(document).ready(function() {
1033
"name": $('#name').val(),
1134
"job": $('#job').val()
1235
}),
13-
success: function(data, textStatus, jQxhr) {
36+
success: function (data, textStatus, jQxhr) {
1437
updateTable();
15-
$('#newEmployee').trigger('reset');
1638
},
17-
error: function(xhr, textStatus, errorThrown) {
39+
error: function (xhr, textStatus, errorThrown) {
1840
console.log(textStatus);
1941
}
2042
});
21-
22-
});
23-
24-
$(function() {
25-
updateTable();
26-
});
27-
});
28-
29-
function updateTable() {
30-
$.get("/EmployeeList", function(data) {
31-
$('#employeeTable > tbody').empty();
32-
var table_data;
33-
$.each(data, function(i, employee) {
34-
table_data += "<tr>" +
35-
"<td ><form>" + employee.id + "</td>" +
36-
"<td >" + employee.name + "</td>" +
37-
"<td>" + employee.job + "</td>" +
38-
"<td>" + employee.salary + "</td>" +
39-
"<td>" +
40-
"<button type=submit>Modificar</button>" +
41-
"<button type=submit onclick='deleteEmploye(" + employee.id + ")'>Eliminar</button>" +
42-
"<form></td>"
43+
//Update employee
44+
} if ($('#action').val()=='Actualitzar') {
45+
$.ajax({
46+
url: '/EmployeeList/' + $('#idEmployee').val(),
47+
type: 'PUT',
48+
contentType: 'application/Json',
49+
data: JSON.stringify({
50+
"id": $('#idEmployee').val(),
51+
"name": $('#name').val(),
52+
"job": $('#job').val()
53+
}),
54+
success: function (data, textStatus, jQxhr) {
55+
updateTable();
56+
},
57+
error: function (xhr, textStatus, errorThrown) {
58+
console.log(textStatus);
59+
}
4360
});
44-
$('#employeeTable > tbody').append(table_data);
45-
});
61+
}
62+
$('#EmployeeForm').trigger('reset');
63+
$('#action').val('Afegir')
4664
};
4765

48-
function deleteEmploye(id) {
66+
//Delete employee
67+
function deleteEmployee(id) {
4968
if (confirm("Desitja eliminar a l'Empleat?")) {
5069
$.ajax({
5170
type: "DELETE",
5271
url: "/EmployeeList/" + id,
53-
success: function(data, textStatus, jQxhr) {
72+
success: function (data, textStatus, jQxhr) {
5473
updateTable();
5574
},
56-
error: function(xhr, textStatus, errorThrown) {
75+
error: function (xhr, textStatus, errorThrown) {
5776
console.log(textStatus);
5877
}
5978
});
60-
6179
};
80+
};
6281

82+
//Read one employee info and put in the modifier form.
83+
function editEmployee(id) {
84+
$.get("/EmployeeList/" + id, function (data) {
85+
$('#idEmployee').val(data.id);
86+
$('#name').val(data.name);
87+
$('#job').val(getJobCode(data.job));
88+
});
89+
$('#action').val('Actualitzar');
6390
};
91+
92+
//Take the enum codes for Employee Jobs.
93+
function getJobCode(job) {
94+
if (job == 'Director de projectes') {
95+
return 'Director_Projectes';
96+
} if (job == 'Programador Senior') {
97+
return 'Programador_Senior';
98+
} if (job == 'Programador_Mid') {
99+
return 'Programador_Mid';
100+
} if (job == 'Programador Junior') {
101+
return 'Programador_Junior';
102+
} if (job == 'Administratiu') {
103+
return 'Administratiu';
104+
} else {
105+
return "Default";
106+
}
107+
}

‎src/main/resources/templates/index.html‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,7 @@ <H4>Empleats</H4><button type="submit">Nou Empleat</button>
2626
<th>Accions</th>
2727
</tr>
2828
</thead>
29-
<tbody>
30-
<form> <tr>
31-
<td id=employeeId>IdExempleAtHtml</td>
32-
<td id=employeeName>NameExempleAtHtml </td>
33-
<td> JobExempleAtHtml</td>
34-
<td> SalaryExempleAtHtml </td>
35-
<td>
36-
<button type=submit>Modificar</button>
37-
<button type=submit id=deleteEmployee>Eliminar</button>
38-
</form></td>
39-
</tbody>
29+
<tbody></tbody>
4030
</table>
4131
</div>
4232
<div class="container"></div>
@@ -46,25 +36,28 @@ <H4>Crear Empleat</H4>
4636
<div>
4737
<div class="container">
4838
<div></div>
49-
<form id="newEmployee" action="#" method="post">
39+
<form id="EmployeeForm">
5040
<div>
51-
Nom: <input type=text name=name id="name">
41+
<input type="text" id="idEmployee" hidden="true">
42+
</div>
43+
<div>
44+
Nom: <input type="text" id="name">
5245
</div>
5346
<div>
5447
Càrreg:
55-
<select name="job" id="job">
48+
<select id="job">
5649
<option value="Default">Escull un càrreg</option>
5750
<option value="Director_Projectes">Director de projectes</option>
5851
<option value="Programador_Senior">Programador Senior</option>
5952
<option value="Programador_Mid">Programador Mid-Level</option>
6053
<option value="Programador_Junior">Programador Junior</option>
61-
<option value="Administrativa">Administrativa</option>
54+
<option value="Administratiu">Administratiu</option>
6255
</select>
6356
</div>
6457
<div>
6558
<br><br>
66-
<input type=submit name="submit" value="Afegir">
67-
<input type=reset value="Cancellar">
59+
<input type="submit" value="Afegir" id="action" onclick="sendEmployee();">
60+
<button type="reset">Cancel·lar</button>
6861
</div>
6962
</form>
7063
</div>

0 commit comments

Comments
 (0)