NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-08-13 11:08:18 -06:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

Addressed PR comments

Browse Source
This commit is contained in:
Julio-Oliveira-Encora 2024-04-18 20:37:18 -03:00
parent 1b932c7e92
commit 9b219e0e42
2 changed files with 63 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
netbox/project-static/src/search.ts
View File

@ -1,5 +1,6 @@
import { isTruthy } from './util'; import { isTruthy } from './util';
/** /**
* Show/hide quicksearch clear button. * Show/hide quicksearch clear button.
* *
@ -9,36 +10,59 @@ 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');
} else { } else {
inputgroup.classList.remove("hide-last-child"); inputgroup.classList.remove('hide-last-child');
} }
} }
} }
/**
* 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;
if (quickSearchParameters != null) {
const search_parameter = `q=${quickSearchParameters.value}`;
const linkUpdated = link?.href + '&' + search_parameter;
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);
if (isTruthy(clearbtn)) { if (isTruthy(clearbtn)) {
clearbtn.addEventListener("click", async () => { clearbtn.addEventListener(
const search = new Event('search'); 'click',
quicksearch.value = ''; async () => {
await new Promise(f => setTimeout(f, 100)); const search = new Event('search');
quicksearch.dispatchEvent(search); quicksearch.value = '';
}, { await new Promise(f => setTimeout(f, 100));
passive: true quicksearch.dispatchEvent(search);
}) },
{
passive: true,
},
);
} }
} }
} }

64
netbox/templates/inc/table_controls_htmx.html
View File

@ -2,49 +2,25 @@
{% load i18n %} {% load i18n %}
<div class="row mb-3"> <div class="row mb-3">
<div class="col-auto table-controls noprint"> <div class="col-auto table-controls noprint">
<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="quick_search" <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" onChange="getParams()"/> hx-trigger="keyup changed delay:500ms, search" hx-ext="push-url-w-params" />
<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>
{% block extra_table_controls %}{% endblock %}
</div>
<div class="col-auto ms-auto table-controls noprint">
{% if request.user.is_authenticated and table_modal %}
<div class="table-configure input-group input-group-sm">
<button type="button" data-bs-toggle="modal" title="{% trans "Configure Table" %}"
data-bs-target="#{{ table_modal }}"
class="btn btn-sm btn-outline-dark">
<i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
</button>
</div>
{% endif %}
</div> </div>
{% block extra_table_controls %}{% endblock %}
</div>
<div class="col-auto ms-auto table-controls noprint">
{% if request.user.is_authenticated and table_modal %}
<div class="table-configure input-group input-group-sm">
<button type="button" data-bs-toggle="modal" title="{% trans "Configure Table" %}"
data-bs-target="#{{ table_modal }}"
class="btn btn-sm btn-outline-dark">
<i class="mdi mdi-cog"></i> {% trans "Configure Table" %}
</button>
</div>
{% endif %}
</div>
</div> </div>
<script>
htmx.defineExtension('push-url-w-params', {
onEvent: function (name, e) {
if (name === "htmx:configRequest") {
const params = new URLSearchParams(e.detail.parameters).toString()
window.history.replaceState(null, "", window.location.pathname)
const url = `${window.location}?${params}`
window.history.replaceState(null, "", url)
}
}
})
function getParams() {
const quickSearchParameters = htmx.values(htmx.find("#quick_search"));
let link = document.getElementById("current_view")
if (quickSearchParameters != null) {
const search_parameter = `q=${quickSearchParameters.q}`
link = link.href + "&" + search_parameter
}
document.getElementById("current_view").setAttribute("href", link)
}
</script>