robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/inspector/fields/ActionsConfigEditor.jsx

@@ -0,0 +1,426 @@
+import { useState } from 'react'
+import {
+  Box, Button, Dialog, DialogTitle, DialogContent, DialogActions,
+  Typography, IconButton, TextField, Select, MenuItem, FormControl,
+  InputLabel, Accordion, AccordionSummary, AccordionDetails, Chip,
+  Divider, Tooltip, Switch, FormControlLabel,
+} from '@mui/material'
+import {
+  Add, Close, ExpandMore, DragIndicator, BoltOutlined,
+} from '@mui/icons-material'
+import ColumnFunctionEditor from './ColumnFunctionEditor'
+import { HelpPopover } from './FunctionHelpPopover'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const COLOR_OPTIONS = [
+  { value: 'primary',   label: 'Primary'   },
+  { value: 'secondary', label: 'Secondary' },
+  { value: 'success',   label: 'Success'   },
+  { value: 'error',     label: 'Error'     },
+  { value: 'warning',   label: 'Warning'   },
+  { value: 'info',      label: 'Info'      },
+  { value: 'inherit',   label: 'Inherit'   },
+]
+
+const VARIANT_OPTIONS = [
+  { value: 'text',      label: 'Text'      },
+  { value: 'contained', label: 'Contained' },
+  { value: 'outlined',  label: 'Outlined'  },
+]
+
+// Curated list of common MUI icon names (matched to actual imports in RowActionsCell)
+const ICON_OPTIONS = [
+  { value: '',                  label: '(none)'        },
+  { value: 'EditOutlined',      label: 'Edit'          },
+  { value: 'DeleteOutlined',    label: 'Delete'        },
+  { value: 'VisibilityOutlined',label: 'View'          },
+  { value: 'OpenInNewOutlined', label: 'Open'          },
+  { value: 'ContentCopyOutlined',label: 'Copy'         },
+  { value: 'DownloadOutlined',  label: 'Download'      },
+  { value: 'PrintOutlined',     label: 'Print'         },
+  { value: 'CheckOutlined',     label: 'Check'         },
+  { value: 'CloseOutlined',     label: 'Close'         },
+  { value: 'SendOutlined',      label: 'Send'          },
+  { value: 'RefreshOutlined',   label: 'Refresh'       },
+  { value: 'SettingsOutlined',  label: 'Settings'      },
+  { value: 'InfoOutlined',      label: 'Info'          },
+  { value: 'WarningOutlined',   label: 'Warning'       },
+  { value: 'ArchiveOutlined',   label: 'Archive'       },
+  { value: 'RestoreOutlined',   label: 'Restore'       },
+  { value: 'LockOutlined',      label: 'Lock'          },
+  { value: 'LockOpenOutlined',  label: 'Unlock'        },
+  { value: 'StarOutlined',      label: 'Star'          },
+  { value: 'AddOutlined',       label: 'Add'           },
+  { value: 'RemoveOutlined',    label: 'Remove'        },
+]
+
+const CODE_TEMPLATE = `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
+
+}
+`
+
+const TREE_VIEW_CODE_TEMPLATE = `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog) {
+
+}
+`
+
+const DEFAULT_ACTION = () => ({
+  label:        '',
+  color:        'primary',
+  variant:      'text',
+  icon:         '',
+  code:         CODE_TEMPLATE,
+  confirmation: '',
+  disabled:     false,
+})
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+const INPUT_SX = {
+  '& .MuiInputBase-root': { color: '#e0e0e0' },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+  '& .MuiInputLabel-root': { color: '#aaa' },
+}
+
+const CODE_FIELD_SX = {
+  '& .MuiInputBase-root': {
+    fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+    fontSize: 12,
+    bgcolor: '#1e1e1e',
+    color: '#d4d4d4',
+  },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#444' },
+  '& .MuiInputLabel-root': { color: '#888' },
+}
+
+const SELECT_SX = {
+  color: '#e0e0e0',
+  '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+}
+
+const SECTION_LABEL_SX = {
+  fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
+  textTransform: 'uppercase', color: '#888', mb: 1,
+}
+
+// ── COLOR CHIP ────────────────────────────────────────────────────────────────
+
+const COLOR_MAP = {
+  primary:   '#1976d2',
+  secondary: '#9c27b0',
+  success:   '#2e7d32',
+  error:     '#d32f2f',
+  warning:   '#ed6c02',
+  info:      '#0288d1',
+  inherit:   '#666',
+}
+
+// ── Action card ───────────────────────────────────────────────────────────────
+
+function ActionCard({ action, index, expanded, onToggle, onChange, onRemove, context }) {
+  const update = (key, val) => onChange({ ...action, [key]: val })
+  const isTreeView  = context === 'treeViewAction'
+  const helpType    = isTreeView ? 'treeViewAction' : 'actionButton'
+  const codeDefault = isTreeView ? TREE_VIEW_CODE_TEMPLATE : CODE_TEMPLATE
+
+  const summary = action.label || `Action ${index + 1}`
+  const dot = COLOR_MAP[action.color] ?? '#666'
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onChange={onToggle}
+      disableGutters
+      sx={{
+        bgcolor: '#2a2d32', color: '#e0e0e0',
+        border: '1px solid #3a3f45', borderRadius: '6px !important', mb: 1,
+        '&:before': { display: 'none' },
+      }}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMore sx={{ color: '#aaa' }} />}
+        sx={{ minHeight: 44, '& .MuiAccordionSummary-content': { alignItems: 'center', gap: 1 } }}
+      >
+        <DragIndicator sx={{ fontSize: 16, color: '#555', flexShrink: 0 }} />
+        {/* colour dot */}
+        <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: dot, flexShrink: 0 }} />
+        <Typography variant='body2' sx={{ fontWeight: 600, flex: 1 }} noWrap>{summary}</Typography>
+        <Chip
+          label={action.variant}
+          size='small'
+          sx={{ fontSize: 10, height: 18, bgcolor: '#2a3a4a', color: '#90caf9' }}
+        />
+        {action.icon && (
+          <Chip label={action.icon.replace('Outlined', '')} size='small'
+            sx={{ fontSize: 10, height: 18, bgcolor: '#1a2a1a', color: '#81c784' }} />
+        )}
+        {action.confirmation && (
+          <Chip label='confirm' size='small'
+            sx={{ fontSize: 10, height: 18, bgcolor: '#3a2a1a', color: '#ffcc80' }} />
+        )}
+        <Tooltip title='Remove action'>
+          <IconButton size='small' onClick={e => { e.stopPropagation(); onRemove() }}
+            sx={{ color: '#f44336', ml: 0.5 }}>
+            <Close fontSize='small' />
+          </IconButton>
+        </Tooltip>
+      </AccordionSummary>
+
+      <AccordionDetails sx={{ pt: 0, pb: 2, px: 2 }}>
+        <Divider sx={{ borderColor: '#3a3f45', mb: 2 }} />
+
+        {/* ── Identity ── */}
+        <Typography sx={SECTION_LABEL_SX}>Identity</Typography>
+        <Box display='flex' gap={2} mb={2} flexWrap='wrap'>
+          <TextField
+            label='Label'
+            value={action.label}
+            onChange={e => update('label', e.target.value)}
+            size='small'
+            fullWidth
+            placeholder='e.g. Edit Record'
+            sx={INPUT_SX}
+            InputLabelProps={{ shrink: true }}
+          />
+        </Box>
+
+        {/* ── Appearance ── */}
+        <Typography sx={SECTION_LABEL_SX}>Appearance</Typography>
+        <Box display='flex' gap={2} mb={2} flexWrap='wrap'>
+          <FormControl size='small' sx={{ minWidth: 130 }}>
+            <InputLabel sx={{ color: '#aaa' }}>Color</InputLabel>
+            <Select value={action.color} label='Color'
+              onChange={e => update('color', e.target.value)} sx={SELECT_SX}>
+              {COLOR_OPTIONS.map(o => (
+                <MenuItem key={o.value} value={o.value}>
+                  <Box display='flex' alignItems='center' gap={1}>
+                    <Box sx={{ width: 10, height: 10, borderRadius: '50%', bgcolor: COLOR_MAP[o.value] ?? '#666' }} />
+                    {o.label}
+                  </Box>
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl size='small' sx={{ minWidth: 130 }}>
+            <InputLabel sx={{ color: '#aaa' }}>Variant</InputLabel>
+            <Select value={action.variant} label='Variant'
+              onChange={e => update('variant', e.target.value)} sx={SELECT_SX}>
+              {VARIANT_OPTIONS.map(o => (
+                <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl size='small' sx={{ minWidth: 160 }}>
+            <InputLabel sx={{ color: '#aaa' }}>Icon</InputLabel>
+            <Select value={action.icon} label='Icon'
+              onChange={e => update('icon', e.target.value)} sx={SELECT_SX}>
+              {ICON_OPTIONS.map(o => (
+                <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+
+        {/* ── Behaviour ── */}
+        <Typography sx={SECTION_LABEL_SX}>Behaviour</Typography>
+        <Box display='flex' gap={2} mb={2} flexWrap='wrap'>
+          <TextField
+            label='Confirmation message (optional)'
+            value={action.confirmation}
+            onChange={e => update('confirmation', e.target.value)}
+            size='small'
+            fullWidth
+            placeholder='Are you sure you want to delete this record?'
+            sx={INPUT_SX}
+            InputLabelProps={{ shrink: true }}
+          />
+        </Box>
+        <Box mb={2}>
+          <FormControlLabel
+            control={
+              <Switch size='small' checked={!!action.disabled}
+                onChange={e => update('disabled', e.target.checked)} color='warning' />
+            }
+            label={<Typography variant='caption'>Disabled</Typography>}
+          />
+        </Box>
+
+        {/* ── Code ── */}
+        <Typography sx={SECTION_LABEL_SX}>Action Code</Typography>
+        <Box display='flex' alignItems='center' gap={0.5} mb={0.5}>
+          <Typography sx={{ fontSize: 11, color: '#aaa' }}>Calculation function</Typography>
+          <ColumnFunctionEditor label='Action' type={helpType} value={action.code} onChange={v => update('code', v)} />
+          <HelpPopover type={helpType} />
+        </Box>
+        <TextField
+          value={action.code}
+          onChange={e => update('code', e.target.value)}
+          multiline
+          minRows={6}
+          maxRows={14}
+          fullWidth
+          size='small'
+          placeholder={codeDefault}
+          sx={CODE_FIELD_SX}
+        />
+        {isTreeView ? (
+          <Typography variant='caption' sx={{ color: '#555', mt: 0.5, display: 'block' }}>
+            <code style={{ color: '#90caf9' }}>node</code> — the clicked tree node object (all its fields).&nbsp;
+            <code style={{ color: '#90caf9' }}>data</code> / <code style={{ color: '#90caf9' }}>setData</code> — page state.&nbsp;
+            <code style={{ color: '#90caf9' }}>openDialog</code> / <code style={{ color: '#90caf9' }}>closeDialog</code> — dialog helpers.
+          </Typography>
+        ) : (
+          <Typography variant='caption' sx={{ color: '#555', mt: 0.5, display: 'block' }}>
+            <code style={{ color: '#90caf9' }}>rowData</code> — current row (all field values).&nbsp;
+            <code style={{ color: '#90caf9' }}>data</code> / <code style={{ color: '#90caf9' }}>setData</code> — page state.&nbsp;
+            <code style={{ color: '#90caf9' }}>setRefValue</code>, <code style={{ color: '#90caf9' }}>getRefValue</code>, <code style={{ color: '#90caf9' }}>clearRefRow</code>, <code style={{ color: '#90caf9' }}>getNodeRef</code>, <code style={{ color: '#90caf9' }}>THIS_NODE</code> — ref helpers.
+          </Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  )
+}
+
+// ── Main editor ───────────────────────────────────────────────────────────────
+
+export default function ActionsConfigEditor({ field, context, onChange }) {
+  const safeField     = field ?? { valueType: 'value', value: [] }
+  const storedValue   = Array.isArray(safeField.value) ? safeField.value : []
+  const isTreeView    = context === 'treeViewAction'
+  const dialogTitle   = isTreeView ? 'Node Actions' : 'Row Actions'
+  const emptyHint     = isTreeView
+    ? 'Each action opens from the ⋮ button on the tree node. Use `node` to access the clicked item.'
+    : 'Each action appears as a button in a popover when the user clicks the ⋮ button in the Actions column. Inside each Calculation, `rowData` is available as a direct variable containing the full AG Grid row object.'
+
+  const [open, setOpen]            = useState(false)
+  const [draft, setDraft]          = useState([])
+  const [expandedIdx, setExpanded] = useState(null)
+
+  const handleOpen = () => {
+    setDraft(storedValue.length > 0 ? storedValue.map(a => ({ ...DEFAULT_ACTION(), ...a })) : [])
+    setExpanded(storedValue.length === 0 ? null : null)
+    setOpen(true)
+  }
+
+  const handleClose = () => setOpen(false)
+
+  const handleSave = () => {
+    const valid = draft.filter(a => a.label?.trim())
+    onChange?.({ valueType: 'value', value: valid })
+    setOpen(false)
+  }
+
+  const handleAdd = () => {
+    const next = [...draft, DEFAULT_ACTION()]
+    setDraft(next)
+    setExpanded(next.length - 1)
+  }
+
+  const handleRemove = idx => {
+    setDraft(prev => prev.filter((_, i) => i !== idx))
+    if (expandedIdx === idx) setExpanded(null)
+  }
+
+  const handleChange = (idx, updated) =>
+    setDraft(prev => prev.map((a, i) => i === idx ? updated : a))
+
+  return (
+    <>
+      {/* ── Trigger ── */}
+      <Box display='flex' alignItems='center' justifyContent='space-between'>
+        <Box display='flex' alignItems='center' gap={1}>
+          <BoltOutlined sx={{ fontSize: 16, color: '#7b8ea0' }} />
+          <Typography variant='caption' sx={{ color: '#aaa' }}>
+            {storedValue.length > 0
+              ? `${storedValue.length} action${storedValue.length !== 1 ? 's' : ''}`
+              : 'No row actions'}
+          </Typography>
+        </Box>
+        <Button
+          size='small' variant='outlined' onClick={handleOpen}
+          sx={{ fontSize: 11, py: 0.3, borderColor: '#555', color: '#ccc' }}
+        >
+          Configure
+        </Button>
+      </Box>
+
+      {/* ── Dialog ── */}
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        fullWidth
+        maxWidth='md'
+        PaperProps={{ sx: { bgcolor: '#1e2126', color: '#e0e0e0', border: '1px solid #3a3f45' } }}
+      >
+        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pb: 1 }}>
+          <Box display='flex' alignItems='center' gap={1}>
+            <BoltOutlined sx={{ color: '#7b8ea0' }} />
+            <Typography variant='h6' sx={{ fontWeight: 600 }}>{dialogTitle}</Typography>
+            <Chip
+              label={`${draft.length} action${draft.length !== 1 ? 's' : ''}`}
+              size='small'
+              sx={{ bgcolor: '#2a3a4a', color: '#90caf9', fontSize: 11 }}
+            />
+          </Box>
+          <IconButton onClick={handleClose} size='small' sx={{ color: '#aaa' }}>
+            <Close />
+          </IconButton>
+        </DialogTitle>
+
+        <Divider sx={{ borderColor: '#3a3f45' }} />
+
+        <DialogContent sx={{ pt: 2, pb: 1 }}>
+          <Typography variant='caption' sx={{ color: '#666', display: 'block', mb: 2 }}>
+            {emptyHint}
+          </Typography>
+
+          {draft.length === 0 && (
+            <Box sx={{ textAlign: 'center', py: 4, color: '#555' }}>
+              <BoltOutlined sx={{ fontSize: 40, mb: 1 }} />
+              <Typography variant='body2'>No actions yet. Click Add to create one.</Typography>
+            </Box>
+          )}
+
+          {draft.map((action, idx) => (
+            <ActionCard
+              key={idx}
+              action={action}
+              index={idx}
+              context={context}
+              expanded={expandedIdx === idx}
+              onToggle={() => setExpanded(expandedIdx === idx ? null : idx)}
+              onChange={updated => handleChange(idx, updated)}
+              onRemove={() => handleRemove(idx)}
+            />
+          ))}
+
+          <Button
+            startIcon={<Add />}
+            onClick={handleAdd}
+            size='small'
+            fullWidth
+            sx={{
+              mt: 1, borderStyle: 'dashed', border: '1px dashed #3a3f45',
+              color: '#90caf9', borderRadius: 1.5, py: 1,
+              '&:hover': { bgcolor: '#1a2a3a', borderColor: '#90caf9' },
+            }}
+          >
+            Add Action
+          </Button>
+        </DialogContent>
+
+        <Divider sx={{ borderColor: '#3a3f45' }} />
+
+        <DialogActions sx={{ px: 3, py: 1.5, gap: 1 }}>
+          <Button onClick={handleClose} sx={{ color: '#aaa' }}>Cancel</Button>
+          <Button onClick={handleSave} variant='contained' color='primary'>
+            Save ({draft.filter(a => a.label?.trim()).length} actions)
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

package/src/views/builder/inspector/fields/ColorSchemaField.jsx

@@ -0,0 +1,140 @@
+import {
+  Box, Typography, TextField, ToggleButtonGroup, ToggleButton, Tooltip,
+} from '@mui/material'
+import { generateTints, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+
+// ── Mode definitions ──────────────────────────────────────────────────────────
+
+const MODES = [
+  { value: 'palette', label: 'Palette', title: 'Cycle through the global fallback palette' },
+  { value: 'tints',   label: 'Tints',   title: 'Monochromatic tints of a chosen base color' },
+  { value: 'data',    label: 'Data',    title: 'Use only colors from the data — no generated fallback' },
+  { value: 'custom',  label: 'Custom',  title: 'Define a custom JSON color array for this component' },
+]
+
+// ── Inline preview strip ──────────────────────────────────────────────────────
+
+function ColorPreview({ mode, color }) {
+  const colors =
+    mode === 'tints' && color ? generateTints(color, 6) :
+    mode === 'palette'        ? DEFAULT_PALETTE.slice(0, 6) :
+    []
+
+  if (!colors.length) {
+    return (
+      <Typography sx={{ fontSize: 10, color: '#555', fontStyle: 'italic' }}>
+        from data only
+      </Typography>
+    )
+  }
+  return (
+    <Box sx={{ display: 'flex', gap: 0.4 }}>
+      {colors.map((c, i) => (
+        <Box key={i} sx={{
+          width: 12, height: 12, borderRadius: '2px', bgcolor: c,
+          border: '1px solid rgba(255,255,255,0.08)',
+        }} />
+      ))}
+    </Box>
+  )
+}
+
+// ── Main field component ──────────────────────────────────────────────────────
+
+export default function ColorSchemaField({ field, onChange }) {
+  const schema = field?.value ?? {}
+  const mode   = schema.mode  || 'palette'
+  const color  = schema.color || '#1976d2'
+
+  const upd = (k, v) => onChange({ valueType: 'value', value: { ...schema, [k]: v } })
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.875 }}>
+
+      {/* Mode selector + preview */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+        <ToggleButtonGroup
+          size='small' exclusive
+          value={mode}
+          onChange={(_, v) => v && upd('mode', v)}
+          sx={{
+            '& .MuiToggleButton-root': {
+              fontSize: 10, py: '2px', px: 0.875, color: '#999', borderColor: '#444',
+              '&.Mui-selected': { color: '#90caf9', bgcolor: 'rgba(144,202,249,0.1)', borderColor: '#90caf9' },
+              '&:hover': { bgcolor: 'rgba(255,255,255,0.05)' },
+            },
+          }}
+        >
+          {MODES.map(m => (
+            <Tooltip key={m.value} title={m.title} placement='top'>
+              <ToggleButton value={m.value}>{m.label}</ToggleButton>
+            </Tooltip>
+          ))}
+        </ToggleButtonGroup>
+        <ColorPreview mode={mode} color={color} />
+      </Box>
+
+      {/* Tints: base color picker */}
+      {mode === 'tints' && (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+          {/* Native color input hidden behind swatch */}
+          <Box sx={{
+            width: 22, height: 22, borderRadius: '4px',
+            bgcolor: color, border: '1px solid #555',
+            overflow: 'hidden', position: 'relative', flexShrink: 0,
+          }}>
+            <input
+              type='color' value={color}
+              onChange={e => upd('color', e.target.value)}
+              style={{
+                position: 'absolute', inset: 0, width: '200%', height: '200%',
+                border: 'none', padding: 0, cursor: 'pointer', opacity: 0,
+              }}
+            />
+          </Box>
+          {/* Hex input */}
+          <TextField
+            size='small' value={color}
+            onChange={e => upd('color', e.target.value)}
+            sx={{
+              width: 96,
+              '& .MuiInputBase-root': { color: '#e0e0e0', fontSize: 11 },
+              '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+              '& input': { py: '4px', px: 1, fontFamily: 'monospace' },
+            }}
+          />
+          {/* Palette swatches */}
+          <Box sx={{ display: 'flex', gap: 0.4, flexWrap: 'wrap', flex: 1 }}>
+            {DEFAULT_PALETTE.map(c => (
+              <Box
+                key={c} onClick={() => upd('color', c)}
+                sx={{
+                  width: 12, height: 12, borderRadius: '2px', bgcolor: c,
+                  cursor: 'pointer',
+                  border: color === c ? '1.5px solid #fff' : '1px solid transparent',
+                  transition: 'transform .1s',
+                  '&:hover': { transform: 'scale(1.25)' },
+                }}
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
+
+      {/* Custom: JSON array */}
+      {mode === 'custom' && (
+        <TextField
+          fullWidth size='small'
+          value={schema.customColors || ''}
+          onChange={e => upd('customColors', e.target.value)}
+          placeholder='["#1976d2","#e91e63","#4caf50","#ff9800"]'
+          sx={{
+            '& .MuiInputBase-root': { color: '#e0e0e0', fontSize: 11 },
+            '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+            '& input': { py: '4px', px: 1 },
+          }}
+        />
+      )}
+    </Box>
+  )
+}