Remove debug login page and refactor TransactionsTable to utilize new utility functions and cell renderers for improved code organization and maintainability.

2025-07-20 05:06:28 +02:00
parent 992adc7bcf
commit b9af7694a0
11 changed files with 301 additions and 547 deletions
--- a/client/src/components/config/gridConfig.js
+++ b/client/src/components/config/gridConfig.js
@@ -0,0 +1,165 @@
+import CheckboxFilter from '../filters/CheckboxFilter';
+import TextHeaderWithFilter from '../headers/TextHeaderWithFilter';
+import AmountRenderer from '../cellRenderers/AmountRenderer';
+import TypeRenderer from '../cellRenderers/TypeRenderer';
+import JtlRenderer from '../cellRenderers/JtlRenderer';
+import DescriptionRenderer from '../cellRenderers/DescriptionRenderer';
+import RecipientRenderer from '../cellRenderers/RecipientRenderer';
+
+const formatDate = (dateString) => {
+  if (!dateString) return '';
+  const parts = dateString.split('.');
+  if (parts.length === 3) {
+    return `${parts[0]}.${parts[1]}.20${parts[2]}`;
+  }
+  return dateString;
+};
+
+export const getColumnDefs = () => [
+  {
+    headerName: 'Datum',
+    field: 'Buchungstag',
+    width: 100,
+    valueFormatter: (params) => formatDate(params.value),
+    pinned: 'left',
+    sortable: true,
+    filter: 'agDateColumnFilter',
+    floatingFilter: false,
+    headerComponent: TextHeaderWithFilter
+  },
+  {
+    headerName: 'Beschreibung',
+    field: 'description',
+    width: 350,
+    sortable: true,
+    headerComponent: TextHeaderWithFilter,
+    tooltipField: 'description',
+    cellRenderer: DescriptionRenderer
+  },
+  {
+    headerName: 'Empfänger/Zahler',
+    field: 'Beguenstigter/Zahlungspflichtiger',
+    width: 200,
+    sortable: true,
+    headerComponent: TextHeaderWithFilter,
+    tooltipField: 'Beguenstigter/Zahlungspflichtiger',
+    cellRenderer: RecipientRenderer
+  },
+  {
+    headerName: 'Betrag',
+    field: 'numericAmount',
+    width: 120,
+    cellRenderer: AmountRenderer,
+    sortable: true,
+    filter: 'agNumberColumnFilter',
+    floatingFilter: false,
+    type: 'rightAligned',
+    headerComponent: TextHeaderWithFilter
+  },
+  {
+    headerName: 'Typ',
+    field: 'typeText',
+    width: 70,
+    cellRenderer: TypeRenderer,
+    sortable: true,
+    filter: CheckboxFilter,
+    filterParams: {
+      filterOptions: [
+        {
+          value: 'income',
+          label: 'Einnahme',
+          color: 'success',
+          dotStyle: {
+            width: '8px',
+            height: '8px',
+            backgroundColor: '#388e3c'
+          },
+          condition: (fieldValue) => fieldValue === 'Einnahme'
+        },
+        {
+          value: 'expense',
+          label: 'Ausgabe',
+          color: 'error',
+          dotStyle: {
+            width: '8px',
+            height: '8px',
+            backgroundColor: '#d32f2f'
+          },
+          condition: (fieldValue) => fieldValue === 'Ausgabe'
+        }
+      ]
+    },
+    floatingFilter: false,
+    headerComponent: TextHeaderWithFilter
+  },
+  {
+    headerName: 'JTL',
+    field: 'hasJTL',
+    width: 70,
+    cellRenderer: JtlRenderer,
+    sortable: true,
+    filter: CheckboxFilter,
+    filterParams: {
+      filterOptions: [
+        {
+          value: 'present',
+          label: 'Vorhanden',
+          color: 'success',
+          dotStyle: {
+            width: '12px',
+            height: '12px',
+            backgroundColor: '#388e3c',
+            border: 'none',
+            fontSize: '8px',
+            color: 'white',
+            fontWeight: 'bold',
+            content: '✓'
+          },
+          condition: (fieldValue) => fieldValue === true
+        },
+        {
+          value: 'missing',
+          label: 'Fehlend',
+          color: 'error',
+          dotStyle: {
+            width: '12px',
+            height: '12px',
+            backgroundColor: '#f5f5f5',
+            border: '1px solid #ccc'
+          },
+          condition: (fieldValue) => fieldValue === false
+        }
+      ]
+    },
+    floatingFilter: false,
+    headerComponent: TextHeaderWithFilter
+  }
+];
+
+export const defaultColDef = {
+  resizable: true,
+  sortable: true,
+  filter: true,
+  floatingFilter: false,
+  suppressHeaderMenuButton: false
+};
+
+export const gridOptions = {
+  animateRows: true,
+  rowSelection: {
+    mode: 'singleRow',
+    enableClickSelection: true
+  },
+  rowBuffer: 10,
+  // Enable virtualization (default behavior)
+  suppressRowVirtualisation: false,
+  suppressColumnVirtualisation: false,
+  // Performance optimizations
+  suppressChangeDetection: false,
+  // Row height
+  rowHeight: 26,
+  headerHeight: 40,
+  // Pagination (optional - can be removed for infinite scrolling)
+  pagination: false,
+  paginationPageSize: 100
+};