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

Added javascript and htmx to change the url

Browse Source
This commit is contained in:
Julio-Oliveira-Encora 2024-04-08 09:32:21 -03:00
parent a02aadc3aa
commit 1b932c7e92
1 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,30 +2,33 @@
{% 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="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()"/> hx-get="{{ request.full_path }}" hx-target="#object_list"
<button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i></button> 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> </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> <script>
htmx.defineExtension('push-url-w-params', { htmx.defineExtension('push-url-w-params', {
onEvent : function(name, e) { onEvent: function (name, e) {
if (name === "htmx:configRequest") { if (name === "htmx:configRequest") {
const params = new URLSearchParams(e.detail.parameters).toString() const params = new URLSearchParams(e.detail.parameters).toString()
window.history.replaceState(null, "", window.location.pathname) window.history.replaceState(null, "", window.location.pathname)
@ -34,7 +37,7 @@
} }
} }
}) })
function getParams() { function getParams() {
const quickSearchParameters = htmx.values(htmx.find("#quick_search")); const quickSearchParameters = htmx.values(htmx.find("#quick_search"));
let link = document.getElementById("current_view") let link = document.getElementById("current_view")
@ -42,8 +45,6 @@
const search_parameter = `q=${quickSearchParameters.q}` const search_parameter = `q=${quickSearchParameters.q}`
link = link.href + "&" + search_parameter link = link.href + "&" + search_parameter
} }
const teste = document.getElementById("current_view").setAttribute("href", link) document.getElementById("current_view").setAttribute("href", link)
console.log(link)
} }
</script> </script>