Skip to content

Commit 8d4b900

Browse files
wxiaoguangwxiaoguang
committed
fix
1 parent ffb2765 commit 8d4b900

File tree

1 file changed

+111
-87
lines changed

1 file changed

+111
-87
lines changed

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

Lines changed: 111 additions & 87 deletions
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,48 @@ 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');
4965

5066
function onUsePagedSearchChange() {
5167
const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size');
@@ -120,9 +136,11 @@ export function initAdminCommon(): void {
120136
toggleElem(document.querySelector('#ldap-group-options'), checked);
121137
}
122138

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

128146
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 +149,7 @@ export function initAdminCommon(): void {
131149

132150
document.querySelector<HTMLDivElement>('.binddnrequired')?.classList.remove('required');
133151

134-
const authType = this.value;
152+
const authType = elAuthType.value;
135153
switch (authType) {
136154
case '2': // LDAP
137155
showElem('.ldap');
@@ -180,20 +198,23 @@ export function initAdminCommon(): void {
180198
if (authType === '2') {
181199
onUsePagedSearchChange();
182200
}
183-
});
184-
$('#auth_type').trigger('change');
201+
};
202+
elAuthType.addEventListener('change', onAuthTypeChange);
203+
onAuthTypeChange();
204+
185205
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
186206
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
187207
document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
188208
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
189-
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
209+
210+
document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
190211
}
191212
// Edit authentication
192-
if (document.querySelector<HTMLDivElement>('.admin.edit.authentication')) {
193-
const authType = document.querySelector<HTMLInputElement>('#auth_type')?.value;
213+
if (isEditPage) {
214+
const authType = elAuthType.value;
194215
if (authType === '2' || authType === '5') {
195216
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
196-
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
217+
document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
197218
onEnableLdapGroupsChange();
198219
if (authType === '2') {
199220
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
@@ -205,60 +226,63 @@ export function initAdminCommon(): void {
205226
}
206227
}
207228

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-
}
229+
const elAuthName = document.querySelector<HTMLInputElement>('#auth_name');
230+
const onAuthNameChange = function () {
231+
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
232+
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(elAuthName.value)}/callback`;
233+
};
234+
elAuthName.addEventListener('input', onAuthNameChange);
235+
onAuthNameChange();
236+
}
214237

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'));
238+
function initAdminNotice() {
239+
const pageContent = document.querySelector('.page-content.admin.notice');
240+
if (!pageContent) return;
241+
242+
const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');
243+
244+
// Attach view detail modals
245+
queryElems(pageContent, '.view-detail', (el) => el.addEventListener('click', (e) => {
246+
e.preventDefault();
247+
const elNoticeDesc = el.closest('tr').querySelector('.notice-description');
248+
const elModalDesc = detailModal.querySelector('.content pre');
249+
elModalDesc.textContent = elNoticeDesc.textContent;
250+
fomanticQuery(detailModal).modal('show');
251+
}));
252+
253+
// Select actions
254+
const checkboxes = document.querySelectorAll<HTMLInputElement>('.select.table .ui.checkbox input');
255+
256+
queryElems(pageContent, '.select.action', (el) => el.addEventListener('click', () => {
257+
switch (el.getAttribute('data-action')) {
258+
case 'select-all':
259+
for (const checkbox of checkboxes) {
260+
checkbox.checked = true;
256261
}
257-
}
258-
await POST(this.getAttribute('data-link'), {data});
259-
window.location.href = this.getAttribute('data-redirect');
260-
});
261-
}
262+
break;
263+
case 'deselect-all':
264+
for (const checkbox of checkboxes) {
265+
checkbox.checked = false;
266+
}
267+
break;
268+
case 'inverse':
269+
for (const checkbox of checkboxes) {
270+
checkbox.checked = !checkbox.checked;
271+
}
272+
break;
273+
}
274+
}));
262275

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

0 commit comments

Comments
 (0)