Refactor admin/common.ts (#33788)

Only remove jQuery

web_src/js/features/admin/common.ts

@@ -1,8 +1,8 @@
-import $ from 'jquery';
 import {checkAppUrl} from '../common-page.ts';
 import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
 import {POST} from '../../modules/fetch.ts';
 import {initAvatarUploaderWithCropper} from '../comp/Cropper.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
 
 const {appSubUrl} = window.config;
 
@@ -20,8 +20,17 @@ export function initAdminCommon(): void {
   // check whether appUrl(ROOT_URL) is correct, if not, show an error message
   checkAppUrl();
 
-  // New user
+  initAdminUser();
-  if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
+  initAdminAuthentication();
+  initAdminNotice();
+
+  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
+}
+
+function initAdminUser() {
+  const pageContent = document.querySelector('.page-content.admin.edit.user, .page-content.admin.new.user');
+  if (!pageContent) return;
+
   document.querySelector<HTMLInputElement>('#login_type')?.addEventListener('change', function () {
     if (this.value?.startsWith('0')) {
       document.querySelector<HTMLInputElement>('#user_name')?.removeAttribute('disabled');
@@ -47,6 +56,14 @@ export function initAdminCommon(): void {
   });
 }
 
+function initAdminAuthentication() {
+  const pageContent = document.querySelector('.page-content.admin.authentication');
+  if (!pageContent) return;
+
+  const isNewPage = pageContent.classList.contains('new');
+  const isEditPage = pageContent.classList.contains('edit');
+  if (!isNewPage && !isEditPage) return;
+
   function onUsePagedSearchChange() {
     const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size');
     if (document.querySelector<HTMLInputElement>('#use_paged_search').checked) {
@@ -120,9 +137,11 @@ export function initAdminCommon(): void {
     toggleElem(document.querySelector('#ldap-group-options'), checked);
   }
 
+  const elAuthType = document.querySelector<HTMLInputElement>('#auth_type');
+
   // New authentication
-  if (document.querySelector<HTMLDivElement>('.admin.new.authentication')) {
+  if (isNewPage) {
-    document.querySelector<HTMLInputElement>('#auth_type')?.addEventListener('change', function () {
+    const onAuthTypeChange = function () {
       hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
 
       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 {
 
       document.querySelector<HTMLDivElement>('.binddnrequired')?.classList.remove('required');
 
-      const authType = this.value;
+      const authType = elAuthType.value;
       switch (authType) {
         case '2': // LDAP
           showElem('.ldap');
@@ -180,20 +199,23 @@ export function initAdminCommon(): void {
       if (authType === '2') {
         onUsePagedSearchChange();
       }
-    });
+    };
-    $('#auth_type').trigger('change');
+    elAuthType.addEventListener('change', onAuthTypeChange);
+    onAuthTypeChange();
+
     document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
     document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
     document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
     document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
-    $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
+
+    document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
   }
   // Edit authentication
-  if (document.querySelector<HTMLDivElement>('.admin.edit.authentication')) {
+  if (isEditPage) {
-    const authType = document.querySelector<HTMLInputElement>('#auth_type')?.value;
+    const authType = elAuthType.value;
     if (authType === '2' || authType === '5') {
       document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
-      $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
+      document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
       onEnableLdapGroupsChange();
       if (authType === '2') {
         document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
@@ -205,30 +227,35 @@ export function initAdminCommon(): void {
     }
   }
 
-  if (document.querySelector<HTMLDivElement>('.admin.authentication')) {
+  const elAuthName = document.querySelector<HTMLInputElement>('#auth_name');
-    $('#auth_name').on('input', function () {
+  const onAuthNameChange = function () {
     // appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
-      document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent((this as HTMLInputElement).value)}/callback`;
+    document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(elAuthName.value)}/callback`;
-    }).trigger('input');
+  };
+  elAuthName.addEventListener('input', onAuthNameChange);
+  onAuthNameChange();
 }
 
-  // Notice
+function initAdminNotice() {
-  if (document.querySelector<HTMLDivElement>('.admin.notice')) {
+  const pageContent = document.querySelector('.page-content.admin.notice');
+  if (!pageContent) return;
+
   const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');
 
   // Attach view detail modals
-    $('.view-detail').on('click', function () {
+  queryElems(pageContent, '.view-detail', (el) => el.addEventListener('click', (e) => {
-      const description = this.closest('tr').querySelector('.notice-description').textContent;
+    e.preventDefault();
-      detailModal.querySelector('.content pre').textContent = description;
+    const elNoticeDesc = el.closest('tr').querySelector('.notice-description');
-      $(detailModal).modal('show');
+    const elModalDesc = detailModal.querySelector('.content pre');
-      return false;
+    elModalDesc.textContent = elNoticeDesc.textContent;
-    });
+    fomanticQuery(detailModal).modal('show');
+  }));
 
   // Select actions
   const checkboxes = document.querySelectorAll<HTMLInputElement>('.select.table .ui.checkbox input');
 
-    $('.select.action').on('click', function () {
+  queryElems(pageContent, '.select.action', (el) => el.addEventListener('click', () => {
-      switch ($(this).data('action')) {
+    switch (el.getAttribute('data-action')) {
       case 'select-all':
         for (const checkbox of checkboxes) {
           checkbox.checked = true;
@@ -245,7 +272,8 @@ export function initAdminCommon(): void {
         }
         break;
     }
-    });
+  }));
+
   document.querySelector<HTMLButtonElement>('#delete-selection')?.addEventListener('click', async function (e) {
     e.preventDefault();
     this.classList.add('is-loading', 'disabled');
@@ -259,6 +287,3 @@ export function initAdminCommon(): void {
     window.location.href = this.getAttribute('data-redirect');
   });
 }
-
-  queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
-}