robobyte-front-builder 1.0.17 → 1.0.19

package/src/views/genericTable/FormattingSettingsDialog.js

@@ -0,0 +1,546 @@
+import React, {useState, useEffect} from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Grid,
+  TextField,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Typography,
+  Paper,
+  Box,
+  IconButton,
+  Divider,
+  FormControlLabel,
+  Switch,
+  Tooltip,
+  Autocomplete, Collapse
+} from '@mui/material';
+import {DeleteOutline, Plus, ChevronDown, ChevronUp} from 'mdi-material-ui';
+import dynamic from 'next/dynamic';
+
+const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {ssr: false});
+
+const FormattingSettingsDialog = ({open, onClose, field, onSave}) => {
+  const [settings, setSettings] = useState({
+    decimals: 0,
+    conditions: [],
+    fixedStyle: {
+      color: '',
+      backgroundColor: '',
+      fontWeight: 'normal',
+      flashing: false,
+    }
+  });
+
+  useEffect(() => {
+    if (field && field.formatting) {
+      setSettings(field.formatting);
+    } else {
+      setSettings({
+        decimals: 0,
+        conditions: [],
+        fixedStyle: {
+          color: '',
+          backgroundColor: '',
+          fontWeight: 'normal',
+          flashing: false,
+        }
+      });
+    }
+  }, [field, open]);
+
+  const handleSave = () => {
+    onSave(settings);
+    onClose();
+  };
+
+  const addCondition = () => {
+    setSettings(prev => ({
+      ...prev,
+      conditions: [
+        ...prev.conditions,
+        {
+          baseField: 'self', // 'self' or path of another field
+          operator: '==',
+          value: '',
+          valueType: 'static', // 'static' or 'field'
+          compareField: '', // path of field for comparison
+          style: {
+            color: '',
+            backgroundColor: '',
+            fontWeight: 'normal',
+            flashing: false,
+          }
+        }
+      ]
+    }));
+  };
+
+  const removeCondition = (index) => {
+    setSettings(prev => ({
+      ...prev,
+      conditions: prev.conditions.filter((_, i) => i !== index)
+    }));
+  };
+
+  const updateCondition = (index, key, value) => {
+    setSettings(prev => {
+      const newConditions = [...prev.conditions];
+      if (key.includes('.')) {
+        const [obj, prop] = key.split('.');
+        newConditions[index][obj][prop] = value;
+      } else {
+        newConditions[index][key] = value;
+      }
+      return {...prev, conditions: newConditions};
+    });
+  };
+
+  const updateFixedStyle = (key, value) => {
+    setSettings(prev => ({
+      ...prev,
+      fixedStyle: {
+        ...prev.fixedStyle,
+        [key]: value
+      }
+    }));
+  };
+
+  const [expandedEditors, setExpandedEditors] = useState({});
+
+  useEffect(() => {
+    // Expand math expression editors by default if they have content
+    if (open && settings.conditions) {
+      const initialExpanded = {};
+      settings.conditions.forEach((cond, index) => {
+        if (cond.valueType === 'expression') {
+          initialExpanded[index] = true;
+        }
+      });
+      setExpandedEditors(initialExpanded);
+    }
+  }, [open]);
+
+  const toggleEditorExpansion = (index) => {
+    setExpandedEditors(prev => ({
+      ...prev,
+      [index]: !prev[index]
+    }));
+  };
+
+  const isNumeric = field?.propertyType === 'Int' || field?.propertyType === 'Double';
+
+  const fieldOptions = field?.parentFields || []; // This would need to be passed if we want to base on other fields
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth dir="ltr">
+      <DialogTitle>Formatting Settings: {field?.title || field?.headerName}</DialogTitle>
+      <DialogContent>
+        <Grid container spacing={3} sx={{mt: 1}}>
+          {isNumeric && (
+            <Grid size={{ xs: 12 }}>
+              <TextField
+                label="Decimal Places"
+                type="number"
+                fullWidth
+                value={settings.decimals}
+                onChange={(e) => setSettings({...settings, decimals: parseInt(e.target.value) || 0})}
+              />
+            </Grid>
+          )}
+
+          <Grid size={{ xs: 12 }}>
+            <Typography variant="subtitle1" gutterBottom fontWeight="bold">Fixed Style</Typography>
+            <Grid container spacing={2}>
+              <Grid size={{ xs: 3 }}>
+                <TextField
+                  label="Text Color"
+                  type="color"
+                  fullWidth
+                  InputLabelProps={{shrink: true}}
+                  value={settings.fixedStyle?.color || '#000000'}
+                  onChange={(e) => updateFixedStyle('color', e.target.value)}
+                />
+              </Grid>
+              <Grid size={{ xs: 3 }}>
+                <TextField
+                  label="Background Color"
+                  type="color"
+                  fullWidth
+                  InputLabelProps={{shrink: true}}
+                  value={settings.fixedStyle?.backgroundColor || '#ffffff'}
+                  onChange={(e) => updateFixedStyle('backgroundColor', e.target.value)}
+                />
+              </Grid>
+              <Grid size={{ xs: 3 }}>
+                <FormControl fullWidth>
+                  <InputLabel>Font Weight</InputLabel>
+                  <Select
+                    value={settings.fixedStyle?.fontWeight || 'normal'}
+                    label="Font Weight"
+                    onChange={(e) => updateFixedStyle('fontWeight', e.target.value)}
+                  >
+                    <MenuItem value="normal">Normal</MenuItem>
+                    <MenuItem value="bold">Bold</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
+              <Grid display="flex" alignItems="center" size={{ xs: 1 }}>
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={settings.fixedStyle?.flashing || false}
+                      onChange={(e) => updateFixedStyle('flashing', e.target.checked)}
+                    />
+                  }
+                  label="Flashing"
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+
+          <Grid size={{ xs: 12 }}>
+            <Divider sx={{my: 2}} />
+            <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+              <Typography variant="subtitle1" fontWeight="bold">Conditional Formatting (Emphasis)</Typography>
+              <Button startIcon={<Plus />} variant="outlined" size="small" onClick={addCondition}>
+                Add Condition
+              </Button>
+            </Box>
+
+            {settings.conditions.map((condition, index) => (
+              <Paper key={index} variant="outlined" sx={{p: 2, mb: 2, backgroundColor: '#f9f9f9'}}>
+                <Grid container spacing={2} alignItems="center">
+                      <Grid size={{ xs: 1.5 }}>
+                        <FormControl fullWidth size="small">
+                          <InputLabel>Type</InputLabel>
+                          <Select
+                            value={condition.valueType || 'static'}
+                            label="Type"
+                            onChange={(e) => {
+                              const newType = e.target.value;
+                              updateCondition(index, 'valueType', newType);
+                              if (newType === 'expression') {
+                                setExpandedEditors(prev => ({...prev, [index]: true}));
+                              }
+                            }}
+                          >
+                        <MenuItem value="static">Static Value</MenuItem>
+                        <MenuItem value="field">Another Field</MenuItem>
+                        <MenuItem value="expression">Math Expression</MenuItem>
+                      </Select>
+                    </FormControl>
+                  </Grid>
+                      {condition.valueType !== 'expression' && (
+                        <Grid size={{ xs: 12, sm: 3 }}>
+                            <Autocomplete
+                              freeSolo
+                              size="small"
+                              options={['self', ...fieldOptions.map(f => f.path)]}
+                              getOptionLabel={(option) => {
+                                if (option === 'self') return 'self';
+                                const f = fieldOptions.find(fo => fo.path === option);
+                                return f ? `${f.title || f.headerName} (${f.path})` : option;
+                              }}
+                              isOptionEqualToValue={(option, value) => option === value}
+                              value={condition.baseField || 'self'}
+                              onChange={(e, newValue) => {
+                                updateCondition(index, 'baseField', newValue || 'self');
+                              }}
+                              onBlur={(e) => {
+                                const val = e.target.value;
+                                if (val === 'self' || !val) {
+                                  updateCondition(index, 'baseField', 'self');
+                                } else {
+                                  // Find if the typed value matches any of our options' labels or paths
+                                  const matchedOption = fieldOptions.find(f =>
+                                    f.path === val || `${f.title || f.headerName} (${f.path})` === val
+                                  );
+                                  updateCondition(index, 'baseField', matchedOption ? matchedOption.path : val);
+                                }
+                              }}
+                              renderInput={(params) => (
+                                <TextField {...params} label="Base Field" />
+                              )}
+                            />
+                        </Grid>
+                      )}
+                  {condition.valueType !== 'expression' && (
+                    <Grid size={{ xs: 12, sm: 2 }}>
+                      <FormControl fullWidth size="small">
+                        <InputLabel>Operator</InputLabel>
+                        <Select
+                          value={condition.operator}
+                          label="Operator"
+                          onChange={(e) => updateCondition(index, 'operator', e.target.value)}
+                        >
+                          <MenuItem value="==">Equals</MenuItem>
+                          <MenuItem value="!=">Not Equals</MenuItem>
+                          <MenuItem value=">">Greater Than</MenuItem>
+                          <MenuItem value="<">Less Than</MenuItem>
+                          <MenuItem value=">=">Greater Than or Equal</MenuItem>
+                          <MenuItem value="<=">Less Than or Equal</MenuItem>
+                          <MenuItem value="contains">Contains</MenuItem>
+                        </Select>
+                      </FormControl>
+                    </Grid>
+                  )}
+                      <Grid dir="ltr" size={{ xs: 12, sm: condition.valueType === 'expression' ? 4.5 : 3.5 }}>
+                    {condition.valueType === 'field' ? (
+                      <Autocomplete
+                        freeSolo
+                        size="small"
+                        options={fieldOptions.map(f => f.path)}
+                        getOptionLabel={(option) => {
+                          const f = fieldOptions.find(fo => fo.path === option);
+                          return f ? `${f.title || f.headerName} (${f.path})` : option;
+                        }}
+                        isOptionEqualToValue={(option, value) => option === value}
+                        value={condition.compareField || ''}
+                        onChange={(e, newValue) => {
+                          updateCondition(index, 'compareField', newValue || '');
+                        }}
+                        onBlur={(e) => {
+                          const val = e.target.value;
+                          const matchedOption = fieldOptions.find(f =>
+                            f.path === val || `${f.title || f.headerName} (${f.path})` === val
+                          );
+                          updateCondition(index, 'compareField', matchedOption ? matchedOption.path : val);
+                        }}
+                        renderInput={(params) => (
+                          <TextField {...params} label="Compare With" />
+                        )}
+                      />
+                    ) : condition.valueType === 'expression' ? null : (
+                      <TextField
+                        label="Value"
+                        size="small"
+                        fullWidth
+                        value={condition.value}
+                        onChange={(e) => updateCondition(index, 'value', e.target.value)}
+                      />
+                    )}
+                  </Grid>
+                  <Grid size={{ xs: 1.5 }}>
+                    <TextField
+                      label="Color"
+                      type="color"
+                      size="small"
+                      fullWidth
+                      InputLabelProps={{shrink: true}}
+                      value={condition.style.color || '#000000'}
+                      onChange={(e) => updateCondition(index, 'style.color', e.target.value)}
+                    />
+                  </Grid>
+                  <Grid size={{ xs: 1.5 }}>
+                    <TextField
+                      label="BG Color"
+                      type="color"
+                      size="small"
+                      fullWidth
+                      InputLabelProps={{shrink: true}}
+                      value={condition.style.backgroundColor || '#ffffff'}
+                      onChange={(e) => updateCondition(index, 'style.backgroundColor', e.target.value)}
+                    />
+                  </Grid>
+                  <Grid size={{ xs: 1.5 }}>
+                    <FormControl fullWidth size="small">
+                      <InputLabel>Font Weight</InputLabel>
+                      <Select
+                        value={condition.style.fontWeight || 'normal'}
+                        label="Font Weight"
+                        onChange={(e) => updateCondition(index, 'style.fontWeight', e.target.value)}
+                      >
+                        <MenuItem value="normal">Normal</MenuItem>
+                        <MenuItem value="bold">Bold</MenuItem>
+                      </Select>
+                    </FormControl>
+                  </Grid>
+                  <Grid size={{ xs: 1 }}>
+                    <FormControlLabel
+                      control={
+                        <Switch
+                          size="small"
+                          checked={condition.style.flashing || false}
+                          onChange={(e) => updateCondition(index, 'style.flashing', e.target.checked)}
+                        />
+                      }
+                      label={<Typography variant="caption">Flash</Typography>}
+                    />
+                  </Grid>
+                  <Grid display="flex" justifyContent="flex-end" size={{ xs: 0.5 }}>
+                    <IconButton size="small" color="error" onClick={() => removeCondition(index)}>
+                      <DeleteOutline />
+                    </IconButton>
+                  </Grid>
+
+                  {/* Expression Editor in another row */}
+                  {condition.valueType === 'expression' && (
+                    <Grid size={{ xs: 12 }}>
+                      <Box sx={{ border: '1px solid #ced4da', borderRadius: 1, overflow: 'hidden', mt: 1 }}>
+                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1, py: 0.5, backgroundColor: '#f0f0f0' }}>
+                           <Typography variant="caption" fontWeight="bold">Math Expression</Typography>
+                           <IconButton size="small" onClick={() => toggleEditorExpansion(index)}>
+                              {expandedEditors[index] ? <ChevronUp size="small" /> : <ChevronDown size="small" />}
+                           </IconButton>
+                        </Box>
+                        <Collapse in={expandedEditors[index]}>
+                          <Box dir="ltr">
+                            <MonacoEditor
+                              height="200px"
+                              language="mazajak-expression"
+                              theme="vs-dark"
+                              value={condition.expression || ''}
+                              onChange={(newValue) => {
+                                updateCondition(index, 'expression', newValue || '');
+                              }}
+                              onMount={(editor, monaco) => {
+                                // Define a custom language for highlighting
+                                const langId = 'mazajak-expression';
+
+                                // Register the language if not already registered
+                                if (!monaco.languages.getLanguages().some(l => l.id === langId)) {
+                                  monaco.languages.register({ id: langId });
+
+                                  // Define the tokenizer
+                                  monaco.languages.setMonarchTokensProvider(langId, {
+                                    tokenizer: {
+                                      root: [
+                                        // Double quotes for field placeholders (highlighted as tags/regex/special)
+                                        [/"[^"]*"/, 'tag'],
+
+                                        // Single quotes for string literals (standard string highlighting)
+                                        [/'[^']*'/, 'string'],
+
+                                        // Standard JavaScript-like tokens
+                                        [/[a-z_$][\w$]*/, {
+                                          cases: {
+                                            'if|else|switch|case|break|default|return': 'keyword',
+                                            'true|false|null': 'constant',
+                                            '@default': 'identifier'
+                                          }
+                                        }],
+                                        [/[{}()\[\]]/, '@brackets'],
+                                        [/[0-9]+/, 'number'],
+                                        [/[><=!|&?:,+*/%-]/, 'operator'],
+                                        [/[ \t\r\n]+/, 'white'],
+                                      ]
+                                    }
+                                  });
+
+                                  // Define custom theme colors for these tokens if needed,
+                                  // but 'tag' and 'string' already have different colors in vs-dark.
+                                }
+
+                                // Update the editor's model language
+                                const model = editor.getModel();
+                                if (model) {
+                                  monaco.editor.setModelLanguage(model, langId);
+                                }
+
+                                // Register completion provider for the custom language
+                                const provider = monaco.languages.registerCompletionItemProvider(langId, {
+                                  triggerCharacters: ['"'],
+                                  provideCompletionItems: (model, position) => {
+                                    const textUntilPosition = model.getValueInRange({
+                                      startLineNumber: 1,
+                                      startColumn: 1,
+                                      endLineNumber: position.lineNumber,
+                                      endColumn: position.column
+                                    });
+
+                                    const quoteCount = (textUntilPosition.match(/"/g) || []).length;
+                                    const isInsideQuotes = quoteCount % 2 !== 0;
+
+                                    if (isInsideQuotes) {
+                                      return {
+                                        suggestions: fieldOptions.map(f => ({
+                                          label: `"${f.path}"`,
+                                          kind: monaco.languages.CompletionItemKind.Field,
+                                          documentation: f.title || f.headerName,
+                                          insertText: f.path, // Just the path
+                                          range: {
+                                            startLineNumber: position.lineNumber,
+                                            endLineNumber: position.lineNumber,
+                                            startColumn: position.column,
+                                            endColumn: position.column
+                                          }
+                                        }))
+                                      };
+                                    } else {
+                                      return {
+                                        suggestions: [
+                                          { label: '+', kind: monaco.languages.CompletionItemKind.Operator, insertText: '+ ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '-', kind: monaco.languages.CompletionItemKind.Operator, insertText: '- ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '*', kind: monaco.languages.CompletionItemKind.Operator, insertText: '* ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '/', kind: monaco.languages.CompletionItemKind.Operator, insertText: '/ ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '(', kind: monaco.languages.CompletionItemKind.Operator, insertText: '( ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: ')', kind: monaco.languages.CompletionItemKind.Operator, insertText: ') ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '>', kind: monaco.languages.CompletionItemKind.Operator, insertText: '> ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '<', kind: monaco.languages.CompletionItemKind.Operator, insertText: '< ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '>=', kind: monaco.languages.CompletionItemKind.Operator, insertText: '>= ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '<=', kind: monaco.languages.CompletionItemKind.Operator, insertText: '<= ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '==', kind: monaco.languages.CompletionItemKind.Operator, insertText: '== ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '!=', kind: monaco.languages.CompletionItemKind.Operator, insertText: '!= ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '&&', kind: monaco.languages.CompletionItemKind.Operator, insertText: '&& ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '||', kind: monaco.languages.CompletionItemKind.Operator, insertText: '|| ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: '?', kind: monaco.languages.CompletionItemKind.Operator, insertText: '? ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: ':', kind: monaco.languages.CompletionItemKind.Operator, insertText: ': ', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: 'if', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'if ($1) {\n\t$0\n}', insertTextRules: monaco.languages.CompletionItemInsertRules.InsertAsSnippet, range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: 'else', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'else {\n\t$0\n}', insertTextRules: monaco.languages.CompletionItemInsertRules.InsertAsSnippet, range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: 'switch', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'switch ($1) {\n\tcase $2:\n\t\t$0\n\t\tbreak;\n}', insertTextRules: monaco.languages.CompletionItemInsertRules.InsertAsSnippet, range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: 'case', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'case $1:\n\t$0\n\tbreak;', insertTextRules: monaco.languages.CompletionItemInsertRules.InsertAsSnippet, range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: 'break', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'break;', range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: 'default', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'default:\n\t$0', insertTextRules: monaco.languages.CompletionItemInsertRules.InsertAsSnippet, range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                          { label: 'return', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'return $0;', insertTextRules: monaco.languages.CompletionItemInsertRules.InsertAsSnippet, range: { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: position.column, endColumn: position.column } },
+                                        ]
+                                      };
+                                    }
+                                  }
+                                });
+                                editor.onDidDispose(() => provider.dispose());
+                              }}
+                              options={{
+                                minimap: { enabled: false },
+                                fontSize: 13,
+                                lineNumbers: 'off',
+                                folding: true,
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                                wordWrap: 'on',
+                                formatOnPaste: true,
+                                formatOnType: true,
+                                suggestOnTriggerCharacters: true,
+                              }}
+                            />
+                          </Box>
+                        </Collapse>
+                        {!expandedEditors[index] && (
+                           <Box sx={{ p: 1, backgroundColor: '#333', color: '#fff', fontSize: '0.75rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', cursor: 'pointer' }} onClick={() => toggleEditorExpansion(index)}>
+                              {condition.expression || 'Click to edit expression...'}
+                           </Box>
+                        )}
+                      </Box>
+                    </Grid>
+                  )}
+                </Grid>
+              </Paper>
+            ))}
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={handleSave} variant="contained" color="primary">Save</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default FormattingSettingsDialog;