This commit is contained in:
Francesco 2023-09-18 18:18:31 +02:00
parent cca1dd6abe
commit a91cddc7a2
4 changed files with 48 additions and 14 deletions

View File

@ -137,6 +137,13 @@ td.table-checkbox, th.table-checkbox {
cursor: pointer;
}
.noselect {
cursor: pointer; -webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
/**
AUTOCOMPLETE
**/
@ -159,3 +166,11 @@ AUTOCOMPLETE
.clear-all-badge {
padding: 0.4rem;
}
/**
* Filters
*/
.filterable-field .card-header:hover {
background-color: #F0F0F0;
}

View File

@ -0,0 +1,19 @@
document.addEventListener("DOMContentLoaded", () => {
let rootElements = document.querySelectorAll('.filterable-field');
rootElements.forEach(root => {
root.querySelector(".card-header").addEventListener('click', function(e) {
if (root.querySelector(".card-body").classList.contains('d-none')) {
root.querySelector(".card-body").classList.remove('d-none');
root.querySelector(".card-body").classList.add('d-block');
root.querySelector(".card-header i.bi").classList.remove('bi-caret-right');
root.querySelector(".card-header i.bi").classList.add('bi-caret-down');
} else {
root.querySelector(".card-body").classList.remove('d-block');
root.querySelector(".card-body").classList.add('d-none');
root.querySelector(".card-header i.bi").classList.remove('bi-caret-down');
root.querySelector(".card-header i.bi").classList.add('bi-caret-right');
}
});
});
});

View File

@ -9,6 +9,7 @@
<script type="text/javascript" src="/js/table.js"></script>
<script type="text/javascript" src="/js/autocomplete.js"></script>
<script type="text/javascript" src="/js/autocomplete-multi.js"></script>
<script type="text/javascript" src="/js/filters.js"></script>
<title th:text="${title != null ? title + ' | Spring Boot DB Admin Panel' : 'Spring Boot DB Admin Panel'}"></title>
</head>

View File

@ -66,10 +66,10 @@
<div class="box">
<h3 class="fw-bold mb-3"><i class="bi bi-funnel"></i> Filters</h3>
<div th:each="field : ${schema.getFilterableFields()}">
<div class="card mb-3 cursor-pointer">
<div class="card-header">
<i class="bi bi-caret-right"></i> <span class="fw-bold" th:text="${field.getName()}"></span>
<div class="card mb-3 filterable-field" th:each="field : ${schema.getFilterableFields()}">
<div class="card-header noselect cursor-pointer">
<i class="bi bi-caret-right filter-icon align-middle"></i>
<span class="fw-bold align-middle" th:text="${field.getName()}"></span>
</div>
<div class="card-body d-none">
@ -87,7 +87,6 @@
</div>
</div>
</div>
</div>
</body>
</html>