dalbodeule/snap-admin
1
0
Fork 0
mirror of https://github.com/dalbodeule/snap-admin.git synced 2025-06-09 05:48:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/main/resources/static/css/dbadmin.css
View File

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

19
src/main/resources/static/js/filters.js Normal file
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');
}
});
});
});

1
src/main/resources/templates/fragments/resources.html
View File

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

25
src/main/resources/templates/model/list.html
View File

@ -66,22 +66,21 @@
<div class="box"> <div class="box">
<h3 class="fw-bold mb-3"><i class="bi bi-funnel"></i> Filters</h3> <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 filterable-field" th:each="field : ${schema.getFilterableFields()}">
<div class="card mb-3 cursor-pointer"> <div class="card-header noselect cursor-pointer">
<div class="card-header"> <i class="bi bi-caret-right filter-icon align-middle"></i>
<i class="bi bi-caret-right"></i> <span class="fw-bold" th:text="${field.getName()}"></span> <span class="fw-bold align-middle" th:text="${field.getName()}"></span>
</div>
<div class="card-body d-none">
<th:block th:if="${field.getConnectedType() != null}">
<div th:each="val : ${schema.getFieldValues(field)}">
<span th:text="${val}"></span>
</div>
</th:block>
</div>
</div> </div>
<div class="card-body d-none">
<th:block th:if="${field.getConnectedType() != null}">
<div th:each="val : ${schema.getFieldValues(field)}">
<span th:text="${val}"></span>
</div>
</th:block>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>