From be7a928ce22a72d6c5e8030e994dcd877592295e Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 20 Jul 2025 08:37:18 +0200
Subject: [PATCH] Add SortHeader component for sorting functionality in
 TransactionsTable. Update TransactionsTable to prevent row selection when
 clicking on IBAN text. Minor adjustment in gridConfig for layout consistency.

---
 client/src/components/TransactionsTable.js  | 10 +++-
 client/src/components/config/gridConfig.js  |  1 +
 client/src/components/headers/SortHeader.js | 66 +++++++++++++++++++++
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/headers/SortHeader.js

diff --git a/client/src/components/TransactionsTable.js b/client/src/components/TransactionsTable.js
index 805d385..dd3ba74 100644
--- a/client/src/components/TransactionsTable.js
+++ b/client/src/components/TransactionsTable.js
@@ -151,11 +151,19 @@ class TransactionsTable extends Component {
     const field = event.colDef.field;
     
     // Don't select on selection column or document column (last cell)
-    // Allow IBAN column to trigger selection
     if (field === 'selection' || field === 'documents') {
       return;
     }
     
+    // For IBAN column, check if we clicked on the actual text (which should trigger filter)
+    if (field === 'Kontonummer/IBAN') {
+      const clickTarget = event.event?.target;
+      // If clicked on a span element (the IBAN text), don't select row
+      if (clickTarget && clickTarget.tagName === 'SPAN' && clickTarget.style.textDecoration === 'underline') {
+        return;
+      }
+    }
+    
     // Toggle row selection
     const rowData = event.data;
     if (!rowData) return;
diff --git a/client/src/components/config/gridConfig.js b/client/src/components/config/gridConfig.js
index 0574eb3..6d76a87 100644
--- a/client/src/components/config/gridConfig.js
+++ b/client/src/components/config/gridConfig.js
@@ -35,6 +35,7 @@ export const getColumnDefs = () => [
       // These will be set by the parent component
     }
   },
+
   {
     headerName: 'Datum',
     field: 'Buchungstag',
diff --git a/client/src/components/headers/SortHeader.js b/client/src/components/headers/SortHeader.js
new file mode 100644
index 0000000..88a2b85
--- /dev/null
+++ b/client/src/components/headers/SortHeader.js
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowUpward, ArrowDownward } from '@mui/icons-material';
+
+const SortHeader = (params) => {
+  const [sortState, setSortState] = useState(null);
+  
+  // Update sort state when it changes
+  useEffect(() => {
+    const updateSortState = () => {
+      const currentSort = params.column?.getSort();
+      setSortState(currentSort);
+    };
+    
+    // Initial sort state
+    updateSortState();
+    
+    // Listen for sort changes
+    if (params.api) {
+      params.api.addEventListener('sortChanged', updateSortState);
+      return () => {
+        params.api.removeEventListener('sortChanged', updateSortState);
+      };
+    }
+  }, [params.api, params.column]);
+
+  const handleSort = (direction, event) => {
+    if (params.setSort) {
+      params.setSort(direction, event.shiftKey);
+    }
+  };
+
+  return (
+    <div style={{ 
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      width: '100%',
+      gap: 0,
+      backgroundColor: '#f8f9fa',
+      borderBottom: '1px solid #dee2e6'
+    }}>
+      <ArrowUpward 
+        sx={{ 
+          fontSize: '10px', 
+          color: sortState === 'asc' ? '#0969da' : '#ccc',
+          opacity: sortState === 'asc' ? 1 : 0.5,
+          cursor: 'pointer'
+        }}
+        onClick={(e) => handleSort('asc', e)}
+      />
+      <ArrowDownward 
+        sx={{ 
+          fontSize: '10px', 
+          color: sortState === 'desc' ? '#0969da' : '#ccc',
+          opacity: sortState === 'desc' ? 1 : 0.5,
+          cursor: 'pointer'
+        }}
+        onClick={(e) => handleSort('desc', e)}
+      />
+    </div>
+  );
+};
+
+export default SortHeader; 
\ No newline at end of file