Skip to content

Commit 0ed1959

Browse files
committed
[TASK] Convert Femanager JavaScript from jQuery to Vanilla
Related: https://projekte.in2code.de/issues/74432
1 parent 74e3661 commit 0ed1959

File tree

6 files changed

+493
-534
lines changed

6 files changed

+493
-534
lines changed
Lines changed: 121 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,148 @@
1-
import $ from 'jquery';
2-
3-
$(document).ready(function ($) {
4-
// Hide/Unhide User
5-
$('.hideUser, .unhideUser').click(function () {
6-
var $this = $(this);
7-
var moduleUri = $this.siblings('.container_module_uri').val();
8-
var uid = $this.siblings('.container_uid').val();
9-
var table = $this.siblings('.container_table').val();
10-
11-
if ($this.hasClass('hideUser')) {
12-
$this
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const hideUnhideUser = (event) => {
3+
const currentElement = event.currentTarget;
4+
const moduleUri = currentElement.parentElement.querySelector('.container_module_uri').value;
5+
const uid = currentElement.parentElement.querySelector('.container_uid').value;
6+
const table = currentElement.parentElement.querySelector('.container_table').value;
7+
8+
let hidden = 0;
9+
10+
if (currentElement.classList.contains('hideUser')) {
11+
currentElement
1312
.closest('tr')
14-
.find('.tx-feusermanager-icon-status-user-frontend').hide();
15-
$this
13+
.querySelector('.tx-feusermanager-icon-status-status-permission-granted')
14+
.style.display = "none";
15+
16+
currentElement
1617
.closest('tr')
17-
.find('.tx-feusermanager-icon-status-user-frontend-disabled').show();
18-
$this
18+
.querySelector('.tx-feusermanager-icon-status-user-frontend-disabled')
19+
.style.display = "block";
20+
21+
currentElement
1922
.closest('tr')
20-
.find('.tx-feusermanager-icon-actions-edit-hide').hide();
21-
$this
23+
.querySelector('.tx-feusermanager-icon-actions-edit-hide')
24+
.style.display = "none";
25+
26+
currentElement
2227
.closest('tr')
23-
.find('.tx-feusermanager-icon-actions-edit-unhide').show();
24-
$this
28+
.querySelector('.tx-feusermanager-icon-actions-edit-unhide')
29+
.style.display = "block";
30+
31+
currentElement
2532
.closest('tr')
26-
.find('.tx-feusermanager-icon-actions-system-backend-user-switch').hide();
27-
$this
33+
.querySelector('.tx-feusermanager-icon-actions-system-backend-user-switch')
34+
.style.display = "none";
35+
36+
currentElement
2837
.closest('tr')
29-
.find('.tx-feusermanager-icon-actions-system-backend-user-switch-disabled').show();
30-
var hidden = 1;
38+
.querySelector('.tx-feusermanager-icon-actions-system-backend-user-switch-disabled')
39+
.style.display = "none";
40+
41+
hidden = 1;
3142
} else {
32-
$this
43+
currentElement
3344
.closest('tr')
34-
.find('.tx-feusermanager-icon-status-user-frontend').show();
35-
$this
45+
.querySelector('.tx-feusermanager-icon-status-status-permission-granted')
46+
.style.display = "block";
47+
48+
currentElement
3649
.closest('tr')
37-
.find('.tx-feusermanager-icon-status-user-frontend-disabled').hide();
38-
$this
50+
.querySelector('.tx-feusermanager-icon-status-user-frontend-disabled')
51+
.style.display = "none";
52+
53+
currentElement
3954
.closest('tr')
40-
.find('.tx-feusermanager-icon-actions-edit-hide').show();
41-
$this
55+
.querySelector('.tx-feusermanager-icon-actions-edit-hide')
56+
.style.display = "block";
57+
58+
currentElement
4259
.closest('tr')
43-
.find('.tx-feusermanager-icon-actions-edit-unhide').hide();
44-
$this
60+
.querySelector('.tx-feusermanager-icon-actions-edit-unhide')
61+
.style.display = "none";
62+
63+
currentElement
4564
.closest('tr')
46-
.find('.tx-feusermanager-icon-actions-system-backend-user-switch').show();
47-
$this
65+
.querySelector('.tx-feusermanager-icon-actions-system-backend-user-switch')
66+
.style.display = "block";
67+
68+
currentElement
4869
.closest('tr')
49-
.find('.tx-feusermanager-icon-actions-system-backend-user-switch-disabled').hide();
50-
var hidden = 0;
70+
.querySelector('.tx-feusermanager-icon-actions-system-backend-user-switch-disabled')
71+
.style.display = "block";
5172
}
52-
url = moduleUri + '&data[' + table + '][' + uid + '][disable]=' + hidden;
53-
$.ajax({
54-
url: url
55-
});
56-
});
5773

58-
// Delete User
59-
$('.deleteUser').click(function () {
60-
var $this = $(this);
61-
var moduleUri = $this.siblings('.container_module_uri').val();
62-
var uid = $this.siblings('.container_uid').val();
63-
var table = $this.siblings('.container_table').val();
64-
var confirmationMessage = $this.siblings('.container_label_delete_confirmation').val();
74+
const url = moduleUri + '&data[' + table + '][' + uid + '][disable]=' + hidden;
75+
fetch(url);
76+
};
77+
78+
const deleteUser = (event) => {
79+
const currentElement = event.currentTarget;
80+
const moduleUri = currentElement.parentElement.querySelector('.container_module_uri').value;
81+
const uid = currentElement.parentElement.querySelector('.container_uid').value;
82+
const table = currentElement.parentElement.querySelector('.container_table').value;
83+
const confirmationMessage = currentElement.parentElement.querySelector('.container_label_delete_confirmation').value;
84+
const url = moduleUri + '&cmd[' + table + '][' + uid + '][delete]=1';
6585

6686
if (confirm(confirmationMessage)) {
67-
$this.closest('tr').fadeOut('fast');
68-
var url = moduleUri + '&cmd[' + table + '][' + uid + '][delete]=1'
69-
$.ajax({
70-
url: url
71-
});
87+
currentElement.closest('tr').remove();
88+
fetch(url);
7289
}
73-
});
90+
};
91+
92+
const logoutUser = (event) => {
93+
event.preventDefault();
7494

75-
// User Logout
76-
$('.logoutUser').click(function (e) {
77-
e.preventDefault();
78-
var $this = $(this);
79-
$this
95+
const currentElement = event.currentTarget;
96+
const url = currentElement.getAttribute('href');
97+
98+
currentElement
8099
.closest('tr')
81-
.find('.tx-feusermanager-icon-status-status-permission-granted').hide();
82-
$this
100+
.querySelector('.tx-feusermanager-icon-status-status-permission-granted')
101+
.style.display = "none";
102+
103+
currentElement
83104
.closest('tr')
84-
.find('.tx-feusermanager-icon-status-status-permission-denied').show();
85-
$this
105+
.querySelector('.tx-feusermanager-icon-status-status-permission-denied')
106+
.style.display = "block";
107+
108+
currentElement
86109
.closest('tr')
87-
.find('.tx-feusermanager-icon-actions-system-backend-user-switch-disabled').hide();
88-
$this
110+
.querySelector('.tx-feusermanager-icon-actions-system-backend-user-switch-disabled')
111+
.style.display = "none";
112+
113+
currentElement
89114
.closest('tr')
90-
.find('.tx-feusermanager-icon-actions-system-backend-user-switch').show();
91-
$this
115+
.querySelector('.tx-feusermanager-icon-actions-system-backend-user-switch')
116+
.style.display = "block";
117+
118+
currentElement
92119
.closest('tr')
93-
.find('.tx-feusermanager-icon-apps-pagetree-drag-place-denied').hide();
94-
$this
120+
.querySelector('.tx-feusermanager-icon-apps-pagetree-drag-place-denied')
121+
.style.display = "none";
122+
123+
currentElement
95124
.closest('tr')
96-
.find('.tx-feusermanager-icon-apps-pagetree-drag-place-denied-disabled').show();
97-
var url = $this.prop('href');
98-
$.ajax({
99-
url: url
100-
});
125+
.querySelector('.tx-feusermanager-icon-apps-pagetree-drag-place-denied-disabled')
126+
.style.display = "block";
127+
128+
fetch(url);
129+
};
130+
131+
document.addEventListener('click', (event) => {
132+
if (event.target.matches('.hideUser, .unhideUser')) {
133+
hideUnhideUser(event)
134+
}
135+
});
136+
137+
document.addEventListener('click', (event) => {
138+
if (event.target.matches('.deleteUser')) {
139+
deleteUser(event)
140+
}
101141
});
102-
});
103142

143+
document.addEventListener('click', (event) => {
144+
if (event.target.matches('.logoutUser')) {
145+
logoutUser(event)
146+
}
147+
});
148+
});

0 commit comments

Comments
 (0)