294 lines
10 KiB
HTML
294 lines
10 KiB
HTML
{% load i18n %}
|
|
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
|
|
<div class="oh-main__titlebar oh-main__titlebar--left">
|
|
<h1 class="oh-main__titlebar-title fw-bold mb-0">{{nav_title}}</h1>
|
|
<a
|
|
class="oh-main__titlebar-search-toggle"
|
|
role="button"
|
|
aria-label="Toggle Search"
|
|
@click="searchShow = !searchShow"
|
|
>
|
|
<ion-icon
|
|
name="search-outline"
|
|
class="oh-main__titlebar-serach-icon"
|
|
></ion-icon>
|
|
</a>
|
|
</div>
|
|
{% if search_url %}
|
|
<form autocomplete="off"
|
|
id="filterForm"
|
|
onsubmit="event.preventDefault()"
|
|
hx-get="{{search_url}}?&referrer={{request.META.HTTP_REFERER}}&{{request.GET.urlencode}}"
|
|
hx-replace-url="false"
|
|
hx-target="{{search_swap_target}}"
|
|
hx-on:submit="htmxLoadIndicator(this);"
|
|
class="oh-main__titlebar oh-main__titlebar--right"
|
|
>
|
|
<input type="text" name="nav_url" value="{{request.path}}" hidden>
|
|
<div class="oh-input-group oh-input__search-group" id="searchGroup">
|
|
<ion-icon
|
|
name="search-outline"
|
|
class="oh-input-group__icon oh-input-group__icon--left"
|
|
></ion-icon>
|
|
<input
|
|
type="text"
|
|
class="oh-input oh-input__icon"
|
|
name="search"
|
|
aria-label="Search Input"
|
|
placeholder="Search"
|
|
autocomplete="false"
|
|
autofocus ="true"
|
|
onkeyup="
|
|
$(this).closest('form').find('#applyFilter').click();
|
|
{% if search_in %}
|
|
$('#applyFilter')[0].click();if(this.value) {
|
|
$('.search_text').html(this.value)
|
|
$(this).parent().find('#dropdown').show()
|
|
}else{
|
|
$(this).parent().find('#dropdown').hide()
|
|
}
|
|
{% endif %}
|
|
"
|
|
{% if search_in %}
|
|
onfocus="
|
|
if (this.value) {
|
|
$(this).parent().find('#dropdown').show()
|
|
}"
|
|
onfocusout="
|
|
setTimeout(function() {
|
|
$('#dropdown').hide()
|
|
}, 300);
|
|
"
|
|
{% endif %}
|
|
{{search_input_attrs|safe}}
|
|
/>
|
|
{% if search_in %}
|
|
<input type="text" hidden name="search_field">
|
|
<div class="custom-dropdown" id="dropdown" style="z-index: 1000 !important;">
|
|
<ul class="search_content">
|
|
{% for option in search_in %}
|
|
<li>
|
|
<a href="#" onclick="$('[name=search_field]').val('{{option.0}}'); $(this).closest('form').find('#applyFilter').click()">
|
|
{% trans "Search" %} <b>{{option.1}}</b> {% trans "for:" %}
|
|
<b class="search_text"></b>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="oh-main__titlebar-button-container">
|
|
{% if view_types %}
|
|
<ul class="oh-view-types">
|
|
{% for type in view_types %}
|
|
<li class="oh-view-type" data-url="{{type.url}}" data-type="{{type.type}}" hx-get="{% url "active-hnv-view-type" %}?view={{type.type}}&path={{request.path}}" hx-swap="none" onclick="$(this).closest('form').attr('hx-get','{{type.url}}?&referrer={{request.META.HTTP_REFERER}}&{{request.GET.urlencode}}');$(this).closest('form').find('#applyFilter').click();
|
|
">
|
|
<a class="oh-btn oh-btn--view" {{type.attrs|safe}}
|
|
><ion-icon name="{{type.icon}}"></ion-icon
|
|
></a>
|
|
{% if active_view.type == type.type %}
|
|
<script>
|
|
$("form#filterForm.oh-main__titlebar oh-main__titlebar--right").attr('hx-get','{{type.url}}?&referrer={{request.META.HTTP_REFERER}}&{{request.GET.urlencode}}');
|
|
$(".oh-view-types .oh-view-type[data-type={{type.type}}] a").addClass("oh-btn--view-active")
|
|
|
|
</script>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
|
|
{% if filter_body_template %}
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button class="oh-btn ml-2" onclick="event.preventDefault()" @click="open = !open">
|
|
<ion-icon name="filter" class="mr-1"></ion-icon>{% trans "Filter" %}
|
|
<div id="filterCount"></div>
|
|
</button>
|
|
<div
|
|
class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
|
|
x-show="open"
|
|
@click.outside="open = false"
|
|
>
|
|
{% include filter_body_template %}
|
|
<input type="radio" name="filter_applied" checked hidden>
|
|
<div class="oh-dropdown__filter-footer">
|
|
<button
|
|
type="submit"
|
|
id="applyFilter"
|
|
onclick="
|
|
filterCountUpdate('filterForm');
|
|
// if (event.isTrusted) {
|
|
var formData = new FormData($('#filterForm')[0]);
|
|
var filterData = {};
|
|
formData.forEach((value, key) => {
|
|
if (filterData[key]) {
|
|
filterData[key] = [].concat(filterData[key], value);
|
|
} else {
|
|
filterData[key] = value;
|
|
}
|
|
});
|
|
$.ajax({
|
|
type: 'get',
|
|
url: `{% url 'last-applied-filter' %}`,
|
|
data: filterData,
|
|
traditional:true,
|
|
success: function (response) {
|
|
|
|
}
|
|
});
|
|
|
|
// }
|
|
"
|
|
class="oh-btn oh-btn--secondary oh-btn--small w-100">
|
|
{% trans "Filter" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<button
|
|
hidden
|
|
type="submit"
|
|
id="applyFilter"
|
|
class="oh-btn oh-btn--secondary oh-btn--small w-100">
|
|
{% trans "Filter" %}
|
|
</button>
|
|
{% endif %}
|
|
{% if group_by_fields %}
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button class="oh-btn ml-2" @click="open = !open" onclick="event.preventDefault()">
|
|
<ion-icon name="library-outline" class="mr-1 md hydrated" role="img" aria-label="library outline"></ion-icon>
|
|
{% trans "Group By" %}
|
|
<div id="filterCount"></div>
|
|
</button>
|
|
<div class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4" x-show="open" @click.outside="open = false" style="display: none">
|
|
<div class="oh-accordion">
|
|
<label for="id_field">{% trans "Group By" %}</label>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-12 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label" for="id_field">{% trans "Field" %}</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-12 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<select onchange="$(this).closest('form').find('#applyFilter').click()" class="oh-select mt-1 w-100" id="id_field" name="field" style="width:100%;">
|
|
<option value="">{% trans "Select" %}</option>
|
|
{% for field in group_by_fields %}
|
|
<option value="{{field.0}}">{{field.1}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if actions %}
|
|
<div class="oh-btn-group ml-2">
|
|
<div class="oh-dropdown" x-data="{open: false}">
|
|
<button
|
|
onclick="event.preventDefault()"
|
|
class="oh-btn oh-btn--dropdown"
|
|
@click="open = !open"
|
|
@click.outside="open = false"
|
|
>
|
|
{% trans "Actions" %}
|
|
</button>
|
|
<div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open">
|
|
<ul class="oh-dropdown__items">
|
|
{% for action in actions %}
|
|
<li class="oh-dropdown__item">
|
|
<a class="oh-dropdown__link" {{action.attrs|safe}}>{{action.action}}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<input type="hidden" id="pageInput">
|
|
<input type="hidden" id="sortInput">
|
|
</form>
|
|
{% endif %}
|
|
|
|
{% if create_attrs %}
|
|
<a
|
|
class="oh-btn oh-btn--secondary ml-2"
|
|
{{create_attrs|safe}}
|
|
>
|
|
<ion-icon
|
|
name="add-sharp"
|
|
class="mr-1 md hydrated"
|
|
role="img"
|
|
aria-label="add sharp"
|
|
></ion-icon
|
|
>{% trans "Create" %}
|
|
</a>
|
|
{% endif %}
|
|
|
|
</div>
|
|
<script>
|
|
var form = $('#filterForm')[0];
|
|
var data ={{last_filter|safe}}
|
|
for (const key in data) {
|
|
const field = form.elements[key];
|
|
if ({{empty_inputs|safe}}.includes(key)) {
|
|
continue
|
|
}
|
|
const value = data[key][0]; // Get the first element in the array
|
|
|
|
if (field) {
|
|
if (field.type === 'checkbox') {
|
|
field.checked = value === 'on';
|
|
} else if (field.type === 'select-multiple') {
|
|
// Handle multiple select fields
|
|
Array.from(field.options).forEach(option => {
|
|
option.selected = data[key].includes(option.value);
|
|
});
|
|
} else {
|
|
field.value = value; // Set the value for other input types
|
|
}
|
|
}
|
|
}
|
|
setTimeout(() => {
|
|
$(".oh-btn--view-active").click();
|
|
{% if apply_first_filter %}
|
|
if (!$(".oh-btn--view-active").length) {
|
|
$("#applyFilter").click()
|
|
}
|
|
{% endif %}
|
|
}, 100);
|
|
$(".oh-btn--view").click(function (e) {
|
|
e.preventDefault();
|
|
$(".oh-btn--view-active").removeClass("oh-btn--view-active");
|
|
$(this).addClass("oh-btn--view-active");
|
|
});
|
|
if (!$(".oh-btn--view-active").length) {
|
|
// $("a.oh-btn--view:first").trigger("click")
|
|
}
|
|
$(".oh-accordion-header").click(function (e) {
|
|
e.preventDefault();
|
|
$(this).parent().toggleClass("oh-accordion--show");
|
|
});
|
|
$(document).ready(function() {
|
|
$("#filterForm").on("htmx:configRequest", function(event) {
|
|
if (event.detail.verb == "get" && event.target.tagName == "FORM") {
|
|
event.detail.path = $(this).attr("hx-get");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</section>
|
|
<div id="filterTagContainerSectionNav" class="oh-titlebar-container__filters mb-2 mt-0 oh-wrapper"></div>
|
|
<script>
|
|
filterCountUpdate("filterForm")
|
|
$(document).ready(function () {
|
|
$("#filterForm select").parent().find("span").remove()
|
|
$("#filterForm select").select2()
|
|
});
|
|
</script>
|