Addressed PR comments

This commit is contained in:
Julio-Oliveira-Encora 2024-04-22 12:42:19 -03:00
parent f48cece10f
commit 5fa9cbc4a9
4 changed files with 30 additions and 17 deletions

Binary file not shown.

Binary file not shown.

View File

@ -1,6 +1,5 @@
import { isTruthy } from './util';
/**
* Show/hide quicksearch clear button.
*
@ -10,52 +9,66 @@ function quickSearchEventHandler(event: Event): void {
const quicksearch = event.currentTarget as HTMLInputElement;
const inputgroup = quicksearch.parentElement as HTMLDivElement;
if (isTruthy(inputgroup)) {
if (quicksearch.value === '') {
inputgroup.classList.add('hide-last-child');
if (quicksearch.value === "") {
inputgroup.classList.add("hide-last-child");
clearLinkParams();
} else {
inputgroup.classList.remove('hide-last-child');
inputgroup.classList.remove("hide-last-child");
}
}
}
/**
* Clear the existing search parameters in the link to export Current View.
*/
function clearLinkParams(): void {
const link = document.getElementById("current_view") as HTMLLinkElement;
let linkUpdated = link?.href.split("&")[0];
link.setAttribute("href", linkUpdated);
}
/**
* Update the Export View link to add the Quick Search parameters.
* @param event
*/
function handleQuickSearchParams(event: Event): void {
console.log('getParams');
const quickSearchParameters = event.currentTarget as HTMLInputElement;
const link = document.getElementById('current_view') as HTMLLinkElement;
// Clear the existing search parameters
clearLinkParams();
if (quickSearchParameters != null) {
const link = document.getElementById("current_view") as HTMLLinkElement;
const search_parameter = `q=${quickSearchParameters.value}`;
const linkUpdated = link?.href + '&' + search_parameter;
link.setAttribute('href', linkUpdated);
const linkUpdated = link?.href + "&" + search_parameter;
link.setAttribute("href", linkUpdated);
}
}
/**
* Initialize Quicksearch Event listener/handlers.
*/
export function initQuickSearch(): void {
const quicksearch = document.getElementById('quicksearch') as HTMLInputElement;
const clearbtn = document.getElementById('quicksearch_clear') as HTMLButtonElement;
const quicksearch = document.getElementById("quicksearch") as HTMLInputElement;
const clearbtn = document.getElementById("quicksearch_clear") as HTMLButtonElement;
if (isTruthy(quicksearch)) {
quicksearch.addEventListener('keyup', quickSearchEventHandler, {
quicksearch.addEventListener("keyup", quickSearchEventHandler, {
passive: true,
});
quicksearch.addEventListener('search', quickSearchEventHandler, {
quicksearch.addEventListener("search", quickSearchEventHandler, {
passive: true,
});
quicksearch.addEventListener('change', handleQuickSearchParams);
quicksearch.addEventListener("change", handleQuickSearchParams);
if (isTruthy(clearbtn)) {
clearbtn.addEventListener(
'click',
"click",
async () => {
const search = new Event('search');
quicksearch.value = '';
const search = new Event("search");
quicksearch.value = "";
await new Promise(f => setTimeout(f, 100));
quicksearch.dispatchEvent(search);
},

View File

@ -6,7 +6,7 @@
<div class="input-group input-group-sm me-2 quicksearch hide-last-child">
<input type="search" results="5" name="q" class="form-control" placeholder="Quick search" id="quicksearch"
hx-get="{{ request.full_path }}" hx-target="#object_list"
hx-trigger="keyup changed delay:500ms, search" hx-ext="push-url-w-params" />
hx-trigger="keyup changed delay:500ms, search" />
<button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i>
</button>
</div>