feat: champ de recherche dossiers dans la sidebar du viewer
Filtrage côté client en temps réel par nom de dossier ou document. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -77,6 +77,25 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Search */
|
||||||
|
.sidebar-search {
|
||||||
|
padding: 0.75rem 1rem 0.5rem;
|
||||||
|
border-bottom: 1px solid #1e293b;
|
||||||
|
}
|
||||||
|
.sidebar-search input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.45rem 0.6rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #334155;
|
||||||
|
background: #1e293b;
|
||||||
|
color: #e2e8f0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
}
|
||||||
|
.sidebar-search input::placeholder { color: #475569; }
|
||||||
|
.sidebar-search input:focus { border-color: #3b82f6; }
|
||||||
|
|
||||||
/* Admin section */
|
/* Admin section */
|
||||||
.sidebar-admin {
|
.sidebar-admin {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
@@ -224,6 +243,9 @@
|
|||||||
<h1>T2A Viewer</h1>
|
<h1>T2A Viewer</h1>
|
||||||
<p>Visualisation CIM-10</p>
|
<p>Visualisation CIM-10</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="sidebar-search">
|
||||||
|
<input type="text" id="sidebar-search" placeholder="Rechercher un dossier…" autocomplete="off">
|
||||||
|
</div>
|
||||||
<nav class="sidebar-nav" id="sidebar-nav">
|
<nav class="sidebar-nav" id="sidebar-nav">
|
||||||
{% block sidebar %}{% endblock %}
|
{% block sidebar %}{% endblock %}
|
||||||
</nav>
|
</nav>
|
||||||
@@ -300,6 +322,45 @@
|
|||||||
|
|
||||||
loadModels();
|
loadModels();
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
// Sidebar search filter
|
||||||
|
(function() {
|
||||||
|
const input = document.getElementById('sidebar-search');
|
||||||
|
const nav = document.getElementById('sidebar-nav');
|
||||||
|
if (!input || !nav) return;
|
||||||
|
|
||||||
|
input.addEventListener('input', function() {
|
||||||
|
const q = this.value.toLowerCase().trim();
|
||||||
|
const groups = nav.querySelectorAll('.group-title');
|
||||||
|
|
||||||
|
groups.forEach(function(groupEl) {
|
||||||
|
// Collect all sibling links until next group-title
|
||||||
|
const links = [];
|
||||||
|
let next = groupEl.nextElementSibling;
|
||||||
|
while (next && !next.classList.contains('group-title')) {
|
||||||
|
if (next.tagName === 'A') links.push(next);
|
||||||
|
next = next.nextElementSibling;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!q) {
|
||||||
|
groupEl.style.display = '';
|
||||||
|
links.forEach(function(a) { a.style.display = ''; });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupMatch = groupEl.textContent.toLowerCase().includes(q);
|
||||||
|
let anyLinkMatch = false;
|
||||||
|
|
||||||
|
links.forEach(function(a) {
|
||||||
|
const match = groupMatch || a.textContent.toLowerCase().includes(q);
|
||||||
|
a.style.display = match ? '' : 'none';
|
||||||
|
if (match) anyLinkMatch = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
groupEl.style.display = (groupMatch || anyLinkMatch) ? '' : 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
{% block scripts %}{% endblock %}
|
{% block scripts %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user