Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Chargen per Klick auf die ganze Zeile auswaehlen

Browse Source 
Nicht nur die kleine Checkbox schaltet die Auswahl, sondern ein Klick irgendwo
in die Zeile (ausser auf Bedienelemente wie Lagerort-Dropdown/Link). Ausgewaehlte
Zeilen werden hervorgehoben. Neuer DataTable-Prop onRowClick.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-29 14:08:12 +02:00
parent 51c02091ed
commit 5550897319
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/DataTable.jsx
View File

@@ -29,7 +29,7 @@ function savePersisted(id, data) {
export default function DataTable({ export default function DataTable({
id, columns, rows, getRowKey, rowClassName, id, columns, rows, getRowKey, rowClassName,
empty = "Nichts gefunden.", loading = false, toolbarExtra = null, tree = null, empty = "Nichts gefunden.", loading = false, toolbarExtra = null, tree = null,
onVisibleRows = null, onVisibleRows = null, onRowClick = null,
}) { }) {
const colByKey = useMemo(() => Object.fromEntries(columns.map((c) => [c.key, c])), [columns]); const colByKey = useMemo(() => Object.fromEntries(columns.map((c) => [c.key, c])), [columns]);
@@ -371,7 +371,9 @@ export default function DataTable({
</thead> </thead>
<tbody> <tbody>
{displayRows.map(({ row, depth, hasChildren }) => ( {displayRows.map(({ row, depth, hasChildren }) => (
<tr key={getRowKey(row)} className={rowClassName?.(row) || ""}> <tr key={getRowKey(row)} className={rowClassName?.(row) || ""}
onClick={onRowClick ? (e) => onRowClick(row, e) : undefined}
style={onRowClick ? { cursor: "pointer" } : undefined}>
{orderedCols.map((c) => ( {orderedCols.map((c) => (
<td key={c.key} className={c.align === "num" ? "num" : ""}> <td key={c.key} className={c.align === "num" ? "num" : ""}>
{tree && treeActive && c.key === tree.column ? ( {tree && treeActive && c.key === tree.column ? (

6
web/src/pages/Charges.jsx
View File

@@ -178,6 +178,12 @@ export default function Charges() {
<div className="card"> <div className="card">
<DataTable id="charges" columns={columns} rows={lots} loading={loading} <DataTable id="charges" columns={columns} rows={lots} loading={loading}
onVisibleRows={setVisible} onVisibleRows={setVisible}
rowClassName={(l) => (selected.has(l.id) ? "row-active" : "")}
onRowClick={(l, e) => {
// Klicks auf Bedienelemente (Checkbox, Lagerort-Dropdown, Link) nicht
// als Zeilenauswahl werten – überall sonst die Zeile umschalten.
if (!e.target.closest("input, select, a, button, label")) toggle(l.id);
}}
getRowKey={(l) => l.id} empty="Keine Chargen im Bestand." /> getRowKey={(l) => l.id} empty="Keine Chargen im Bestand." />
</div> </div>
</div> </div>