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

View File

@ -6,7 +6,7 @@
<div class="input-group input-group-sm me-2 quicksearch hide-last-child"> <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" <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-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 class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i>
</button> </button>
</div> </div>