Skip to content

Commit 163bbca

Browse files
wxiaoguangwxiaoguang
authored
Refactor admin/common.ts (#33788)
Only remove jQuery
1 parent ffb2765 commit 163bbca

File tree

1 file changed

+112
-87
lines changed

1 file changed

+112
-87
lines changed

‎web_src/js/features/admin/common.ts

+112-87
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import $ from 'jquery';
21
import {checkAppUrl} from '../common-page.ts';
32
import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
43
import {POST} from '../../modules/fetch.ts';
54
import {initAvatarUploaderWithCropper} from '../comp/Cropper.ts';
5+
import {fomanticQuery} from '../../modules/fomantic/base.ts';
66

77
const {appSubUrl} = window.config;
88

@@ -20,32 +20,49 @@ export function initAdminCommon(): void {
2020
// check whether appUrl(ROOT_URL) is correct, if not, show an error message
2121
checkAppUrl();
2222

23-
// New user
24-
if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
25-
document.querySelector<HTMLInputElement>('#login_type')?.addEventListener('change', function () {
26-
if (this.value?.startsWith('0')) {
27-
document.querySelector<HTMLInputElement>('#user_name')?.removeAttribute('disabled');
28-
document.querySelector<HTMLInputElement>('#login_name')?.removeAttribute('required');
29-
hideElem('.non-local');
30-
showElem('.local');
31-
document.querySelector<HTMLInputElement>('#user_name')?.focus();
32-
33-
if (this.getAttribute('data-password') === 'required') {
34-
document.querySelector('#password')?.setAttribute('required', 'required');
35-
}
36-
} else {
37-
if (document.querySelector<HTMLDivElement>('.admin.edit.user')) {
38-
document.querySelector<HTMLInputElement>('#user_name')?.setAttribute('disabled', 'disabled');
39-
}
40-
document.querySelector<HTMLInputElement>('#login_name')?.setAttribute('required', 'required');
41-
showElem('.non-local');
42-
hideElem('.local');
43-
document.querySelector<HTMLInputElement>('#login_name')?.focus();
23+
initAdminUser();
24+
initAdminAuthentication();
25+
initAdminNotice();
26+
27+
queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
28+
}
29+
30+
function initAdminUser() {
31+
const pageContent = document.querySelector('.page-content.admin.edit.user, .page-content.admin.new.user');
32+
if (!pageContent) return;
4433

45-
document.querySelector<HTMLInputElement>('#password')?.removeAttribute('required');
34+
document.querySelector<HTMLInputElement>('#login_type')?.addEventListener('change', function () {
35+
if (this.value?.startsWith('0')) {
36+
document.querySelector<HTMLInputElement>('#user_name')?.removeAttribute('disabled');
37+
document.querySelector<HTMLInputElement>('#login_name')?.removeAttribute('required');
38+
hideElem('.non-local');
39+
showElem('.local');
40+
document.querySelector<HTMLInputElement>('#user_name')?.focus();
41+
42+
if (this.getAttribute('data-password') === 'required') {
43+
document.querySelector('#password')?.setAttribute('required', 'required');
4644
}
47-
});
48-
}
45+
} else {
46+
if (document.querySelector<HTMLDivElement>('.admin.edit.user')) {
47+
document.querySelector<HTMLInputElement>('#user_name')?.setAttribute('disabled', 'disabled');
48+
}
49+
document.querySelector<HTMLInputElement>('#login_name')?.setAttribute('required', 'required');
50+
showElem('.non-local');
51+
hideElem('.local');
52+
document.querySelector<HTMLInputElement>('#login_name')?.focus();
53+
54+
document.querySelector<HTMLInputElement>('#password')?.removeAttribute('required');
55+
}
56+
});
57+
}
58+
59+
function initAdminAuthentication() {
60+
const pageContent = document.querySelector('.page-content.admin.authentication');
61+
if (!pageContent) return;
62+
63+
const isNewPage = pageContent.classList.contains('new');
64+
const isEditPage = pageContent.classList.contains('edit');
65+
if (!isNewPage && !isEditPage) return;
4966

5067
function onUsePagedSearchChange() {
5168
const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size');
@@ -120,9 +137,11 @@ export function initAdminCommon(): void {
120137
toggleElem(document.querySelector('#ldap-group-options'), checked);
121138
}
122139

140+
const elAuthType = document.querySelector<HTMLInputElement>('#auth_type');
141+
123142
// New authentication
124-
if (document.querySelector<HTMLDivElement>('.admin.new.authentication')) {
125-
document.querySelector<HTMLInputElement>('#auth_type')?.addEventListener('change', function () {
143+
if (isNewPage) {
144+
const onAuthTypeChange = function () {
126145
hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
127146

128147
for (const input of document.querySelectorAll<HTMLInputElement>('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]')) {
@@ -131,7 +150,7 @@ export function initAdminCommon(): void {
131150

132151
document.querySelector<HTMLDivElement>('.binddnrequired')?.classList.remove('required');
133152

134-
const authType = this.value;
153+
const authType = elAuthType.value;
135154
switch (authType) {
136155
case '2': // LDAP
137156
showElem('.ldap');
@@ -180,20 +199,23 @@ export function initAdminCommon(): void {
180199
if (authType === '2') {
181200
onUsePagedSearchChange();
182201
}
183-
});
184-
$('#auth_type').trigger('change');
202+
};
203+
elAuthType.addEventListener('change', onAuthTypeChange);
204+
onAuthTypeChange();
205+
185206
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
186207
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
187208
document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
188209
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
189-
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
210+
211+
document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
190212
}
191213
// Edit authentication
192-
if (document.querySelector<HTMLDivElement>('.admin.edit.authentication')) {
193-
const authType = document.querySelector<HTMLInputElement>('#auth_type')?.value;
214+
if (isEditPage) {
215+
const authType = elAuthType.value;
194216
if (authType === '2' || authType === '5') {
195217
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
196-
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
218+
document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
197219
onEnableLdapGroupsChange();
198220
if (authType === '2') {
199221
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
@@ -205,60 +227,63 @@ export function initAdminCommon(): void {
205227
}
206228
}
207229

208-
if (document.querySelector<HTMLDivElement>('.admin.authentication')) {
209-
$('#auth_name').on('input', function () {
210-
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
211-
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent((this as HTMLInputElement).value)}/callback`;
212-
}).trigger('input');
213-
}
230+
const elAuthName = document.querySelector<HTMLInputElement>('#auth_name');
231+
const onAuthNameChange = function () {
232+
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
233+
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(elAuthName.value)}/callback`;
234+
};
235+
elAuthName.addEventListener('input', onAuthNameChange);
236+
onAuthNameChange();
237+
}
214238

215-
// Notice
216-
if (document.querySelector<HTMLDivElement>('.admin.notice')) {
217-
const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');
218-
219-
// Attach view detail modals
220-
$('.view-detail').on('click', function () {
221-
const description = this.closest('tr').querySelector('.notice-description').textContent;
222-
detailModal.querySelector('.content pre').textContent = description;
223-
$(detailModal).modal('show');
224-
return false;
225-
});
226-
227-
// Select actions
228-
const checkboxes = document.querySelectorAll<HTMLInputElement>('.select.table .ui.checkbox input');
229-
230-
$('.select.action').on('click', function () {
231-
switch ($(this).data('action')) {
232-
case 'select-all':
233-
for (const checkbox of checkboxes) {
234-
checkbox.checked = true;
235-
}
236-
break;
237-
case 'deselect-all':
238-
for (const checkbox of checkboxes) {
239-
checkbox.checked = false;
240-
}
241-
break;
242-
case 'inverse':
243-
for (const checkbox of checkboxes) {
244-
checkbox.checked = !checkbox.checked;
245-
}
246-
break;
247-
}
248-
});
249-
document.querySelector<HTMLButtonElement>('#delete-selection')?.addEventListener('click', async function (e) {
250-
e.preventDefault();
251-
this.classList.add('is-loading', 'disabled');
252-
const data = new FormData();
253-
for (const checkbox of checkboxes) {
254-
if (checkbox.checked) {
255-
data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id'));
239+
function initAdminNotice() {
240+
const pageContent = document.querySelector('.page-content.admin.notice');
241+
if (!pageContent) return;
242+
243+
const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');
244+
245+
// Attach view detail modals
246+
queryElems(pageContent, '.view-detail', (el) => el.addEventListener('click', (e) => {
247+
e.preventDefault();
248+
const elNoticeDesc = el.closest('tr').querySelector('.notice-description');
249+
const elModalDesc = detailModal.querySelector('.content pre');
250+
elModalDesc.textContent = elNoticeDesc.textContent;
251+
fomanticQuery(detailModal).modal('show');
252+
}));
253+
254+
// Select actions
255+
const checkboxes = document.querySelectorAll<HTMLInputElement>('.select.table .ui.checkbox input');
256+
257+
queryElems(pageContent, '.select.action', (el) => el.addEventListener('click', () => {
258+
switch (el.getAttribute('data-action')) {
259+
case 'select-all':
260+
for (const checkbox of checkboxes) {
261+
checkbox.checked = true;
256262
}
257-
}
258-
await POST(this.getAttribute('data-link'), {data});
259-
window.location.href = this.getAttribute('data-redirect');
260-
});
261-
}
263+
break;
264+
case 'deselect-all':
265+
for (const checkbox of checkboxes) {
266+
checkbox.checked = false;
267+
}
268+
break;
269+
case 'inverse':
270+
for (const checkbox of checkboxes) {
271+
checkbox.checked = !checkbox.checked;
272+
}
273+
break;
274+
}
275+
}));
262276

263-
queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
277+
document.querySelector<HTMLButtonElement>('#delete-selection')?.addEventListener('click', async function (e) {
278+
e.preventDefault();
279+
this.classList.add('is-loading', 'disabled');
280+
const data = new FormData();
281+
for (const checkbox of checkboxes) {
282+
if (checkbox.checked) {
283+
data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id'));
284+
}
285+
}
286+
await POST(this.getAttribute('data-link'), {data});
287+
window.location.href = this.getAttribute('data-redirect');
288+
});
264289
}

0 commit comments

Comments
 (0)