fix: users page QoL improvements

- focus on search box on page load
- persist search options in query string on search
This commit is contained in:
Julian Lam
2024-12-04 12:44:00 -05:00
parent 309fcf4e2b
commit 2e0a1751f9

View File

@@ -29,6 +29,16 @@ define('forum/users', [
searchResultCount = params && params.resultCount; searchResultCount = params && params.resultCount;
$('#search-user').on('keyup', utils.debounce(doSearch, 250)); $('#search-user').on('keyup', utils.debounce(doSearch, 250));
$('.search select, .search input[type="checkbox"]').on('change', doSearch); $('.search select, .search input[type="checkbox"]').on('change', doSearch);
// Populate box with query if present
const searchEl = document.getElementById('search-user');
const search = new URLSearchParams(document.location.search);
const query = search.get('query');
if (query) {
searchEl.value = query;
}
searchEl.focus();
}; };
function doSearch() { function doSearch() {
@@ -36,20 +46,25 @@ define('forum/users', [
return; return;
} }
$('[component="user/search/icon"]').removeClass('fa-search').addClass('fa-spinner fa-spin'); $('[component="user/search/icon"]').removeClass('fa-search').addClass('fa-spinner fa-spin');
const username = $('#search-user').val();
const activeSection = getActiveSection(); const activeSection = getActiveSection();
const query = { const query = {
section: activeSection, section: activeSection || 'users',
page: 1, page: 1,
}; };
if (!username) { const username = $('#search-user').val();
if (username) {
query.query = username;
} else {
return loadPage(query); return loadPage(query);
} }
query.query = username; const sortBy = getSortBy();
query.sortBy = getSortBy(); if (sortBy) {
query.sortBy = sortBy;
}
const filters = []; const filters = [];
if ($('.search .online-only').is(':checked') || (activeSection === 'online')) { if ($('.search .online-only').is(':checked') || (activeSection === 'online')) {
filters.push('online'); filters.push('online');
@@ -85,6 +100,10 @@ define('forum/users', [
api.get('/api/users', query) api.get('/api/users', query)
.then(renderSearchResults) .then(renderSearchResults)
.catch(alerts.error); .catch(alerts.error);
// Update query string
const search = new URLSearchParams(query);
ajaxify.updateHistory(`users?${search.toString()}`, true);
} }
function renderSearchResults(data) { function renderSearchResults(data) {