robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/customFilter/SearchFilterDialog.js

@@ -0,0 +1,248 @@
+import {useEffect, useMemo, useState} from 'react'
+import {
+  Box,
+  Button,
+  Chip,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  TextField,
+  Typography
+} from '@mui/material'
+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'
+
+// A lightweight dialog to select model fields for search, reusing the same model
+// navigation approach as CustomFilterDialog, but without any value inputs.
+// Produces entries compatible with SGrid searchFilter consumption.
+// Each entry shape: { fullPath, path, propertyType, enumName, isWithinCollection }
+
+const ALLOWED_TYPES = new Set(['String', 'Int', 'Guid'])
+
+export default function SearchFilterDialog({
+  className,            // root model full name
+  value = [],           // initial list [{fullPath, path, ...}]
+  onChange,             // (newList) => void
+  onClose
+}) {
+  const [options, setOptions] = useState([])        // current list of selectable props at current level
+  const [subMap, setSubMap] = useState({})          // cache of dto -> options
+  const [pathCrumb, setPathCrumb] = useState(null)  // { path: 'Orders.Items', friendly: 'Orders>Items', dto: 'OrderItemDto' }
+  const [selected, setSelected] = useState(value || [])
+  const [isLoading, setIsLoading] = useState(false)
+
+  const normalizedRoot = useMemo(() => (className || '').split('.').pop() || 'Root', [className])
+
+  useEffect(() => {
+    setSelected(value || [])
+  }, [value])
+
+  useEffect(() => {
+    // load root options for className
+    let mounted = true
+    async function load() {
+      try {
+        setIsLoading(true)
+        const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: className}, {})
+        if (!mounted) return
+        const list = (resp?.filter || []).map((v, i) => ({...v, key: i}))
+        setOptions(list)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    if (className) load()
+    return () => { mounted = false }
+  }, [className])
+
+  const isDuplicate = (fullPath) => selected.some(s => (s.fullPath || '').toLowerCase() === (fullPath || '').toLowerCase())
+
+  const handlePick = async (opt) => {
+    if (!opt) return
+    // Class -> drill down
+    if (opt.propertyType === 'Class') {
+      // update crumbs
+      const newPath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+      const newFriendly = pathCrumb?.friendly ? `${pathCrumb.friendly}>${opt.friendlyName}` : opt.friendlyName
+      const dto = opt.dtoClassName
+
+      // fetch next level
+      let list = subMap[dto]
+      if (!list) {
+        const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: dto}, {})
+        list = (resp?.filter || []).map((v, i) => ({...v, key: `${dto}-${i}`}))
+        setSubMap(prev => ({...prev, [dto]: list}))
+      }
+      setPathCrumb({path: newPath, friendly: newFriendly, dto})
+      setOptions(list)
+      return
+    }
+
+    // Collection -> drill into its item dto if provided
+    if (opt.propertyType === 'Collection') {
+      const dto = opt.dtoClassName
+      const newPath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+      const newFriendly = pathCrumb?.friendly ? `${pathCrumb.friendly}>${opt.friendlyName}` : opt.friendlyName
+      let list = subMap[dto]
+      if (!list) {
+        const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: dto}, {})
+        list = (resp?.filter || []).map((v, i) => ({...v, key: `${dto}-${i}`}))
+        setSubMap(prev => ({...prev, [dto]: list}))
+      }
+      setPathCrumb({path: newPath, friendly: newFriendly, dto})
+      setOptions(list)
+      return
+    }
+
+    // Leaf -> add if allowed type
+    if (!ALLOWED_TYPES.has(opt.propertyType)) return
+
+    const newPath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+    const fullPath = `${normalizedRoot}.${newPath}`
+    if (isDuplicate(fullPath)) return
+
+    const entry = {
+      fullPath,
+      path: newPath,
+      propertyType: opt.propertyType,
+      enumName: opt.enumName,
+      isWithinCollection: false
+    }
+    setSelected(prev => [...prev, entry])
+  }
+
+  const handleBack = () => {
+    if (!pathCrumb) return
+    const parts = (pathCrumb.path || '').split('.')
+    const friendlyParts = (pathCrumb.friendly || '').split('>')
+    parts.pop()
+    friendlyParts.pop()
+
+    if (parts.length === 0) {
+      // go to root
+      setPathCrumb(null)
+      // reload root options from cache? Just refetch root quickly using effect triggers only once, so keep in state by re-calling API
+      // simpler: call API again
+      (async () => {
+        try {
+          setIsLoading(true)
+          const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: className}, {})
+          const list = (resp?.filter || []).map((v, i) => ({...v, key: i}))
+          setOptions(list)
+        } finally { setIsLoading(false) }
+      })()
+    } else {
+      // need to identify dto for the previous node; we don't strictly know it, so refetch using dto from pathCrumb.dto's parent is complex.
+      // Simpler approach: re-walk from root using current parts to compute options.
+      (async () => {
+        try {
+          setIsLoading(true)
+          let dto = className
+          let list = []
+          let friendly = []
+          let accum = []
+          for (let i = 0; i < parts.length; i++) {
+            const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: dto}, {})
+            const current = (resp?.filter || [])
+            const seg = parts[i]
+            const node = current.find(o => o.path === seg)
+            if (!node) break
+            dto = node.dtoClassName
+            accum.push(seg)
+            friendly.push(node.friendlyName)
+            if (node.propertyType !== 'Class' && node.propertyType !== 'Collection') break
+            list = current
+          }
+          // After loop, fetch children for final dto
+          const resp2 = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: dto}, {})
+          const children = (resp2?.filter || []).map((v, i) => ({...v, key: `${dto}-${i}`}))
+          setOptions(children)
+          setPathCrumb({path: parts.join('.'), friendly: friendly.join('>'), dto})
+        } finally { setIsLoading(false) }
+      })()
+    }
+  }
+
+  const removeItem = (idx) => {
+    setSelected(prev => prev.filter((_, i) => i !== idx))
+  }
+
+  const handleSave = () => {
+    onChange && onChange(selected)
+    onClose && onClose()
+  }
+
+  return (
+    <>
+      <DialogTitle sx={{padding: 0, marginBottom: 2}}>
+        <Box
+          sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', backgroundColor: 'background.default', p: 3}}
+        >
+          <Typography variant='h6'>Search Fields</Typography>
+          <IconButton onClick={onClose}>
+            <Close/>
+          </IconButton>
+        </Box>
+      </DialogTitle>
+      <DialogContent dividers>
+        <Box sx={{display:'flex', alignItems:'center', gap:1, mb:2}}>
+          <Typography variant='body2' color='text.secondary'>Model:</Typography>
+          <Chip size='small' label={normalizedRoot}/>
+          {pathCrumb?.friendly && <>
+            <Typography variant='body2' color='text.secondary'>/</Typography>
+            <Chip size='small' color='info' label={pathCrumb.friendly}/>
+            <IconButton size='small' onClick={handleBack}>
+              <ArrowLeft fontSize='small'/>
+            </IconButton>
+          </>}
+        </Box>
+        <Autocomplete
+          loading={isLoading}
+          options={options}
+          getOptionLabel={(opt)=> opt?.friendlyName || opt?.path || ''}
+          isOptionEqualToValue={(a,b)=> (a?.path||'') === (b?.path||'')}
+          onChange={(e, val)=> handlePick(val)}
+          renderOption={(props, option)=> (
+            <ListItem {...props}>
+              <ListItemIcon>
+                {option.propertyType === 'Class' || option.propertyType === 'Collection' ? <ArrowLeft/> : <FilterPlus/>}
+              </ListItemIcon>
+              <ListItemText primary={option.friendlyName || option.path} secondary={option.propertyType}/>
+            </ListItem>
+          )}
+          renderInput={(params)=> (
+            <TextField {...params} size='small' variant='standard' label='Pick field or navigate into class'/>
+          )}
+        />
+
+        <Box sx={{mt:3}}>
+          <Typography variant='subtitle2' sx={{mb:1}}>Selected search fields</Typography>
+          {selected.length === 0 && (
+            <Typography variant='body2' color='text.secondary'>No fields added yet.</Typography>
+          )}
+          <Box sx={{display:'flex', flexWrap:'wrap', gap:1}}>
+            {selected.map((s, idx)=> (
+              <Chip
+                key={s.fullPath+idx}
+                label={`${s.path}`}
+                onDelete={()=> removeItem(idx)}
+                deleteIcon={<DeleteOutlined/>}
+                variant='outlined'
+              />
+            ))}
+          </Box>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color='secondary' variant='outlined'>Cancel</Button>
+        <Button onClick={handleSave} variant='contained'>Save</Button>
+      </DialogActions>
+    </>
+  )
+}

package/src/views/genericTable/BuilderExpressionParams.js

@@ -12,7 +12,7 @@ import {
   Checkbox,
   FormControlLabel
 } from '@mui/material';
-import {AddCircleOutline, DeleteOutline} from '@mui/icons-material';
+import {AddCircleOutlined, DeleteOutlined} from '@mui/icons-material';
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
 import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
 import {DatePicker} from '@mui/x-date-pickers/DatePicker';
@@ -173,7 +173,7 @@ const DynamicValueList = ({items = [], onChange, isView = false}) => {
               )}
 
               { <IconButton size='small' onClick={() => handleRemove(index)}>
-                <DeleteOutline/>
+                <DeleteOutlined/>
               </IconButton>}
             </Stack>
           ))}
@@ -183,7 +183,7 @@ const DynamicValueList = ({items = [], onChange, isView = false}) => {
       {/* Add button outside scrollable area */}
       <Box sx={{mt: 2, textAlign: 'center'}}>
         <IconButton onClick={handleAdd}>
-          <AddCircleOutline color="primary"/>
+          <AddCircleOutlined color="primary"/>
         </IconButton>
       </Box>
     </Box>

package/src/views/genericTable/ColumnConfiguratorDialog.js

@@ -23,6 +23,7 @@ import {
 } from '@mui/material'
 import {Add, Delete, ContentCopy, ExpandMore, Edit} from '@mui/icons-material'
 import dynamic from 'next/dynamic'
+import { HelpPopover } from 'views/builder/inspector/fields/FunctionHelpPopover'
 
 const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {ssr: false})
 
@@ -363,9 +364,10 @@ const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
                           value, isSingle, asyncFetchOptions
                         </Typography>
                       </Alert>
-                      <Typography variant="caption" sx={{mb: 1, display: 'block'}}>
-                        Cell Editor Params (Function or Object)
-                      </Typography>
+                      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                        <Typography variant="caption">Cell Editor Params (Function or Object)</Typography>
+                        <HelpPopover type='cellEditorParams' />
+                      </Box>
                       <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
                         <MonacoEditor
                           height="200px"
@@ -385,9 +387,10 @@ const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
                     </Box>
                   )}
                   <Box sx={{mt: 2}}>
-                    <Typography variant="caption" sx={{mb: 1, display: 'block'}}>
-                      Value Setter (optional)
-                    </Typography>
+                    <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                      <Typography variant="caption">Value Setter (optional)</Typography>
+                      <HelpPopover type='valueSetter' />
+                    </Box>
                     <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
                       <MonacoEditor
                         height="120px"
@@ -406,9 +409,10 @@ const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
                     </Box>
                   </Box>
                   <Box sx={{mt: 2}}>
-                    <Typography variant="caption" sx={{mb: 1, display: 'block'}}>
-                      Value Getter (optional)
-                    </Typography>
+                    <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                      <Typography variant="caption">Value Getter (optional)</Typography>
+                      <HelpPopover type='valueGetter' />
+                    </Box>
                     <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
                       <MonacoEditor
                         height="120px"
@@ -427,9 +431,10 @@ const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
                     </Box>
                   </Box>
                   <Box sx={{mt: 2}}>
-                    <Typography variant="caption" sx={{mb: 1, display: 'block'}}>
-                      Additional Column Parameters (valueFormatter, width, etc.)
-                    </Typography>
+                    <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                      <Typography variant="caption">Additional Column Parameters (valueFormatter, width, etc.)</Typography>
+                      <HelpPopover type='columnParams' />
+                    </Box>
                     <Alert severity="info" sx={{mb: 1, fontSize: '0.75rem'}}>
                       Add any AG Grid column properties as key-value pairs (without outer braces).
                       Example: valueFormatter: (p) =&gt; p.value?.name, width: 200
@@ -586,9 +591,10 @@ const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
                             value, isSingle, asyncFetchOptions
                           </Typography>
                         </Alert>
-                        <Typography variant="caption" sx={{mb: 1, display: 'block'}}>
-                          Cell Editor Params (Function or Object)
-                        </Typography>
+                        <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                          <Typography variant="caption">Cell Editor Params (Function or Object)</Typography>
+                          <HelpPopover type='cellEditorParams' />
+                        </Box>
                         <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
                           <MonacoEditor
                             height="150px"
@@ -608,9 +614,10 @@ const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
                       </Box>
                     )}
                     <Box>
-                      <Typography variant="caption" sx={{mb: 1, display: 'block'}}>
-                        Value Setter (optional)
-                      </Typography>
+                      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                        <Typography variant="caption">Value Setter (optional)</Typography>
+                        <HelpPopover type='valueSetter' />
+                      </Box>
                       <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
                         <MonacoEditor
                           height="120px"
@@ -629,9 +636,10 @@ const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
                       </Box>
                     </Box>
                     <Box>
-                      <Typography variant="caption" sx={{mb: 1, display: 'block'}}>
-                        Value Getter (optional)
-                      </Typography>
+                      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                        <Typography variant="caption">Value Getter (optional)</Typography>
+                        <HelpPopover type='valueGetter' />
+                      </Box>
                       <Box sx={{border: '1px solid #ddd', borderRadius: 1}}>
                         <MonacoEditor
                           height="120px"
@@ -650,9 +658,10 @@ const ColumnConfiguratorDialog = ({open, onClose, onResult}) => {
                       </Box>
                     </Box>
                     <Box>
-                      <Typography variant="caption" sx={{mb: 1, display: 'block'}}>
-                        Additional Column Parameters
-                      </Typography>
+                      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.5, mb: 1}}>
+                        <Typography variant="caption">Additional Column Parameters</Typography>
+                        <HelpPopover type='columnParams' />
+                      </Box>
                       <Alert severity="info" sx={{mb: 1, fontSize: '0.75rem'}}>
                         Add any AG Grid column config properties as key-value pairs (without outer braces).
                         Example: valueFormatter: (p) =&gt; p.value?.name, width: 200

package/src/views/genericTable/FixedFilterDialog.js

@@ -18,7 +18,8 @@ import {
   Dialog,
   InputAdornment
 } 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'
 import CustomFilterDialog from 'src/views/customFilter/CustomFilterDialog'
@@ -408,7 +409,7 @@ export default function FixedFilterDialog({
                   )}
                 </Box>
                 <IconButton color='error' onClick={()=> removeItem(idx)}>
-                  <DeleteOutline/>
+                  <DeleteOutlined/>
                 </IconButton>
                 <Box sx={{gridColumn:'1 / span 6'}}>
                   <Typography variant='caption' color='text.secondary'>{normalizedRoot}.{it.path} • {it.localProperty}{it.enumName?(' • '+it.enumName):''}</Typography>

package/src/views/genericTable/FormattingSettingsDialog.js

@@ -21,8 +21,10 @@ import {
   Tooltip,
   Autocomplete, Collapse
 } from '@mui/material';
-import {DeleteOutline, Plus, ChevronDown, ChevronUp} from 'mdi-material-ui';
+import {Plus, ChevronDown, ChevronUp} from 'mdi-material-ui';
+import {DeleteOutlined} from '@mui/icons-material';
 import dynamic from 'next/dynamic';
+import { HelpPopover } from 'views/builder/inspector/fields/FunctionHelpPopover';
 
 const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {ssr: false});
 
@@ -376,7 +378,7 @@ const FormattingSettingsDialog = ({open, onClose, field, onSave}) => {
                   </Grid>
                   <Grid display="flex" justifyContent="flex-end" size={{ xs: 0.5 }}>
                     <IconButton size="small" color="error" onClick={() => removeCondition(index)}>
-                      <DeleteOutline />
+                      <DeleteOutlined />
                     </IconButton>
                   </Grid>
 
@@ -385,7 +387,10 @@ const FormattingSettingsDialog = ({open, onClose, field, onSave}) => {
                     <Grid size={{ xs: 12 }}>
                       <Box sx={{ border: '1px solid #ced4da', borderRadius: 1, overflow: 'hidden', mt: 1 }}>
                         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', px: 1, py: 0.5, backgroundColor: '#f0f0f0' }}>
-                           <Typography variant="caption" fontWeight="bold">Math Expression</Typography>
+                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                             <Typography variant="caption" fontWeight="bold">Math Expression</Typography>
+                             <HelpPopover type='formattingExpression' />
+                           </Box>
                            <IconButton size="small" onClick={() => toggleEditorExpansion(index)}>
                               {expandedEditors[index] ? <ChevronUp size="small" /> : <ChevronDown size="small" />}
                            </IconButton>