robobyte-front-builder 1.0.17 → 1.0.21

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/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/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>
     );
   })
 );