Invario/Inventarsystem
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Implement bulk delete drawer functionality with UI enhancements

Browse Source
This commit is contained in:
AIIrondev
2026-04-10 22:38:24 +02:00
parent a2c79c80bc
commit 06ab3e1f4d
1 changed files with 97 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/main_admin.html
+97 -22
View File
@@ -26,20 +26,49 @@
font-weight: 600;
}
.bulk-delete-toolbar {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: space-between;
align-items: center;
border: 1px solid #f2c4c4;
background: #fff8f8;
border-radius: 8px;
padding: 12px 14px;
margin: 0 0 18px;
.bulk-delete-drawer-toggle {
position: fixed;
right: 0;
top: 46%;
transform: translateY(-50%);
z-index: 220;
border: none;
border-radius: 10px 0 0 10px;
padding: 10px 10px 10px 8px;
background: #dc3545;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 8px 18px rgba(220, 53, 69, 0.22);
}
.bulk-delete-toolbar strong {
.bulk-delete-drawer-toggle .drawer-icon {
display: inline-block;
margin-right: 4px;
}
.bulk-delete-drawer {
position: fixed;
right: 12px;
top: 50%;
transform: translate(120%, -50%);
width: min(360px, calc(100vw - 24px));
z-index: 219;
border: 1px solid #f2c4c4;
background: #fff8f8;
border-radius: 14px;
padding: 14px;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
transition: transform 0.25s ease;
}
.bulk-delete-drawer.open {
transform: translate(0, -50%);
}
.bulk-delete-drawer strong {
display: block;
margin-bottom: 2px;
}
@@ -50,25 +79,28 @@
margin-top: 4px;
}
.bulk-delete-toolbar small {
.bulk-delete-drawer small {
color: #7a4a4a;
display: block;
margin-top: 2px;
line-height: 1.35;
}
.bulk-delete-actions {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.bulk-delete-actions button {
border: 1px solid #cfd8dc;
border-radius: 6px;
padding: 8px 12px;
border-radius: 8px;
padding: 9px 12px;
cursor: pointer;
background: #fff;
font-weight: 600;
text-align: left;
}
.bulk-delete-actions .danger {
@@ -339,6 +371,18 @@
cursor: pointer;
}
.bulk-delete-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.18);
z-index: 218;
display: none;
}
.bulk-delete-drawer-overlay.open {
display: block;
}
.item-card .item-image {
width: 100%;
height: auto;
@@ -2194,12 +2238,14 @@ document.addEventListener('DOMContentLoaded', ()=>{
</div>
</h1>
<div id="items-indicator" class="items-indicator">Objekte im System: 0</div>
<div class="bulk-delete-toolbar">
<div>
<strong>Massenlöschung nach Kriterien</strong>
<div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
<small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
</div>
<button type="button" id="bulk-delete-drawer-toggle" class="bulk-delete-drawer-toggle" aria-expanded="false" onclick="toggleBulkDeleteDrawer()">
<span class="drawer-icon">🗑</span> Löschen
</button>
<div id="bulk-delete-drawer-overlay" class="bulk-delete-drawer-overlay" onclick="setBulkDeleteDrawer(false)"></div>
<div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
<strong>Massenlöschung nach Kriterien</strong>
<div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
<small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
<div class="bulk-delete-actions">
<button type="button" onclick="selectVisibleItems()">Alle sichtbaren auswählen</button>
<button type="button" onclick="clearBulkSelection()">Auswahl leeren</button>
@@ -2587,6 +2633,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
let currentUsername = '';
let allItems = []; // Cache for all items
let bulkDeleteSelection = new Set();
let bulkDeleteDrawerOpen = false;
const studentCardsModuleEnabled = {{ 'true' if student_cards_module_enabled else 'false' }};
const studentDefaultBorrowDays = {{ student_default_borrow_days|default(14) }};
const studentMaxBorrowDays = {{ student_max_borrow_days|default(365) }};
@@ -2932,6 +2979,28 @@ document.addEventListener('DOMContentLoaded', ()=>{
}
}
function setBulkDeleteDrawer(open) {
bulkDeleteDrawerOpen = Boolean(open);
const drawer = document.getElementById('bulk-delete-drawer');
const overlay = document.getElementById('bulk-delete-drawer-overlay');
const toggle = document.getElementById('bulk-delete-drawer-toggle');
if (drawer) {
drawer.classList.toggle('open', bulkDeleteDrawerOpen);
drawer.setAttribute('aria-hidden', bulkDeleteDrawerOpen ? 'false' : 'true');
}
if (overlay) {
overlay.classList.toggle('open', bulkDeleteDrawerOpen);
}
if (toggle) {
toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false');
toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span> Löschung' : '<span class="drawer-icon">🗑</span> Löschen';
}
}
function toggleBulkDeleteDrawer() {
setBulkDeleteDrawer(!bulkDeleteDrawerOpen);
}
function setBulkDeleteSelection(itemId, checked) {
const normalizedId = String(itemId || '').trim();
if (!normalizedId) {
@@ -2988,6 +3057,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
updateBulkDeleteSummary();
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && bulkDeleteDrawerOpen) {
setBulkDeleteDrawer(false);
}
});
function deleteSelectedItems() {
const selectedIds = [...bulkDeleteSelection];
if (selectedIds.length === 0) {