From f24a6979b79e23502ae5e20cd78ac33742e264fd Mon Sep 17 00:00:00 2001
From: Gemini Agent <gemini@example.com>
Date: Tue, 12 May 2026 06:08:43 +0000
Subject: [PATCH] Enhance UI: increase image size and add sort dropdown

- 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.
---
 src/manage_packing_list_items.php | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/manage_packing_list_items.php b/src/manage_packing_list_items.php
index c14a7f0..c8a1ebb 100644
--- a/src/manage_packing_list_items.php
+++ b/src/manage_packing_list_items.php
@@ -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));