Remove jQuery from the user search form in admin page (#29151)

- Switched to plain JavaScript
- Tested the form and it works as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

1 files changed, 23 insertions, 18 deletions

diff --git a/web_src/js/features/admin/users.js b/web_src/js/features/admin/users.js
index c8edaab549..7cac603b5c 100644
--- a/web_src/js/features/admin/users.js
+++ b/web_src/js/features/admin/users.js
@@ -1,34 +1,39 @@
-import $ from 'jquery';
-
 export function initAdminUserListSearchForm() {
   const searchForm = window.config.pageData.adminUserListSearchForm;
   if (!searchForm) return;
 
-  const $form = $('#user-list-search-form');
-  if (!$form.length) return;
+  const form = document.querySelector('#user-list-search-form');
+  if (!form) return;
 
-  $form.find(`button[name=sort][value=${searchForm.SortType}]`).addClass('active');
+  for (const button of form.querySelectorAll(`button[name=sort][value="${searchForm.SortType}"]`)) {
+    button.classList.add('active');
+  }
 
   if (searchForm.StatusFilterMap) {
     for (const [k, v] of Object.entries(searchForm.StatusFilterMap)) {
       if (!v) continue;
-      $form.find(`input[name="status_filter[${k}]"][value=${v}]`).prop('checked', true);
+      for (const input of form.querySelectorAll(`input[name="status_filter[${k}]"][value="${v}"]`)) {
+        input.checked = true;
+      }
     }
   }
 
-  $form.find(`input[type=radio]`).on('click', () => {
-    $form.trigger('submit');
-    return false;
-  });
+  for (const radio of form.querySelectorAll('input[type=radio]')) {
+    radio.addEventListener('click', () => {
+      form.submit();
+    });
+  }
 
-  $form.find('.j-reset-status-filter').on('click', () => {
-    $form.find(`input[type=radio]`).each((_, e) => {
-      const $e = $(e);
-      if ($e.attr('name').startsWith('status_filter[')) {
-        $e.prop('checked', false);
+  const resetButtons = form.querySelectorAll('.j-reset-status-filter');
+  for (const button of resetButtons) {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      for (const input of form.querySelectorAll('input[type=radio]')) {
+        if (input.name.startsWith('status_filter[')) {
+          input.checked = false;
+        }
       }
+      form.submit();
     });
-    $form.trigger('submit');
-    return false;
-  });
+  }
 }