From eb1478ceaabd0780bcc155c1c0397f72620b7de1 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Mon, 12 Feb 2024 21:52:42 +0000 Subject: [PATCH 1/3] Remove jQuery from the user search form in admin page - Switched to plain JavaScript - Tested the form and it works as before Signed-off-by: Yarden Shoham --- web_src/js/features/admin/users.js | 42 +++++++++++++++++------------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/web_src/js/features/admin/users.js b/web_src/js/features/admin/users.js index c8edaab549322..ee2722a546241 100644 --- a/web_src/js/features/admin/users.js +++ b/web_src/js/features/admin/users.js @@ -1,34 +1,40 @@ -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 document.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 document.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(); + return false; + }); + } - $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 = document.querySelectorAll('.j-reset-status-filter'); + for (const button of resetButtons) { + button.addEventListener('click', () => { + for (const input of form.querySelectorAll('input[type=radio]')) { + if (input.name.startsWith('status_filter[')) { + input.checked = false; + } } + form.submit(); + return false; }); - $form.trigger('submit'); - return false; - }); + } } From aa952363a0815679f0b1e584086cc73b2059c12b Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 13 Feb 2024 09:24:56 +0000 Subject: [PATCH 2/3] Fix review comments - Don't `return false` - Prevent default on reset button click - Search in form instead of document Signed-off-by: Yarden Shoham --- web_src/js/features/admin/users.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web_src/js/features/admin/users.js b/web_src/js/features/admin/users.js index ee2722a546241..dae66e67c90fb 100644 --- a/web_src/js/features/admin/users.js +++ b/web_src/js/features/admin/users.js @@ -21,20 +21,19 @@ export function initAdminUserListSearchForm() { for (const radio of form.querySelectorAll('input[type=radio]')) { radio.addEventListener('click', () => { form.submit(); - return false; }); } - const resetButtons = document.querySelectorAll('.j-reset-status-filter'); + const resetButtons = form.querySelectorAll('.j-reset-status-filter'); for (const button of resetButtons) { - button.addEventListener('click', () => { + 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(); - return false; }); } } From dd9398da16be7d15c57e7e65d6d21a0da198a10c Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 13 Feb 2024 12:23:06 +0200 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: wxiaoguang --- web_src/js/features/admin/users.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/admin/users.js b/web_src/js/features/admin/users.js index dae66e67c90fb..7cac603b5c3b6 100644 --- a/web_src/js/features/admin/users.js +++ b/web_src/js/features/admin/users.js @@ -5,14 +5,14 @@ export function initAdminUserListSearchForm() { const form = document.querySelector('#user-list-search-form'); if (!form) return; - for (const button of document.querySelectorAll(`button[name=sort][value="${searchForm.SortType}"]`)) { + 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; - for (const input of document.querySelectorAll(`input[name="status_filter[${k}]"][value="${v}"]`)) { + for (const input of form.querySelectorAll(`input[name="status_filter[${k}]"][value="${v}"]`)) { input.checked = true; } }