npm - robobyte-front-builder - Versions diffs - 1.0.17 → 1.0.21 - Mend

robobyte-front-builder 1.0.17 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (516) hide show

package/src/views/builder/viewer/PrintDialog.jsx ADDED Viewed

@@ -0,0 +1,481 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Box, Dialog, DialogContent, IconButton, Tooltip, Button, CircularProgress } from '@mui/material'
+import { CloseOutlined, PrintOutlined } from '@mui/icons-material'
+import ComponentRenderer from './ComponentRenderer'
+import { Endpoints, Services } from 'services/Endpoints'
+import PrintPreviewCanvas from 'views/printBuilder/PrintPreviewCanvas'
+const PRINT_STYLE_ID = '__rbb_print_style__'
+const PAGE_SIZE_NAMES = { A4: 'A4', Letter: 'letter', Legal: 'legal' }
+// ── CSS injected when print schema is available ───────────────────────────────
+//
+// Strategy (table-based, cross-browser):
+//  • @page           — paper size + body margins only (NO header/footer height added)
+//  • <thead>         — repeats automatically at the top of every printed page
+//  • <tfoot>         — repeats automatically at the bottom of every printed page
+//  • <tbody> <tr>s   — body pages that paginate naturally
+//  • #__rbb_print_portal__ is a Portal appended directly to <body>.
+//    On screen it is hidden via CSS; on print the Dialog is hidden and the
+//    portal is revealed — this also covers Ctrl+P (no JS needed).
+//
+function buildPrintCSS(settings = {}) {
+  const pageSize  = PAGE_SIZE_NAMES[settings.pageSize] ?? 'A4'
+  const orient    = settings.orientation ?? 'portrait'
+  const m         = settings.margins ?? { top: 0, right: 0, bottom: 0, left: 0 }
+  const hEnabled  = settings.header?.enabled
+  const fEnabled  = settings.footer?.enabled
+  const hH        = hEnabled ? (settings.header?.height ?? 10) : 0   // mm
+  const fH        = fEnabled ? (settings.footer?.height ?? 10) : 0   // mm
+  // ── Watermark ─────────────────────────────────────────────────────────────
+  const wm         = settings.watermark ?? {}
+  const wmEnabled  = wm.enabled && wm.text
+  const wmFontSize = wm.fontSize ?? 60
+  const wmAngle    = wm.angle    ?? -45
+  const wmOpacity  = wm.opacity  ?? 0.1
+  const wmColor    = wm.color    ?? '#000000'
+  // ── Print CSS strategy ────────────────────────────────────────────────────
+  // @page margin = 0. Zones are full-paper-edge (top/bottom/left/right = 0).
+  // Page margins (m.*) are expressed as PADDING inside each zone container —
+  // they are NOT added to the zone's height or position offset.
+  //
+  //  Header   top:0 left:0 right:0  height=hH mm (exact configured height)
+  //           padding: m.top m.right 0 m.left  → margins live inside the zone
+  //
+  //  Footer   bottom:0 left:0 right:0  height=fH mm
+  //           padding: 0 m.right m.bottom m.left
+  //
+  //  Body page  padding-top=hH  padding-bottom=fH  (push content past zones)
+  //             padding-left/right = m.left/right  (side margins inside body)
+  //             min-height:100vh = one full paper per zone
+  // ─────────────────────────────────────────────────────────────────────────
+  return `
+    @page {
+      size: ${pageSize} ${orient};
+      margin: 0;
+    }
+    /* ── Screen: keep the portal invisible ── */
+    #__rbb_print_portal__ { display: none; }
+    @media print {
+      /* ── Hide everything except the portal ── */
+      .MuiModal-root,
+      .MuiModal-backdrop,
+      body > *:not(#__rbb_print_portal__) { display: none !important; }
+      body {
+        background: white !important;
+        margin: 0 !important; padding: 0 !important;
+      }
+      #__rbb_print_portal__ {
+        display: block !important;
+        width: 100%;
+        margin: 0 !important; padding: 0 !important;
+      }
+      /* ── Header — full paper edge, exact configured height, margins as padding ── */
+      .rbb-print-header {
+        position: fixed;
+        top: 0; left: 0; right: 0;
+        height: ${hH}mm;
+        padding: ${m.top}mm ${m.right}mm 0 ${m.left}mm;
+        box-sizing: border-box;
+        overflow: hidden;
+        border-bottom: ${hEnabled ? '1px solid #e0e0e0' : 'none'};
+        background: white;
+        z-index: 1;
+      }
+      /* ── Footer — full paper edge, exact configured height, margins as padding ── */
+      .rbb-print-footer {
+        position: fixed;
+        bottom: 0; left: 0; right: 0;
+        height: ${fH}mm;
+        padding: 0 ${m.right}mm ${m.bottom}mm ${m.left}mm;
+        box-sizing: border-box;
+        overflow: hidden;
+        border-top: ${fEnabled ? '1px solid #e0e0e0' : 'none'};
+        background: white;
+        z-index: 1;
+      }
+      /* ── Body container ── */
+      .rbb-print-body { margin: 0; padding: 0; }
+      /* ── Individual page zones ── */
+      /* padding-top/bottom = exact zone heights so body content clears the zones.
+         padding-left/right = page side margins expressed as body padding.
+         min-height:100vh = one full paper page per zone.                         */
+      .rbb-print-page {
+        box-sizing: border-box;
+        min-height: 100vh;
+        padding-top:    ${hH}mm;
+        padding-bottom: ${fH}mm;
+        padding-left:   ${m.left}mm;
+        padding-right:  ${m.right}mm;
+        page-break-inside: avoid;
+        break-inside: avoid;
+      }
+      /* Each zone → its own physical page; skip last to avoid a blank trailing page */
+      .rbb-print-page:not(:last-child) {
+        page-break-after: always;
+        break-after: page;
+      }
+      /* ── Watermark ── */
+      ${wmEnabled ? `
+      .rbb-watermark {
+        position: fixed;
+        top: 50%; left: 50%;
+        transform: translate(-50%, -50%) rotate(${wmAngle}deg);
+        font-size: ${wmFontSize}pt;
+        color: ${wmColor};
+        opacity: ${wmOpacity};
+        pointer-events: none;
+        white-space: nowrap;
+        user-select: none;
+        z-index: 9999;
+        font-weight: 700;
+      }` : ''}
+    }
+  `
+}
+function injectPrintStyle(settings) {
+  document.getElementById(PRINT_STYLE_ID)?.remove()
+  const style = document.createElement('style')
+  style.id = PRINT_STYLE_ID
+  style.innerHTML = buildPrintCSS(settings)
+  document.head.appendChild(style)
+}
+function removePrintStyle() {
+  document.getElementById(PRINT_STYLE_ID)?.remove()
+}
+// ── Plain HTML table (used by ReportViewer in print context) ─────────────────
+function printCellText(value) {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'object') {
+    try { return JSON.stringify(value) } catch { return String(value) }
+  }
+  return String(value)
+}
+export function PrintTable({ columns = [], rows = [] }) {
+  return (
+    <Box component='table' sx={{
+      width: '100%', borderCollapse: 'collapse', fontSize: 12, fontFamily: 'inherit',
+    }}>
+      <thead>
+        <tr>
+          {columns.map((col, i) => (
+            <th key={i} style={{ border: '1px solid #ccc', padding: '6px 8px',
+              textAlign: 'left', backgroundColor: '#f0f0f0', fontWeight: 600 }}>
+              {col.headerName || col.field || col.label || ''}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, ri) => (
+          <tr key={ri}>
+            {columns.map((col, ci) => (
+              <td key={ci} style={{ border: '1px solid #ccc', padding: '5px 8px' }}>
+                {printCellText(row[col.field])}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </Box>
+  )
+}
+// ── PrintDialog ───────────────────────────────────────────────────────────────
+export default function PrintDialog({ viewerContext }) {
+  const [open, setOpen]               = useState(false)
+  const [loading, setLoading]         = useState(false)
+  const [printSchema, setPrintSchema] = useState(null)
+  const [printData, setPrintData]     = useState({})
+  const { printDialogRef } = viewerContext
+  useEffect(() => {
+    if (!printDialogRef) return
+    printDialogRef.current = {
+      // Normal usage: fetch layout by ID then open
+      open: (layoutId, data = {}) => {
+        setPrintData(data)
+        setOpen(true)
+        loadLayout(layoutId)
+      },
+      // Test Print / builder usage: schema already in memory, skip the API fetch
+      openWithSchema: (schema, data = {}) => {
+        setPrintData(data)
+        setPrintSchema(schema)
+        setLoading(false)
+        setOpen(true)
+      },
+      close: () => setOpen(false),
+    }
+    return () => { if (printDialogRef.current) printDialogRef.current = null }
+  }, [printDialogRef])
+  const loadLayout = async (layoutId) => {
+    if (!layoutId) return
+    setLoading(true)
+    setPrintSchema(null)
+    try {
+      const response = await Services.GetService(
+        Endpoints.PrintLayout.Get.GetById, false, { id: layoutId }
+      )
+      if (response?.data?.value) setPrintSchema(JSON.parse(response.data.value))
+    } catch (err) {
+      console.error('[PrintDialog] Failed to load layout:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+  // Inject print CSS as soon as schema is ready so Ctrl+P also works correctly.
+  // CSS hides the portal on screen and hides the Dialog on print.
+  useEffect(() => {
+    if (printSchema) {
+      injectPrintStyle(printSchema.settings)
+    } else {
+      removePrintStyle()
+    }
+    return () => removePrintStyle()
+  }, [printSchema])
+  // ── Fill .rbb-page-number spans with real numbers before window.print() ──
+  //
+  // Strategy for fixed header/footer with page numbers:
+  //   position:fixed elements are painted once and shown identically on every
+  //   physical page — the browser never rerenders them per-page. So we:
+  //     1. Clone the fixed zone once per body-page, each with the correct number.
+  //     2. Position each clone absolutely inside its body-page div (which already
+  //        has the correct padding-top/bottom so it fills one full printed page).
+  //     3. Inject a temporary <style> that hides the global fixed zone during print.
+  //     4. Restore everything via the afterprint event.
+  //
+  function injectPageNumbers() {
+    const portal = document.getElementById('__rbb_print_portal__')
+    if (!portal) return
+    const pages = [...portal.querySelectorAll('.rbb-print-page')]
+    const total = pages.length
+    // ── 1. Body pages — straightforward, index is known ──────────────────────
+    pages.forEach((pageEl, idx) => {
+      pageEl.querySelectorAll('.rbb-page-number').forEach(span => {
+        const fmt = span.dataset.format ?? 'Page {page} of {pages}'
+        span.textContent = fmt
+          .replace('{page}',  String(idx + 1))
+          .replace('{pages}', String(total))
+      })
+    })
+    // ── 2. Fixed header / footer — clone per page ─────────────────────────────
+    const headerEl = portal.querySelector('.rbb-print-header')
+    const footerEl = portal.querySelector('.rbb-print-footer')
+    const headerHasPN = !!headerEl?.querySelector('.rbb-page-number')
+    const footerHasPN = !!footerEl?.querySelector('.rbb-page-number')
+    if (!headerHasPN && !footerHasPN) return  // nothing to do
+    // Mark the originals with a unique hide-class so the temp style targets ONLY
+    // the global fixed zone — not the clones (which also carry the zone class).
+    const HIDE_HEADER = '__rbb_hide_header__'
+    const HIDE_FOOTER = '__rbb_hide_footer__'
+    if (headerHasPN) headerEl.classList.add(HIDE_HEADER)
+    if (footerHasPN) footerEl.classList.add(HIDE_FOOTER)
+    const tmpStyle = document.createElement('style')
+    tmpStyle.id = '__rbb_pn_tmp_style__'
+    let hideCss = '@media print {\n'
+    if (headerHasPN) hideCss += `  .${HIDE_HEADER} { display: none !important; }\n`
+    if (footerHasPN) hideCss += `  .${HIDE_FOOTER} { display: none !important; }\n`
+    hideCss += '}'
+    tmpStyle.textContent = hideCss
+    document.head.appendChild(tmpStyle)
+    // Clone into each page with the correct page number.
+    // Clones do NOT carry the hide-class so they remain visible in print.
+    pages.forEach((pageEl, idx) => {
+      pageEl.style.position = 'relative'  // needed for absolute child positioning
+      if (headerHasPN) {
+        const clone = headerEl.cloneNode(true)
+        clone.classList.remove(HIDE_HEADER)   // must NOT be hidden
+        clone.classList.add('__rbb_pn_clone__')
+        Object.assign(clone.style, {
+          position: 'absolute', top: '0', left: '0', right: '0',
+          display: 'block',
+        })
+        clone.querySelectorAll('.rbb-page-number').forEach(span => {
+          const fmt = span.dataset.format ?? 'Page {page} of {pages}'
+          span.textContent = fmt.replace('{page}', idx + 1).replace('{pages}', total)
+        })
+        pageEl.prepend(clone)
+      }
+      if (footerHasPN) {
+        const clone = footerEl.cloneNode(true)
+        clone.classList.remove(HIDE_FOOTER)   // must NOT be hidden
+        clone.classList.add('__rbb_pn_clone__')
+        Object.assign(clone.style, {
+          position: 'absolute', bottom: '0', left: '0', right: '0',
+          display: 'block',
+        })
+        clone.querySelectorAll('.rbb-page-number').forEach(span => {
+          const fmt = span.dataset.format ?? 'Page {page} of {pages}'
+          span.textContent = fmt.replace('{page}', idx + 1).replace('{pages}', total)
+        })
+        pageEl.appendChild(clone)
+      }
+    })
+    // ── 3. Restore after print ────────────────────────────────────────────────
+    const cleanup = () => {
+      document.getElementById('__rbb_pn_tmp_style__')?.remove()
+      portal.querySelectorAll('.__rbb_pn_clone__').forEach(el => el.remove())
+      headerEl?.classList.remove('__rbb_hide_header__')
+      footerEl?.classList.remove('__rbb_hide_footer__')
+      pages.forEach(p => p.style.removeProperty('position'))
+      window.removeEventListener('afterprint', cleanup)
+    }
+    window.addEventListener('afterprint', cleanup)
+  }
+  const handlePrint = () => {
+    // Re-inject with latest settings, close the dialog so it leaves the DOM,
+    // then fire window.print() after the MUI exit animation (~300 ms).
+    injectPrintStyle(printSchema?.settings)
+    setOpen(false)
+    setTimeout(() => {
+      injectPageNumbers()
+      window.print()
+    }, 350)
+  }
+  // ── Shared viewerContext for all rendered zones ────────────────────────────
+  const makePrintViewerCtx = () => ({
+    ...viewerContext,
+    data:           printData,
+    setData:        () => {},
+    form:           {},
+    setForm:        () => {},
+    mode:           'preview',
+    isEditMode:     false,
+    isPreviewMode:  true,
+    isPrintContext: true,
+    isPrintBuilder: false,
+    builderContext: null,
+  })
+  const settings  = printSchema?.settings ?? {}
+  const hEnabled  = settings.header?.enabled
+  const fEnabled  = settings.footer?.enabled
+  const pageOrder = printSchema?.pageOrder ?? []
+  const zones     = printSchema?.zones ?? {}
+  const printCtx = makePrintViewerCtx()
+  return (
+    <>
+      {/* ── Screen-preview Dialog — only mounted while open ──────────────── */}
+      {open && (
+        <Dialog open onClose={() => setOpen(false)} fullScreen
+          PaperProps={{ sx: { bgcolor: '#888' } }}>
+          {/* Toolbar */}
+          <Box sx={{
+            display: 'flex', alignItems: 'center', gap: 1,
+            px: 2, py: 1, bgcolor: 'background.paper',
+            borderBottom: '1px solid', borderColor: 'divider',
+            '@media print': { display: 'none' },
+          }}>
+            <Box sx={{ flex: 1, fontWeight: 600, fontSize: 14 }}>Print Preview</Box>
+            <Button variant='contained' startIcon={<PrintOutlined />}
+              onClick={handlePrint} disabled={loading || !printSchema} size='small'>
+              Print
+            </Button>
+            <Tooltip title='Close'>
+              <IconButton size='small' onClick={() => setOpen(false)}>
+                <CloseOutlined fontSize='small' />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          {/* Screen preview */}
+          <DialogContent sx={{ p: 4, display: 'flex', justifyContent: 'center', overflow: 'auto', bgcolor: '#888' }}>
+            {loading && (
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 400 }}>
+                <CircularProgress />
+              </Box>
+            )}
+            {!loading && printSchema && (
+              <PrintPreviewCanvas
+                schema={printSchema}
+                makeViewerCtx={() => printCtx}
+              />
+            )}
+            {!loading && !printSchema && (
+              <Box sx={{ color: 'white', mt: 8 }}>Failed to load print layout.</Box>
+            )}
+          </DialogContent>
+        </Dialog>
+      )}
+      {/* ── Print portal — appended directly to <body>, used by window.print() ──
+          Hidden on screen (display:none); the @media print CSS reveals it.
+          position:fixed header/footer repeat on every printed page reliably.  */}
+      {printSchema && typeof document !== 'undefined' && createPortal(
+        <div id='__rbb_print_portal__'>
+          {/* Watermark — position:fixed repeats on every printed page */}
+          {settings.watermark?.enabled && settings.watermark?.text && (
+            <div className='rbb-watermark'>{settings.watermark.text}</div>
+          )}
+          {/* Header — fixed to top of every page */}
+          {hEnabled && zones.header && (
+            <div className='rbb-print-header'>
+              <ComponentRenderer node={zones.header} viewerContext={printCtx} />
+            </div>
+          )}
+          {/* Footer — fixed to bottom of every page */}
+          {fEnabled && zones.footer && (
+            <div className='rbb-print-footer'>
+              <ComponentRenderer node={zones.footer} viewerContext={printCtx} />
+            </div>
+          )}
+          {/* Body pages — margin offset keeps content clear of fixed header/footer */}
+          <div className='rbb-print-body'>
+            {pageOrder.map((pageId) => {
+              const pageNode = zones[pageId]
+              if (!pageNode) return null
+              return (
+                <div key={pageId} className='rbb-print-page'>
+                  <ComponentRenderer node={pageNode} viewerContext={printCtx} />
+                </div>
+              )
+            })}
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}

package/src/views/builder/viewer/ProductionViewer.jsx CHANGED Viewed

@@ -1,8 +1,11 @@
 import { Box } from '@mui/material'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import ComponentRenderer from './ComponentRenderer'
+import DialogsZone from './DialogsZone'
+import PrintDialog from './PrintDialog'
 import { executeActionsByEvent } from 'services/builderHelper/actionExecutor'
 import { executeJSCode } from 'services/builderHelper/jsExecutor'
+import { useTimerEngine } from 'src/hooks/useTimerEngine'
 /**
  * Validate form based on component validation rules
@@ -68,11 +71,41 @@ async function validateForm(root, formData) {
  *
  * @param {object} schema - The form schema
  */
-export default function ProductionViewer({ schema }) {
+export default function ProductionViewer({ schema, stateRef }) {
   const [data, setData] = useState({})
   const [form, setForm] = useState({})
   const [validationErrors, setValidationErrors] = useState({})
+  // ── Unified ref storage ──────────────────────────────────────────────────
+  // dataRef    : mutable non-reactive store — mutate via dataRef.current.x = y
+  // reportRefs : { [nodeId]: updateRef } registry; populated by ReportViewerRenderer
+  // dialogRefs : { [key]: { open, close } } registry; populated by DialogRenderer
+  const dataRef        = useRef({})
+  const reportRefs     = useRef({})
+  const dialogRefs     = useRef({})
+  const printDialogRef = useRef(null)
+  const openDialog = useCallback((key, data) => {
+    const ref = dialogRefs.current[key]
+    if (ref) ref.open(data)
+    else console.warn(`[openDialog] No dialog registered with key "${key}"`)
+  }, [])
+  const closeDialog = useCallback((key) => {
+    const ref = dialogRefs.current[key]
+    if (ref) ref.close()
+    else console.warn(`[closeDialog] No dialog registered with key "${key}"`)
+  }, [])
+  const openPrintLayout = useCallback((layoutId, data) => {
+    if (printDialogRef.current) printDialogRef.current.open(layoutId, data)
+    else console.warn('[openPrintLayout] PrintDialog is not mounted')
+  }, [])
+  const closePrintLayout = useCallback(() => {
+    if (printDialogRef.current) printDialogRef.current.close()
+  }, [])
   // Execute onLoad actions when component mounts or schema changes
   useEffect(() => {
     // Reset form and data for fresh execution
@@ -82,12 +115,32 @@ export default function ProductionViewer({ schema }) {
     // Execute onLoad actions with fresh context
     if (schema?.actions && schema.actions.length > 0) {
-      executeActionsByEvent(schema.actions, 'onLoad', { form: {}, data: {} }, setData).catch(err => {
+      executeActionsByEvent(schema.actions, 'onLoad', {
+        form: {}, data: {}, setData,
+        dataRef: dataRef.current, reportRefs: reportRefs.current,
+      }).catch(err => {
         console.error('onLoad actions error:', err)
       })
     }
   }, [schema])
+  // ── Timer engine ────────────────────────────────────────────────────────────
+  // Build a stable execution context object and update it on every render.
+  // useTimerEngine reads through a ref so timers always use fresh state without
+  // triggering re-registration on every data/form update.
+  const timerContext = {
+    data,
+    setData,
+    form,
+    dataRef:    dataRef.current,
+    reportRefs: reportRefs.current,
+    openDialog,
+    closeDialog,
+    openPrintLayout,
+    closePrintLayout,
+  }
+  useTimerEngine({ timers: schema?.timers, context: timerContext })
   // Update form field value
   const updateFormValue = (key, value) => {
     setForm(prev => ({
@@ -104,7 +157,10 @@ export default function ProductionViewer({ schema }) {
     // If validation passes, execute onSubmit actions
     if (Object.keys(errors).length === 0) {
-      await executeActionsByEvent(schema.actions, 'onSubmit', { form, data }, setData)
+      await executeActionsByEvent(schema.actions, 'onSubmit', {
+        form, data, setData,
+        dataRef: dataRef.current, reportRefs: reportRefs.current,
+      })
       return true
     }
     return false
@@ -132,7 +188,21 @@ export default function ProductionViewer({ schema }) {
     setValidationErrors,
     submitForm,
     resetForm,
-    builderContext: null // No builder context in production
+    builderContext: null, // No builder context in production
+    // ── Unified ref storage ────────────────────────────────────────────────
+    dataRef,        // useRef({}) — mutate via dataRef.current.x = value
+    reportRefs,     // useRef({}) — { [nodeId]: updateRef } per ReportViewer
+    dialogRefs,     // useRef({}) — { [key]: { open, close } } per Dialog
+    printDialogRef, // useRef(null) — { open(layoutId, data), close() }
+    openDialog,
+    closeDialog,
+    openPrintLayout,
+    closePrintLayout,
+  }
+  // Expose live state to the debug panel (toolbar reads this via stateRef)
+  if (stateRef) {
+    stateRef.current = { data, form, dataRef, reportRefs }
   }
   if (!schema?.root) {
@@ -150,6 +220,11 @@ export default function ProductionViewer({ schema }) {
       <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
         <ComponentRenderer node={schema.root} viewerContext={viewerContext} />
       </Box>
+      {/* Dialogs — mounted but hidden; opened via openDialog(key) */}
+      <DialogsZone dialogs={schema.dialogs ?? []} viewerContext={viewerContext} />
+      {/* Print — mounted but hidden; opened via openPrintLayout(layoutId, data) */}
+      <PrintDialog viewerContext={viewerContext} />
     </Box>
   )
 }