robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/genericTable/SGrid.js

@@ -58,7 +58,7 @@ import Grid from '@mui/material/Grid'
 // ** Icons Imports
 // ** Store Imports
 // ** Custom Components Imports
-import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'
+import {createContext, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react'
 
 // Global styles for flashing effect
 if (typeof document !== 'undefined') {
@@ -79,15 +79,15 @@ if (typeof document !== 'undefined') {
 
 import {Endpoints, Services} from 'src/services/Endpoints'
 import {
-  Autocomplete, Checkbox,
+  Autocomplete, Button, Checkbox,
   CircularProgress,
-  Dialog,
+  Dialog, Divider,
   FormControl, FormControlLabel,
   IconButton,
   MenuItem,
   Select,
   TextField,
-  Tooltip,
+  Tooltip, Typography,
   Chip,
   Stack,
   Popper,
@@ -136,6 +136,7 @@ import {
   restoreUpdateRefFromOriginal
 } from './updateRefHelpers'
 import {processColumnDefinitions, processColumnsConfig} from './convertStringFunctions'
+import { AG_COMPONENTS } from 'views/builder/viewer/renderers/dataGridComponents'
 
 // ** Utils Import
 
@@ -148,6 +149,122 @@ const defaultFinalRequest = {
   filter: {},
   params: {}
 }
+
+// ── Templates tool panel ──────────────────────────────────────────────────────
+// Defined outside SGrid so the reference is stable (no remounts on parent renders).
+// State flows in via React Context (AG Grid v33 renders custom components in the
+// same React tree, so context is fully supported).
+const TemplateStateContext = createContext(null)
+
+function SettingsSection({ title, children }) {
+  return (
+    <Box style={{ display: 'block', width: '100%' }}>
+      <Box sx={{
+        px: 2, py: 0.75,
+        bgcolor: 'grey.100',
+        borderTop: '1px solid', borderBottom: '1px solid', borderColor: 'divider',
+      }}>
+        <Typography sx={{ fontSize: '0.6875rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8, color: 'text.secondary' }}>
+          {title}
+        </Typography>
+      </Box>
+      <Box sx={{ p: 2, boxSizing: 'border-box', width: '100%' }}>
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+function TemplatesToolPanel() {
+  const ctx = useContext(TemplateStateContext)
+  if (!ctx) return null
+  const {
+    templates, selectedTemplate, setSelectedTemplate,
+    handleGetTemplates, handleSaveTemplate,
+    handleToggleDialogs, setIsTemplateEditing,
+    builderData,
+  } = ctx
+
+  return (
+    <Box style={{ display: 'flex', flexDirection: 'column', height: '100%', width: 250 }}>
+      {/* Panel header */}
+      <Box sx={{
+        px: 2, py: 1.5,
+        borderBottom: '1px solid', borderColor: 'divider',
+        bgcolor: 'background.paper',
+        position: 'sticky', top: 0, zIndex: 1,
+      }}>
+        <Typography variant='subtitle2' sx={{ fontWeight: 700, color: 'text.primary' }}>
+          Settings
+        </Typography>
+      </Box>
+
+      {/* Template section */}
+      <SettingsSection title='Template'>
+        {builderData?.id == null ? (
+          <Typography variant='caption' sx={{ color: 'text.disabled' }}>No report loaded</Typography>
+        ) : (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+            <Autocomplete
+              size='small'
+              value={selectedTemplate}
+              options={templates}
+              onChange={(_, value) => setSelectedTemplate(value)}
+              getOptionLabel={option => option.name}
+              renderInput={params => (
+                <TextField
+                  label='Active Template'
+                  {...params}
+                  onMouseDown={handleGetTemplates}
+                />
+              )}
+            />
+
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%' }}>
+              <Button
+                size='small'
+                variant='outlined'
+                startIcon={<Save fontSize='small' />}
+                disabled={selectedTemplate == null}
+                onClick={handleSaveTemplate}
+                fullWidth
+                sx={{ justifyContent: 'flex-start' }}
+              >
+                Save
+              </Button>
+
+              <Button
+                size='small'
+                variant='outlined'
+                startIcon={<SaveAs fontSize='small' />}
+                onClick={() => { setIsTemplateEditing(false); handleToggleDialogs('addTemplate') }}
+                fullWidth
+                sx={{ justifyContent: 'flex-start' }}
+              >
+                Save As New
+              </Button>
+
+              <Button
+                size='small'
+                variant='outlined'
+                startIcon={<Edit fontSize='small' />}
+                disabled={selectedTemplate == null}
+                onClick={() => { setIsTemplateEditing(true); handleToggleDialogs('addTemplate') }}
+                fullWidth
+                sx={{ justifyContent: 'flex-start' }}
+              >
+                Edit
+              </Button>
+            </Box>
+          </Box>
+        )}
+      </SettingsSection>
+    </Box>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
 const SGrid = props => {
   // ** State
   const appContext = useContext(SystemContext);
@@ -182,7 +299,16 @@ const SGrid = props => {
     columnsConfig,
     dataAsObject = false,
     isRerender = false,
-    updateRef
+    updateRef,
+    // nodeId    — builder schema node ID for this ReportViewer (set by ReportViewerRenderer)
+    // reportRefs — shared registry { [nodeId]: updateRef } for all reports on the page
+    nodeId,
+    reportRefs,
+    // Viewer state — passed through to column string functions via convertStringFunctions ctx
+    data: viewerData,
+    dataRef: viewerDataRef,
+    openDialog,
+    closeDialog,
   } = props
   const groupEndPoint = ReportBuilderEndpoints.Post.GenericGet;
   const streamEndPoint = ReportBuilderEndpoints.Post.GenericGet;
@@ -696,7 +822,7 @@ const SGrid = props => {
           const propertyType = col.propertyType ?? col.field?.propertyType;
           const propPath = col.headerName ?? col.path;
           const fieldName = col.headerName ?? col.path.replace(/\./g, '_');
-          const processedColumnsConfig = processColumnsConfig(columnsConfig ?? []);
+          const processedColumnsConfig = processColumnsConfig(columnsConfig ?? [], { reportRefs, nodeName: nodeId, data: viewerData, dataRef: viewerDataRef, setData, openDialog, closeDialog });
           const externalColConfig = processedColumnsConfig.find(x => x.field === fieldName)?.config ?? {}
           const headerName = col.title ?? col.headerName ?? col.path;
           const hasRouting = routingSettings.some(r => r.fieldName === fieldName);
@@ -959,7 +1085,7 @@ const SGrid = props => {
       }))
       setSelectParams(localSelectParams);
       if (extraCols != null) {
-        const processedExtraCols = processColumnDefinitions(extraCols);
+        const processedExtraCols = processColumnDefinitions(extraCols, { reportRefs, nodeName: nodeId, data: viewerData, dataRef: viewerDataRef, setData, openDialog, closeDialog });
         localColDefs = [...processedExtraCols, ...localColDefs];
       }
       localColDefs = [...localColDefs, ...defaultCols];
@@ -1010,7 +1136,7 @@ const SGrid = props => {
         tableCols = processColumns(tableCols)
         let localColDefs = [...tableCols, ...defaultCols]
         if (extraCols != null) {
-          const processedExtraCols = processColumnDefinitions(extraCols);
+          const processedExtraCols = processColumnDefinitions(extraCols, { reportRefs, nodeName: nodeId, data: viewerData, dataRef: viewerDataRef, setData, openDialog, closeDialog });
           localColDefs = [...processedExtraCols, ...localColDefs]
         }
         const localSelectTFilter = response.data.map(x => ({
@@ -1125,7 +1251,7 @@ const SGrid = props => {
             id: targetPageId ? null : (builderId ?? null)
           };
 
-          const base = '/reportBuilder/reportViewer';
+          const base = '/builders/report/viewer';
           let url = base;
           if (targetPageId) {
             url += `?pageId=${encodeURIComponent(targetPageId)}`;
@@ -1301,26 +1427,35 @@ const SGrid = props => {
     }
   }
 
-  const sideBarConfig = useMemo(() => ({
-    toolPanels: [
-      {
-        id: 'columns',
-        labelDefault: 'Columns',
-        labelKey: 'columns',
-        iconKey: 'columns',
-        toolPanel: 'agColumnsToolPanel',
-        toolPanelParams: {
-          suppressRowGroups: groupBy != null,
-          suppressValues: groupBy != null,
+  const sideBarConfig = useMemo(
+    () => ({
+      toolPanels: [
+        {
+          id: 'columns',
+          labelDefault: 'Columns',
+          labelKey: 'columns',
+          iconKey: 'columns',
+          toolPanel: 'agColumnsToolPanel',
+          toolPanelParams: {
+            suppressRowGroups: groupBy != null,
+            suppressValues: groupBy != null
+          },
+          minWidth: 225
         },
-        minWidth: 225,
-      },
-
-    ],
-    position: 'left',
-    // ← optionally open this panel by default on init
-    defaultToolPanel: 'columns',
-  }), [groupBy]);  // only re-create if groupBy changes
+        {
+          id: 'templates',
+          labelDefault: 'Templates',
+          labelKey: 'templates',
+          iconKey: 'menu',
+          toolPanel: 'templatesToolPanel',
+          minWidth: 250,
+        }
+      ],
+      position: 'right',
+      defaultToolPanel: '' // closed by default
+    }),
+    [groupBy]
+  )  // only re-create if groupBy changes
   const handleGetAggregationObject = (agg) => {
 
     const matchedCol = builderData.selectedFields.find(col => {
@@ -2323,33 +2458,6 @@ const SGrid = props => {
             sx={{backgroundColor: '#fafafb', justifyContent: 'space-between'}} padding={2}
        size={{ xs: 12 }}>
         <Box sx={{display: 'flex'}}>
-          {(builderData?.id != null && minimized !== true) &&
-            <Box sx={{minWidth: '250px'}}>
-
-              <FormControl fullWidth>
-                <Autocomplete
-                  size={'small'}
-                  value={selectedTemplate}
-                  fullWidth
-                  options={templates}
-                  onChange={(e, value) => {
-                    setSelectedTemplate(value)
-                  }}
-
-                  getOptionLabel={option => option.name}
-                  renderInput={params => (
-                    <TextField
-                      label='شكل النموذج'
-                      {...params}
-                      onMouseDown={() => {
-                        handleGetTemplates()
-                      }}
-                    />
-                  )}
-                />
-              </FormControl>
-            </Box>
-          }
           <Box sx={{ml: '5px'}}>
             <Tooltip title='مؤقت' placement={'top'}>
               <Select variant={'outlined'} value={timerValue} onChange={(e) => setTimerValue(e.target.value)}
@@ -2523,43 +2631,6 @@ const SGrid = props => {
               </Tooltip>
             </Box>
           }
-          {
-            builderData?.id != null && minimized !== true && <>
-              <Box>
-                <Tooltip title='حفظ النموذج'>
-                  <IconButton disabled={selectedTemplate == null} onClick={() => {
-                    handleSaveTemplate()
-                  }} color='primary'>
-                    <Save/>
-                  </IconButton>
-                </Tooltip>
-              </Box>
-              <Box>
-                <Tooltip title='حفظ بأسم'>
-                  <IconButton onClick={() => {
-                    setIsTemplateEditing(false)
-                    handleToggleDialogs('addTemplate')
-                  }} color='primary'>
-                    <SaveAs/>
-                  </IconButton>
-                </Tooltip>
-              </Box>
-
-              <Box>
-                <Tooltip title='تعديل'>
-                  <IconButton disabled={selectedTemplate == null}
-                              onClick={() => {
-                                setIsTemplateEditing(true)
-                                handleToggleDialogs('addTemplate')
-                              }}
-                              color='primary'
-                  >
-                    <Edit/>
-                  </IconButton>
-                </Tooltip>
-              </Box>
-            </>
-          }
           {<Box>
 
             <IconButton color={'primary'} onClick={() => handleToggleDialogs('CustomFilter')}>
@@ -2577,6 +2648,16 @@ const SGrid = props => {
 
         </Box>
       </Grid>
+      <TemplateStateContext.Provider value={{
+        templates,
+        selectedTemplate,
+        setSelectedTemplate,
+        handleGetTemplates,
+        handleSaveTemplate,
+        handleToggleDialogs,
+        setIsTemplateEditing,
+        builderData,
+      }}>
       <div style={{width: "100%", height: minimized === true ? "0px" : height ?? "70vh", direction: 'ltr'}}>
         <AgGridReact
 
@@ -2596,8 +2677,20 @@ const SGrid = props => {
             tRouting,
             builderId: builderData?.id,
             updateRef: updateRef,
-            settings: builderModel?.settings
-          }}   // pass routing, builder id, updateRef and settings
+            settings: builderModel?.settings,
+            // Node identity — available inside all column functions as params.context.nodeId / nodeName
+            nodeId: nodeId ?? null,
+            nodeName: nodeId ?? null,   // alias for convenience
+            // Shared registry — access any report's ref: params.context.reportRefs.current['nodeId']
+            reportRefs: reportRefs ?? null,
+            // Returns the latest viewer state snapshot — used by MultiSelectEditor to commit values
+            getViewerContext: () => ({
+              data: viewerData,
+              setData: setData ?? (() => {}),
+              dataRef: viewerDataRef,
+              reportRefs: reportRefs ?? null,
+            }),
+          }}   // pass routing, builder id, updateRef, node identity and reportRefs
           gridOptions={{
             enableRangeSelection: true,
             enableCharts: true,
@@ -2729,14 +2822,21 @@ const SGrid = props => {
           }}
 
           components={{
+            ...AG_COMPONENTS,
             routingCell: RoutingCell,
             imageCell: ImageCell,
             customStatusBar: CustomStatusBar,
-            // agColumnsToolPanel: CustomColumnsToolPanel
-
+            templatesToolPanel: TemplatesToolPanel,
           }}
 
 
+          onCellValueChanged={params => {
+            // Guard: skip undefined phantom reverts produced by MultiSelectEditor's stopEditing(true) cancel path
+            if (params.newValue === undefined && params.colDef?.cellEditor === 'MultiSelectEditor') {
+              return
+            }
+          }}
+
           onSortChanged={params => {
             const sm = params.columns;
             if (sm.length == 1 && sm.some(s => s.colId === 'IZ_groupCount')) {
@@ -2745,6 +2845,7 @@ const SGrid = props => {
           }}
         />
       </div>
+      </TemplateStateContext.Provider>
       <Dialog
         fullWidth
         open={openDialogs?.addTemplate && builderData?.id != null}
@@ -2778,7 +2879,7 @@ const SGrid = props => {
             className={builderData?.reportSource?.fullName}
             LocalFilter={false}
 
-            isViewer={router.pathname.includes('reportViewer')}
+            isViewer={router.pathname.includes('report/viewer')}
             selectTFilter={selectTFilter}
             selectParamsMeta={builderData?.selectionParams || []}
             selectParamsValues={selectParams}

package/src/views/genericTable/SearchFilterDialog.js

@@ -13,7 +13,8 @@ import {
   TextField,
   Typography
 } from '@mui/material'
-import {ArrowLeft, Close, DeleteOutline, FilterPlus} from 'mdi-material-ui'
+import {ArrowLeft, Close, FilterPlus} from 'mdi-material-ui'
+import {DeleteOutlined} from '@mui/icons-material'
 import Autocomplete from '@mui/material/Autocomplete'
 import {Endpoints, Services} from 'src/services/Endpoints'
 
@@ -231,7 +232,7 @@ export default function SearchFilterDialog({
                 key={s.fullPath+idx}
                 label={`${s.path}`}
                 onDelete={()=> removeItem(idx)}
-                deleteIcon={<DeleteOutline/>}
+                deleteIcon={<DeleteOutlined/>}
                 variant='outlined'
               />
             ))}

package/src/views/genericTable/cellEditors/autocompleteEditor.js

@@ -3,12 +3,12 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import Chip from '@mui/material/Chip';
 import {createRoot} from 'react-dom/client';
-import ThemeComponent from 'src/@core/theme/ThemeComponent';
+import { ThemeProvider, createTheme, darken, lighten, styled } from "@mui/material/styles";
 import moment from 'moment';
 import Typography from "@mui/material/Typography";
-import {darken, lighten, styled} from "@mui/material/styles";
 import izColors from "src/configs/izColors.json"
-import {SettingsConsumer} from "src/@core/contexts/settingsContext";
+
+const defaultTheme = createTheme();
 
 const AutocompleteEditor = React.memo(
   forwardRef((props, ref) => {
@@ -124,9 +124,7 @@ const AutocompleteEditor = React.memo(
     });
 
     return (
-      <SettingsConsumer>
-        {({settings}) => (
-          <ThemeComponent settings={settings}>
+      <ThemeProvider theme={defaultTheme}>
             <Autocomplete
               multiple={!props.isSingle === true}
               size="small"
@@ -179,9 +177,7 @@ const AutocompleteEditor = React.memo(
                 ))
               }
             />
-          </ThemeComponent>
-        )}
-      </SettingsConsumer>
+      </ThemeProvider>
     );
   })
 );