robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -0,0 +1,66 @@
+import { Box, Typography } from '@mui/material'
+import { TrendingUpOutlined, TrendingDownOutlined, TrendingFlatOutlined } from '@mui/icons-material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { formatTrend } from 'services/builderHelper/numberFormat'
+
+const PALETTE = {
+  positive: { color: '#2e7d32', bg: '#e8f5e9' },
+  negative: { color: '#c62828', bg: '#ffebee' },
+  neutral:  { color: '#616161', bg: '#f5f5f5' },
+}
+
+export default function TrendRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data } = viewerContext ?? {}
+
+  const {
+    valueKey,
+    isPercent    = true,
+    decimals     = 1,
+    invertColors = false,   // true = down is good (e.g. error rate)
+    label,                  // "vs last month"
+    showIcon     = true,
+    variant      = 'chip',  // 'chip' | 'text' | 'inline'
+    size         = 'medium',
+    align        = 'left',
+  } = main
+
+  const rawValue = resolveValue(valueKey, data)
+  const { text, positive, zero } = formatTrend(rawValue, { isPercent, decimals, invertColors })
+
+  const tone = zero ? 'neutral' : positive ? 'positive' : 'negative'
+  const { color, bg } = PALETTE[tone]
+
+  const Icon = zero
+    ? TrendingFlatOutlined
+    : (positive ? TrendingUpOutlined : TrendingDownOutlined)
+
+  const fontSize = size === 'small' ? 11 : size === 'large' ? 15 : 13
+  const iconSz   = size === 'small' ? 14 : size === 'large' ? 18 : 16
+
+  const content = (
+    <Box display='flex' alignItems='center' gap={0.5}>
+      {showIcon && <Icon sx={{ fontSize: iconSz, color }} />}
+      <Typography sx={{ fontSize, fontWeight: 700, color, lineHeight: 1 }}>{text}</Typography>
+      {label && <Typography sx={{ fontSize: fontSize - 1, color: 'text.secondary', lineHeight: 1 }}>{label}</Typography>}
+    </Box>
+  )
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ textAlign: align }}>
+        {variant === 'chip' ? (
+          <Box component='span' sx={{
+            display: 'inline-flex', alignItems: 'center', gap: 0.5,
+            bgcolor: bg, borderRadius: 10,
+            px: size === 'small' ? 0.75 : 1.25,
+            py: size === 'small' ? 0.2  : 0.4,
+          }}>
+            {content}
+          </Box>
+        ) : content}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,315 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Box, CircularProgress, Typography, IconButton, Tooltip } from '@mui/material'
+import { RefreshOutlined, OpenInNewOutlined, WebAssetOutlined } from '@mui/icons-material'
+import { Endpoints, Services } from 'services/Endpoints'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { executeActionsByEvent } from 'services/builderHelper/actionExecutor'
+import ComponentRenderer from '../ComponentRenderer'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+
+// ── Standalone child viewer context ──────────────────────────────────────────
+//
+// When isolated=true the embedded view gets its own data/form/ref stores so it
+// can't accidentally stomp on the parent page's state.
+//
+// When isolated=false the embedded view shares the parent setData / data / form,
+// which is useful for sub-forms where you want field values to appear in the
+// parent's form object.
+
+function useChildViewerContext({ isolated, parentViewerContext, initialData, externalData, schema }) {
+  const [childData, setChildData] = useState(() =>
+    initialData && typeof initialData === 'object' ? initialData : {}
+  )
+  const [childForm, setChildForm] = useState({})
+  const [validationErrors, setValidationErrors] = useState({})
+  const childDataRef  = useRef({})
+  const childReportRefs = useRef({})
+
+  // Re-seed child data whenever initialData expression produces a new value.
+  // Use a ref to track the previous seed so we only reset when it actually changes.
+  const prevSeedRef = useRef(null)
+  useEffect(() => {
+    if (!isolated) return
+    if (!initialData || typeof initialData !== 'object') return
+    const next = JSON.stringify(initialData)
+    if (next !== prevSeedRef.current) {
+      prevSeedRef.current = next
+      setChildData(initialData)
+    }
+  }, [isolated, initialData])
+
+  // Merge externalData into child state on every change.
+  // externalData is a reactive expression — whenever the parent re-evaluates it
+  // the new values are merged into the child's data without a full reset.
+  const prevExternalRef = useRef(null)
+  useEffect(() => {
+    if (!isolated) return
+    if (!externalData || typeof externalData !== 'object') return
+    const next = JSON.stringify(externalData)
+    if (next !== prevExternalRef.current) {
+      prevExternalRef.current = next
+      setChildData(prev => ({ ...prev, ...externalData }))
+    }
+  }, [isolated, externalData])
+
+  // Run onLoad actions when schema arrives
+  useEffect(() => {
+    if (!schema?.actions?.length) return
+    const effectiveData   = isolated ? childData            : parentViewerContext.data
+    const effectiveSetData= isolated ? setChildData         : parentViewerContext.setData
+    const effectiveDataRef= isolated ? childDataRef.current : (parentViewerContext.dataRef?.current ?? {})
+    executeActionsByEvent(schema.actions, 'onLoad', {
+      form: {}, data: effectiveData, setData: effectiveSetData,
+      dataRef: effectiveDataRef, reportRefs: childReportRefs.current,
+    }).catch(console.error)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schema])
+
+  const updateFormValue = useCallback((key, value) => {
+    if (isolated) {
+      setChildForm(prev => ({ ...prev, [key]: value }))
+    } else {
+      parentViewerContext.updateFormValue?.(key, value)
+    }
+  }, [isolated, parentViewerContext])
+
+  const submitForm = useCallback(async () => {
+    if (!schema?.actions) return false
+    const effectiveData   = isolated ? childData            : parentViewerContext.data
+    const effectiveSetData= isolated ? setChildData         : parentViewerContext.setData
+    const effectiveDataRef= isolated ? childDataRef.current : (parentViewerContext.dataRef?.current ?? {})
+    await executeActionsByEvent(schema.actions, 'onSubmit', {
+      form: isolated ? childForm : parentViewerContext.form,
+      data: effectiveData, setData: effectiveSetData,
+      dataRef: effectiveDataRef, reportRefs: childReportRefs.current,
+    })
+    return true
+  }, [isolated, schema, childData, childForm, parentViewerContext])
+
+  const resetForm = useCallback(() => {
+    if (isolated) {
+      setChildForm({})
+      setValidationErrors({})
+    } else {
+      parentViewerContext.resetForm?.()
+    }
+  }, [isolated, parentViewerContext])
+
+  return {
+    schema,
+    mode: 'preview',
+    setMode: () => {},
+    isEditMode: false,
+    isPreviewMode: true,
+    data:    isolated ? childData    : parentViewerContext.data,
+    setData: isolated ? setChildData : parentViewerContext.setData,
+    form:    isolated ? childForm    : parentViewerContext.form,
+    setForm: isolated ? setChildForm : parentViewerContext.setForm,
+    updateFormValue,
+    validationErrors,
+    setValidationErrors,
+    submitForm,
+    resetForm,
+    builderContext: null,
+    dataRef:    isolated ? childDataRef  : parentViewerContext.dataRef,
+    reportRefs: childReportRefs,
+    // `page` — parent/main-page stores forwarded so Calculation functions inside
+    // this embedded view can access page.data / page.setData / etc.
+    pageData:       parentViewerContext.data,
+    pageSetData:    parentViewerContext.setData,
+    pageDataRef:    parentViewerContext.dataRef,
+    pageReportRefs: parentViewerContext.reportRefs,
+    // Also pass through any grandparent page stores if they exist
+    // (e.g. dialog inside ViewRenderer: page should still be the main page)
+    ...(parentViewerContext.pageData !== undefined ? {
+      pageData:       parentViewerContext.pageData,
+      pageSetData:    parentViewerContext.pageSetData,
+      pageDataRef:    parentViewerContext.pageDataRef,
+      pageReportRefs: parentViewerContext.pageReportRefs,
+    } : {}),
+  }
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
+
+export default function ViewRendererRenderer({ node, viewerContext }) {
+  const { data: parentData, form, setData, dataRef, reportRefs, openDialog, closeDialog } = viewerContext
+
+  const resolveCtx = {
+    form,
+    data: parentData,
+    setData,
+    dataRef: dataRef?.current ?? {},
+    reportRefs: reportRefs?.current ?? {},
+    openDialog:  openDialog  ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+    // thread page context into prop resolution
+    pageData:       viewerContext.pageData,
+    pageSetData:    viewerContext.pageSetData,
+    pageDataRef:    viewerContext.pageDataRef,
+    pageReportRefs: viewerContext.pageReportRefs,
+  }
+
+  const main = resolveProps(node, 'main', resolveCtx)
+
+  const {
+    key: nodeName,
+    viewId,
+    initialData,
+    externalData,
+    refreshKey,
+    isolated = true,
+    // height mode: 'auto' (default) | 'full' | 'fixed'
+    //   auto  — shrinks to content, minHeight respected
+    //   full  — stretches to fill the parent flex container / viewport height
+    //   fixed — exact px height defined by `height`, content scrolls inside
+    heightMode = 'auto',
+    height,
+    minHeight,
+    showBorder,
+    showRefresh,
+    title,
+  } = main
+
+  // ── Schema fetch ──────────────────────────────────────────────────────────
+  const [schema, setSchema]   = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError]     = useState(null)
+  const [rev, setRev]         = useState(0) // bumped to force re-fetch
+
+  const fetchSchema = useCallback(async (id) => {
+    if (!id) { setSchema(null); return }
+    setLoading(true)
+    setError(null)
+    try {
+      const response = await Services.GetService(
+        Endpoints.UiBuilder.Get.GetViewDetails,
+        false,
+        { viewId: id }
+      )
+      if (response?.data) {
+        setSchema(JSON.parse(response.data.value))
+      } else {
+        setError('View not found')
+      }
+    } catch (e) {
+      console.error('[ViewRenderer] failed to load view', e)
+      setError('Failed to load view')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  // Re-fetch when viewId or refreshKey changes
+  useEffect(() => {
+    fetchSchema(viewId)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [viewId, refreshKey, rev])
+
+  // ── Child viewer context ───────────────────────────────────────────────────
+  const childViewerContext = useChildViewerContext({
+    isolated,
+    parentViewerContext: viewerContext,
+    initialData,
+    externalData,
+    schema,
+  })
+
+  // ── Edit-mode placeholder ─────────────────────────────────────────────────
+  const isEditMode = viewerContext.isEditMode
+
+  // ── Height mode styles ────────────────────────────────────────────────────
+  // outer — the border/background wrapper; controls the overall dimensions
+  // inner — the scrollable content area inside the wrapper
+  const outerSx = (() => {
+    const base = {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      border: showBorder ? '1px solid #e0e0e0' : 'none',
+      borderRadius: showBorder ? 1 : 0,
+    }
+    if (heightMode === 'full') {
+      // Fills the nearest positioned/flex parent. The outer Box gets flex: 1
+      // and height: '100%' so it stretches; inner content scrolls if needed.
+      return { ...base, flex: 1, height: '100%', overflow: 'hidden' }
+    }
+    if (heightMode === 'fixed') {
+      const px = Number(height) > 0 ? `${height}px` : '400px'
+      return { ...base, height: px, overflow: 'hidden' }
+    }
+    // auto — wrap content, respect minHeight
+    return { ...base, minHeight: minHeight ?? 80, overflow: 'hidden' }
+  })()
+
+  // The content area scrolls only in fixed / full modes
+  const contentSx = (heightMode === 'fixed' || heightMode === 'full')
+    ? { flex: 1, overflowY: 'auto', overflowX: 'hidden' }
+    : {}
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={outerSx}>
+
+        {/* Optional header bar */}
+        {(title || showRefresh) && (
+          <Box display='flex' alignItems='center' justifyContent='space-between'
+            px={1.5} py={0.6}
+            sx={{ bgcolor: '#f5f5f5', borderBottom: '1px solid #e0e0e0' }}>
+            <Typography sx={{ fontSize: 13, fontWeight: 600, color: '#444' }}>
+              {title ?? ''}
+            </Typography>
+            <Box display='flex' gap={0.5}>
+              {showRefresh && (
+                <Tooltip title='Reload view'>
+                  <IconButton size='small' onClick={() => setRev(v => v + 1)}>
+                    <RefreshOutlined fontSize='small' />
+                  </IconButton>
+                </Tooltip>
+              )}
+            </Box>
+          </Box>
+        )}
+
+        {/* Scrollable content area — fills remaining height in full/fixed modes */}
+        <Box sx={contentSx}>
+
+          {/* Edit-mode: static placeholder — avoid nesting interactive canvases */}
+          {isEditMode ? (
+            <Box display='flex' flexDirection='column' alignItems='center' justifyContent='center'
+              gap={1} sx={{ minHeight: 80, p: 2, color: '#9e9e9e' }}>
+              <WebAssetOutlined sx={{ fontSize: 32, opacity: 0.5 }} />
+              <Typography sx={{ fontSize: 12, textAlign: 'center' }}>
+                {viewId
+                  ? `View Renderer — viewId: ${viewId} · ${heightMode}${heightMode === 'fixed' ? ` ${height ?? 400}px` : ''}${isolated ? ' · isolated' : ' · shared'}`
+                  : 'View Renderer — set a viewId in the inspector'}
+              </Typography>
+            </Box>
+          ) : loading ? (
+            <Box display='flex' alignItems='center' justifyContent='center' sx={{ minHeight: 80 }}>
+              <CircularProgress size={28} />
+            </Box>
+          ) : error ? (
+            <Box display='flex' alignItems='center' justifyContent='center' sx={{ minHeight: 80, p: 2 }}>
+              <Typography color='error' sx={{ fontSize: 13 }}>{error}</Typography>
+            </Box>
+          ) : !schema?.root ? (
+            <Box display='flex' alignItems='center' justifyContent='center' sx={{ minHeight: 80 }}>
+              <Typography sx={{ fontSize: 12, color: 'text.disabled' }}>
+                {viewId ? 'Loading…' : 'No viewId configured'}
+              </Typography>
+            </Box>
+          ) : (
+            // Render the embedded view's component tree using the child context.
+            // The child context is always in production/preview mode — no drag-drop overlay.
+            <Box sx={{ p: 1 }}>
+              <ComponentRenderer node={schema.root} viewerContext={childViewerContext} />
+            </Box>
+          )}
+
+        </Box>
+
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}