robobyte-front-builder 1.0.17 → 1.0.21

package/src/views/builder/viewer/renderers/CountdownRenderer.jsx

@@ -0,0 +1,249 @@
+import { useState, useEffect, useRef } from 'react'
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { thresholdColors } from 'services/builderHelper/thresholdEngine'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+/**
+ * Robustly convert many date representations to a Unix-ms timestamp.
+ *
+ * Accepts:
+ *   • JS Date object        → new Date() from an expression
+ *   • ISO string            → "2025-12-31T23:59:59" / "2025-12-31"
+ *   • Epoch milliseconds    → 1735689600000
+ *   • Epoch seconds         → 1735689600  (detected as < 1e11)
+ *   • Any other string      → attempted via new Date()
+ *
+ * Returns null when the value cannot be parsed.
+ */
+function toEpochMs(val) {
+  if (val == null || val === '') return null
+
+  // JS Date object (e.g. from expression: new Date())
+  if (val instanceof Date) {
+    return isNaN(val.getTime()) ? null : val.getTime()
+  }
+
+  // Numeric epoch — distinguish seconds vs milliseconds
+  if (typeof val === 'number') {
+    if (!isFinite(val)) return null
+    // Epoch seconds heuristic: < 1e11 (year ~5138 in ms, but year ~1973 in sec)
+    return val < 1e11 ? val * 1000 : val
+  }
+
+  // String
+  const str = String(val).trim()
+  if (!str) return null
+
+  // Date-only strings ("2025-12-31") are parsed as UTC midnight by the spec,
+  // which can shift the day in negative-UTC-offset zones.
+  // Normalise to local midnight by replacing the separator so it parses as local.
+  const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(str)
+  const d = dateOnly ? new Date(`${str}T00:00:00`) : new Date(str)
+  return isNaN(d.getTime()) ? null : d.getTime()
+}
+
+function calcRemaining(epochMs) {
+  const diff = Math.max(0, epochMs - Date.now())
+  const totalSec = Math.floor(diff / 1000)
+  return {
+    days:    Math.floor(totalSec / 86400),
+    hours:   Math.floor((totalSec % 86400) / 3600),
+    minutes: Math.floor((totalSec % 3600) / 60),
+    seconds: totalSec % 60,
+    total:   totalSec,
+    done:    totalSec <= 0,
+  }
+}
+
+export default function CountdownRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, setData, isEditMode } = viewerContext ?? {}
+
+  const {
+    // data binding — targetDateKey is the data key; targetDate is a static fallback
+    targetDateKey,
+    targetDate,
+
+    // segments
+    showDays    = true,
+    showHours   = true,
+    showMinutes = true,
+    showSeconds = true,
+
+    // labels
+    label,
+    doneLabel   = 'Done!',
+
+    // unit label overrides (default: days / hrs / min / sec)
+    labelDays    = 'days',
+    labelHours   = 'hrs',
+    labelMinutes = 'min',
+    labelSeconds = 'sec',
+
+    // thresholds against total remaining seconds
+    thresholds  = [],
+
+    // layout
+    size      = 'medium',
+    align     = 'center',
+    separator = ':',
+
+    // coloring
+    color,            // explicit digit color (overrides threshold)
+    unitColor,        // unit label color (default: text.disabled)
+    separatorColor,   // separator color  (default: text.disabled)
+    doneLabelColor = 'success.main',
+
+    // digit styling
+    numberFontWeight = 800,
+
+    // top label styling
+    labelFontSize,
+    labelFontWeight = 400,
+    labelColor      = 'text.secondary',
+
+    // on-done action
+    onDoneCode,
+  } = main
+
+  // Resolve the target key as either a data-key string or a direct value (e.g. new Date())
+  const rawTarget = resolveValue(targetDateKey, data) ?? targetDate
+  const epochMs   = toEpochMs(rawTarget)
+
+  const [remaining, setRemaining] = useState(() =>
+    epochMs != null ? calcRemaining(epochMs) : null
+  )
+
+  // Track whether onDoneCode has already fired for the current epochMs
+  // so it only triggers once per countdown target, not on every re-render.
+  const firedDoneRef = useRef(false)
+
+  useEffect(() => {
+    // Reset the "fired" flag whenever the target changes
+    firedDoneRef.current = false
+  }, [epochMs])
+
+  useEffect(() => {
+    if (epochMs == null || isEditMode) {
+      setRemaining(epochMs != null ? calcRemaining(epochMs) : null)
+      return
+    }
+    const tick = () => setRemaining(calcRemaining(epochMs))
+    tick()
+    const id = setInterval(tick, 1000)
+    return () => clearInterval(id)
+  }, [epochMs, isEditMode])
+
+  // Fire onDoneCode exactly once when the countdown transitions to done
+  useEffect(() => {
+    if (!remaining?.done || !onDoneCode || isEditMode || firedDoneRef.current) return
+    firedDoneRef.current = true
+    executeJSCode(onDoneCode, {
+      data: data ?? {},
+      form: {},
+      setData: setData ?? (() => {}),
+    }).catch(e => console.error('[Countdown] onDone error:', e))
+  }, [remaining?.done, onDoneCode, isEditMode, data, setData])
+
+  // Threshold color (based on remaining seconds)
+  const { color: threshColor } = thresholdColors(remaining?.total ?? 0, thresholds)
+  const digitColor = color
+    || (thresholds.length && threshColor !== 'inherit' ? threshColor : 'text.primary')
+
+  const numSz = size === 'small' ? 22 : size === 'large' ? 42 : 30
+  const lblSz = size === 'small' ? 9  : size === 'large' ? 13 : 11
+  const sepSz = numSz * 0.7
+
+  // ── No target bound ──
+  if (epochMs == null) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{ border: '1px dashed', borderColor: 'divider', borderRadius: 1, p: 1.5, textAlign: 'center' }}>
+          <Typography variant='caption' color='text.disabled'>
+            Countdown — bind targetDateKey or set targetDate
+          </Typography>
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Done state ──
+  if (remaining?.done) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{ textAlign: align }}>
+          <Typography sx={{ fontSize: numSz * 0.6, fontWeight: 700, color: doneLabelColor }}>
+            {doneLabel}
+          </Typography>
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Ticking ──
+  const segments = [
+    { value: remaining?.days,    label: labelDays,    show: showDays    },
+    { value: remaining?.hours,   label: labelHours,   show: showHours   },
+    { value: remaining?.minutes, label: labelMinutes, show: showMinutes },
+    { value: remaining?.seconds, label: labelSeconds, show: showSeconds },
+  ].filter(s => s.show)
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ textAlign: align }}>
+        {label && (
+          <Typography sx={{
+            fontSize:   labelFontSize != null ? Number(labelFontSize) : lblSz + 1,
+            fontWeight: labelFontWeight,
+            color:      labelColor,
+            mb: 0.5,
+            lineHeight: 1.3,
+          }}>
+            {label}
+          </Typography>
+        )}
+
+        <Box sx={{ display: 'inline-flex', alignItems: 'flex-end', gap: 0.5 }}>
+          {segments.map((seg, i) => (
+            <Box key={seg.label} sx={{ display: 'inline-flex', alignItems: 'flex-end', gap: 0.25 }}>
+              <Box sx={{ textAlign: 'center' }}>
+                <Typography sx={{
+                  fontSize: numSz,
+                  fontWeight: numberFontWeight,
+                  lineHeight: 1,
+                  color: digitColor,
+                  fontVariantNumeric: 'tabular-nums',
+                  minWidth: numSz,
+                  transition: 'color .3s',
+                }}>
+                  {String(seg.value ?? 0).padStart(2, '0')}
+                </Typography>
+                <Typography sx={{
+                  fontSize: lblSz,
+                  color: unitColor || 'text.disabled',
+                  lineHeight: 1.2,
+                }}>
+                  {seg.label}
+                </Typography>
+              </Box>
+
+              {i < segments.length - 1 && (
+                <Typography sx={{
+                  fontSize: sepSz,
+                  fontWeight: 300,
+                  color: separatorColor || 'text.disabled',
+                  lineHeight: 1,
+                  mb: lblSz * 0.12,
+                }}>
+                  {separator}
+                </Typography>
+              )}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

package/src/views/builder/viewer/renderers/DataGridRenderer.jsx

@@ -0,0 +1,380 @@
+import { Box, Button, IconButton, Tooltip, Typography } from '@mui/material'
+import { useRef, useMemo, useCallback, useEffect } from 'react'
+import { AgGridReact } from 'ag-grid-react'
+import { themeQuartz } from 'ag-grid-community'
+import { AddOutlined, DeleteOutlined, TableChartOutlined } from '@mui/icons-material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import RowActionsCell from './RowActionsCell'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+import { processColumnDefinitions, processColumnsConfig } from 'views/genericTable/convertStringFunctions'
+import { AG_COMPONENTS } from './dataGridComponents'
+
+// ── Shared AG Grid theme (same as SGrid) ──────────────────────────────────────
+const agTheme = themeQuartz.withParams({ accentColor: '#FF1185' })
+
+// ── Delete-column cell renderer ───────────────────────────────────────────────
+// Defined at module level so AG Grid never receives a new component reference.
+// Receives `context.onDelete` via the grid's context prop.
+function DeleteCellRenderer({ data: rowData, context }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+      <Tooltip title='Remove row'>
+        <IconButton
+          size='small'
+          onClick={() => context?.onDelete?.(rowData)}
+          sx={{ color: 'error.light', p: 0.5 }}
+        >
+          <DeleteOutlined sx={{ fontSize: 16 }} />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  )
+}
+
+// ── Default colDef applied to every column ────────────────────────────────────
+const DEFAULT_COL_DEF = { resizable: true, sortable: true, filter: true, minWidth: 80 }
+
+// ── Helper: generate a stable row ID ─────────────────────────────────────────
+function genId() {
+  return (typeof crypto !== 'undefined' && crypto.randomUUID)
+    ? crypto.randomUUID()
+    : `${Date.now()}-${Math.random().toString(36).slice(2)}`
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+export default function DataGridRenderer({ node, viewerContext }) {
+  const {
+    form, data, setData, dataRef, reportRefs, openDialog, closeDialog, isEditMode,
+  } = viewerContext
+
+  const main = resolveProps(node, 'main', viewerContext)
+
+  const {
+    key: nodeKey,
+    dataKey,
+    columns:      columnsProp,   // expression → array of AG Grid colDef objects
+    extraCols,                   // extra-cols-editor
+    columnsConfig,               // columns-config-editor
+    actionsConfig,               // actions-config-editor
+    addLabel,
+    addRow:       addRowCode,    // code field → JS that returns a new row object
+    readOnly    = false,
+    showAddBtn  = true,
+    showDeleteCol = true,
+    height,
+    rowSelection,                // 'single' | 'multiple'
+    pagination,
+    pageSize,
+  } = main
+
+  const nodeName   = nodeKey || node.id
+  const storageKey = dataKey || `__dg_${node.id}`
+
+  // ── Rows live in data[storageKey] ─────────────────────────────────────────
+  const rows = useMemo(() => {
+    const arr = data?.[storageKey]
+    return Array.isArray(arr) ? arr : []
+  }, [data, storageKey])
+
+  // Auto-stamp __id on any rows that arrive without one (e.g. fetched from DB).
+  // Runs only when there are actually rows missing __id, so it won't loop.
+  useEffect(() => {
+    const arr = data?.[storageKey]
+    if (!Array.isArray(arr) || arr.length === 0) return
+    if (arr.every(r => r.__id)) return   // all good — nothing to do
+    setData(prev => ({
+      ...prev,
+      [storageKey]: (Array.isArray(prev?.[storageKey]) ? prev[storageKey] : [])
+        .map(r => r.__id ? r : { ...r, __id: genId() }),
+    }))
+  }, [data, storageKey, setData])
+
+  // Keep a stable context snapshot so actionsConfig renderer always sees fresh state
+  const ctxRef = useRef(viewerContext)
+  ctxRef.current = viewerContext
+
+  // Stable refs so registered functions always call the latest setData / storageKey
+  // without needing to re-register on every render.
+  const setDataRef     = useRef(setData)
+  const storageKeyRef  = useRef(storageKey)
+  const rowsRef        = useRef(rows)
+  setDataRef.current    = setData
+  storageKeyRef.current = storageKey
+  rowsRef.current       = rows
+
+  useEffect(() => {
+    if (!reportRefs?.current) return
+
+    const entry = {
+      get rows()     { return rowsRef.current },
+      get storageKey() { return storageKeyRef.current },
+      setRows(arr) {
+        const stamped = (Array.isArray(arr) ? arr : []).map(r => r.__id ? r : { ...r, __id: genId() })
+        const key = storageKeyRef.current
+        setDataRef.current(prev => ({ ...prev, [key]: stamped }))
+      },
+      addRow(obj = {}) {
+        const row = { ...obj, __id: obj.__id ?? genId() }
+        const key = storageKeyRef.current
+        setDataRef.current(prev => ({
+          ...prev,
+          [key]: [...(Array.isArray(prev?.[key]) ? prev[key] : []), row],
+        }))
+      },
+      deleteRow(id) {
+        const key = storageKeyRef.current
+        setDataRef.current(prev => ({
+          ...prev,
+          [key]: (Array.isArray(prev?.[key]) ? prev[key] : []).filter(r => r.__id !== id),
+        }))
+      },
+    }
+
+    reportRefs.current[nodeName] = entry
+    return () => { if (reportRefs?.current) delete reportRefs.current[nodeName] }
+  // Only re-register if the node name or the refs object changes — not on every render
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodeName, reportRefs])
+
+  // ── Actions column renderer (stable) ────────────────────────────────────────
+  const actionsArr = Array.isArray(actionsConfig) && actionsConfig.length > 0 ? actionsConfig : null
+
+  const actionsRenderer = useCallback(
+    actionsArr
+      ? (params) => (
+          <RowActionsCell
+            params={params}
+            actionsConfig={actionsArr}
+            viewerContext={ctxRef.current}
+            nodeName={nodeName}
+          />
+        )
+      : null,
+    // Recreate only when config shape or nodeName changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(actionsArr), nodeName]
+  )
+
+  // ── Column definitions ───────────────────────────────────────────────────────
+  const colDefs = useMemo(() => {
+    const ctx = {
+      reportRefs: reportRefs?.current ?? {},
+      nodeName,
+      data,
+      openDialog:  openDialog  ?? (() => {}),
+      closeDialog: closeDialog ?? (() => {}),
+    }
+
+    // 1. Base columns from expression prop
+    let cols = Array.isArray(columnsProp)
+      ? processColumnDefinitions([...columnsProp], ctx)
+      : []
+
+    // 2. Extra columns (from ExtraColsEditor)
+    if (Array.isArray(extraCols) && extraCols.length > 0) {
+      cols = [...cols, ...processColumnDefinitions([...extraCols], ctx)]
+    }
+
+    // 3. Apply columnsConfig overrides (from ColumnsConfigEditor)
+    if (Array.isArray(columnsConfig) && columnsConfig.length > 0) {
+      const processed = processColumnsConfig(columnsConfig, ctx)
+      const overrideMap = {}
+      processed.forEach(item => { if (item?.field) overrideMap[item.field] = item.config })
+      cols = cols.map(col => overrideMap[col.field] ? { ...col, ...overrideMap[col.field] } : col)
+    }
+
+    // 4. Actions column (pinned right)
+    if (actionsRenderer) {
+      cols.push({
+        field:      '__actions',
+        headerName: 'Actions',
+        width:       110,
+        minWidth:    80,
+        pinned:     'right',
+        sortable:   false,
+        filter:     false,
+        resizable:  false,
+        cellRenderer: actionsRenderer,
+      })
+    }
+
+    // 5. Delete column (pinned right, always last) — hidden in read-only mode
+    if (!readOnly && showDeleteCol) {
+      cols.push({
+        field:      '__delete',
+        headerName: '',
+        width:       48,
+        minWidth:    48,
+        maxWidth:    48,
+        pinned:     'right',
+        sortable:   false,
+        filter:     false,
+        resizable:  false,
+        cellRenderer: DeleteCellRenderer,
+      })
+    }
+
+    return cols
+  }, [columnsProp, extraCols, columnsConfig, actionsRenderer, readOnly, showDeleteCol, nodeName, data, openDialog, closeDialog, reportRefs])
+
+  // ── Row manipulation ─────────────────────────────────────────────────────────
+
+  const handleAddRow = useCallback(async () => {
+    let newRow = {}
+    if (addRowCode) {
+      try {
+        const result = await executeJSCode(addRowCode, {
+          form, data, setData,
+          dataRef:    dataRef?.current    ?? {},
+          reportRefs: reportRefs?.current ?? {},
+          openDialog, closeDialog,
+        })
+        if (result && typeof result === 'object' && !Array.isArray(result)) newRow = result
+      } catch (e) {
+        console.error('[DataGrid] addRow error:', e)
+      }
+    }
+    // Always stamp a stable __id so getRowId and delete work correctly
+    if (!newRow.__id) newRow.__id = genId()
+
+    setData(prev => ({
+      ...prev,
+      [storageKey]: [...(Array.isArray(prev?.[storageKey]) ? prev[storageKey] : []), newRow],
+    }))
+  }, [addRowCode, form, data, setData, dataRef, reportRefs, openDialog, closeDialog, storageKey])
+
+  const handleDeleteRow = useCallback((rowData) => {
+    setData(prev => ({
+      ...prev,
+      [storageKey]: (Array.isArray(prev?.[storageKey]) ? prev[storageKey] : [])
+        .filter(r => r.__id !== rowData.__id),
+    }))
+  }, [setData, storageKey])
+
+  const onCellValueChanged = useCallback((params) => {
+    const { field } = params.colDef
+    console.log(`[DataGrid] onCellValueChanged field="${field}" newValue=`, params.newValue, 'rowId=', params.data?.__id)
+    if (!field || field.startsWith('__')) return
+    // Guard: if newValue is undefined this is a phantom revert from the MultiSelectEditor
+    // cancel path — the real value was already committed via setDataValue above.
+    if (params.newValue === undefined && params.colDef?.cellEditor === 'MultiSelectEditor') {
+      console.log('[DataGrid] onCellValueChanged — skipping phantom revert for MultiSelectEditor')
+      return
+    }
+    setData(prev => {
+      const arr = [...(Array.isArray(prev?.[storageKey]) ? prev[storageKey] : [])]
+      const idx = arr.findIndex(r => r.__id === params.data.__id)
+      if (idx !== -1) arr[idx] = { ...arr[idx], [field]: params.newValue }
+      return { ...prev, [storageKey]: arr }
+    })
+  }, [setData, storageKey])
+
+  // Provide an updateRef compatible with setRefValue/getRefValue helpers used in valueSetters.
+  // DataGrid manages state via React (onCellValueChanged), but the updateRef lets valueSetter
+  // code call setRefValue/getRefValue without throwing — the ref tracks in-flight edits.
+  const updateRef = useRef([])
+
+  // Stable grid context so DeleteCellRenderer doesn't remount on every render
+  const gridContext = useMemo(() => ({
+    onDelete: handleDeleteRow,
+    updateRef,            // exposed as context.updateRef inside valueSetter / valueGetter functions
+    nodeName,             // exposed as context.nodeId for cross-table helpers
+    // Returns the LATEST viewerContext snapshot — safe to call from inside editors
+    // without adding viewerContext as a dependency (avoids remounting on every data change)
+    getViewerContext: () => ctxRef.current,
+  }), [handleDeleteRow, nodeName])
+
+  const getRowId = useCallback(
+    params => params.data.__id ?? String(params.node.rowIndex),
+    []
+  )
+
+  // Memoised so AG Grid only sees a new object when readOnly actually changes,
+  // not on every parent render (which would cause a full column re-initialisation).
+  const defaultColDef = useMemo(
+    () => ({ ...DEFAULT_COL_DEF, ...(readOnly ? { editable: false } : {}) }),
+    [readOnly]
+  )
+
+  // ── Edit-mode placeholder ────────────────────────────────────────────────────
+  if (isEditMode) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box
+          sx={{
+            border: '1px dashed',
+            borderColor: 'primary.light',
+            borderRadius: 1,
+            p: 2,
+            bgcolor: 'action.hover',
+            minHeight: 80,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+          }}
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+            <TableChartOutlined sx={{ fontSize: 14, color: 'text.disabled' }} />
+            <Typography sx={{ fontSize: 10, color: 'text.secondary', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+              Data Grid
+              {storageKey ? ` · ${storageKey}` : ''}
+              {Array.isArray(columnsProp) ? ` · ${columnsProp.length} col${columnsProp.length !== 1 ? 's' : ''}` : ''}
+              {Array.isArray(extraCols)   && extraCols.length   > 0 ? ` + ${extraCols.length} extra`   : ''}
+            </Typography>
+          </Box>
+          {(Array.isArray(actionsConfig) && actionsConfig.length > 0) && (
+            <Typography sx={{ fontSize: 9, color: 'text.disabled' }}>
+              {actionsConfig.length} action{actionsConfig.length !== 1 ? 's' : ''} configured
+            </Typography>
+          )}
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Preview / production ─────────────────────────────────────────────────────
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+
+      {/* Toolbar */}
+      {!readOnly && showAddBtn !== false && (
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, gap: 1 }}>
+          <Button
+            size='small'
+            variant='outlined'
+            startIcon={<AddOutlined fontSize='small' />}
+            onClick={handleAddRow}
+          >
+            {addLabel || 'Add Row'}
+          </Button>
+          <Typography variant='caption' sx={{ color: 'text.disabled', ml: 'auto' }}>
+            {rows.length} row{rows.length !== 1 ? 's' : ''}
+          </Typography>
+        </Box>
+      )}
+
+      {/* AG Grid */}
+      <Box style={{ height: height ?? 400, width: '100%' }}>
+        <AgGridReact
+          theme={agTheme}
+          rowData={rows}
+          columnDefs={colDefs}
+          defaultColDef={defaultColDef}
+          getRowId={getRowId}
+          context={gridContext}
+          components={AG_COMPONENTS}
+          onCellValueChanged={onCellValueChanged}
+          rowSelection={rowSelection && rowSelection !== 'none' ? { mode: rowSelection === 'multiple' ? 'multiRow' : 'singleRow' } : undefined}
+          pagination={!!pagination}
+          paginationPageSize={pageSize ?? 20}
+          suppressRowTransform
+          suppressMovableColumns={false}
+          readOnlyEdit={readOnly}
+        />
+      </Box>
+
+    </ViewerComponentWrapper>
+  )
+}