{
"event": "PostToolUse",
"raw_data": {
"session_id": "bf8a0fc3-34fa-408b-8067-b725d1fe9b14",
"transcript_path": "\/root\/.claude\/projects\/-var-www\/bf8a0fc3-34fa-408b-8067-b725d1fe9b14.jsonl",
"cwd": "\/var\/www\/dev.campus.systemische-tools.de",
"permission_mode": "plan",
"hook_event_name": "PostToolUse",
"tool_name": "Read",
"tool_input": {
"file_path": "\/var\/www\/dev.campus.systemische-tools.de\/public\/js\/components\/data-table.js",
"limit": 100
},
"tool_response": {
"type": "text",
"file": {
"filePath": "\/var\/www\/dev.campus.systemische-tools.de\/public\/js\/components\/data-table.js",
"content": "\/**\n * DataTable Component with Pagination\n * Contract: js-browser-architecture-contract_v2.yaml, html-tables-contract_v1.0.yaml\n * Principles: DRY, KISS, OOP, SRP, YAGNI\n *\/\nimport { domAdapter } from \"..\/adapters\/domAdapter.js\";\nimport { eventAdapter } from \"..\/adapters\/eventAdapter.js\";\n\nclass DataTable {\n constructor(tableId, options, deps) {\n this.deps = deps;\n this.cleanupFunctions = [];\n this.table = domAdapter.getElementById(tableId);\n\n if (this.table === null) {\n return;\n }\n\n this.tbody = domAdapter.querySelector(this.table, \"tbody\");\n this.headers = domAdapter.querySelectorAll(this.table, \"th[data-sort]\");\n this.rows = [];\n this.sortColumn = null;\n this.sortDirection = \"asc\";\n this.searchInput = options.searchInput !== undefined\n ? domAdapter.getElementById(options.searchInput)\n : null;\n this.filters = options.filters !== undefined ? options.filters : {};\n\n \/\/ Pagination\n this.pageSize = options.pageSize !== undefined ? options.pageSize : 20;\n this.currentPage = 1;\n this.paginationContainer = null;\n\n this.setup();\n }\n\n setup() {\n this.cacheRows();\n this.bindSorting();\n this.bindSearch();\n this.bindFilters();\n this.createPaginationUI();\n this.render();\n }\n\n cacheRows() {\n const rows = domAdapter.querySelectorAll(this.tbody, \"tr\");\n this.rows = Array.from(rows).map((row) => {\n const cells = domAdapter.querySelectorAll(row, \"td\");\n return {\n element: row,\n data: Array.from(cells).map((td) =>\n domAdapter.getTextContent(td).trim().toLowerCase()\n ),\n raw: Array.from(cells).map((td) =>\n domAdapter.getTextContent(td).trim()\n )\n };\n });\n }\n\n bindSorting() {\n this.headers.forEach((header, index) => {\n domAdapter.setStyle(header, \"cursor\", \"pointer\");\n\n const cleanup = eventAdapter.on(\n header,\n \"click\",\n () => this.sort(index, domAdapter.getAttribute(header, \"data-sort\")),\n this.deps,\n \"DATATABLE_SORT\",\n \"datatable\"\n );\n this.cleanupFunctions.push(cleanup);\n });\n }\n\n sort(columnIndex, columnName) {\n const direction =\n this.sortColumn === columnName && this.sortDirection === \"asc\"\n ? \"desc\"\n : \"asc\";\n this.sortColumn = columnName;\n this.sortDirection = direction;\n\n this.headers.forEach((h) => {\n domAdapter.removeClass(h, \"sort-asc\");\n domAdapter.removeClass(h, \"sort-desc\");\n });\n\n const activeHeader = domAdapter.querySelector(\n this.table,\n `th[data-sort=\"${columnName}\"]`\n );\n if (activeHeader !== null) {\n domAdapter.addClass(activeHeader, `sort-${direction}`);\n }\n\n this.rows.sort((a, b) => {\n const valA = a.raw[columnIndex] !== undefined ? a.raw[columnIndex] : \"\";",
"numLines": 100,
"startLine": 1,
"totalLines": 362
}
},
"tool_use_id": "toolu_01Lx2bzcMZvitoAZQ3Xrkt52"
}
}