search is now isolated to the active tab

This commit is contained in:
Nariman Jelveh
2025-08-03 19:06:45 -07:00
parent 3df0bac9dc
commit 59c297db49
5 changed files with 108 additions and 34 deletions

View File

@@ -237,8 +237,8 @@
</div>
<div class="search-container">
<input style="background-image:url(./img/magnifier-outline.svg);" class="search" placeholder="Search apps">
<img class="search-clear" src="./img/close.svg">
<input style="background-image:url(./img/magnifier-outline.svg);" class="search search-apps" placeholder="Search apps">
<img class="search-clear search-clear-apps" src="./img/close.svg">
</div>
<button class="button button-danger disabled delete-apps-btn" style="float:right;">Delete</button>
@@ -273,8 +273,8 @@
</div>
<div class="search-container">
<input style="background-image:url(./img/magnifier-outline.svg);" class="search" placeholder="Search workers">
<img class="search-clear" src="./img/close.svg">
<input style="background-image:url(./img/magnifier-outline.svg);" class="search search-workers" placeholder="Search workers">
<img class="search-clear search-clear-workers" src="./img/close.svg">
</div>
<button class="button button-danger disabled delete-workers-btn" style="float:right;">Delete</button>
@@ -306,8 +306,8 @@
</div>
<div class="search-container">
<input style="background-image:url(./img/magnifier-outline.svg);" class="search" placeholder="Search websites">
<img class="search-clear" src="./img/close.svg">
<input style="background-image:url(./img/magnifier-outline.svg);" class="search search-websites" placeholder="Search websites">
<img class="search-clear search-clear-websites" src="./img/close.svg">
</div>
<button class="button button-danger disabled delete-websites-btn" style="float:right;">Delete</button>

View File

@@ -2114,26 +2114,30 @@ $('.refresh-app-list').on('click', function (e) {
})
})
$(document).on('click', '.search', function (e) {
$(document).on('click', '.search-apps', function (e) {
e.stopPropagation();
e.preventDefault();
// don't let click bubble up to window
e.stopImmediatePropagation();
})
$(document).on('input change keyup keypress keydown paste cut', '.search', function (e) {
$(document).on('input change keyup keypress keydown paste cut', '.search-apps', function (e) {
search_apps();
})
window.search_apps = function() {
// search apps for query
search_query = $(this).val().toLowerCase();
search_query = $('.search-apps').val().toLowerCase();
if (search_query === '') {
// hide 'clear search' button
$('.search-clear').hide();
$('.search-clear-apps').hide();
// show all apps again
$(`.app-card`).show();
// remove 'has-value' class from search input
$('.search').removeClass('has-value');
$('.search-apps').removeClass('has-value');
} else {
// show 'clear search' button
$('.search-clear').show();
$('.search-clear-apps').show();
// show apps that match search_query and hide apps that don't
apps.forEach((app) => {
if (
@@ -2149,15 +2153,17 @@ $(document).on('input change keyup keypress keydown paste cut', '.search', funct
}
})
// add 'has-value' class to search input
$('.search').addClass('has-value');
}
})
$('.search-apps').addClass('has-value');
}
}
$(document).on('click', '.search-clear', function (e) {
$('.search').val('');
$('.search').trigger('change');
$('.search').focus();
$(document).on('click', '.search-clear-apps', function (e) {
$('.search-apps').val('');
$('.search-apps').trigger('change');
$('.search-apps').focus();
search_query = '';
// remove 'has-value' class from search input
$('.search-apps').removeClass('has-value');
})
$(document).on('change', '.app-checkbox', function (e) {

View File

@@ -106,6 +106,8 @@ $(document).on('click', '.tab-btn', async function (e) {
if ($(this).attr('data-tab') === 'apps') {
refresh_app_list();
activeTab = 'apps';
// Reset apps search when tab is activated
resetAppsSearch();
}
// ---------------------------------------------------------------
// Workers tab
@@ -113,6 +115,8 @@ $(document).on('click', '.tab-btn', async function (e) {
else if ($(this).attr('data-tab') === 'workers') {
refresh_worker_list();
activeTab = 'workers';
// Reset workers search when tab is activated
resetWorkersSearch();
}
// ---------------------------------------------------------------
// Websites tab
@@ -120,6 +124,8 @@ $(document).on('click', '.tab-btn', async function (e) {
else if ($(this).attr('data-tab') === 'websites') {
refresh_websites_list();
activeTab = 'websites';
// Reset websites search when tab is activated
resetWebsitesSearch();
}
// ---------------------------------------------------------------
// Payout Method tab
@@ -439,6 +445,39 @@ $(document).on('click', '.sidebar-toggle', function (e) {
$('body').toggleClass('sidebar-open');
})
// ---------------------------------------------------------------
// Search Reset Functions
// ---------------------------------------------------------------
window.resetAppsSearch = () => {
$('.search-apps').val('');
$('.search-clear-apps').hide();
$('.search-apps').removeClass('has-value');
// Reset search query in apps.js scope if search_apps function is available
if (typeof search_apps === 'function') {
search_apps();
}
}
window.resetWorkersSearch = () => {
$('.search-workers').val('');
$('.search-clear-workers').hide();
$('.search-workers').removeClass('has-value');
// Reset search query in workers.js scope if search_workers function is available
if (typeof search_workers === 'function') {
search_workers();
}
}
window.resetWebsitesSearch = () => {
$('.search-websites').val('');
$('.search-clear-websites').hide();
$('.search-websites').removeClass('has-value');
// Reset search query in websites.js scope if search_websites function is available
if (typeof search_websites === 'function') {
search_websites();
}
}
window.activate_tippy = () => {
tippy('.tippy', {
content(reference) {

View File

@@ -196,18 +196,22 @@ function generate_website_card(website) {
`;
}
$(document).on('input change keyup keypress keydown paste cut', '.search', function (e) {
// search apps for query
search_query = $(this).val().toLowerCase();
$(document).on('input change keyup keypress keydown paste cut', '.search-websites', function (e) {
search_websites();
})
window.search_websites = function() {
// search websites for query
search_query = $('.search-websites').val().toLowerCase();
if (search_query === '') {
// hide 'clear search' button
$('.search-clear').hide();
// show all apps again
$('.search-clear-websites').hide();
// show all websites again
$(`.website-card`).show();
} else {
// show 'clear search' button
$('.search-clear').show();
// show apps that match search_query and hide apps that don't
$('.search-clear-websites').show();
// show websites that match search_query and hide websites that don't
websites.forEach((website) => {
if (
website.subdomain.toLowerCase().includes(search_query.toLowerCase()) ||
@@ -219,7 +223,19 @@ $(document).on('input change keyup keypress keydown paste cut', '.search', funct
$(`.website-card[data-name="${website.subdomain}"]`).hide();
}
})
// add 'has-value' class to search input
$('.search-websites').addClass('has-value');
}
}
$(document).on('click', '.search-clear-websites', function (e) {
$('.search-websites').val('');
$('.search-websites').trigger('change');
$('.search-websites').focus();
search_query = '';
// remove 'has-value' class from search input
$('.search-websites').removeClass('has-value');
})
$(document).on('click', '.delete-websites-btn', async function (e) {

View File

@@ -227,18 +227,22 @@ function generate_worker_card(worker) {
`;
}
$(document).on('input change keyup keypress keydown paste cut', '.search', function (e) {
// search apps for query
search_query = $(this).val().toLowerCase();
$(document).on('input change keyup keypress keydown paste cut', '.search-workers', function (e) {
search_workers();
})
window.search_workers = function() {
// search workers for query
search_query = $('.search-workers').val().toLowerCase();
if (search_query === '') {
// hide 'clear search' button
$('.search-clear').hide();
// show all apps again
$('.search-clear-workers').hide();
// show all workers again
$(`.worker-card`).show();
} else {
// show 'clear search' button
$('.search-clear').show();
// show apps that match search_query and hide apps that don't
$('.search-clear-workers').show();
// show workers that match search_query and hide workers that don't
workers.forEach((worker) => {
if (
worker.name.toLowerCase().includes(search_query.toLowerCase())
@@ -249,7 +253,16 @@ $(document).on('input change keyup keypress keydown paste cut', '.search', funct
$(`.worker-card[data-name="${worker.name}"]`).hide();
}
})
}
}
}
$(document).on('click', '.search-clear-workers', function (e) {
$('.search-workers').val('');
$('.search-workers').trigger('change');
$('.search-workers').focus();
search_query = '';
// remove 'has-value' class from search input
$('.search-workers').removeClass('has-value');
})
$(document).on('click', '.delete-workers-btn', async function (e) {