pagination + sql expressions + frontend improvements

react/shared/elements/dialog.jsx

@@ -1,8 +1,14 @@
-import React, {useContext} from "react";
-import {Dialog as MuiDialog,  DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material";
-import {Button} from "@material-ui/core";
-import {LocaleContext} from "../locale";
-import "./dialog.css";
+import React, {useState} from "react";
+import {
+    Box,
+    Button,
+    Dialog as MuiDialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    Input, TextField
+} from "@mui/material";
 
 export default function Dialog(props) {
 
@@ -10,37 +16,55 @@ export default function Dialog(props) {
     const onClose = props.onClose || function() { };
     const onOption = props.onOption || function() { };
     const options = props.options || ["Close"];
-    const type = props.type || "default";
-    const {translate: L} = useContext(LocaleContext);
+    const inputs = props.inputs || [];
 
+    const [inputData, setInputData] = useState({});
 
     let buttons = [];
-    for (let name of options) {
-        let type = "default";
-        if (name === "Yes") type = "warning";
-        else if(name === "No") type = "danger";
-
+    for (const [index, name] of options.entries()) {
         buttons.push(
-            <Button variant={"outlined"} size={"small"} type="button" key={"button-" + name}
-                    data-dismiss={"modal"} onClick={() => { onClose(); onOption(name); }}>
+            <Button variant={"outlined"} size={"small"} key={"button-" + name}
+                    onClick={() => { onClose(); onOption(index, inputData); }}>
                 {name}
             </Button>
         )
     }
 
+    let inputElements = [];
+    for (const input of inputs) {
+        let inputProps = { ...input };
+        delete inputProps.name;
+        delete inputProps.type;
+
+        switch (input.type) {
+            case 'text':
+                inputElements.push(<TextField
+                    {...inputProps}
+                    size={"small"} fullWidth={true}
+                    key={"input-" + input.name}
+                    value={inputData[input.name] || ""}
+                    onChange={e => setInputData({ ...inputData, [input.name]: e.target.value })}
+                />)
+                break;
+        }
+    }
+
     return <MuiDialog
         open={show}
-        onClose={onClose}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description">
-        <DialogTitle>{ props.title }</DialogTitle>
+        onClose={onClose}>
+        <DialogTitle>
+            { props.title }
+        </DialogTitle>
         <DialogContent>
             <DialogContentText>
                 { props.message }
             </DialogContentText>
+            <Box mt={2}>
+                { inputElements }
+            </Box>
         </DialogContent>
         <DialogActions>
-            {buttons}
+            { buttons }
         </DialogActions>
     </MuiDialog>
 }