Feat: Add Expand/Collapse All buttons to articles view
This commit is contained in:
24
articles.php
24
articles.php
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user