DB Ent. fix recursion

react/shared/elements/data-table.js

@@ -5,7 +5,7 @@ import React, {useCallback, useContext, useEffect, useState} from "react";
 import "./data-table.css";
 import {LocaleContext} from "../locale";
 import clsx from "clsx";
-import {Box, IconButton} from "@mui/material";
+import {Box, IconButton, TextField} from "@mui/material";
 import {formatDate, formatDateTime} from "../util";
 import CachedIcon from "@material-ui/icons/Cached";
 
@@ -72,6 +72,8 @@ export function DataTable(props) {
     for (const [index, column] of columns.entries()) {
         if (!(column instanceof DataColumn)) {
             throw new Error("DataTable can only have DataColumn-objects as column definition, got: " + typeof column);
+        } else if (column.hidden) {
+            continue;
         }
 
         if (sortable && column.sortable) {
@@ -147,6 +149,7 @@ export class DataColumn {
         this.field = field;
         this.sortable = !params.hasOwnProperty("sortable") || !!params.sortable;
         this.align = params.align || "left";
+        this.hidden = !!params.hidden;
         this.params = params;
     }
 
@@ -167,8 +170,14 @@ export class StringColumn extends DataColumn {
     renderData(L, entry, index) {
         let data = super.renderData(L, entry, index);
 
+        if (this.params.maxLength && data?.length && data.length > this.params.maxLength) {
+            data = data.substring(0, this.params.maxLength) + "...";
+        }
+
         if (this.params.style) {
-            data = <span style={this.params.style}>{data}</span>
+            let style = (typeof this.params.style === 'function'
+                ? this.params.style(entry) : this.params.style);
+            data = <span style={style}>{data}</span>
         }
 
         return data;
@@ -241,6 +250,25 @@ export class BoolColumn extends DataColumn {
     }
 }
 
+export class InputColumn extends DataColumn {
+    constructor(label, field, type, onChange, params = {}) {
+        super(label, field, { ...params, sortable: false });
+        this.type = type;
+        this.onChange = onChange;
+        this.props = params.props || {};
+    }
+
+    renderData(L, entry, index) {
+        let value = super.renderData(L, entry, index);
+        if (this.type === 'text') {
+            return <TextField {...this.props} size={"small"} fullWidth={true}
+                              value={value} onChange={(e) => this.onChange(entry, index, e.target.value)} />
+        }
+
+        return <>[Invalid type: {this.type}]</>
+    }
+}
+
 export class ControlsColumn extends DataColumn {
     constructor(label, buttons = [], params = {}) {
         super(label, null, { align: "center", ...params, sortable: false });

react/shared/elements/dialog.jsx

@@ -7,7 +7,7 @@ import {
     DialogContent,
     DialogContentText,
     DialogTitle,
-    Input, TextField
+    Input, List, ListItem, TextField
 } from "@mui/material";
 
 export default function Dialog(props) {
@@ -57,6 +57,18 @@ export default function Dialog(props) {
                     onChange={e => setInputData({ ...inputData, [input.name]: e.target.value })}
                 />)
                 break;
+            case 'list':
+                delete inputProps.items;
+                let listItems = input.items.map((item, index) => <ListItem key={"item-" + index}>{item}</ListItem>);
+                inputElements.push(<Box
+                    {...inputProps}
+                    sx={{marginTop: 1}}
+                    key={"input-" + input.name}
+                >
+                    <List>
+                        {listItems}
+                    </List>
+                </Box>);
         }
     }