feat(library): add class filtering and sorting to library loans admin view

- Add class filter dropdown and class column to borrowings table
- Implement interactive client-side column sorting for tables
- Update backend route to resolve and map user class information

Web/app.py

@@ -3342,10 +3342,12 @@ def library_loans_admin():
         db = client[MONGODB_DB]
         items_col = db['items']
         ausleihungen_col = db['ausleihungen']
+        users_col = db['users']
 
         library_items = list(items_col.find(
             {'ItemType': {'$in': LIBRARY_ITEM_TYPES}, 'Deleted': {'$ne': True}},
-            {'Name': 1, 'Code_4': 1, 'Anschaffungskosten': 1, 'Condition': 1, 'HasDamage': 1, 'DamageReports': 1, 'Verfuegbar': 1, 'User': 1, 'ItemType': 1, 'Author': 1, 'ISBN': 1}
+            {'Name': 1, 'Code_4': 1, 'Anschaffungskosten': 1, 'Condition': 1, 'HasDamage': 1, 'DamageReports': 1,
+             'Verfuegbar': 1, 'User': 1, 'ItemType': 1, 'Author': 1, 'ISBN': 1}
         ))
         item_map = {str(item['_id']): item for item in library_items if item.get('_id')}
         item_ids = list(item_map.keys())
@@ -3354,28 +3356,68 @@ def library_loans_admin():
         if item_ids:
             active_records = list(ausleihungen_col.find(
                 {'Item': {'$in': item_ids}, 'Status': {'$in': ['active', 'planned', 'completed']}},
-                {'User': 1, 'Item': 1, 'Status': 1, 'Start': 1, 'End': 1, 'Period': 1, 'Notes': 1, 'InvoiceData': 1}
+                {'User': 1, 'Item': 1, 'Status': 1, 'Start': 1, 'End': 1, 'Period': 1, 'Notes': 1, 'InvoiceData': 1,
+                 'Klasse': 1, 'Class': 1, 'school_class': 1}
             ).sort('Start', -1))
 
+        user_map = {}
+        if active_records:
+            raw_users = list({r.get('User') for r in active_records if r.get('User')})
+            decrypted_users = []
+            for ru in raw_users:
+                try:
+                    du = decrypt_text(ru) if ru else ''
+                    if du:
+                        decrypted_users.append(du)
+                except Exception:
+                    pass
+
+            query_identifiers = list(set(raw_users + decrypted_users))
+            if query_identifiers:
+                user_docs = list(users_col.find(
+                    {'$or': [
+                        {'Username': {'$in': query_identifiers}},
+                        {'Name': {'$in': query_identifiers}},
+                        {'User': {'$in': query_identifiers}}
+                    ]},
+                    {'Username': 1, 'Name': 1, 'User': 1, 'Klasse': 1, 'Class': 1, 'school_class': 1}
+                ))
+                for u in user_docs:
+                    cls = u.get('Klasse') or u.get('Class') or u.get('school_class') or ''
+                    if cls:
+                        if u.get('Username'): user_map[u['Username']] = cls
+                        if u.get('Name'): user_map[u['Name']] = cls
+                        if u.get('User'): user_map[u['User']] = cls
+
         active_item_ids = set()
         loan_entries = []
         for record in active_records:
             item_id = str(record.get('Item') or '')
-            item_doc = item_map.get(item_id)
             if item_id and record.get('Status') == 'active':
                 active_item_ids.add(item_id)
 
+            item_doc = item_map.get(item_id)
             if not item_doc:
                 continue
 
             invoice_data = record.get('InvoiceData') or {}
             condition_value = str(item_doc.get('Condition', '')).strip().lower()
-            item_has_damage = bool(item_doc.get('HasDamage')) or condition_value == 'destroyed' or bool(item_doc.get('DamageReports'))
+            item_has_damage = bool(item_doc.get('HasDamage')) or condition_value == 'destroyed' or bool(
+                item_doc.get('DamageReports'))
             damage_reports = item_doc.get('DamageReports', []) or []
 
             raw_user = record.get('User', '')
             decrypted_user = decrypt_text(raw_user) if raw_user else ''
 
+            user_class = (
+                    record.get('Klasse')
+                    or record.get('Class')
+                    or record.get('school_class')
+                    or user_map.get(raw_user, '')
+                    or user_map.get(decrypted_user, '')
+                    or ''
+            )
+
             loan_entries.append({
                 'id': str(record.get('_id')),
                 'item_id': item_id,
@@ -3385,6 +3427,7 @@ def library_loans_admin():
                 'item_isbn': item_doc.get('ISBN', ''),
                 'item_cost_raw': item_doc.get('Anschaffungskosten', ''),
                 'user': decrypted_user,
+                'klasse': user_class,
                 'status': record.get('Status', ''),
                 'start': fmt_dt(record.get('Start')),
                 'end': fmt_dt(record.get('End')),

Web/templates/library_borrowings_admin.html

@@ -72,9 +72,10 @@
     color: #1f2937;
   }
 
+  /* Angepasst für 4 Filter-Felder statt 3 */
   .filter-bar {
     display: grid;
-    grid-template-columns: 1fr 220px 220px;
+    grid-template-columns: 1fr 140px 180px 180px;
     gap: 10px;
     margin-bottom: 16px;
   }
@@ -121,6 +122,7 @@
     letter-spacing: 0.04em;
     color: #64748b;
     background: var(--ui-surface-soft);
+    user-select: none; /* Verhindert Textmarkierung beim Klicken */
   }
 
   .library-table tr:hover td {
@@ -149,6 +151,7 @@
   .badge-open { background: #fee2e2; color: #991b1b; }
   .badge-paid { background: #dcfce7; color: #166534; }
   .badge-damaged { background: #fee2e2; color: #991b1b; }
+  .badge-class { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; } /* Neues Badge für Klasse */
 
   .row-actions {
     display: flex;
@@ -222,15 +225,30 @@
   </div>
 
   <div class="filter-bar">
-    <input id="library-search" type="text" placeholder="Nach Element, Benutzer, Ausweis oder Rechnung suchen...">
+    <input id="library-search" type="text" placeholder="Nach Element, Benutzer, Klasse, Ausweis oder Rechnung suchen...">
+
+    <!-- NEU: Klassen-Filter -->
+    <select id="class-filter">
+      <option value="all">Alle Klassen</option>
+      {% set classes = [] %}
+      {% for e in loan_entries %}
+        {% if e.klasse and e.klasse not in classes %}
+          {% set _ = classes.append(e.klasse) %}
+        {% endif %}
+      {% endfor %}
+      {% for c in classes|sort %}
+        <option value="{{ c|lower }}">{{ c }}</option>
+      {% endfor %}
+    </select>
+
     <select id="loan-status-filter">
-      <option value="">Alle Ausleihen</option>
+      <option value="">Alle Status</option>
       <option value="active">Aktiv</option>
       <option value="planned">Geplant</option>
       <option value="completed">Abgeschlossen</option>
     </select>
     <select id="damage-filter">
-      <option value="all">Alle Einträge</option>
+      <option value="all">Alle Zustände</option>
       <option value="damage">Nur defekt</option>
       <option value="clean">Nur ohne Schaden</option>
     </select>
@@ -242,18 +260,31 @@
     <table class="library-table" id="loans-table">
       <thead>
         <tr>
-          <th>Status</th>
-          <th>Element</th>
-          <th>Benutzer</th>
-          <th>Zeit</th>
-          <th>Rechnung</th>
-          <th>Schaden</th>
+          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 0)">Status ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 1)">Element ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 2)">Benutzer ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 3)">Klasse ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 4)">Zeit ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 5)">Rechnung ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('loans-table', 6)">Schaden ↕</th>
           <th>Aktionen</th>
         </tr>
       </thead>
       <tbody>
+        <!-- NEU: data-klasse hinzugefügt -->
         {% for e in loan_entries %}
-        <tr class="loan-row" data-borrow-id="{{ e.id }}" data-item-id="{{ e.item_id }}" data-item-name="{{ e.item_name }}" data-item-code="{{ e.item_code }}" data-item-cost="{{ e.item_cost_raw }}" data-user-name="{{ e.user }}" data-search="{{ (e.item_name ~ ' ' ~ e.item_code ~ ' ' ~ e.user ~ ' ' ~ e.invoice_number ~ ' ' ~ e.item_author ~ ' ' ~ e.item_isbn)|lower }}" data-status="{{ e.status }}" data-has-damage="{{ '1' if e.has_damage else '0' }}">
+        <tr class="loan-row"
+            data-borrow-id="{{ e.id }}"
+            data-item-id="{{ e.item_id }}"
+            data-item-name="{{ e.item_name }}"
+            data-item-code="{{ e.item_code }}"
+            data-item-cost="{{ e.item_cost_raw }}"
+            data-user-name="{{ e.user }}"
+            data-klasse="{{ (e.klasse|default(''))|lower }}"
+            data-search="{{ (e.item_name ~ ' ' ~ e.item_code ~ ' ' ~ e.user ~ ' ' ~ (e.klasse|default('')) ~ ' ' ~ e.invoice_number ~ ' ' ~ e.item_author ~ ' ' ~ e.item_isbn)|lower }}"
+            data-status="{{ e.status }}"
+            data-has-damage="{{ '1' if e.has_damage else '0' }}">
           <td>
             {% if e.status == 'active' %}
               <span class="badge-pill badge-active">Aktiv</span>
@@ -272,11 +303,19 @@
             </div>
           </td>
           <td>
-            <div>{{ e.user }}</div>
-            <div class="muted">{{ e.start }}{% if e.end %} bis {{ e.end }}{% endif %}</div>
+            <div><strong>{{ e.user }}</strong></div>
+          </td>
+          <!-- NEU: Klasse Spalte -->
+          <td>
+            {% if e.klasse %}
+              <span class="badge-pill badge-class">{{ e.klasse }}</span>
+            {% else %}
+              <span class="muted">—</span>
+            {% endif %}
           </td>
           <td>
             <div>{{ e.period or '—' }}</div>
+            <div class="muted">{{ e.start }}{% if e.end %} bis {{ e.end }}{% endif %}</div>
             {% if e.notes %}<div class="muted">{{ e.notes }}</div>{% endif %}
           </td>
           <td>
@@ -355,10 +394,11 @@
     <table class="library-table" id="damaged-table">
       <thead>
         <tr>
-          <th>Element</th>
-          <th>Code</th>
-          <th>Schaden</th>
-          <th>Status</th>
+          <!-- NEU: onClick Handler zum Sortieren hinzugefügt -->
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 0)">Element ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 1)">Code ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 2)">Schaden ↕</th>
+          <th style="cursor: pointer;" onclick="sortTable('damaged-table', 3)">Status ↕</th>
           <th>Aktion</th>
         </tr>
       </thead>
@@ -489,6 +529,7 @@
 <script>
 (function() {
   const searchInput = document.getElementById('library-search');
+  const classFilter = document.getElementById('class-filter'); // NEU: Klassenfilter hinzugefügt
   const statusFilter = document.getElementById('loan-status-filter');
   const damageFilter = document.getElementById('damage-filter');
   const loanRows = Array.from(document.querySelectorAll('.loan-row'));
@@ -505,6 +546,51 @@
   const damageInvoiceReason = document.getElementById('damage-invoice-reason');
   const damageInvoiceReplaceBtn = document.getElementById('damage-invoice-replace-btn');
 
+  // NEU: Globale Sortier-Richtungsobjekte
+  let sortDirections = {};
+
+  // NEU: Sortier-Funktion
+  window.sortTable = function(tableId, columnIndex) {
+    const table = document.getElementById(tableId);
+    const tbody = table.tBodies[0];
+    const rows = Array.from(tbody.querySelectorAll("tr"));
+
+    if (rows.length === 0) return;
+
+    const sortKey = tableId + "-" + columnIndex;
+    if (!(sortKey in sortDirections)) {
+      sortDirections[sortKey] = true;
+    } else {
+      sortDirections[sortKey] = !sortDirections[sortKey];
+    }
+
+    const isAscending = sortDirections[sortKey];
+    const multiplier = isAscending ? 1 : -1;
+
+    // Pfeil im Header aktualisieren
+    const headers = table.querySelectorAll("th");
+    headers.forEach(th => {
+      if(th.innerHTML.includes('↕') || th.innerHTML.includes('▲') || th.innerHTML.includes('▼')) {
+        th.innerHTML = th.innerHTML.replace(/[↕▲▼]/g, '↕');
+      }
+    });
+    const currentTh = headers[columnIndex];
+    if (currentTh) {
+      currentTh.innerHTML = currentTh.innerHTML.replace('↕', isAscending ? '▲' : '▼');
+    }
+
+    // Zeilen sortieren
+    rows.sort((a, b) => {
+      const cellA = a.cells[columnIndex].textContent.trim();
+      const cellB = b.cells[columnIndex].textContent.trim();
+      return cellA.localeCompare(cellB, 'de', { numeric: true, sensitivity: 'base' }) * multiplier;
+    });
+
+    // Neu einfügen
+    rows.forEach(row => tbody.appendChild(row));
+  };
+
+
   // Funktionen für das Reparatur-Modal
   window.openRepairModal = function(itemId, currentCode) {
     const modal = document.getElementById('repair-action-modal');
@@ -512,7 +598,6 @@
     const codeContainer = document.getElementById('new-code-container');
     const replaceBtn = document.getElementById('submit-replace-btn');
 
-    // Setze die Route im Formular (passe hier den Endpunkt an deine Backend-Route an, z.B. /admin/items/ID/resolve_repair)
     form.action = `/admin/items/${itemId}/resolve_repair`;
 
     document.getElementById('repair-action-input').value = 'repair';
@@ -639,20 +724,26 @@
     });
   }
 
+  // NEU: Kombinierte Filter-Funktion (Suche + Status + Schaden + Klasse)
   function applyFilters() {
     const search = (searchInput.value || '').trim().toLowerCase();
     const status = statusFilter.value;
     const damage = damageFilter.value;
+    const klasse = classFilter.value; // NEU
 
     let visibleLoans = 0;
     loanRows.forEach(row => {
       const haystack = row.dataset.search || '';
       const rowStatus = row.dataset.status || '';
+      const rowKlasse = row.dataset.klasse || ''; // NEU
       const hasDamage = row.dataset.hasDamage === '1';
+
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status;
+      const classMatch = klasse === 'all' || rowKlasse === klasse; // NEU
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
-      const show = searchMatch && statusMatch && damageMatch;
+
+      const show = searchMatch && statusMatch && classMatch && damageMatch; // NEU
       row.style.display = show ? '' : 'none';
       if (show) visibleLoans++;
     });
@@ -663,10 +754,17 @@
       const haystack = row.dataset.search || '';
       const rowStatus = row.dataset.status || '';
       const hasDamage = row.dataset.hasDamage === '1';
+
       const searchMatch = !search || haystack.includes(search);
       const statusMatch = !status || rowStatus === status || status === '';
       const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
-      const show = searchMatch && statusMatch && damageMatch;
+
+      // Defekte-Medien-Tabelle hat keine verknüpfte "Klasse", deshalb blenden wir sie nur bei Klassen-Filter "all" ein,
+      // oder wenn gar nicht nach Klasse gefiltert wird, damit sie nicht verschwindet.
+      // Falls sie bei aktiver Klassensuche komplett verschwinden soll, passe die Bedingung an:
+      const classMatch = klasse === 'all';
+
+      const show = searchMatch && statusMatch && damageMatch && classMatch;
       row.style.display = show ? '' : 'none';
       if (show) visibleDamaged++;
     });
@@ -674,6 +772,7 @@
   }
 
   searchInput.addEventListener('input', applyFilters);
+  classFilter.addEventListener('change', applyFilters); // NEU
   statusFilter.addEventListener('change', applyFilters);
   damageFilter.addEventListener('change', applyFilters);
   applyFilters();