robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -1,23 +1,225 @@
-import { Box } from '@mui/material'
+import { useEffect, useCallback } from 'react'
+import { Box, Typography, CircularProgress } from '@mui/material'
+import { RepeatOutlined, WidgetsOutlined } from '@mui/icons-material'
+import { useState } from 'react'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
 import ComponentRenderer from '../ComponentRenderer'
 import DropZone from '../DropZone'
 import { resolveProps } from 'services/builderHelper/resolveProps'
 import { createNode } from 'services/builderHelper/nodeFactory'
 import { insertIntoTreeAtIndex, moveNodeInTree } from 'services/builderHelper/tree'
+import { Endpoints, Services } from 'services/Endpoints'
+
+// ── Direction → flex styles ───────────────────────────────────────────────────
+
+function directionSx(direction, gap) {
+  const g = gap != null ? gap : 1
+  switch (direction) {
+    case 'horizontal':
+      return { display: 'flex', flexDirection: 'row', gap: g, flexWrap: 'nowrap', width: '100%' }
+    case 'wrap':
+      return { display: 'flex', flexDirection: 'row', gap: g, flexWrap: 'wrap', width: '100%' }
+    default: // vertical
+      return { display: 'flex', flexDirection: 'column', gap: g, width: '100%' }
+  }
+}
+
+// ── Build a scoped viewerContext for one item ─────────────────────────────────
+//
+// Two modes depending on whether `dataKey` is set:
+//
+// Without dataKey (read-only iteration):
+//   data     = parent data (untouched)
+//   dataItem = the current item from the items array
+//   setData  = parent setData (writes go to parent state directly)
+//
+// With dataKey (form array mode):
+//   data     = parent.data[dataKey][index]  ← item's own slice
+//   setData  = scoped setter that writes back to parent.data[dataKey][index]
+//   dataItem = same item slice (convenient alias inside expressions)
+//
+// In both cases `itemIndex` is available as a bare variable in expressions.
+
+// ── Build a scoped viewerContext for one item ─────────────────────────────────
+//
+// Inputs inside a Repeater MUST be scoped per-item — otherwise all items share
+// form[key] from the parent form and show the same value.
+//
+// Storage key priority:
+//   dataKey (explicit)  → data[dataKey][index]   visible to parent, readable anywhere
+//   no dataKey          → data[__rpt_<nodeId>][index]  internal, items still isolated
+//
+// In both cases:
+//   form             → item slice, so form[fieldKey] resolves per-item
+//   updateFormValue  → scoped setter writing to item slice
+//   data             → item slice (when dataKey set) or parent data (when not set,
+//                      so expressions like dataItem.x still work via dataItem)
+
+function buildItemContext(parentCtx, item, index, dataKey, nodeId) {
+  const storageKey = dataKey || `__rpt_${nodeId}`
+  const parentSetData = parentCtx.setData
+
+  const scopedSetData = (updater) => {
+    parentSetData(prev => {
+      const arr = Array.isArray(prev[storageKey]) ? [...prev[storageKey]] : []
+      arr[index] = typeof updater === 'function' ? updater(arr[index] ?? {}) : updater
+      return { ...prev, [storageKey]: arr }
+    })
+  }
+
+  const scopedUpdateFormValue = (fieldKey, value) => {
+    scopedSetData(prev => ({ ...prev, [fieldKey]: value }))
+  }
+
+  // The item's own data slice — what the scoped form reads from
+  const itemSlice = (Array.isArray(parentCtx.data?.[storageKey])
+    ? parentCtx.data[storageKey][index]
+    : null) ?? {}
+
+  if (dataKey) {
+    // Full scoping: data = item slice so expressions like `data.phone` also resolve
+    return {
+      ...parentCtx,
+      data:            itemSlice,
+      setData:         scopedSetData,
+      form:            itemSlice,
+      updateFormValue: scopedUpdateFormValue,
+      dataItem:        item ?? itemSlice,
+      itemIndex:       index,
+      isEditMode:      false,
+      builderContext:  null,
+    }
+  }
+
+  // No dataKey: keep parent data intact for expressions, but scope form so
+  // inputs don't collide. Writes via updateFormValue land in the internal slot.
+  return {
+    ...parentCtx,
+    setData:         scopedSetData,
+    form:            itemSlice,
+    updateFormValue: scopedUpdateFormValue,
+    dataItem:        item,
+    itemIndex:       index,
+    isEditMode:      false,
+    builderContext:  null,
+  }
+}
+
+// ── Widget schema cache ────────────────────────────────────────────────────────
+
+const widgetSchemaCache = {}
+
+function useWidgetSchema(widgetId) {
+  const [node, setNode]       = useState(widgetId ? widgetSchemaCache[widgetId] ?? null : null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError]     = useState(null)
+
+  useEffect(() => {
+    if (!widgetId) { setNode(null); return }
+    if (widgetSchemaCache[widgetId]) { setNode(widgetSchemaCache[widgetId]); return }
+
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+
+    Services.GetService(Endpoints.Widget.Get.GetById, false, { id: widgetId })
+      .then(res => {
+        if (cancelled) return
+        if (res?.data?.value) {
+          const parsed = JSON.parse(res.data.value)
+          widgetSchemaCache[widgetId] = parsed
+          setNode(parsed)
+        } else {
+          setError('Widget not found')
+        }
+      })
+      .catch(e => {
+        if (!cancelled) {
+          console.error('[Repeater] failed to load widget', e)
+          setError('Failed to load widget')
+        }
+      })
+      .finally(() => { if (!cancelled) setLoading(false) })
+
+    return () => { cancelled = true }
+  }, [widgetId])
+
+  return { node, loading, error }
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
 
 export default function RepeaterRenderer({ node, viewerContext }) {
-  const { data, form, isEditMode, builderContext } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const { data, form, isEditMode, builderContext, setData } = viewerContext
+
+  // Resolve own props using parent context (no item scope yet)
+  const main = resolveProps(node, 'main', viewerContext)
+
+  const {
+    items:     itemsProp,
+    count,
+    dataKey,
+    itemKey,
+    widgetId,
+    direction = 'vertical',
+    gap,
+  } = main
+
+  // ── Determine the effective items array ───────────────────────────────────
+  //
+  // Priority:
+  //   1. `items` expression → use as-is (array of objects)
+  //   2. `count` expression → generate N slots, read values from data[dataKey]
+  //   3. data[dataKey] is already an array → use its length
+
+  const effectiveItems = (() => {
+    if (Array.isArray(itemsProp) && itemsProp.length > 0) return itemsProp
+
+    const n = Number(count)
+    if (Number.isFinite(n) && n > 0) {
+      // Generate N item slots. When dataKey is set, seed from existing state
+      // so we don't lose values across re-renders.
+      const existing = dataKey && Array.isArray(data?.[dataKey]) ? data[dataKey] : []
+      return Array.from({ length: n }, (_, i) => existing[i] ?? {})
+    }
 
-  // For repeater, we use the 'items' from data/form based on the 'key'
-  const items = main.items || []
+    // Fallback: if dataKey points to an existing array, derive count from it
+    if (dataKey && Array.isArray(data?.[dataKey])) return data[dataKey]
+
+    return []
+  })()
+
+  // ── Initialize / sync data[dataKey] in parent state ───────────────────────
+  // When count is set and dataKey is provided, ensure parent state has an
+  // array of the right length so the main context can read it immediately.
+
+  useEffect(() => {
+    if (!dataKey) return
+    const n = Number(count)
+    if (!Number.isFinite(n) || n <= 0) return
+
+    const current = data?.[dataKey]
+    // Only initialize if missing or length changed — never overwrite existing values
+    if (!Array.isArray(current) || current.length !== n) {
+      const next = Array.from({ length: n }, (_, i) => current?.[i] ?? {})
+      setData(prev => ({ ...prev, [dataKey]: next }))
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataKey, count])
+
+  // ── Widget template ───────────────────────────────────────────────────────
+
+  const { node: widgetNode, loading: widgetLoading, error: widgetError } = useWidgetSchema(
+    widgetId || null
+  )
+  const hasWidgetTemplate = !!widgetId && !!widgetNode
+
+  // ── Drag-drop handlers (edit mode, inline template only) ──────────────────
 
   const handleDropAtIndex = index => e => {
     if (!isEditMode || !builderContext) return
     e.preventDefault()
     e.stopPropagation()
-
     try {
       const nodeId = e.dataTransfer.getData('application/builder-node-id')
       if (nodeId) {
@@ -29,11 +231,10 @@ export default function RepeaterRenderer({ node, viewerContext }) {
         builderContext.setDraggingNodeId(null)
         return
       }
-
       const componentData = e.dataTransfer.getData('application/builder-component')
       if (componentData) {
         const component = JSON.parse(componentData)
-        const newNode = createNode(component.type)
+        const newNode   = createNode(component.type)
         builderContext.setSchema(prev => ({
           ...prev,
           root: insertIntoTreeAtIndex(prev.root, node.id, newNode, index)
@@ -47,14 +248,37 @@ export default function RepeaterRenderer({ node, viewerContext }) {
     }
   }
 
-  return (
-    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box sx={{ border: '1px dashed #ccc', p: 1 }}>
-        {isEditMode ? (
-           // In edit mode, we show the template (children)
-           <Box>
-             <Box sx={{ fontSize: 10, color: 'text.secondary', mb: 1 }}>Repeater Template</Box>
-             {node.children?.length > 0 ? (
+  // ── Edit mode ─────────────────────────────────────────────────────────────
+
+  if (isEditMode) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{
+          border: '1px dashed',
+          borderColor: 'primary.light',
+          borderRadius: 1,
+          p: 1,
+          bgcolor: 'action.hover',
+          minHeight: 56,
+        }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 1 }}>
+            <RepeatOutlined sx={{ fontSize: 14, color: 'text.disabled' }} />
+            <Typography sx={{ fontSize: 10, color: 'text.secondary', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+              Repeater
+              {dataKey ? ` · ${dataKey}` : ''}
+              {widgetId ? ` · widget ${widgetId}` : ` · ${direction}`}
+            </Typography>
+          </Box>
+
+          {widgetId ? (
+            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1, p: 2, color: 'text.disabled', minHeight: 48 }}>
+              <WidgetsOutlined sx={{ fontSize: 28, opacity: 0.4 }} />
+              <Typography sx={{ fontSize: 11, textAlign: 'center' }}>Widget template — ID: {widgetId}</Typography>
+            </Box>
+          ) : (
+            <Box sx={{ bgcolor: 'background.paper', borderRadius: 0.5, p: 0.5 }}>
+              <Typography sx={{ fontSize: 9, color: 'text.disabled', mb: 0.5, px: 0.5 }}>ITEM TEMPLATE</Typography>
+              {node.children?.length > 0 ? (
                 <>
                   {node.children.map((child, index) => (
                     <Box key={child.id}>
@@ -64,30 +288,65 @@ export default function RepeaterRenderer({ node, viewerContext }) {
                   ))}
                   <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />
                 </>
-             ) : (
+              ) : (
                 <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />
-             )}
-           </Box>
-        ) : (
-          // In preview mode, we repeat the template for each item
-          items.map((item, index) => (
-            <Box key={index} sx={{ mb: 2, borderBottom: '1px solid #eee', pb: 1 }}>
-               {node.children?.map(child => (
-                 <ComponentRenderer
-                   key={child.id}
-                   node={child}
-                   viewerContext={{
-                     ...viewerContext,
-                     data: { ...data, item, index } // Provide item context
-                   }}
-                 />
-               ))}
+              )}
             </Box>
-          ))
-        )}
-        {!isEditMode && items.length === 0 && (
-          <Box sx={{ textAlign: 'center', color: 'text.disabled', py: 2 }}>No items to display</Box>
-        )}
+          )}
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Preview / production ──────────────────────────────────────────────────
+
+  if (widgetId && widgetLoading) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box display='flex' alignItems='center' justifyContent='center' sx={{ minHeight: 48 }}>
+          <CircularProgress size={20} />
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  if (widgetId && widgetError) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Typography color='error' sx={{ fontSize: 12, p: 1 }}>{widgetError}</Typography>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  if (effectiveItems.length === 0) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{ color: 'text.disabled', fontSize: 12, p: 1, textAlign: 'center' }}>No items</Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  const renderItem = (item, index) => {
+    const ctx = buildItemContext(viewerContext, item, index, dataKey, node.id)
+    const key = itemKey && item?.[itemKey] != null ? item[itemKey] : index
+
+    if (hasWidgetTemplate) {
+      return <Box key={key}><ComponentRenderer node={widgetNode} viewerContext={ctx} /></Box>
+    }
+
+    return (
+      <Box key={key}>
+        {node.children?.map(child => (
+          <ComponentRenderer key={child.id} node={child} viewerContext={ctx} />
+        ))}
+      </Box>
+    )
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={directionSx(direction, gap)}>
+        {effectiveItems.map((item, index) => renderItem(item, index))}
       </Box>
     </ViewerComponentWrapper>
   )

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

@@ -1,15 +1,229 @@
-import React from 'react'
-import ReportViewer from 'src/pages/reportModule/reportBuilder/reportViewer'
+import React, { useRef, useEffect, useCallback, useState } from 'react'
+import { Box, CircularProgress } from '@mui/material'
+import ReportViewer from 'pages/builders/report/viewer'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import RowActionsCell from './RowActionsCell'
+import { PrintTable } from '../PrintDialog'
+import fetchReportDataByPageId from 'services/reportData/fetchReportData'
 
+// ── Print-mode report table ────────────────────────────────────────────────────
+// Uses fetchReportDataByPageId with isPagination:false to load ALL rows in one
+// request, then renders a plain HTML table (AG Grid virtualization breaks print).
+function PrintReportTable({ mainProps, viewerContext }) {
+  const [rows, setRows]       = useState(null)  // null = still loading
+  const [columns, setColumns] = useState([])
+
+  useEffect(() => {
+    let cancelled = false
+
+    const load = async () => {
+      const pageId  = mainProps.pageId || mainProps.id
+      const dataKey = mainProps.dataKey
+      const ctxData = viewerContext?.data
+
+      // Fast path: no report ID — fall back to data already in viewerContext
+      if (!pageId) {
+        const fallback = Array.isArray(ctxData?.[dataKey]) ? ctxData[dataKey] : []
+        if (!cancelled) {
+          setRows(fallback)
+          setColumns(Array.isArray(mainProps.columnDefs) ? mainProps.columnDefs : [])
+        }
+        return
+      }
+
+      const result = await fetchReportDataByPageId({
+        pageId,
+        filter:       mainProps.filter ?? {},
+        isPagination: false,   // NoPagination — fetch every row
+        pageSize:     100000,
+      })
+
+      if (cancelled) return
+
+      // Prefer columnDefs explicitly configured in the builder UI.
+      // If none, fall back to selectedFields from the builder model —
+      // fetchReportDataByPageId exposes them via finalRequest.filter.selectFields.
+      let cols = []
+      if (Array.isArray(mainProps.columnDefs) && mainProps.columnDefs.length > 0) {
+        cols = mainProps.columnDefs
+      } else {
+        const selectedFields = result?.finalRequest?.filter?.selectFields ?? []
+        cols = selectedFields.map(f => ({
+          field:      f.headerName,
+          headerName: f.friendlyName || f.headerName,
+        }))
+      }
+
+      setRows(result?.rows ?? [])
+      setColumns(cols)
+    }
+
+    load()
+    return () => { cancelled = true }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mainProps.pageId, mainProps.id])
+
+  if (rows === null) {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, p: 2, fontSize: 11, color: '#999' }}>
+        <CircularProgress size={14} />
+        Loading report data…
+      </Box>
+    )
+  }
+
+  return <PrintTable columns={columns} rows={rows} />
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
 export default function ReportViewerRenderer({ node, viewerContext }) {
-  const { data, form } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const {
+    data, form, setData, dataRef, reportRefs, openDialog, closeDialog,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+    isPrintContext, isPrintBuilder, isEditMode, isPreviewMode,
+  } = viewerContext
+
+  const resolveCtx = {
+    form,
+    data,
+    setData,
+    dataRef:    dataRef?.current ?? {},
+    reportRefs: reportRefs?.current ?? {},
+    openDialog:  openDialog  ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  }
+
+  const main = resolveProps(node, 'main', resolveCtx)
+
+  // Use the editable 'key' prop as the node name — falls back to node.id.
+  // This is the identifier used in reportRefs and passed to column functions
+  // as `nodeName` so cross-table ref calls can target this viewer by name.
+  const nodeName = main.key || node.id
+
+  // Strip 'key' before spreading — React treats it as a reserved prop and
+  // would silently drop it; we pass it explicitly below.
+  const { key: _key, actionsConfig: _actionsConfig, ...mainProps } = main
+
+  // Each ReportViewer instance owns its updateRef for tracking row mutations.
+  // Register under nodeName so column functions can access it via reportRefs.
+  const updateRef = useRef([])
+
+  useEffect(() => {
+    if (reportRefs?.current) {
+      reportRefs.current[nodeName] = updateRef
+    }
+    return () => {
+      if (reportRefs?.current) {
+        delete reportRefs.current[nodeName]
+      }
+    }
+  }, [nodeName, reportRefs])
+
+  // ── Build the `actions` cell-renderer function from actionsConfig ─────────
+  const actionsConfig = Array.isArray(main.actionsConfig) && main.actionsConfig.length > 0
+    ? main.actionsConfig
+    : null
+
+  const ctxRef = useRef(viewerContext)
+  ctxRef.current = viewerContext
+
+  const actionsRenderer = useCallback(
+    actionsConfig
+      ? (params) => (
+          <RowActionsCell
+            params={params}
+            actionsConfig={actionsConfig}
+            viewerContext={ctxRef.current}
+            nodeName={nodeName}
+          />
+        )
+      : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(actionsConfig)]
+  )
+
+  // ── Edit mode: rich placeholder (both UI builder and print builder) ────────
+  if (isEditMode) {
+    const cols     = Array.isArray(mainProps.columnDefs) ? mainProps.columnDefs : []
+    const colNames = cols.slice(0, 5).map(c => c.headerName || c.field || c.label || '?')
+    const hasMore  = cols.length > 5
+
+    const detailRows = [
+      mainProps.dataKey  && { label: 'dataKey',    value: mainProps.dataKey },
+      nodeName           && { label: 'id',         value: nodeName },
+      mainProps.rowHeight != null && { label: 'rowHeight', value: mainProps.rowHeight },
+      mainProps.pagination != null && { label: 'pagination', value: String(mainProps.pagination) },
+    ].filter(Boolean)
+
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{
+          border: '2px dashed #90a4ae', borderRadius: 1, p: 1.5, m: 0.5,
+          bgcolor: '#f0f4f8', display: 'flex', flexDirection: 'column', gap: 0.5, minHeight: 72,
+        }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Box sx={{ fontSize: 10, fontWeight: 700, color: '#546e7a',
+              textTransform: 'uppercase', letterSpacing: 0.5, flexShrink: 0 }}>
+              Report Viewer
+            </Box>
+            {cols.length > 0 && (
+              <Box sx={{ fontSize: 10, color: '#90a4ae', ml: 'auto', flexShrink: 0 }}>
+                {cols.length} col{cols.length !== 1 ? 's' : ''}
+              </Box>
+            )}
+          </Box>
+
+          {detailRows.map(({ label, value }) => (
+            <Box key={label} sx={{ display: 'flex', gap: 0.5, alignItems: 'baseline' }}>
+              <Box sx={{ fontSize: 9, color: '#90a4ae', fontWeight: 600, minWidth: 58, flexShrink: 0 }}>
+                {label}
+              </Box>
+              <Box sx={{ fontSize: 10, color: '#37474f', fontFamily: 'monospace',
+                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {value}
+              </Box>
+            </Box>
+          ))}
+
+          {colNames.length > 0 && (
+            <Box sx={{ fontSize: 9, color: '#78909c', mt: 0.25,
+              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {colNames.join(' · ')}{hasMore ? ` · +${cols.length - 5} more` : ''}
+            </Box>
+          )}
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Print context / print builder preview ────────────────────────────────────
+  // AG Grid's virtualization breaks under window.print().
+  // PrintReportTable fetches ALL rows using NoPagination and maps columns properly.
+  if (isPrintContext || (isPrintBuilder && isPreviewMode)) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <PrintReportTable mainProps={mainProps} viewerContext={viewerContext} />
+      </ViewerComponentWrapper>
+    )
+  }
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <ReportViewer noHeader={true} {...main} />
+      <ReportViewer
+        key={nodeName}
+        noHeader={true}
+        {...mainProps}
+        actions={actionsRenderer ?? mainProps.actions}
+        updateRef={updateRef}
+        nodeId={nodeName}
+        reportRefs={reportRefs}
+        data={data}
+        dataRef={dataRef?.current}
+        openDialog={openDialog}
+        closeDialog={closeDialog}
+      />
     </ViewerComponentWrapper>
   )
 }