Feat: Add Expand/Collapse All buttons to articles view

This commit is contained in:
Gemini Bot
2025-12-03 23:45:56 +00:00
parent 9cf753aae5
commit 75fb8e781b

View File

@@ -133,10 +133,16 @@ $conn->close();
<?php echo $message; ?>
<div class="filter-controls p-3 border-bottom bg-light">
<div class="row g-2">
<div class="col-md-5"><input type="text" id="filter-text" class="form-control form-control-sm" placeholder="Suchen..."></div>
<div class="row g-2 align-items-center">
<div class="col-md-4"><input type="text" id="filter-text" class="form-control form-control-sm" placeholder="Suchen..."></div>
<div class="col-md-3"><select id="filter-category" class="form-select form-select-sm"><option value="">Alle Kategorien</option><?php foreach($categories_for_filter as $cat) echo '<option value="'.$cat['id'].'">'.htmlspecialchars($cat['name']).'</option>'; ?></select></div>
<div class="col-md-4"><select id="filter-manufacturer" class="form-select form-select-sm"><option value="">Alle Hersteller</option><?php foreach($manufacturers_for_filter as $man) echo '<option value="'.$man['id'].'">'.htmlspecialchars($man['name']).'</option>'; ?></select></div>
<div class="col-md-3"><select id="filter-manufacturer" class="form-select form-select-sm"><option value="">Alle Hersteller</option><?php foreach($manufacturers_for_filter as $man) echo '<option value="'.$man['id'].'">'.htmlspecialchars($man['name']).'</option>'; ?></select></div>
<div class="col-md-2 text-end">
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-secondary" id="btn-expand-all" title="Alle ausklappen"><i class="fas fa-expand-alt"></i></button>
<button type="button" class="btn btn-outline-secondary" id="btn-collapse-all" title="Alle einklappen"><i class="fas fa-compress-alt"></i></button>
</div>
</div>
</div>
</div>
@@ -385,6 +391,18 @@ document.addEventListener('DOMContentLoaded', function () {
filterCategory.addEventListener('change', renderTable);
filterManufacturer.addEventListener('change', renderTable);
document.getElementById('btn-expand-all').addEventListener('click', function() {
collapsedCategories.clear();
renderTable();
});
document.getElementById('btn-collapse-all').addEventListener('click', function() {
// Find all currently rendered categories
const visibleCategories = Array.from(document.querySelectorAll('.category-header')).map(el => el.getAttribute('data-category'));
visibleCategories.forEach(c => collapsedCategories.add(c));
renderTable();
});
renderTable();
});
</script>