robobyte-front-builder 1.0.19 → 1.0.23

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

@@ -0,0 +1,238 @@
+import { useRef, useState } from 'react'
+import { Box, Button, IconButton, Tooltip, Typography } from '@mui/material'
+import { Close, Fullscreen, FullscreenExit } from '@mui/icons-material'
+import { CodeBraces } from 'mdi-material-ui'
+import Editor from '@monaco-editor/react'
+import { HelpPopover } from './FunctionHelpPopover'
+
+// ── Monaco options ─────────────────────────────────────────────────────────────
+
+const EDITOR_OPTIONS = {
+  minimap: { enabled: false },
+  fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+  fontSize: 13,
+  lineNumbers: 'on',
+  wordWrap: 'on',
+  scrollBeyondLastLine: false,
+  automaticLayout: true,
+}
+
+// ── Per-type templates (no JSDoc — see help popover) ──────────────────────────
+
+const SCOPE_PARAMS = `  { data, setData, dataRef, fetchReportData, setRefValue, getRefValue, getNodeRef, nodeName }`
+
+const TEMPLATES = {
+  calculation: `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
+
+}
+`,
+
+  calculationValidate: `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
+  return true
+}
+`,
+
+  valueSetter: `(params,
+${SCOPE_PARAMS}) => {
+  const { newValue, data: rowData, context } = params
+  rowData.myField = newValue
+  setRefValue(context.updateRef, rowData, '__id', 'myField', newValue)
+  return true
+}`,
+
+  valueGetter: `(params,
+${SCOPE_PARAMS}) => {
+  return getRefValue(params.context.updateRef, params.data, '__id', 'myField')
+    ?? params.data?.myField
+}`,
+
+  valueFormatter: `(params,
+${SCOPE_PARAMS}) => {
+  return params.value ? 'Yes' : 'No'
+}`,
+
+  cellStyle: `(params,
+${SCOPE_PARAMS}) => {
+  if (params.value > 0) return { color: 'green', fontWeight: 'bold' }
+  if (params.value < 0) return { color: 'red' }
+  return {}
+}`,
+
+  tooltipValueGetter: `(params,
+${SCOPE_PARAMS}) => {
+  return String(params.value ?? '')
+}`,
+
+  asyncFetchOptions: `async (search, { data, dataRef, reportRefs, setData } = {}) => {
+  const res = await fetch(\`/api/items?q=\${encodeURIComponent(search)}\`)
+  return res.json()
+}`,
+}
+
+// Types that lock their first and last lines (signature shell)
+const SHELL_TYPES = new Set(['asyncFetchOptions'])
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+export default function ColumnFunctionEditor({ label, value, onChange, type = 'valueSetter' }) {
+  const [open, setOpen] = useState(false)
+  const [fullscreen, setFullscreen] = useState(false)
+  const [code, setCode] = useState('')
+  const editorRef = useRef(null)
+  const hasShell = SHELL_TYPES.has(type)
+
+  const handleOpen = () => {
+    setCode(value?.trim() || TEMPLATES[type] || TEMPLATES.valueSetter)
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+    setFullscreen(false)
+  }
+
+  const handleSave = () => {
+    onChange(code.trim())
+    handleClose()
+  }
+
+  const hasValue = !!value?.trim()
+
+  const handleMount = (editor, monaco) => {
+    editorRef.current = editor
+
+    if (hasShell) {
+      const model = editor.getModel()
+      if (model) {
+        const total = model.getLineCount()
+        const lockedRanges = [
+          new monaco.Range(1, 1, 1, model.getLineLength(1) + 1),
+          new monaco.Range(total, 1, total, model.getLineLength(total) + 1),
+        ]
+        editor.createDecorationsCollection(
+          lockedRanges.map(range => ({
+            range,
+            options: { isWholeLine: true, className: 'readonly', inlineClassName: 'readonly-inline' },
+          }))
+        )
+        editor.onDidChangeCursorPosition(e => {
+          const lines = editor.getModel()?.getLineCount() ?? total
+          if (e.position.lineNumber <= 1) {
+            editor.setPosition({ lineNumber: 2, column: 3 })
+          } else if (e.position.lineNumber >= lines) {
+            editor.setPosition({ lineNumber: lines - 1, column: 3 })
+          }
+        })
+        editor.setPosition({ lineNumber: 2, column: 3 })
+      }
+    }
+
+    editor.focus()
+  }
+
+  return (
+    <>
+      <Tooltip title={`Open ${label} in Monaco editor`}>
+        <IconButton
+          size='small'
+          onClick={handleOpen}
+          sx={{ color: hasValue ? '#aed581' : '#555', p: 0.4 }}
+        >
+          <CodeBraces fontSize='small' />
+        </IconButton>
+      </Tooltip>
+
+      {open && (
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: fullscreen ? 0 : 'auto',
+            height: fullscreen ? '100vh' : '55vh',
+            bgcolor: '#1e1e1e',
+            zIndex: 1500,
+            borderTop: fullscreen ? 'none' : '2px solid #2a3a4a',
+            display: 'flex',
+            flexDirection: 'column',
+            transition: 'height 0.15s ease, top 0.15s ease',
+          }}
+        >
+          {/* Header */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              px: 2,
+              py: 0.8,
+              bgcolor: '#252526',
+              borderBottom: '1px solid #333',
+              flexShrink: 0,
+            }}
+          >
+            <Box display='flex' alignItems='center' gap={1}>
+              <CodeBraces sx={{ fontSize: 14, color: '#7b8ea0' }} />
+              <Typography sx={{ fontSize: 12, color: '#90caf9', fontWeight: 600, letterSpacing: '0.05em' }}>
+                {label}
+              </Typography>
+              {hasShell && (
+                <Typography sx={{ fontSize: 11, color: '#555', fontFamily: 'monospace' }}>
+                  async (search, {'{ data, dataRef, reportRefs, setData }'} = {'{}'}) =&gt; {'{ … }'}
+                </Typography>
+              )}
+            </Box>
+            <Box display='flex' alignItems='center' gap={0.5}>
+              <HelpPopover type={type} />
+              <Tooltip title={fullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
+                <IconButton size='small' onClick={() => setFullscreen(f => !f)} sx={{ color: '#666' }}>
+                  {fullscreen
+                    ? <FullscreenExit sx={{ fontSize: 16 }} />
+                    : <Fullscreen sx={{ fontSize: 16 }} />}
+                </IconButton>
+              </Tooltip>
+              <IconButton size='small' onClick={handleClose} sx={{ color: '#666' }}>
+                <Close sx={{ fontSize: 16 }} />
+              </IconButton>
+            </Box>
+          </Box>
+
+          {/* Monaco */}
+          <Box sx={{ flex: 1, minHeight: 0 }}>
+            <Editor
+              height='100%'
+              defaultLanguage='javascript'
+              theme='vs-dark'
+              value={code}
+              options={EDITOR_OPTIONS}
+              onMount={handleMount}
+              onChange={v => setCode(v ?? '')}
+            />
+          </Box>
+
+          {/* Footer */}
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+              justifyContent: 'flex-end',
+              px: 2,
+              py: 1,
+              bgcolor: '#252526',
+              borderTop: '1px solid #333',
+              flexShrink: 0,
+            }}
+          >
+            <Button size='small' onClick={handleClose} sx={{ color: '#888' }}>
+              Cancel
+            </Button>
+            <Button size='small' variant='contained' color='primary' onClick={handleSave}>
+              Apply
+            </Button>
+          </Box>
+        </Box>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,105 @@
+import { Box, TextField, IconButton, Button, Typography } from '@mui/material'
+import { Add, Close, EastOutlined } from '@mui/icons-material'
+import { useState, useEffect } from 'react'
+import JSEditor from '../../JSEditor'
+
+export default function ColumnMappingEditor({ field, onChange }) {
+  const safeField = field ?? { valueType: 'value', value: [] }
+  const isExpression = safeField.valueType === 'expression'
+  const [rows, setRows] = useState([])
+
+  useEffect(() => {
+    if (!isExpression && Array.isArray(safeField.value)) {
+      setRows(safeField.value.length > 0 ? safeField.value : [{ column: '', field: '' }])
+    } else {
+      setRows([{ column: '', field: '' }])
+    }
+  }, [isExpression, JSON.stringify(safeField.value)])
+
+  const handleAdd = () => {
+    const next = [...rows, { column: '', field: '' }]
+    setRows(next)
+    onChange?.({ valueType: 'value', value: next })
+  }
+
+  const handleRemove = (index) => {
+    const next = rows.filter((_, i) => i !== index)
+    setRows(next)
+    onChange?.({ valueType: 'value', value: next })
+  }
+
+  const handleChange = (index, key, value) => {
+    const next = rows.map((r, i) => i === index ? { ...r, [key]: value } : r)
+    setRows(next)
+    onChange?.({ valueType: 'value', value: next })
+  }
+
+  return (
+    <Box>
+      <Box display='flex' alignItems='center' justifyContent='space-between' mb={1}>
+        <Typography variant='subtitle2' sx={{ opacity: 0.9 }}>
+          {isExpression ? 'Using JS Expression' : 'Manual Entry'}
+        </Typography>
+        <JSEditor
+          value={rows}
+          expression={safeField.expression}
+          mode={isExpression ? 'expression' : 'value'}
+          onChange={payload => onChange?.(payload)}
+        />
+      </Box>
+
+      {!isExpression && (
+        <>
+          {/* Column headers */}
+          <Box display='flex' alignItems='center' gap={1} mb={0.5}>
+            <Typography variant='caption' sx={{ flex: 1, opacity: 0.6 }}>Excel Column</Typography>
+            <Box sx={{ width: 20 }} />
+            <Typography variant='caption' sx={{ flex: 1, opacity: 0.6 }}>Field Name</Typography>
+            <Box sx={{ width: 32 }} />
+          </Box>
+
+          {/* Rows */}
+          {rows.map((row, index) => (
+            <Box key={index} display='flex' alignItems='center' gap={1} mb={1}>
+              <TextField
+                size='small'
+                value={row.column || ''}
+                onChange={e => handleChange(index, 'column', e.target.value)}
+                placeholder='column name'
+                sx={{ flex: 1 }}
+              />
+              <EastOutlined sx={{ fontSize: 16, color: 'text.disabled', flexShrink: 0 }} />
+              <TextField
+                size='small'
+                value={row.field || ''}
+                onChange={e => handleChange(index, 'field', e.target.value)}
+                placeholder='field name'
+                sx={{ flex: 1 }}
+              />
+              <IconButton
+                size='small'
+                onClick={() => handleRemove(index)}
+                disabled={rows.length === 1}
+                sx={{ width: 32, height: 32, flexShrink: 0 }}
+              >
+                <Close fontSize='small' />
+              </IconButton>
+            </Box>
+          ))}
+
+          <Button size='small' startIcon={<Add />} onClick={handleAdd} sx={{ mt: 0.5 }}>
+            Add Mapping
+          </Button>
+        </>
+      )}
+
+      {isExpression && (
+        <Box sx={{ p: 1.5, bgcolor: 'action.hover', borderRadius: 1, mt: 1 }}>
+          <Typography variant='body2' color='text.secondary'>
+            Mapping defined by JS expression. Click the code icon above to edit.
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  )
+}