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';
/**
* Show/hide quicksearch clear button.
*
@ -9,36 +10,59 @@ 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');
} 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.
*/
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, {
passive: true
})
quicksearch.addEventListener("search", quickSearchEventHandler, {
passive: true
})
quicksearch.addEventListener('keyup', quickSearchEventHandler, {
passive: true,
});
quicksearch.addEventListener('search', quickSearchEventHandler, {
passive: true,
});
quicksearch.addEventListener('change', handleQuickSearchParams);
if (isTruthy(clearbtn)) {
clearbtn.addEventListener("click", async () => {
const search = new Event('search');
quicksearch.value = '';
await new Promise(f => setTimeout(f, 100));
quicksearch.dispatchEvent(search);
}, {
passive: true
})
clearbtn.addEventListener(
'click',
async () => {
const search = new Event('search');
quicksearch.value = '';
await new Promise(f => setTimeout(f, 100));
quicksearch.dispatchEvent(search);
},
{
passive: true,
},
);
}
}
}

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

@ -2,49 +2,25 @@
{% load i18n %}
<div class="row mb-3">
<div class="col-auto table-controls noprint">
<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"
hx-get="{{ request.full_path }}" hx-target="#object_list"
hx-trigger="keyup changed delay:500ms, search" hx-ext="push-url-w-params" onChange="getParams()"/>
<button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i>
</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 class="col-auto table-controls noprint">
<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" />
<button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i>
</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>
<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>