Skip to content

Commit 14debbb

Browse files
JavaOPsJavaOPs
committed
8_09_ajax_datatables
1 parent 3af6765 commit 14debbb

File tree

7 files changed

+175
-4
lines changed

7 files changed

+175
-4
lines changed

‎config/messages/app.properties‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ user.email=Email
1010
user.roles=Roles
1111
user.active=Active
1212
user.registered=Registered
13+
user.password=Password
1314

1415
meal.title=Meals
1516
meal.edit=Edit meal

‎config/messages/app_ru.properties‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ user.email=Почта
1010
user.roles=Роли
1111
user.active=Активный
1212
user.registered=Зарегистрирован
13+
user.password=Пароль
1314

1415
meal.title=Моя еда
1516
meal.edit=Редактировать еду

‎src/main/java/ru/javawebinar/topjava/web/user/AdminUIController.java‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
package ru.javawebinar.topjava.web.user;
2+
3+
import org.springframework.http.HttpStatus;
4+
import org.springframework.http.MediaType;
5+
import org.springframework.web.bind.annotation.*;
6+
import ru.javawebinar.topjava.model.Role;
7+
import ru.javawebinar.topjava.model.User;
8+
9+
import java.util.List;
10+
11+
@RestController
12+
@RequestMapping(value = "/admin/users", produces = MediaType.APPLICATION_JSON_VALUE)
13+
public class AdminUIController extends AbstractUserController {
14+
15+
@Override
16+
@GetMapping
17+
public List<User> getAll() {
18+
return super.getAll();
19+
}
20+
21+
@Override
22+
@DeleteMapping("/{id}")
23+
@ResponseStatus(HttpStatus.NO_CONTENT)
24+
public void delete(@PathVariable int id) {
25+
super.delete(id);
26+
}
27+
28+
@PostMapping
29+
@ResponseStatus(HttpStatus.NO_CONTENT)
30+
public void create(@RequestParam String name,
31+
@RequestParam String email,
32+
@RequestParam String password) {
33+
super.create(new User(null, name, email, password, Role.USER));
34+
}
35+
}

‎src/main/webapp/WEB-INF/jsp/fragments/headTag.jsp‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,12 @@
1010
<link rel="stylesheet" href="resources/css/style.css?v=2">
1111
<link rel="stylesheet" href="webjars/bootstrap/4.6.2/css/bootstrap.min.css">
1212
<link rel="stylesheet" href="webjars/noty/3.1.4/demo/font-awesome/css/font-awesome.min.css">
13+
<link rel="stylesheet" href="webjars/datatables/1.13.5/css/dataTables.bootstrap4.min.css">
1314
<link rel="shortcut icon" href="resources/images/icon-meal.png">
15+
16+
<%--http://stackoverflow.com/a/24070373/548473--%>
17+
<script src="webjars/jquery/3.7.1/jquery.min.js" defer></script>
18+
<script src="webjars/bootstrap/4.6.2/js/bootstrap.min.js" defer></script>
19+
<script src="webjars/datatables/1.13.5/js/jquery.dataTables.min.js" defer></script>
20+
<script src="webjars/datatables/1.13.5/js/dataTables.bootstrap4.min.js" defer></script>
1421
</head>

‎src/main/webapp/WEB-INF/jsp/users.jsp‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@
66
<html>
77
<jsp:include page="fragments/headTag.jsp"/>
88
<body>
9+
<script src="resources/js/topjava.common.js" defer></script>
10+
<script src="resources/js/topjava.users.js" defer></script>
911
<jsp:include page="fragments/bodyHeader.jsp"/>
1012

1113
<div class="jumbotron pt-4">
1214
<div class="container">
1315
<h3 class="text-center"><spring:message code="user.title"/></h3>
14-
<button class="btn btn-primary">
16+
<button class="btn btn-primary" onclick="add()">
1517
<span class="fa fa-plus"></span>
1618
<spring:message code="common.add"/>
1719
</button>
18-
<table class="table table-striped mt-3">
20+
<table class="table table-striped" id="datatable">
1921
<thead>
2022
<tr>
2123
<th><spring:message code="user.name"/></th>
@@ -33,15 +35,59 @@
3335
<td><c:out value="${user.name}"/></td>
3436
<td><a href="mailto:${user.email}">${user.email}</a></td>
3537
<td>${user.roles}</td>
36-
<td><input type="checkbox" <c:if test="${user.enabled}">checked</c:if>/></td>
38+
<td><input type="checkbox" <c:if test="${user.enabled}">checked</c:if> id="${user.id}"/></td>
3739
<td><fmt:formatDate value="${user.registered}" pattern="dd-MMMM-yyyy"/></td>
3840
<td><a><span class="fa fa-pencil"></span></a></td>
39-
<td><a><span class="fa fa-remove"></span></a></td>
41+
<td><a class="delete" id="${user.id}"><span class="fa fa-remove"></span></a></td>
4042
</tr>
4143
</c:forEach>
4244
</table>
4345
</div>
4446
</div>
47+
48+
<div class="modal fade" tabindex="-1" id="editRow">
49+
<div class="modal-dialog">
50+
<div class="modal-content">
51+
<div class="modal-header">
52+
<h4 class="modal-title"><spring:message code="user.add"/></h4>
53+
<button type="button" class="close" data-dismiss="modal">&times;</button>
54+
</div>
55+
<div class="modal-body">
56+
<form id="detailsForm">
57+
<input type="hidden" id="id" name="id">
58+
59+
<div class="form-group">
60+
<label for="name" class="col-form-label"><spring:message code="user.name"/></label>
61+
<input type="text" class="form-control" id="name" name="name"
62+
placeholder="<spring:message code="user.name"/>">
63+
</div>
64+
65+
<div class="form-group">
66+
<label for="email" class="col-form-label"><spring:message code="user.email"/></label>
67+
<input type="email" class="form-control" id="email" name="email"
68+
placeholder="<spring:message code="user.email"/>">
69+
</div>
70+
71+
<div class="form-group">
72+
<label for="password" class="col-form-label"><spring:message code="user.password"/></label>
73+
<input type="password" class="form-control" id="password" name="password"
74+
placeholder="<spring:message code="user.password"/>">
75+
</div>
76+
</form>
77+
</div>
78+
<div class="modal-footer">
79+
<button type="button" class="btn btn-secondary" data-dismiss="modal">
80+
<span class="fa fa-close"></span>
81+
<spring:message code="common.cancel"/>
82+
</button>
83+
<button type="button" class="btn btn-primary" onclick="save()">
84+
<span class="fa fa-check"></span>
85+
<spring:message code="common.save"/>
86+
</button>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
4591
<jsp:include page="fragments/footer.jsp"/>
4692
</body>
4793
</html>

‎src/main/webapp/resources/js/topjava.common.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
function makeEditable() {
2+
$(".delete").click(function () {
3+
deleteRow($(this).attr("id"));
4+
});
5+
}
6+
7+
function add() {
8+
$("#detailsForm").find(":input").val("");
9+
$("#editRow").modal();
10+
}
11+
12+
function deleteRow(id) {
13+
$.ajax({
14+
url: ajaxUrl + id,
15+
type: "DELETE",
16+
success: function () {
17+
updateTable();
18+
}
19+
});
20+
}
21+
22+
function updateTable() {
23+
$.get(ajaxUrl, function (data) {
24+
datatableApi.clear().rows.add(data).draw();
25+
});
26+
}
27+
28+
function save() {
29+
const form = $("#detailsForm");
30+
$.ajax({
31+
type: "POST",
32+
url: ajaxUrl,
33+
data: form.serialize(),
34+
success: function () {
35+
$("#editRow").modal("hide");
36+
updateTable();
37+
}
38+
});
39+
}

‎src/main/webapp/resources/js/topjava.users.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const ajaxUrl = "admin/users/";
2+
let datatableApi;
3+
4+
// $(document).ready(function () {
5+
$(function () {
6+
datatableApi = $("#datatable").DataTable({
7+
"paging": false,
8+
"info": true,
9+
"columns": [
10+
{
11+
"data": "name"
12+
},
13+
{
14+
"data": "email"
15+
},
16+
{
17+
"data": "roles"
18+
},
19+
{
20+
"data": "enabled"
21+
},
22+
{
23+
"data": "registered"
24+
},
25+
{
26+
"defaultContent": "Edit",
27+
"orderable": false
28+
},
29+
{
30+
"defaultContent": "Delete",
31+
"orderable": false
32+
}
33+
],
34+
"order": [
35+
[
36+
0,
37+
"asc"
38+
]
39+
]
40+
});
41+
makeEditable();
42+
});

0 commit comments

Comments
 (0)