robobyte-front-builder 1.0.16 → 1.0.19

package/src/views/genericTable/TAGGrid.js

@@ -8,8 +8,8 @@ import Grid from '@mui/material/Grid'
 // ** Icons Imports
 // ** Store Imports
 // ** Custom Components Imports
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { Endpoints, Services } from 'src/services/Endpoints'
+import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
+import {Endpoints, Services} from 'src/services/Endpoints'
 import {
   Autocomplete,
   CircularProgress,
@@ -21,23 +21,23 @@ import {
   TextField,
   Tooltip
 } from '@mui/material'
-import { AgGridReact } from "ag-grid-react";
-import { Edit, FilterAlt, RefreshOutlined, Save, SaveAs } from "@mui/icons-material";
-import { getRandomInt, Helper } from "services/helper/helper";
+import {AgGridReact} from "ag-grid-react";
+import {Edit, FilterAlt, RefreshOutlined, Save, SaveAs} from "@mui/icons-material";
+import {getRandomInt, Helper} from "services/helper/helper";
 import PostService from 'services/PostService'
 import handleChange from 'services/helper/handleChange'
-import { DotsVerticalCircleOutline, FileExcelOutline } from 'mdi-material-ui'
+import {DotsVerticalCircleOutline, FileExcelOutline} from 'mdi-material-ui'
 import AddTemplateDialog from './template/addTemplate'
 import UpdateService from 'services/UpdateService'
-import { useRouter } from 'next/router'
-import { SystemContext } from 'context/SystemContext'
-import { AuthContext } from 'context/AuthContext'
+import {useRouter} from 'next/router'
+import {SystemContext} from 'context/SystemContext'
+import {AuthContext} from 'context/AuthContext'
 import moment from "moment-timezone"
 import numeral from 'numeral'
 import CustomFilterDialog from "views/customFilter/CustomFilterDialog";
 import CustomStatusBar from "views/genericTable/statusBar/rowCountStatusBar";
 import StreamService from "services/StreamService";
-import { themeQuartz } from 'ag-grid-community';
+import {themeQuartz} from 'ag-grid-community';
 
 // ** Utils Import
 
@@ -54,7 +54,7 @@ const TAGGrid = props => {
   // ** State
   const agTheme = themeQuartz
     .withParams({
-      accentColor: "#00989f"
+      accentColor: "#FF1185"
     });
   const {
     groupEndPoint,
@@ -114,16 +114,16 @@ const TAGGrid = props => {
         enableRowGroup: false,
         cellRenderer: (params) => {
           if (params.node.group) {
-            return <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            return <Box sx={{display: 'flex', alignItems: 'center'}}>
               <IconButton
-                sx={{ color: 'primary.light' }}
+                sx={{color: 'primary.light'}}
                 onClick={() => {
                   const groupKeys = getParentKeys(params.node.parent)
                   groupKeys.push(params.node.key)
-                  params.api.refreshServerSide({ purge: !noPurge, route: groupKeys });
+                  params.api.refreshServerSide({purge: !noPurge, route: groupKeys});
                 }}
               >
-                <RefreshOutlined />
+                <RefreshOutlined/>
               </IconButton>
             </Box>
           }
@@ -257,7 +257,7 @@ const TAGGrid = props => {
         afterSelect: true
       }
     }
-    const field = isGrouping ? { path: colId, afterSelect: true } : flatCols.find(f => f.field === colId);
+    const field = isGrouping ? {path: colId, afterSelect: true} : flatCols.find(f => f.field === colId);
     return {
       columnName: isGrouping ? field.path.replace(".", "_") : field.path,
       sortDirection: sort === 'asc' ? 'Ascending' : 'Descending',
@@ -318,6 +318,8 @@ const TAGGrid = props => {
         const cleanedPath = path.substring(6); // Remove "pivot_"
         resultObject[cleanedPath] = value;
       } else {
+        resultObject[path] = value;
+
         // Otherwise, split the path and nest it
         const keys = path.split('_');
         let current = resultObject;
@@ -338,6 +340,22 @@ const TAGGrid = props => {
     return resultObject;
   }
 
+  function returnAdditionalPivotCols(flatCols) {
+    const resultFields = new Set();
+
+    flatCols.forEach(row => {
+      Object.keys(row).forEach(key => {
+        if (!key.startsWith("pivot_") && key !== "groupCount" && key !== "totalPrice") {
+          console.log(key)
+          resultFields.add(key);
+        }
+      });
+    });
+
+    const distinctFields = Array.from(resultFields);
+    return distinctFields;
+  }
+
   const createServerSideDatasource = (getRowsFromApi) => {
     return {
       getRows: (params) => {
@@ -357,6 +375,7 @@ const TAGGrid = props => {
             }
           })
           .catch((e) => {
+
             console.log(e)
             params.fail()
           });
@@ -368,13 +387,11 @@ const TAGGrid = props => {
     async params => {
       setFinalRequestObject(defaultFinalRequest)
       const fixedTFilter = externalFilter?.fixedTFilter ?? externalFilter?.fixedTfilter ?? []
-      let localFilter = externalFilter ? { ...externalFilter } : {}
-      localFilter = { ...localFilter, ...Filter }
-      console.log(localFilter)
+      let localFilter = externalFilter ? {...externalFilter} : {}
+      localFilter = {...localFilter, ...Filter}
       let localTFilter = localFilter?.Tfilter ? [...localFilter?.Tfilter] : []
       localTFilter = localFilter?.TFilter ? [...localTFilter, ...localFilter?.TFilter] : [...localTFilter]
       localTFilter = [...localTFilter, ...fixedTFilter]
-      console.log(localTFilter)
       delete localFilter.Tfilter
       delete localFilter.fixedTfilter
       delete localFilter.fixedTFilter
@@ -419,21 +436,17 @@ const TAGGrid = props => {
           // if (rowGroupColsIds.length > 1 && params.request.sortModel.length > 1) {
           //   isGroupCountOrder = false;
           // }
-          console.log(request.sortModel)
           request.sortModel = (request.sortModel ?? []).map(x => ({
             ...x,
             colId: x?.colId?.endsWith("_groupCount")
               ? x.colId.replace("_groupCount", "_groupCount")
               : x.colId
           }));
-          console.log(request)
-          console.log(request.sortModel)
+
           const aggIds = request.valueCols.map(vc => vc.id);
 
           const groupOrderColdIds = request.sortModel.filter(x => groupOrderCols.includes(x.colId) || ((x.colId == "IZ_groupCount" || x.colId.endsWith("groupCount") || aggIds.some(id => x.colId.endsWith(id))) && isGroupCountOrder))
           let orderBy = groupOrderColdIds.map(sort => handleGetSortObject(sort.colId, sort.sort, true, aggIds.some(id => sort.colId.endsWith(id))))
-          console.log(groupOrderColdIds)
-          console.log(orderBy)
           data = {
             ...data,
             tFilter: [...tFilters, ...data.tFilter],
@@ -461,6 +474,9 @@ const TAGGrid = props => {
               pivotColResult.push('groupCount')
               const responsePivotCol = response.pivotCols.map(x => x.field) ?? []
               pivotColResult.push(...responsePivotCol)
+              const additionalPivotCols = returnAdditionalPivotCols(response.data)
+              // pivotColResult.push(...additionalPivotCols)
+
             }
           }
           // groupKeys.push(request.rowGroupCols[request.groupKeys.length].id)
@@ -534,7 +550,6 @@ const TAGGrid = props => {
           if (response.aggregation != null && updateAggregation === true) {
             setPagedAgg([response.aggregation])
           }
-
           return {
             success: true,
             rows: colDefs && response.data, // Adjust based on your API's response structure
@@ -544,7 +559,7 @@ const TAGGrid = props => {
         }
       } catch (error) {
         console.log(error)
-        return { success: false }
+        return {success: false}
       }
     },
     [externalFilter, includes, paramsPage, Filter]
@@ -706,7 +721,6 @@ const TAGGrid = props => {
         const cols = gridApi
           .getColumnDefs()
         const flatCols = flattenArray(cols)
-        console.log(flatCols)
         const visibleCols = flatCols // all column definitions
           .filter(colDef =>
             gridApi.getColumnState().some(
@@ -727,10 +741,10 @@ const TAGGrid = props => {
           data.pivotCols = []
         }
         response = await StreamService(streamEndPoint, true, data, {
-          ...finalRequestObject.params,
-          groupBy: finalRequestObject.groupBy,
-          getType: 'Stream'
-        }, null,
+            ...finalRequestObject.params,
+            groupBy: finalRequestObject.groupBy,
+            getType: 'Stream'
+          }, null,
           progress => {
             console.log(`Downloaded: ${progress}%`)
           })
@@ -750,7 +764,7 @@ const TAGGrid = props => {
         applyOrder: true,
       });
     }
-    if (selectedTemplate.filterValue != null && (Filter.Tfilter == null || Filter.Tfilter.length == 0)) {
+    if (selectedTemplate.filterValue != null) {
       setFilter(selectedTemplate.filterValue);
     }
   };
@@ -765,7 +779,7 @@ const TAGGrid = props => {
   useEffect(() => {
 
     if (gridApi !== null) {
-      gridApi.refreshServerSide({ purge: !noPurge })
+      gridApi.refreshServerSide({purge: !noPurge})
     }
   }, [refresh, externalFilter, localRefresh, Filter]);
 
@@ -812,12 +826,11 @@ const TAGGrid = props => {
   }, [timerValue]); // re-run after each refresh or change in value
 
   return (
-    <Grid item container size={12}>
-      <Grid container item
-        sx={{ borderTop: '1px solid #ccc', backgroundColor: '#fafafb', justifyContent: 'space-between' }} padding={2}
-        size={12}>
-        <Box sx={{ display: 'flex', minWidth: '250px' }}>
-          <Box sx={{ minWidth: '250px' }}>
+    <Grid container size={{ xs: 12 }}>
+      <Grid container
+            sx={{borderTop: '1px solid #ccc', backgroundColor: '#fafafb', justifyContent: 'space-between'}} padding={2} size={{ xs: 12 }}>
+        <Box sx={{display: 'flex', minWidth: '250px'}}>
+          <Box sx={{minWidth: '250px'}}>
 
             <FormControl fullWidth>
               <Autocomplete
@@ -828,7 +841,6 @@ const TAGGrid = props => {
                 options={templates}
                 onChange={(e, value) => {
                   setSelectedTemplate(value)
-
                 }
                 }
                 getOptionLabel={option => option.name}
@@ -846,20 +858,23 @@ const TAGGrid = props => {
             </FormControl>
 
           </Box>
-          <Box sx={{ ml: '5px' }}>
+          <Box sx={{ml: '5px'}}>
             <Tooltip title='مؤقت' placement={'top'}>
               <Select variant={'outlined'} value={timerValue} onChange={(e) => setTimerValue(e.target.value)}
-                defaultValue={0} size={'small'}
-                color='primary' sx={{ width: '60px' }}>
-                <MenuItem key={1} value={0}>0</MenuItem>
-                <MenuItem key={2} value={5}>5</MenuItem>
-                <MenuItem key={3} value={15}>15</MenuItem>
-                <MenuItem key={4} value={30}>30</MenuItem>
+                      defaultValue={0} size={'small'}
+                      color='primary' sx={{width: '60px'}}>
+                <MenuItem key={1} value={0}>No</MenuItem>
+                <MenuItem key={2} value={0.5}>30s</MenuItem>
+                <MenuItem key={2} value={1}>1m</MenuItem>
+                <MenuItem key={2} value={2}>2m</MenuItem>
+                <MenuItem key={2} value={5}>5m</MenuItem>
+                <MenuItem key={3} value={15}>15m</MenuItem>
+                <MenuItem key={4} value={30}>30m</MenuItem>
               </Select>
             </Tooltip>
           </Box>
         </Box>
-        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+        <Box sx={{display: 'flex', justifyContent: 'center'}}>
           {streamEndPoint &&
             <Box>
               <Tooltip title='تصدير'>
@@ -868,7 +883,7 @@ const TAGGrid = props => {
                   onClick={handleCSVExport}
                   color='primary'
                 >
-                  {isDownloading ? <CircularProgress size={24} /> : <FileExcelOutline />}
+                  {isDownloading ? <CircularProgress size={24}/> : <FileExcelOutline/>}
                 </IconButton>
               </Tooltip>
             </Box>
@@ -878,7 +893,7 @@ const TAGGrid = props => {
               <IconButton disabled={selectedTemplate == null} onClick={() => {
                 handleSaveTemplate()
               }} color='primary'>
-                <Save />
+                <Save/>
               </IconButton>
             </Tooltip>
           </Box>
@@ -888,7 +903,7 @@ const TAGGrid = props => {
                 setIsTemplateEditing(false)
                 handleToggleDialogs('addTemplate')
               }} color='primary'>
-                <SaveAs />
+                <SaveAs/>
               </IconButton>
             </Tooltip>
           </Box>
@@ -896,39 +911,38 @@ const TAGGrid = props => {
           <Box>
             <Tooltip title='تعديل'>
               <IconButton disabled={selectedTemplate == null}
-                onClick={() => {
-                  setIsTemplateEditing(true)
-                  handleToggleDialogs('addTemplate')
-                }}
-                color='primary'
+                          onClick={() => {
+                            setIsTemplateEditing(true)
+                            handleToggleDialogs('addTemplate')
+                          }}
+                          color='primary'
               >
-                <Edit />
+                <Edit/>
               </IconButton>
             </Tooltip>
           </Box>
           <Box>
             <IconButton color={'primary'} onClick={() => handleToggleDialogs('CustomFilter')}>
-              <FilterAlt />
+              <FilterAlt/>
             </IconButton>
           </Box>
           <Box>
             <Tooltip title='اعادة تحميل'>
               <IconButton onClick={() => setLocalRefresh(!localRefresh)}>
-                <RefreshOutlined />
+                <RefreshOutlined/>
               </IconButton>
             </Tooltip>
           </Box>
 
         </Box>
       </Grid>
-      <div style={{ width: "100%", height: height ?? "70vh", direction: 'ltr' }}>
+      <div style={{width: "100%", height: height ?? "70vh", direction: 'ltr'}}>
         <AgGridReact
           debug={false}
           columnHoverHighlight={true}
           theme={agTheme}
           enableRtl={true}
           columnDefs={colDefs}
-          stopEditingWhenCellsLoseFocus={true}
           rowModelType={"serverSide"}
           onGridReady={onGridReady}
           // defaultColDef={{
@@ -969,11 +983,11 @@ const TAGGrid = props => {
           pivotKeySeparator={"_"}
           getRowStyle={(row) => {
             if (row.node.group) {
-              return { fontWeight: 'bold' };
+              return {fontWeight: 'bold'};
             }
             if (expireReport) {
               if (row.node?.data?.expireDate && new Date(row.node.data.expireDate) <= new Date()) {
-                return { background: '#FF625F' };
+                return {background: '#FF625F'};
               }
               if (row.node?.data?.expireDate) {
                 const expireDate = new Date(row.node.data.expireDate);
@@ -981,9 +995,9 @@ const TAGGrid = props => {
                 const diffInDays = (expireDate - currentDate) / (1000 * 60 * 60 * 24); // Convert milliseconds to days
 
                 if (diffInDays > 10) {
-                  return { background: '#8AFF8A' };
+                  return {background: '#8AFF8A'};
                 } else if (diffInDays > 0) {
-                  return { background: '#fcfd74' };
+                  return {background: '#fcfd74'};
                 }
               }
             }
@@ -999,7 +1013,7 @@ const TAGGrid = props => {
           onSortChanged={params => {
             const sm = params.columns;
             if (sm.length == 1 && sm.some(s => s.colId === 'IZ_groupCount')) {
-              params.api.refreshServerSide({ purge: true })
+              params.api.refreshServerSide({purge: true})
             }
           }}
         />
@@ -1019,7 +1033,7 @@ const TAGGrid = props => {
           pageName={router.pathname}
           item={isTemplateEditing === true ? selectedTemplate : null}
           template={gridApi?.getColumnState()}
-          userId={authValues?.user?.id} />
+          userId={authValues?.user?.id}/>
       </Dialog>
 
       <Dialog
@@ -1027,7 +1041,7 @@ const TAGGrid = props => {
         open={openDialogs.CustomFilter && localClasName}
         maxWidth='xl'
         scroll='body'
-      // onClose={() => handleToggleDialogs('CustomFilter')}
+        // onClose={() => handleToggleDialogs('CustomFilter')}
       >
         <CustomFilterDialog
           handleToggleDialogs={handleToggleDialogs}

package/src/views/genericTable/convertStringFunctions.js

@@ -0,0 +1,200 @@
+/**
+ * Convert string-based functions to executable functions
+ * Used for extraCols and columnsConfig that come from JSON configuration
+ */
+
+// Import helper functions that need to be available in the converted functions
+import {
+  setUpdateRefValue,
+  setUpdateRefRow,
+  getUpdateRefValue,
+  hasUpdateRefValue,
+  removeUpdateRefByRowId,
+  clearUpdateRefRow,
+  clearAllUpdateRef,
+  cloneUpdateRefToOriginal,
+  restoreUpdateRefFromOriginal
+} from './updateRefHelpers'
+
+/**
+ * Convert a string function to an executable function
+ * Injects helper functions into the scope so they're available when the function executes
+ * @param {string} funcString - The function as a string
+ * @returns {Function|string} The converted function or original string if conversion fails
+ */
+export const convertStringToFunction = (funcString) => {
+  if (typeof funcString !== 'string' || !funcString.trim()) {
+    return funcString
+  }
+
+  try {
+    // Check if it looks like a function
+    const trimmed = funcString.trim()
+
+    // Arrow function: (params) => { ... } or (params) => ...
+    if (trimmed.startsWith('(') && trimmed.includes('=>')) {
+      // Create a wrapper that provides helper functions in scope
+      // We wrap the user's function and inject the helpers as local variables
+      // eslint-disable-next-line no-new-func
+      const wrapper = new Function(
+        'setUpdateRefValue',
+        'setUpdateRefRow',
+        'getUpdateRefValue',
+        'hasUpdateRefValue',
+        'removeUpdateRefByRowId',
+        'clearUpdateRefRow',
+        'clearAllUpdateRef',
+        'cloneUpdateRefToOriginal',
+        'restoreUpdateRefFromOriginal',
+        `"use strict";
+        const userFunc = ${trimmed};
+        return userFunc;`
+      )
+      return wrapper(setUpdateRefValue, setUpdateRefRow, getUpdateRefValue, hasUpdateRefValue, removeUpdateRefByRowId, clearUpdateRefRow, clearAllUpdateRef, cloneUpdateRefToOriginal, restoreUpdateRefFromOriginal)
+    }
+
+    // Regular function: function(params) { ... }
+    if (trimmed.startsWith('function')) {
+      // Create a wrapper that provides helper functions in scope
+      // eslint-disable-next-line no-new-func
+      const wrapper = new Function(
+        'setUpdateRefValue',
+        'setUpdateRefRow',
+        'getUpdateRefValue',
+        'hasUpdateRefValue',
+        'removeUpdateRefByRowId',
+        'clearUpdateRefRow',
+        'clearAllUpdateRef',
+        'cloneUpdateRefToOriginal',
+        'restoreUpdateRefFromOriginal',
+        `"use strict";
+        const userFunc = ${trimmed};
+        return userFunc;`
+      )
+      return wrapper(setUpdateRefValue, setUpdateRefRow, getUpdateRefValue, hasUpdateRefValue, removeUpdateRefByRowId, clearUpdateRefRow, clearAllUpdateRef, cloneUpdateRefToOriginal, restoreUpdateRefFromOriginal)
+    }
+
+    // Expression function (old AG Grid style): return params.value
+    if (trimmed.startsWith('return ')) {
+      // For expression functions, wrap in a function with helpers available
+      // eslint-disable-next-line no-new-func
+      const wrapper = new Function(
+        'setUpdateRefValue',
+        'setUpdateRefRow',
+        'getUpdateRefValue',
+        'hasUpdateRefValue',
+        'removeUpdateRefByRowId',
+        'clearUpdateRefRow',
+        'clearAllUpdateRef',
+        'cloneUpdateRefToOriginal',
+        'restoreUpdateRefFromOriginal',
+        `"use strict";
+        return function(params) {
+          ${trimmed}
+        };`
+      )
+      return wrapper(setUpdateRefValue, setUpdateRefRow, getUpdateRefValue, hasUpdateRefValue, removeUpdateRefByRowId, clearUpdateRefRow, clearAllUpdateRef, cloneUpdateRefToOriginal, restoreUpdateRefFromOriginal)
+    }
+
+    // If not a function format, return as is
+    return funcString
+  } catch (e) {
+    console.error('Failed to convert string to function:', e)
+    console.error('Function string:', funcString)
+    console.error('Stack:', e.stack)
+    return funcString
+  }
+}
+
+/**
+ * Process a column definition and convert all string functions to executable functions
+ * @param {object} colDef - The column definition object
+ * @returns {object} The processed column definition with converted functions
+ */
+export const processColumnDefinition = (colDef) => {
+  if (!colDef || typeof colDef !== 'object') {
+    return colDef
+  }
+
+  const processed = {...colDef}
+
+  // List of AG Grid properties that should be functions
+  const functionProperties = [
+    'valueSetter',
+    'valueGetter',
+    'valueFormatter',
+    'valueParser',
+    'cellRenderer',
+    'cellEditor',
+    'cellClass',
+    'cellStyle',
+    'editable',
+    'comparator',
+    'equals',
+    'keyCreator',
+    'filterValueGetter',
+    'filterParams',
+    'cellEditorParams',
+    'cellRendererParams',
+    'headerValueGetter',
+    'tooltipValueGetter',
+    'aggFunc',
+    'getQuickFilterText',
+    'suppressKeyboardEvent',
+    'suppressPaste',
+    'cellClassRules'
+  ]
+
+  functionProperties.forEach(prop => {
+    if (prop in processed && typeof processed[prop] === 'string') {
+      const converted = convertStringToFunction(processed[prop])
+      if (converted !== processed[prop]) {
+        processed[prop] = converted
+      }
+    }
+  })
+
+  // Special handling for cellEditorParams - can be a function or object
+  if ('cellEditorParams' in processed) {
+    if (typeof processed.cellEditorParams === 'string') {
+      processed.cellEditorParams = convertStringToFunction(processed.cellEditorParams)
+    }
+  }
+
+  return processed
+}
+
+/**
+ * Process an array of column definitions
+ * @param {array} colDefs - Array of column definitions
+ * @returns {array} Processed column definitions
+ */
+export const processColumnDefinitions = (colDefs) => {
+  if (!Array.isArray(colDefs)) {
+    return colDefs
+  }
+
+  return colDefs.map(colDef => processColumnDefinition(colDef))
+}
+
+/**
+ * Process columnsConfig array (field + config format)
+ * @param {array} columnsConfig - Array of column configs [{field, config}]
+ * @returns {array} Processed column configs
+ */
+export const processColumnsConfig = (columnsConfig) => {
+  if (!Array.isArray(columnsConfig)) {
+    return columnsConfig
+  }
+
+  return columnsConfig.map(item => {
+    if (!item || !item.config) {
+      return item
+    }
+
+    return {
+      ...item,
+      config: processColumnDefinition(item.config)
+    }
+  })
+}