robobyte-front-builder 1.0.19 → 1.0.21

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

@@ -0,0 +1,506 @@
+import { useState } from 'react'
+import {
+  Box, Button, Dialog, DialogTitle, DialogContent, DialogActions,
+  Typography, IconButton, TextField, Select, MenuItem, FormControl,
+  InputLabel, Switch, FormControlLabel, Accordion, AccordionSummary,
+  AccordionDetails, Chip, Divider, Tooltip
+} from '@mui/material'
+import { Add, Close, ExpandMore, TuneOutlined } from '@mui/icons-material'
+import ValueFunctionsRefPanel from './ValueFunctionsRefPanel'
+import ColumnFunctionEditor from './ColumnFunctionEditor'
+import {
+  CUSTOM_CELL_RENDERER_OPTIONS, CUSTOM_CELL_EDITOR_OPTIONS,
+  MS_DEFAULTS, buildMultiSelectParams, parseMultiSelectParams,
+  MultiSelectParamsSection,
+} from './columnEditorShared'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const CELL_RENDERER_OPTIONS = [
+  { value: '', label: 'Unchanged' },
+  ...CUSTOM_CELL_RENDERER_OPTIONS,
+  { value: 'agCheckboxCellRenderer', label: 'AG: Checkbox' },
+  { value: 'agAnimateShowChangeCellRenderer', label: 'AG: Animate Change' },
+  { value: 'agGroupCellRenderer', label: 'AG: Group' },
+  { value: '__custom__', label: 'Custom…' },
+]
+
+const CELL_EDITOR_OPTIONS = [
+  { value: '', label: 'Unchanged' },
+  ...CUSTOM_CELL_EDITOR_OPTIONS,
+  { value: 'agCheckboxCellEditor', label: 'AG: Checkbox' },
+  { value: 'agTextCellEditor', label: 'AG: Text' },
+  { value: 'agLargeTextCellEditor', label: 'AG: Large Text' },
+  { value: 'agSelectCellEditor', label: 'AG: Select' },
+  { value: 'agRichSelectCellEditor', label: 'AG: Rich Select' },
+  { value: 'agNumberCellEditor', label: 'AG: Number' },
+  { value: 'agDateCellEditor', label: 'AG: Date' },
+  { value: '__custom__', label: 'Custom…' },
+]
+
+const DEFAULT_OVERRIDE = () => ({
+  field: '',
+  editable: false,
+  valueSetter: '',
+  valueGetter: '',
+  valueFormatter: '',
+  cellRenderer: '',
+  cellRendererCustom: '',
+  cellEditor: '',
+  cellEditorCustom: '',
+  cellEditorParams: '',
+  ...MS_DEFAULTS,
+})
+
+// ── Styles ────────────────────────────────────────────────────────────────────
+
+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 SECTION_LABEL_SX = {
+  fontSize: 11,
+  fontWeight: 600,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+  color: '#888',
+  mb: 1,
+}
+
+const INPUT_SX = {
+  '& .MuiInputBase-root': { color: '#e0e0e0' },
+  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+  '& .MuiInputLabel-root': { color: '#aaa' },
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function CodeField({ label, value, onChange, placeholder, rows = 3 }) {
+  return (
+    <TextField
+      label={label}
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      multiline
+      minRows={rows}
+      maxRows={8}
+      fullWidth
+      size='small'
+      placeholder={placeholder}
+      sx={CODE_FIELD_SX}
+      InputLabelProps={{ shrink: true }}
+    />
+  )
+}
+
+function CellComponentSelect({ label, options, value, customValue, onChange, onCustomChange }) {
+  const isCustom = value === '__custom__'
+  return (
+    <Box display='flex' gap={1} alignItems='flex-start'>
+      <FormControl size='small' sx={{ minWidth: 160 }}>
+        <InputLabel sx={{ color: '#aaa' }}>{label}</InputLabel>
+        <Select
+          value={value}
+          label={label}
+          onChange={e => onChange(e.target.value)}
+          sx={{ color: '#e0e0e0', '.MuiOutlinedInput-notchedOutline': { borderColor: '#555' } }}
+        >
+          {options.map(o => (
+            <MenuItem key={o.value} value={o.value}>{o.label}</MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+      {isCustom && (
+        <TextField
+          size='small'
+          value={customValue}
+          onChange={e => onCustomChange(e.target.value)}
+          placeholder='Component name'
+          sx={{ flex: 1, ...INPUT_SX }}
+        />
+      )}
+    </Box>
+  )
+}
+
+// ── Single override card ──────────────────────────────────────────────────────
+
+function OverrideCard({ override, index, expanded, onToggle, onChange, onRemove }) {
+  const update = (key, val) => onChange({ ...override, [key]: val })
+
+  const summary = override.field || `Override ${index + 1}`
+
+  const activeCount = [
+    override.editable,
+    override.valueSetter?.trim(),
+    override.valueGetter?.trim(),
+    override.valueFormatter?.trim(),
+    override.cellRenderer && override.cellRenderer !== '',
+    override.cellEditor && override.cellEditor !== '',
+    override.cellEditorParams?.trim(),
+  ].filter(Boolean).length
+
+  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 } }}
+      >
+        <TuneOutlined sx={{ fontSize: 16, color: '#7b8ea0', flexShrink: 0 }} />
+        <Typography variant='body2' sx={{ fontWeight: 600, flex: 1 }} noWrap>
+          {summary}
+        </Typography>
+        {activeCount > 0 && (
+          <Chip
+            label={`${activeCount} override${activeCount !== 1 ? 's' : ''}`}
+            size='small'
+            sx={{ fontSize: 10, height: 18, bgcolor: '#3a4a2e', color: '#aed581' }}
+          />
+        )}
+        {override.editable && (
+          <Chip label='editable' size='small' sx={{ fontSize: 10, height: 18, bgcolor: '#2e4a2e', color: '#81c784' }} />
+        )}
+        <Tooltip title='Remove override'>
+          <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 }} />
+
+        {/* ── Target field ── */}
+        <Typography sx={SECTION_LABEL_SX}>Target Column</Typography>
+        <Box display='flex' gap={2} alignItems='center' mb={2}>
+          <TextField
+            label='Field Name'
+            value={override.field}
+            onChange={e => update('field', e.target.value)}
+            size='small'
+            sx={{ flex: 1, ...INPUT_SX }}
+            InputLabelProps={{ shrink: true }}
+            placeholder='Exact column field/headerName to override'
+            helperText='Must match the column headerName or path from the report'
+            FormHelperTextProps={{ sx: { color: '#666' } }}
+          />
+          <FormControlLabel
+            control={
+              <Switch
+                size='small'
+                checked={!!override.editable}
+                onChange={e => update('editable', e.target.checked)}
+                color='success'
+              />
+            }
+            label={<Typography variant='caption'>Make Editable</Typography>}
+            sx={{ whiteSpace: 'nowrap' }}
+          />
+        </Box>
+
+        {/* ── Cell Renderer / Editor ── */}
+        <Typography sx={SECTION_LABEL_SX}>Cell Renderer &amp; Editor</Typography>
+        <Box display='flex' flexDirection='column' gap={1.5} mb={2}>
+          <CellComponentSelect
+            label='Cell Renderer'
+            options={CELL_RENDERER_OPTIONS}
+            value={override.cellRenderer}
+            customValue={override.cellRendererCustom}
+            onChange={v => update('cellRenderer', v)}
+            onCustomChange={v => update('cellRendererCustom', v)}
+          />
+          <CellComponentSelect
+            label='Cell Editor'
+            options={CELL_EDITOR_OPTIONS}
+            value={override.cellEditor}
+            customValue={override.cellEditorCustom}
+            onChange={v => update('cellEditor', v)}
+            onCustomChange={v => update('cellEditorCustom', v)}
+          />
+          {override.cellEditor === 'MultiSelectEditor' ? (
+            <MultiSelectParamsSection col={override} update={update} />
+          ) : (
+            <TextField
+              label='Cell Editor Params (JSON or expression)'
+              value={override.cellEditorParams}
+              onChange={e => update('cellEditorParams', e.target.value)}
+              size='small'
+              fullWidth
+              placeholder='e.g. { values: ["Yes", "No"] }'
+              sx={INPUT_SX}
+              InputLabelProps={{ shrink: true }}
+            />
+          )}
+        </Box>
+
+        {/* ── Value functions ── */}
+        <Typography sx={SECTION_LABEL_SX}>Value Functions (strings, executed by AG Grid)</Typography>
+        <Box display='flex' flexDirection='column' gap={2}>
+          <Box>
+            <Box display='flex' alignItems='center' gap={0.5} mb={0.5}>
+              <Typography sx={{ fontSize: 11, color: '#aaa' }}>valueSetter</Typography>
+              <ColumnFunctionEditor
+                label='valueSetter'
+                type='valueSetter'
+                value={override.valueSetter}
+                onChange={v => update('valueSetter', v)}
+              />
+            </Box>
+            <CodeField
+              value={override.valueSetter}
+              onChange={v => update('valueSetter', v)}
+              placeholder={'(params) => {\n  const { newValue, data, context } = params\n  data.myField = newValue\n  return true\n}'}
+            />
+          </Box>
+          <Box>
+            <Box display='flex' alignItems='center' gap={0.5} mb={0.5}>
+              <Typography sx={{ fontSize: 11, color: '#aaa' }}>valueGetter</Typography>
+              <ColumnFunctionEditor
+                label='valueGetter'
+                type='valueGetter'
+                value={override.valueGetter}
+                onChange={v => update('valueGetter', v)}
+              />
+            </Box>
+            <CodeField
+              value={override.valueGetter}
+              onChange={v => update('valueGetter', v)}
+              placeholder={'(params) => {\n  return params.data.myField ?? params.data.original\n}'}
+            />
+          </Box>
+          <Box>
+            <Box display='flex' alignItems='center' gap={0.5} mb={0.5}>
+              <Typography sx={{ fontSize: 11, color: '#aaa' }}>valueFormatter</Typography>
+              <ColumnFunctionEditor
+                label='valueFormatter'
+                type='valueFormatter'
+                value={override.valueFormatter}
+                onChange={v => update('valueFormatter', v)}
+              />
+            </Box>
+            <CodeField
+              value={override.valueFormatter}
+              onChange={v => update('valueFormatter', v)}
+              placeholder={'(params) => {\n  return params.value ? "Yes" : "No"\n}'}
+              rows={2}
+            />
+          </Box>
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  )
+}
+
+// ── Serialize / deserialize ───────────────────────────────────────────────────
+
+function serialize(override) {
+  const config = {}
+  if (override.editable) config.editable = true
+
+  const renderer = override.cellRenderer === '__custom__' ? override.cellRendererCustom : override.cellRenderer
+  if (renderer) config.cellRenderer = renderer
+
+  const editor = override.cellEditor === '__custom__' ? override.cellEditorCustom : override.cellEditor
+  if (editor) config.cellEditor = editor
+
+  if (editor === 'MultiSelectEditor') {
+    const msParams = buildMultiSelectParams(override)
+    if (msParams && msParams !== '{}') config.cellEditorParams = msParams
+    // Persist asyncFetchOptions code separately so it survives dialog close/reopen
+    if (override.ms_asyncFetchOptions?.trim()) config._msAsyncFetchOptions = override.ms_asyncFetchOptions.trim()
+  } else if (override.cellEditorParams?.trim()) {
+    config.cellEditorParams = override.cellEditorParams.trim()
+  }
+
+  if (override.valueSetter?.trim())    config.valueSetter    = override.valueSetter.trim()
+  if (override.valueGetter?.trim())    config.valueGetter    = override.valueGetter.trim()
+  if (override.valueFormatter?.trim()) config.valueFormatter = override.valueFormatter.trim()
+
+  return { field: override.field, config }
+}
+
+function deserialize(raw) {
+  const cfg = raw.config ?? {}
+  const isCustomRenderer = cfg.cellRenderer && !CELL_RENDERER_OPTIONS.some(o => o.value === cfg.cellRenderer)
+  const isCustomEditor   = cfg.cellEditor   && !CELL_EDITOR_OPTIONS.some(o => o.value === cfg.cellEditor)
+  const isMultiSelect    = cfg.cellEditor === 'MultiSelectEditor'
+
+  const msFields = isMultiSelect
+    ? (() => {
+        const p = parseMultiSelectParams(cfg.cellEditorParams)
+        return {
+          ms_options:           Array.isArray(p.options) ? JSON.stringify(p.options, null, 2) : '',
+          ms_isSingle:          p.isSingle     ?? false,
+          ms_fieldName:         p.fieldName    ?? 'name',
+          ms_groupByField:      p.groupByField ?? '',
+          ms_targetValue:       p.targetValue  ?? '',
+          ms_asyncFetchOptions: cfg._msAsyncFetchOptions ?? '',
+        }
+      })()
+    : MS_DEFAULTS
+
+  return {
+    field:              raw.field          ?? '',
+    editable:           cfg.editable       ?? false,
+    cellRenderer:       isCustomRenderer   ? '__custom__' : (cfg.cellRenderer ?? ''),
+    cellRendererCustom: isCustomRenderer   ? cfg.cellRenderer : '',
+    cellEditor:         isCustomEditor     ? '__custom__' : (cfg.cellEditor   ?? ''),
+    cellEditorCustom:   isCustomEditor     ? cfg.cellEditor : '',
+    cellEditorParams:   isMultiSelect      ? '' : (cfg.cellEditorParams ?? ''),
+    valueSetter:        cfg.valueSetter    ?? '',
+    valueGetter:        cfg.valueGetter    ?? '',
+    valueFormatter:     cfg.valueFormatter ?? '',
+    ...msFields,
+  }
+}
+
+// ── Main editor ───────────────────────────────────────────────────────────────
+
+export default function ColumnsConfigEditor({ field, onChange }) {
+  const safeField = field ?? { valueType: 'value', value: [] }
+  const storedValue = Array.isArray(safeField.value) ? safeField.value : []
+
+  const [open, setOpen] = useState(false)
+  const [draft, setDraft] = useState([])
+  const [expandedIdx, setExpandedIdx] = useState(null)
+
+  const handleOpen = () => {
+    setDraft(storedValue.length > 0 ? storedValue.map(deserialize) : [DEFAULT_OVERRIDE()])
+    setExpandedIdx(storedValue.length === 0 ? 0 : null)
+    setOpen(true)
+  }
+
+  const handleClose = () => setOpen(false)
+
+  const handleSave = () => {
+    const serialized = draft.map(serialize).filter(o => o.field?.trim())
+    onChange?.({ valueType: 'value', value: serialized })
+    setOpen(false)
+  }
+
+  const handleAdd = () => {
+    const next = [...draft, DEFAULT_OVERRIDE()]
+    setDraft(next)
+    setExpandedIdx(next.length - 1)
+  }
+
+  const handleRemove = idx => {
+    setDraft(prev => prev.filter((_, i) => i !== idx))
+    if (expandedIdx === idx) setExpandedIdx(null)
+  }
+
+  const handleChange = (idx, updated) => {
+    setDraft(prev => prev.map((o, i) => i === idx ? updated : o))
+  }
+
+  return (
+    <>
+      {/* ── Summary trigger ── */}
+      <Box display='flex' alignItems='center' justifyContent='space-between'>
+        <Box display='flex' alignItems='center' gap={1}>
+          <TuneOutlined sx={{ fontSize: 16, color: '#7b8ea0' }} />
+          <Typography variant='caption' sx={{ color: '#aaa' }}>
+            {storedValue.length > 0
+              ? `${storedValue.length} column override${storedValue.length > 1 ? 's' : ''}`
+              : 'No column overrides'}
+          </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}>
+            <TuneOutlined sx={{ color: '#7b8ea0' }} />
+            <Typography variant='h6' sx={{ fontWeight: 600 }}>Columns Config</Typography>
+            <Chip
+              label={`${draft.length} override${draft.length !== 1 ? 's' : ''}`}
+              size='small'
+              sx={{ bgcolor: '#2a3a2a', color: '#aed581', 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 }}>
+            Column overrides apply additional behavior to existing report columns, matched by their field name.
+          </Typography>
+
+          <ValueFunctionsRefPanel />
+
+          {draft.map((override, idx) => (
+            <OverrideCard
+              key={idx}
+              override={override}
+              index={idx}
+              expanded={expandedIdx === idx}
+              onToggle={() => setExpandedIdx(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: '#aed581', borderRadius: 1.5, py: 1,
+              '&:hover': { bgcolor: '#1a2a1a', borderColor: '#aed581' }
+            }}
+          >
+            Add Column Override
+          </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='success'>
+            Save ({draft.filter(o => o.field?.trim()).length} overrides)
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}