robobyte-front-builder 1.0.0

package/src/views/genericTable/SearchFilterDialog.js

@@ -0,0 +1,247 @@
+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, DeleteOutline, FilterPlus} from 'mdi-material-ui'
+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={<DeleteOutline/>}
+                variant='outlined'
+              />
+            ))}
+          </Box>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color='secondary' variant='outlined'>Cancel</Button>
+        <Button onClick={handleSave} variant='contained'>Save</Button>
+      </DialogActions>
+    </>
+  )
+}