Added javascript and htmx to change the url.

This commit is contained in:
Julio-Oliveira-Encora 2024-04-05 17:45:43 -03:00
parent b7668fbfc3
commit a02aadc3aa
2 changed files with 29 additions and 3 deletions

View File

@ -4,8 +4,8 @@
<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" id="quicksearch" class="form-control" placeholder="Quick search"
hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, 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()"/>
<button class="btn bg-transparent" type="button" id="quicksearch_clear"><i class="mdi mdi-close-circle"></i></button>
</div>
{% block extra_table_controls %}{% endblock %}
@ -21,3 +21,29 @@
{% 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
}
const teste = document.getElementById("current_view").setAttribute("href", link)
console.log(link)
}
</script>

View File

@ -4,7 +4,7 @@
<i class="mdi mdi-download"></i>&nbsp;{% trans "Export" %}
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="?{% if url_params %}{{ url_params }}&{% endif %}export=table">{% trans "Current View" %}</a></li>
<li><a id="current_view" class="dropdown-item" href="?{% if url_params %}{{ url_params }}&{% endif %}export=table">{% trans "Current View" %}</a></li>
<li><a class="dropdown-item" href="?{% if url_params %}{{ url_params }}&{% endif %}export">{% trans "All Data" %} ({{ data_format }})</a></li>
{% if export_templates %}
<li>