robobyte-front-builder 1.0.17 → 1.0.19

package/src/views/genericTable/ReportSettingsDialog.js

@@ -0,0 +1,151 @@
+import React, {useState, useEffect} from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  Typography,
+  TextField,
+  IconButton,
+  List,
+  ListItem,
+  Paper,
+  Chip,
+  Alert
+} from '@mui/material'
+import {Add, Delete, Close} from '@mui/icons-material'
+
+const ReportSettingsDialog = ({open, onClose, settings, onSave}) => {
+  const [localSettings, setLocalSettings] = useState({
+    rowUniqueId: []
+  })
+  const [newUniqueIdField, setNewUniqueIdField] = useState('')
+
+  useEffect(() => {
+    if (settings) {
+      setLocalSettings({
+        rowUniqueId: settings.rowUniqueId || []
+      })
+    }
+  }, [settings, open])
+
+  const handleAddUniqueIdField = () => {
+    if (!newUniqueIdField.trim()) return
+
+    setLocalSettings(prev => ({
+      ...prev,
+      rowUniqueId: [...prev.rowUniqueId, newUniqueIdField.trim()]
+    }))
+    setNewUniqueIdField('')
+  }
+
+  const handleRemoveUniqueIdField = (index) => {
+    setLocalSettings(prev => ({
+      ...prev,
+      rowUniqueId: prev.rowUniqueId.filter((_, i) => i !== index)
+    }))
+  }
+
+  const handleSave = () => {
+    onSave(localSettings)
+    onClose()
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h6">Report Settings</Typography>
+          <IconButton onClick={onClose} size="small">
+            <Close/>
+          </IconButton>
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <Box sx={{display: 'flex', flexDirection: 'column', gap: 3, mt: 2}}>
+          {/* Row Unique ID Section */}
+          <Paper sx={{p: 2, bgcolor: 'background.default'}}>
+            <Typography variant="subtitle1" sx={{mb: 2, fontWeight: 'bold'}}>
+              Row Unique ID
+            </Typography>
+            <Alert severity="info" sx={{mb: 2, fontSize: '0.875rem'}}>
+              Define field(s) that uniquely identify each row. Can be a single field (e.g., "Id"),
+              nested field (e.g., "User.Id"), or multiple fields for composite keys.
+              Use dot notation for nested fields.
+            </Alert>
+
+            <Box sx={{display: 'flex', gap: 2, mb: 2}}>
+              <TextField
+                size="small"
+                fullWidth
+                label="Field Path"
+                placeholder="Id or Product.Id or User.Email"
+                value={newUniqueIdField}
+                onChange={(e) => setNewUniqueIdField(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    handleAddUniqueIdField()
+                  }
+                }}
+              />
+              <Button
+                variant="contained"
+                startIcon={<Add/>}
+                onClick={handleAddUniqueIdField}
+                disabled={!newUniqueIdField.trim()}
+              >
+                Add
+              </Button>
+            </Box>
+
+            {localSettings.rowUniqueId.length > 0 ? (
+              <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1}}>
+                {localSettings.rowUniqueId.map((field, index) => (
+                  <Chip
+                    key={index}
+                    label={field}
+                    onDelete={() => handleRemoveUniqueIdField(index)}
+                    color="primary"
+                    variant="outlined"
+                  />
+                ))}
+              </Box>
+            ) : (
+              <Typography variant="body2" color="text.secondary">
+                No unique ID fields defined. Add at least one field to uniquely identify rows.
+              </Typography>
+            )}
+          </Paper>
+
+          {/* Preview */}
+          <Paper sx={{p: 2, bgcolor: 'background.default'}}>
+            <Typography variant="subtitle2" sx={{mb: 1}}>Preview</Typography>
+            <Box
+              component="pre"
+              sx={{
+                p: 2,
+                bgcolor: 'grey.900',
+                color: 'grey.100',
+                borderRadius: 1,
+                overflow: 'auto',
+                fontSize: '0.875rem'
+              }}
+            >
+              {JSON.stringify(localSettings, null, 2)}
+            </Box>
+          </Paper>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="contained" onClick={handleSave}>
+          Save Settings
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default ReportSettingsDialog