robobyte-front-builder 1.0.17 → 1.0.21

package/src/services/reportData/fetchReportData.js

@@ -8,11 +8,11 @@
 // - isSingle (bool)
 // Optional extras: page (default 1), pageSize (default 50)
 
-import { Services } from 'src/services/Endpoints'
-import { Endpoints } from 'src/services/Endpoints'
-import { ReportBuilderEndpoints } from 'services/Endpoints/ReportBuilderEndpoints'
-import { FilterFormat } from 'services/helper/FilterFormat'
-import { Helper } from 'services/helper/helper'
+import {Services} from 'src/services/Endpoints'
+import {Endpoints} from 'src/services/Endpoints'
+import {ReportBuilderEndpoints} from 'services/Endpoints/ReportBuilderEndpoints'
+import {FilterFormat} from 'services/helper/FilterFormat'
+import {Helper} from 'services/helper/helper'
 
 // In-memory cache for builder models by pageId (resets on refresh/new tab)
 const builderModelCache = new Map()
@@ -48,7 +48,7 @@ function toNestedByUnderscore(input) {
       typeof value === 'object' &&
       !Array.isArray(value)
     ) {
-      ref[last] = { ...existing, ...value }
+      ref[last] = {...existing, ...value}
     } else {
       ref[last] = value
     }
@@ -63,7 +63,7 @@ function toNestedByUnderscore(input) {
       const k = Helper.toCamelCaseDotNet(parts[0])
       const existing = result[k]
       if (existing && typeof existing === 'object' && nestedVal && typeof nestedVal === 'object') {
-        result[k] = { ...existing, ...nestedVal }
+        result[k] = {...existing, ...nestedVal}
       } else {
         result[k] = nestedVal
       }
@@ -96,16 +96,18 @@ function convertToNestedObject(flatObject, builderData) {
 }
 
 export async function fetchReportDataByPageId({
-  pageId,
-  filter = {},
-  isDataOnly = false,
-  dataAsObject = false,
-  isPagination = true,
-  isSingle = false,
-  globalParams = null,
-  page = 1,
-  pageSize = 50
-}) {
+                                                pageId,
+                                                filter = {},
+                                                isDataOnly = false,
+                                                dataAsObject = false,
+                                                isPagination = true,
+                                                isSingle = false,
+                                                globalParams = null,
+                                                page = 1,
+                                                pageSize = 50,
+                                                authContext = null,
+                                                context = null
+                                              }) {
   try {
     const asObject = dataAsObject
 
@@ -117,45 +119,82 @@ export async function fetchReportDataByPageId({
         Endpoints.ReportBuilder.Post.GetReportDetails,
         false,
         {},
-        { id: null, pageId }
+        {id: null, pageId}
       )
 
       const detailsData = detailsResp?.data
       if (!detailsData || !detailsData.value) {
-        return { success: false, error: 'Report details not found' }
+        return {success: false, error: 'Report detailsOld not found'}
       }
 
-      builderModel = { ...JSON.parse(detailsData.value), id: detailsData.id }
+      builderModel = {...JSON.parse(detailsData.value), id: detailsData.id}
       builderModelCache.set(cacheKey, builderModel)
     }
 
     if (globalParams != null && builderModel?.selectionParams != null) {
       builderModel.selectionParams = builderModel.selectionParams.map((param, idx) => {
         if (globalParams.hasOwnProperty(idx)) {
-          return { ...param, value: globalParams[idx] }
+          return {...param, value: globalParams[idx]}
         }
         return param
       })
     }
 
     // 2) Prepare filters (no AG Grid specifics)
-    let localFilter = filter ? { ...filter } : {}
+    let localFilter = filter ? {...filter} : {}
     let localTFilter = localFilter?.Tfilter ? [...localFilter.Tfilter] : []
     localTFilter = localFilter?.TFilter ? [...localTFilter, ...localFilter.TFilter] : [...localTFilter]
     const builderFilter = builderModel?.filter?.Tfilter ?? []
     localTFilter = (localTFilter || []).filter(x => x?.value !== null && x?.value !== undefined && x?.value !== '')
     localTFilter = [...localTFilter, ...builderFilter]
+
+    // Extract customFilterCode from filter or builderModel
+    const customFilterCode = filter?.customFilterCode || builderModel?.filter?.customFilterCode || ''
+
     delete localFilter.Tfilter
     delete localFilter.TFilter
     delete localFilter.LocalTfilter
     delete localFilter.localTfilter
     delete localFilter.fixedTFilter
     delete localFilter.fixedTfilter
+    delete localFilter.customFilterCode
 
     const formattedT = FilterFormat(localTFilter)
+
+    // Execute custom filter code if present
+    let customFilterResult = []
+    if (customFilterCode && customFilterCode.trim()) {
+      try {
+        const executeCode = new Function('authContext', 'context', 'filters', `
+          let customFilter = [];
+          try {
+            ${customFilterCode}
+          } catch (e) {
+            console.error('Inner error in customFilterCode:', e);
+          }
+          return customFilter;
+        `)
+        const result = executeCode(authContext, context, localTFilter)
+
+        if (result && Array.isArray(result)) {
+          customFilterResult = result
+        } else if (result && !Array.isArray(result)) {
+          console.error('Error: Custom filter must return an array')
+        }
+      } catch (error) {
+        console.error('Error executing custom filter code:', error)
+      }
+    }
+
+    // Merge custom filter results with formatted filters
+    const finalTFilter = [
+      ...(Array.isArray(formattedT) ? formattedT.filter(f => (f == null ? false : f.value !== null)) : []),
+      ...customFilterResult
+    ]
+
     let data = {
       ...localFilter,
-      tFilter: Array.isArray(formattedT) ? formattedT.filter(f => (f == null ? false : f.value !== null)) : [],
+      tFilter: finalTFilter,
       selectFields: builderModel?.selectedFields || [],
       selectParams: builderModel?.selectionParams || [],
       rawSql: builderModel?.rawSql
@@ -167,8 +206,8 @@ export async function fetchReportDataByPageId({
         ? 'SqlPagination'
         : 'Pagination'
       : builderModel?.isRaw
-      ? 'SqlNoPagination'
-      : 'NoPagination'
+        ? 'SqlNoPagination'
+        : 'NoPagination'
 
     const response = await Services.PostService(ReportBuilderEndpoints.Post.GenericGet, false, data, {
       page: isSingle ? 1 : page,
@@ -183,7 +222,9 @@ export async function fetchReportDataByPageId({
     if (asObject) {
       rows = rows.map(r => toNestedByUnderscore(r))
     }
-    if (isSingle) rows = rows[0]
+    if (isSingle)
+      rows = rows[0]
+
 
     if (isDataOnly) {
       return rows
@@ -198,12 +239,12 @@ export async function fetchReportDataByPageId({
           getType,
           filter: data,
           sourceModel: builderModel?.reportSource?.fullName,
-          params: { page: isSingle ? 1 : page, pageSize: isSingle ? 1 : pageSize }
+          params: {page: isSingle ? 1 : page, pageSize: isSingle ? 1 : pageSize}
         }
       }
   } catch (error) {
     console.error('fetchReportDataByPageId error', error)
-    return { success: false, error }
+    return {success: false, error}
   }
 }
 

package/src/services/routerRef.js

@@ -0,0 +1,35 @@
+/**
+ * routerRef — module-level Next.js router singleton.
+ *
+ * Why a singleton instead of a hook?
+ * jsExecutor.js runs user Calculation code outside of React's render cycle.
+ * It cannot call useRouter() directly. Instead, RouterSync (mounted inside
+ * RoboByteFrontBuilderProvider) keeps this reference in sync on every
+ * navigation, and jsExecutor imports getRouter() to inject it into every
+ * Calculation as the `router` bare-name variable.
+ *
+ * Usage in action code:
+ *   router.push('/dashboard')
+ *   router.replace({ pathname: '/report/[id]', query: { id: 42 } })
+ *   router.back()
+ *   console.log(router.pathname, router.query)
+ */
+
+let _router = null
+
+/**
+ * Called by RouterSync on every render so the ref is always current.
+ * @param {import('next/router').NextRouter} router
+ */
+export function setRouter(router) {
+  _router = router
+}
+
+/**
+ * Returns the current Next.js router instance, or null if RouterSync has
+ * not mounted yet (e.g. SSR or very early render).
+ * @returns {import('next/router').NextRouter | null}
+ */
+export function getRouter() {
+  return _router
+}

package/src/views/ConfirmDialog.js

@@ -18,7 +18,7 @@ import {
 } from '@mui/material'
 import Box from '@mui/material/Box'
 import { Close } from 'mdi-material-ui'
-import { Warning, DeleteOutline } from '@mui/icons-material'
+import { Warning, DeleteOutlined } from '@mui/icons-material'
 import { useState } from 'react'
 
 const ConfirmDelete = props => {
@@ -111,7 +111,7 @@ const ConfirmDelete = props => {
                   mt: 2,
                   mb: 3
                 }}>
-                  <DeleteOutline
+                  <DeleteOutlined
                     sx={{
                       fontSize: 40,
                       color: '#d32f2f',

package/src/views/builder/JSEditor.js

@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
-import { Box, Tabs, Tab, Button, IconButton, Typography, TextField } from '@mui/material'
+import { useEffect, useRef, useState, useCallback } from 'react'
+import { Box, Tabs, Tab, Button, IconButton, Tooltip, Typography, TextField } from '@mui/material'
 import { CodeBraces } from 'mdi-material-ui'
+import { FullscreenOutlined, FullscreenExitOutlined } from '@mui/icons-material'
 import Editor from '@monaco-editor/react'
+import { HelpPopover } from 'views/builder/inspector/fields/FunctionHelpPopover'
 
-/**
- * Monaco editor options
- */
 const editorOptions = {
   minimap: { enabled: false },
   fontFamily: "Menlo, Monaco, 'Courier New', monospace",
@@ -13,112 +12,78 @@ const editorOptions = {
   lineNumbers: 'on',
   wordWrap: 'on',
   renderWhitespace: 'selection',
-  theme: 'vs-dark',
   scrollBeyondLastLine: false,
   automaticLayout: true
-  // formatOnPaste: true,
-  // formatOnType: true,
 }
 
-/**
- * Fixed function shell
- */
-const HEADER_LINES = 4
-
-const CALCULATION_TEMPLATE = `/**
- * @param {IFormData} form
- * @param {object} data
- * @return {Promise<boolean>}
- */
-async function Calculation (form, data) {
+const CALCULATION_TEMPLATE = `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
 
 }
 `
 
 export default function JSEditor({ value, expression, mode, onChange }) {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen]               = useState(false)
+  const [fullscreen, setFullscreen]   = useState(false)
   const [currentMode, setCurrentMode] = useState(mode || (expression ? 'expression' : 'value'))
-  const [code, setCode] = useState(expression?.code || CALCULATION_TEMPLATE)
+  const [code, setCode]               = useState(expression?.code || CALCULATION_TEMPLATE)
   const [simpleValue, setSimpleValue] = useState(value ?? '')
 
   const editorRef = useRef(null)
 
+  // ── Open / close ────────────────────────────────────────────────────────────
+
   const handleOpen = () => {
-    setCurrentMode(mode || (expression ? 'expression' : 'value'))
+    const initialMode = mode || (expression ? 'expression' : 'value')
+    setCurrentMode(initialMode)
     setCode(expression?.code || CALCULATION_TEMPLATE)
-    setSimpleValue(value ?? '')
+    // Only use the value prop for simpleValue when actually in value mode —
+    // prevents expression code from leaking into the Simple value tab.
+    setSimpleValue(initialMode === 'value' ? (value ?? '') : '')
     setOpen(true)
   }
 
+  const handleClose = () => {
+    setOpen(false)
+    setFullscreen(false)
+  }
+
   useEffect(() => {
-    if (!open) {
-      setSimpleValue(value ?? '')
-    }
+    if (!open) setSimpleValue(value ?? '')
   }, [value, open])
 
-  /**
-   * Lock everything except function body
-   */
-  const handleEditorMount = (editor, monaco) => {
-    editorRef.current = editor
+  // ── Escape key closes fullscreen first, then the panel ──────────────────────
 
-    const model = editor.getModel()
-    if (!model) return
-
-    const totalLines = model.getLineCount()
-    const readOnlyRanges = [
-      // Header
-      new monaco.Range(1, 1, HEADER_LINES + 1, 1),
-      // Closing brace
-      new monaco.Range(totalLines, 1, totalLines, model.getLineLength(totalLines) + 1)
-    ]
-
-    editor.createDecorationsCollection(
-      readOnlyRanges.map(range => ({
-        range,
-        options: { isWholeLine: true, className: 'readonly' }
-      }))
-    )
-
-    editor.onDidChangeCursorPosition(e => {
-      const currentTotalLines = model.getLineCount()
-      const currentMaxEditableLine = Math.max(HEADER_LINES + 2, currentTotalLines - 1)
-
-      if (e.position.lineNumber <= HEADER_LINES + 1) {
-        editor.setPosition({ lineNumber: HEADER_LINES + 2, column: 3 })
-        return
-      }
-      if (e.position.lineNumber >= currentTotalLines) {
-        editor.setPosition({ lineNumber: currentMaxEditableLine, column: 3 })
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e) => {
+      if (e.key !== 'Escape') return
+      if (fullscreen) {
+        setFullscreen(false)
+      } else {
+        handleClose()
       }
-    })
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open, fullscreen])
 
+  // ── Editor mount ─────────────────────────────────────────────────────────────
+
+  const handleEditorMount = (editor) => {
+    editorRef.current = editor
     editor.focus()
-    editor.setPosition({ lineNumber: HEADER_LINES + 2, column: 3 })
   }
 
-  /**
-   * Only allow edits inside function body
-   */
-  const handleCodeChange = newCode => {
-    if (!newCode) return
+  // ── Code change ───────────────────────────────────────────────────────────────
 
-    const lines = newCode.split('\n')
-
-    if (!newCode.includes('function Calculation')) {
-      setCode(CALCULATION_TEMPLATE)
-      return
-    }
-
-    setCode(newCode)
+  const handleCodeChange = newCode => {
+    setCode(newCode ?? '')
   }
 
-  /**
-   * Save logic
-   */
+  // ── Save ─────────────────────────────────────────────────────────────────────
+
   const handleSave = () => {
     if (currentMode === 'expression') {
-      console.log(code)
       onChange?.({
         valueType: 'expression',
         type: 'expression',
@@ -129,17 +94,36 @@ export default function JSEditor({ value, expression, mode, onChange }) {
       onChange?.({
         valueType: 'value',
         type: 'value',
-        value: simpleValue
+        value: simpleValue,
+        expression: undefined,
       })
     }
-    setOpen(false)
+    handleClose()
   }
 
   const modeForIcon = mode || (expression ? 'expression' : 'value')
 
+  // ── Panel dimensions ──────────────────────────────────────────────────────────
+
+  const panelSx = fullscreen
+    ? {
+        position: 'fixed',
+        inset: 0,
+        height: '100vh',
+        borderTop: 'none',
+      }
+    : {
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '40vh',
+        borderTop: '1px solid #333',
+      }
+
   return (
     <>
-      {/* Open editor */}
+      {/* Trigger button */}
       <IconButton size='small' color={modeForIcon === 'expression' ? 'success' : 'default'} onClick={handleOpen}>
         <CodeBraces />
       </IconButton>
@@ -147,30 +131,52 @@ export default function JSEditor({ value, expression, mode, onChange }) {
       {open && (
         <Box
           sx={{
-            position: 'fixed',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: '40vh',
+            ...panelSx,
             bgcolor: '#1e1e1e',
             zIndex: 1300,
-            borderTop: '1px solid #333',
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            transition: 'height 0.18s ease, inset 0.18s ease',
           }}
         >
-          {/* Tabs */}
-          <Tabs value={currentMode === 'expression' ? 0 : 1} sx={{ bgcolor: '#252526', color: '#fff' }}>
-            <Tab label='Calculable value' onClick={() => setCurrentMode('expression')} />
-            <Tab label='Simple value' onClick={() => setCurrentMode('value')} />
-          </Tabs>
+          {/* ── Header bar: tabs + fullscreen toggle ── */}
+          <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: '#252526', borderBottom: '1px solid #1a1a1a' }}>
+            <Tabs
+              value={currentMode === 'expression' ? 0 : 1}
+              sx={{
+                flex: 1,
+                minHeight: 38,
+                '.MuiTab-root': { minHeight: 38, py: 0, px: 1.5, fontSize: 12, fontFamily: 'monospace', color: '#666', textTransform: 'none' },
+                '.Mui-selected': { color: '#fff !important', fontWeight: 600 },
+                '.MuiTabs-indicator': { bgcolor: '#4ec9b0', height: 2 },
+              }}
+            >
+              <Tab label='Calculable value' onClick={() => setCurrentMode('expression')} />
+              <Tab label='Simple value'     onClick={() => setCurrentMode('value')} />
+            </Tabs>
+
+            {currentMode === 'expression' && <HelpPopover type='calculation' iconSx={{ color: '#5a7a9a', mr: 0.5 }} />}
+
+            <Tooltip title={fullscreen ? 'Exit fullscreen  (Esc)' : 'Fullscreen'} placement='left'>
+              <IconButton
+                size='small'
+                onClick={() => setFullscreen(f => !f)}
+                sx={{ color: '#aaa', mr: 0.5, '&:hover': { color: '#fff' } }}
+              >
+                {fullscreen
+                  ? <FullscreenExitOutlined fontSize='small' />
+                  : <FullscreenOutlined    fontSize='small' />}
+              </IconButton>
+            </Tooltip>
+          </Box>
 
-          {/* Content */}
+          {/* ── Content ── */}
           {currentMode === 'expression' ? (
             <Box sx={{ flex: 1, minHeight: 0 }}>
               <Editor
                 height='100%'
                 defaultLanguage='javascript'
+                theme='vs-dark'
                 value={code}
                 options={editorOptions}
                 onMount={handleEditorMount}
@@ -178,12 +184,12 @@ export default function JSEditor({ value, expression, mode, onChange }) {
               />
             </Box>
           ) : (
-            <Box sx={{ p: 2, color: '#fff' }}>
+            <Box sx={{ p: 2, color: '#fff', overflowY: 'auto', flex: 1 }}>
               <Typography variant='body2'>Simple Value Mode</Typography>
               <TextField
                 fullWidth
                 multiline
-                minRows={5}
+                minRows={fullscreen ? 20 : 5}
                 size='small'
                 value={simpleValue}
                 onChange={e => setSimpleValue(e.target.value)}
@@ -202,17 +208,9 @@ export default function JSEditor({ value, expression, mode, onChange }) {
             </Box>
           )}
 
-          {/* Footer */}
-          <Box
-            sx={{
-              p: 1,
-              display: 'flex',
-              gap: 1,
-              justifyContent: 'flex-end',
-              bgcolor: '#252526'
-            }}
-          >
-            <Button size='small' onClick={() => setOpen(false)}>
+          {/* ── Footer ── */}
+          <Box sx={{ p: 1, display: 'flex', gap: 1, justifyContent: 'flex-end', bgcolor: '#252526' }}>
+            <Button size='small' onClick={handleClose}>
               Close
             </Button>
             <Button size='small' variant='contained' onClick={handleSave}>

package/src/views/builder/inspector/Inspector.jsx

@@ -28,22 +28,19 @@ export default function Inspector() {
         variant="scrollable"
         scrollButtons="auto"
         sx={{
-          bgcolor: '#3a3f45',
+          bgcolor: 'background.paper',
+          borderBottom: '1px solid',
+          borderColor: 'divider',
           minHeight: 48,
           '& .MuiTab-root': {
-            color: 'rgba(255, 255, 255, 0.7)',
+            color: 'text.secondary',
             minHeight: 48,
             textTransform: 'none',
             fontSize: '0.875rem',
             fontWeight: 500,
-            '&.Mui-selected': {
-              color: '#fff'
-            }
+            '&.Mui-selected': { color: 'text.primary' },
           },
-          '& .MuiTabs-indicator': {
-            backgroundColor: '#9c27b0',
-            height: 3
-          }
+          '& .MuiTabs-indicator': { backgroundColor: 'primary.main', height: 3 },
         }}
       >
         <Tab label="Main" />

package/src/views/builder/inspector/Tabs/ComponentActionsTab.jsx

@@ -2,7 +2,7 @@ import { Box, Typography, TextField, MenuItem } from '@mui/material'
 import { useBuilder } from 'src/context/BuilderContext'
 import FieldWrapper from '../fields/FieldWrapper'
 import { getActionsFields } from '../definitions'
-import { findNode, updateNodeInTree } from 'services/builderHelper'
+import { findNodeAnywhere, updateNodeAnywhere } from 'services/builderHelper'
 import JSEditor from '../../JSEditor'
 
 /**
@@ -19,7 +19,7 @@ function normalizeActionField(field) {
 
 export default function ComponentActionsTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+  const { node, location, dialogId } = findNodeAnywhere(schema, selectedId)
   if (!node) return null
 
   const actionFields = getActionsFields(node.type)
@@ -40,17 +40,11 @@ export default function ComponentActionsTab() {
   )
 
   const updateAction = (name, actionData) => {
-    setSchema(prev => ({
-      ...prev,
-      root: updateNodeInTree(prev.root, node.id, {
-        props: {
-          actions: {
-            ...actions,
-            [name]: actionData
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, {
+        props: { actions: { ...actions, [name]: actionData } }
+      }, location, dialogId)
+    )
   }
 
   return (