admin/packliste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance UI: increase image size and add sort dropdown
All checks were successful
Docker Build & Push / build-and-push (push) Successful in 11s
Details

Browse Source 
- Greatly increased image sizes in Lager grid (220px height, 250px width).

- Added new dropdown for sorting by Name, Weight, or Quantity.

- Sorting works correctly alongside grouping.
This commit is contained in:
Gemini Agent
2026-05-12 06:08:43 +00:00
parent 53b07fafa9
commit f24a6979b7
1 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/manage_packing_list_items.php
View File

@@ -151,7 +151,7 @@ $conn->close();
/* Lager Grid */
.lager-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px; padding: 5px;
}
.lager-card {
@@ -161,7 +161,7 @@ $conn->close();
}
.lager-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.lager-img-wrapper {
height: 160px; margin-bottom: 8px; display: flex;
height: 220px; margin-bottom: 8px; display: flex;
align-items: center; justify-content: center;
}
.lager-img-wrapper img {
@@ -223,9 +223,10 @@ $conn->close();
<h5 class="mb-2"><i class="fas fa-boxes me-2"></i>Lagerbestand</h5>
<div class="row g-2">
<div class="col-12"><input type="text" id="filter-text" class="form-control form-control-sm" placeholder="Artikel suchen..."></div>
<div class="col-4"><select id="filter-category" class="form-select form-select-sm"><option value="">-- Kategorien --</option><?php foreach($categories as $c) echo '<option>'.htmlspecialchars($c).'</option>'; ?></select></div>
<div class="col-4"><select id="filter-manufacturer" class="form-select form-select-sm"><option value="">-- Hersteller --</option><?php foreach($manufacturers as $m) echo '<option>'.htmlspecialchars($m).'</option>'; ?></select></div>
<div class="col-4"><select id="group-by" class="form-select form-select-sm"><option value="">Keine Gruppe</option><option value="category_name">Kategorie</option><option value="manufacturer_name">Hersteller</option><option value="storage_location_name">Lagerort</option></select></div>
<div class="col-sm-6 col-md-3"><select id="filter-category" class="form-select form-select-sm"><option value="">-- Kategorien --</option><?php foreach($categories as $c) echo '<option>'.htmlspecialchars($c).'</option>'; ?></select></div>
<div class="col-sm-6 col-md-3"><select id="filter-manufacturer" class="form-select form-select-sm"><option value="">-- Hersteller --</option><?php foreach($manufacturers as $m) echo '<option>'.htmlspecialchars($m).'</option>'; ?></select></div>
<div class="col-sm-6 col-md-3"><select id="group-by" class="form-select form-select-sm"><option value="">Keine Gruppe</option><option value="category_name">Kategorie</option><option value="manufacturer_name">Hersteller</option><option value="storage_location_name">Lagerort</option></select></div>
<div class="col-sm-6 col-md-3"><select id="sort-by" class="form-select form-select-sm"><option value="name_asc">Alphabet (A-Z)</option><option value="weight_asc">Gewicht (Leicht->Schwer)</option><option value="weight_desc">Gewicht (Schwer->Leicht)</option><option value="quantity_desc">Anzahl (Viele->Wenige)</option></select></div>
</div>
</div>
<div class="card-body pane-content" id="lager-container"></div>
@@ -291,6 +292,7 @@ $conn->close();
new TomSelect('#filter-category', tsOptions);
new TomSelect('#filter-manufacturer', tsOptions);
new TomSelect('#group-by', tsOptions);
new TomSelect('#sort-by', { create: false, allowEmptyOption: false, onChange: function() { this.input.dispatchEvent(new Event('change')); } });
const tooltip = document.getElementById('image-preview-tooltip');
if (tooltip) {
@@ -318,6 +320,7 @@ $conn->close();
document.getElementById('filter-category').addEventListener(evt, renderLager);
document.getElementById('filter-manufacturer').addEventListener(evt, renderLager);
document.getElementById('group-by').addEventListener(evt, renderLager);
document.getElementById('sort-by').addEventListener(evt, renderLager);
});
document.getElementById('table-container').addEventListener('click', handlePackedItemActions);
@@ -339,6 +342,7 @@ $conn->close();
const filterCategory = document.getElementById('filter-category').value;
const filterManufacturer = document.getElementById('filter-manufacturer').value;
const groupBy = document.getElementById('group-by').value;
const sortBy = document.getElementById('sort-by').value;
const tableQuantities = {};
const backpackQuantities = {};
@@ -356,7 +360,16 @@ $conn->close();
let groups = {};
allArticles.forEach(article => {
let sortedArticles = [...allArticles];
sortedArticles.sort((a, b) => {
if (sortBy === 'name_asc') return a.name.localeCompare(b.name);
if (sortBy === 'weight_asc') return parseInt(a.weight_grams) - parseInt(b.weight_grams);
if (sortBy === 'weight_desc') return parseInt(b.weight_grams) - parseInt(a.weight_grams);
if (sortBy === 'quantity_desc') return parseInt(b.quantity_owned || 1) - parseInt(a.quantity_owned || 1);
return 0;
});
sortedArticles.forEach(article => {
if (article.parent_article_id) return;
const matchesText = article.name.toLowerCase().includes(filterText) || (article.manufacturer_name && article.manufacturer_name.toLowerCase().includes(filterText)) || (article.product_designation && article.product_designation.toLowerCase().includes(filterText));