robobyte-front-builder 1.0.0

package/src/views/genericTable/BuilderExpressionParams.js

@@ -0,0 +1,193 @@
+import React, {useState} from 'react';
+import {
+  Box,
+  TextField,
+  Select,
+  MenuItem,
+  IconButton,
+  Stack,
+  Typography,
+  Button,
+  InputAdornment,
+  Checkbox,
+  FormControlLabel
+} from '@mui/material';
+import {AddCircleOutline, DeleteOutline} 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';
+import dayjs from 'dayjs';
+
+const propertyTypes = ['Int', 'Double', 'String', 'Bool','DateTime'];
+
+const DynamicValueList = ({items = [], onChange, isView = false}) => {
+  const handleChange = (index, field, newValue) => {
+    const updated = items.map((item, i) =>
+      i === index ? {...item, [field]: newValue} : item
+    );
+    onChange(updated);
+  };
+
+  const handleAdd = () => {
+    onChange([...items, {value: null, propertyType: 'String'}]);
+  };
+
+  const handleRemove = index => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+
+  const handleCopy = (index) => {
+    const text = `@${index}`;
+    navigator.clipboard.writeText(text).then(() => {
+      console.log(`Copied ${text}`);
+    });
+  };
+
+  return (
+    <Box sx={{p: 2, direction: 'ltr', textAlign: 'left'}}>
+      <Typography variant="subtitle2" gutterBottom sx={{textAlign: 'center'}}>
+        Global Parameters
+      </Typography>
+
+      {/* Scrollable container */}
+      <Box
+        sx={{
+          maxHeight: 360,
+          overflowY: 'auto',
+          pr: 1, // padding for scrollbar space
+        }}
+      >
+        <Stack spacing={2}>
+          {items.map((item, index) => (
+            <Stack direction="row" spacing={1} alignItems="center" key={index}>
+              <TextField
+                variant="outlined"
+                size="small"
+                placeholder="Title (Use of Value)"
+                value={item.title}
+                onChange={e => handleChange(index, 'title', e.target.value)}
+                sx={{flex: 1}}
+                inputProps={{style: {direction: 'ltr', textAlign: 'left'}}}
+              />
+              {item?.propertyType === 'DateTime' ? (
+
+                <Box sx={{ flex: 2, display: 'flex' }}>
+                <LocalizationProvider dateAdapter={AdapterDayjs} sx={{flex: 2}}>
+                  <DatePicker
+                    sx={{flex: 2}}
+                    value={item?.value ? dayjs(item.value) : null}
+                    onChange={(v) => handleChange(index, 'value', v ? dayjs(v) : null)}
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        fullWidth
+                        size="small"
+                        variant="outlined"
+                        placeholder="Value"
+                        InputProps={{
+                          ...(params.InputProps || {}),
+                          style: {direction: 'ltr', textAlign: 'left'},
+                          startAdornment: (
+                            <InputAdornment
+                              position="start"
+                              onClick={() => handleCopy(index)}
+                              sx={{
+                                px: 1,
+                                borderRadius: 1,
+                                bgcolor: 'grey.200',
+                                height: '100%',
+                                fontWeight: 'bold',
+                                color: 'primary.main',
+                                cursor: 'pointer',
+                                userSelect: 'none',
+                                '&:hover': { backgroundColor: 'grey.300' }
+                              }}
+                            >
+                              @{index}
+                            </InputAdornment>
+                          )
+                        }}
+                      />
+                    )}
+                  />
+                </LocalizationProvider>
+                </Box>
+              ) : (
+                <TextField
+                  variant="outlined"
+                  size="small"
+                  placeholder="Value"
+                  value={item.value}
+                  onChange={e => handleChange(index, 'value', e.target.value)}
+                  InputProps={{
+                    style: {direction: 'ltr', textAlign: 'left'},
+                    startAdornment: (
+                      <InputAdornment
+                        position="start"
+                        onClick={() => handleCopy(index)}
+                        sx={{
+                          px: 1,
+                          borderRadius: 1,
+                          bgcolor: 'grey.200',
+                          height: '100%',
+                          fontWeight: 'bold',
+                          color: 'primary.main',
+                          cursor: 'pointer',
+                          userSelect: 'none',
+                          '&:hover': {
+                            backgroundColor: 'grey.300'
+                          }
+                        }}
+                      >
+                        @{index}
+                      </InputAdornment>
+                    )
+                  }}
+                  sx={{flex: 2}}
+                />
+              )}
+
+              {!isView && <Select
+                size="small"
+                value={item.propertyType}
+                onChange={e => handleChange(index, 'propertyType', e.target.value)}
+                sx={{width: 120, direction: 'ltr', textAlign: 'left'}}
+              >
+                {propertyTypes.map(type => (
+                  <MenuItem key={type} value={type}>
+                    {type}
+                  </MenuItem>
+                ))}
+              </Select>}
+
+              {!isView && (
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={!!item.showInCustomFilter}
+                      onChange={(e) => handleChange(index, 'showInCustomFilter', e.target.checked)}
+                    />
+                  }
+                  label="Show in filter"
+                />
+              )}
+
+              { <IconButton size='small' onClick={() => handleRemove(index)}>
+                <DeleteOutline/>
+              </IconButton>}
+            </Stack>
+          ))}
+        </Stack>
+      </Box>
+
+      {/* Add button outside scrollable area */}
+      <Box sx={{mt: 2, textAlign: 'center'}}>
+        <IconButton onClick={handleAdd}>
+          <AddCircleOutline color="primary"/>
+        </IconButton>
+      </Box>
+    </Box>
+  );
+};
+
+export default DynamicValueList;

package/src/views/genericTable/FixedFilterDialog.js

@@ -0,0 +1,447 @@
+import {useEffect, useMemo, useState} from 'react'
+import {
+  Box,
+  Button,
+  Chip,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+  Typography,
+  Dialog,
+  InputAdornment
+} 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'
+import CustomFilterDialog from 'src/views/customFilter/CustomFilterDialog'
+import {FilterFormat} from 'services/helper/FilterFormat'
+
+// FixedFilterDialog
+// Purpose: Let the user build a fixed set of filter fields (schema-compatible with CustomFilterDialog Tfilters)
+// Output: onSave receives an array of Tfilters entries with shape:
+//   {
+//     path: string,
+//     friendlyName: string,
+//     localProperty: 'String'|'Int'|'Double'|'Bool'|'DateTime'|'Enum'|'Class'|'Guid'|'Collection',
+//     enumName?: string,
+//     method: string,          // e.g., 'Contains','Equals','GreaterThan','LessThan','isBetween','Orlist','NotOrlist','NotEquals','NotContains','checkForNull'
+//     value: any,              // left empty for user to fill later in CustomFilter
+//     isOrList?: boolean,
+//     checkForNull?: boolean
+//   }
+// Usage: Consumers can pass the resulting array as the `Filter` prop to CustomFilterDialog so it renders those rows pre-defined.
+
+const METHOD_OPTIONS = {
+  String: ['Contains', 'Equals', 'NotEquals', 'NotContains'],
+  Int: ['Equals', 'GreaterThan', 'LessThan', 'isBetween'],
+  Double: ['Equals', 'GreaterThan', 'LessThan', 'isBetween'],
+  Bool: ['Equals'],
+  DateTime: ['GreaterThanOrEqual', 'LessThanOrEqual', 'isBetween'],
+  Enum: ['Equals'],
+  Guid: ['Equals'],
+  Class: ['Equals', 'Orlist', 'NotOrlist', 'checkForNull']
+}
+
+const DEFAULT_METHOD = {
+  String: 'Contains',
+  Int: 'Equals',
+  Double: 'Equals',
+  Bool: 'Equals',
+  DateTime: 'GreaterThanOrEqual',
+  Enum: 'Equals',
+  Guid: 'Equals'
+}
+
+export default function FixedFilterDialog({
+  className,          // root model full name
+  value = [],         // initial Tfilters list
+  onChange,           // (newList) => void (optional, live updates)
+  onSave,             // (finalList) => 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, friendly, dto }
+  const [selected, setSelected] = useState(value || [])
+  const [isLoading, setIsLoading] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  // value editors support
+  const [enumMap, setEnumMap] = useState({})        // { enumName: [{name, value}, ...] }
+  const [classesMap, setClassesMap] = useState({})  // { idx: [{id, name}, ...] }
+  const [searchInputs, setSearchInputs] = useState({}) // { idx: string }
+  // subfilter dialog state for Class lookups
+  const [openSubFilter, setOpenSubFilter] = useState(false)
+  const [subIdx, setSubIdx] = useState(null)
+  const [subDto, setSubDto] = useState('')
+
+  const normalizedRoot = useMemo(() => (className || '').split('.').pop() || 'Root', [className])
+
+  useEffect(() => {
+    setSelected(value || [])
+  }, [value])
+
+  useEffect(() => {
+    // notify parent on change when needed
+    onChange && onChange(selected)
+  }, [selected])
+
+  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 isDuplicatePath = (path) => selected.some(s => (s?.path || '').toLowerCase() === (path || '').toLowerCase())
+
+  const addClassEntry = (opt) => {
+    if (!opt) return
+    const basePath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+    const newPath = `${basePath}.Id`
+    // allow duplicates of the same field by design
+    const friendlyName = pathCrumb?.friendly ? `${pathCrumb.friendly}>${opt.friendlyName}` : opt.friendlyName
+    const entry = {
+      path: newPath,
+      friendlyName,
+      localProperty: 'Class',
+      enumName: undefined,
+      method: DEFAULT_METHOD['Class'] || 'Equals',
+      value: null,
+      isOrList: false,
+      checkForNull: false,
+      fixed: true,
+      // store class type metadata for later use
+      dtoClassName: opt?.dtoClassName,
+      modelClassName: (opt?.modelClassName && opt.modelClassName.length > 0) ? opt.modelClassName : opt?.dtoClassName
+    }
+    setSelected(prev => [...prev, entry])
+  }
+
+  const handlePick = async (opt) => {
+    if (!opt) return
+    // Class -> drill down
+    if (opt.propertyType === 'Class' || opt.propertyType === 'Collection') {
+      const newPath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+      const newFriendly = pathCrumb?.friendly ? `${pathCrumb.friendly}>${opt.friendlyName}` : opt.friendlyName
+      const dto = opt.dtoClassName
+
+      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 with default method
+    const newPath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+    // allow duplicates of the same field by design
+
+    const localProperty = opt.propertyType
+    const friendlyName = pathCrumb?.friendly ? `${pathCrumb.friendly}>${opt.friendlyName}` : opt.friendlyName
+    const enumName = opt.enumName
+    const method = DEFAULT_METHOD[localProperty] || 'Equals'
+
+    const entry = {
+      path: newPath,
+      friendlyName,
+      localProperty,
+      enumName,
+      method,
+      value: null,
+      isOrList: false,
+      checkForNull: false,
+      fixed: true,
+      dtoClassName: opt?.dtoClassName,
+      modelClassName: (opt?.modelClassName && opt.modelClassName.length > 0) ? opt.modelClassName : opt?.dtoClassName
+    }
+    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) {
+      setPathCrumb(null)
+      ;(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 {
+      ;(async () => {
+        try {
+          setIsLoading(true)
+          let dto = className
+          let list = []
+          let friendly = []
+          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
+            friendly.push(node.friendlyName)
+            if (node.propertyType !== 'Class' && node.propertyType !== 'Collection') break
+            list = current
+          }
+          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 updateMethod = (idx, newMethod) => {
+    setSelected(prev => prev.map((it, i) => i === idx ? {
+      ...it,
+      method: newMethod,
+      // reset value according to method
+      value: (newMethod === 'Orlist' || newMethod === 'NotOrlist') ? [] : (newMethod === 'isBetween' ? {fromValue: null, toValue: null} : null)
+    } : it))
+  }
+
+  const updateFriendly = (idx, newFriendly) => {
+    setSelected(prev => prev.map((it, i) => i === idx ? {...it, friendlyName: newFriendly} : it))
+  }
+
+  const toggleFlag = (idx, flag) => {
+    setSelected(prev => prev.map((it, i) => i === idx ? {...it, [flag]: !it[flag]} : it))
+  }
+
+  const removeItem = (idx) => {
+    setSelected(prev => prev.filter((_, i) => i !== idx))
+  }
+
+  const handleSave = () => {
+    const finalList = (selected || []).map(it => ({...it, fixed: true}))
+    onSave && onSave(finalList)
+    onClose && onClose()
+  }
+
+  const filteredOptions = useMemo(() => {
+    const q = (searchText || '').trim().toLowerCase()
+    if (!q) return options
+    return options.filter(o =>
+      (o?.friendlyName || '').toLowerCase().includes(q) ||
+      (o?.path || '').toLowerCase().includes(q)
+    )
+  }, [options, searchText])
+
+  const getClassNameFor = (it) => {
+    const m = it?.modelClassName
+    if (m && typeof m === 'string' && m.length > 0) return m
+    return it?.dtoClassName
+  }
+
+  const fetchEnums = async (enumName) => {
+    if (!enumName) return
+    if (enumMap[enumName]) return
+    try {
+      const resp = await Services.GetService(Endpoints.FilterEndpoints.Get.GetEnumValues, false, {enumName})
+      const list = resp?.data || []
+      setEnumMap(prev => ({...prev, [enumName]: list}))
+    } catch (e) { console.error(e) }
+  }
+
+  const fetchClasses = async (idx, it, search) => {
+    const modelName = getClassNameFor(it)
+    if (!modelName) return
+    try {
+      const resp = await Services.PostService(
+        Endpoints.FilterEndpoints.Post.GetMinDynamics,
+        false,
+        { tFilter: FilterFormat(it?.Tfilter || []) },
+        { modelName, search, withPagination: true, page: 1, pageSize: 200 }
+      )
+      const list = (resp?.data || []).map((v,i)=> ({...v, key: v.id || i}))
+      setClassesMap(prev => ({...prev, [idx]: list}))
+    } catch (e) { console.error(e) }
+  }
+
+  // handler for nested subfilter dialog updates
+  const handleSubFilterChange = (key, val, index) => {
+    if (key === 'Tfilter' && typeof subIdx === 'number') {
+      setSelected(prev => prev.map((row,i)=> i===subIdx ? {...row, Tfilter: val} : row))
+    }
+  }
+
+  return (
+    <>
+      <DialogTitle sx={{padding: 0, marginBottom: 2}}>
+        <Box
+          sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', backgroundColor: 'background.default', p: 3}}
+        >
+          <Typography variant='h6'>Build Fixed Filter</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>
+
+        <Box sx={{display:'flex', gap:1, mb:2}}>
+          <TextField
+            size='small'
+            placeholder='Search fields...'
+            value={searchText}
+            onChange={(e)=> setSearchText(e.target.value)}
+            fullWidth
+          />
+        </Box>
+
+        <Autocomplete
+          loading={isLoading}
+          options={filteredOptions}
+          getOptionLabel={(opt)=> opt?.friendlyName || opt?.path || ''}
+          isOptionEqualToValue={(a,b)=> (a?.path||'') === (b?.path||'')}
+          onChange={(e, val)=> handlePick(val)}
+          renderOption={(props, option)=> (
+            <ListItem {...props} secondaryAction={
+              (option.propertyType === 'Class' || option.propertyType === 'Collection') ? (
+                <Box sx={{display:'flex', alignItems:'center', gap:1}}>
+                  <IconButton
+                    size='small'
+                    onMouseDown={(e)=> e.preventDefault()}
+                    onClick={(e)=> { e.stopPropagation(); addClassEntry(option) }}
+                    title='Add as class filter'
+                  >
+                    <FilterPlus fontSize='small'/>
+                  </IconButton>
+                  <IconButton
+                    size='small'
+                    onMouseDown={(e)=> e.preventDefault()}
+                    onClick={(e)=> { e.stopPropagation(); handlePick(option) }}
+                    title='Navigate into'
+                  >
+                    <ArrowLeft fontSize='small'/>
+                  </IconButton>
+                </Box>
+              ) : null
+            }>
+              <ListItemIcon>
+                <FilterPlus fontSize='small'/>
+              </ListItemIcon>
+              <ListItemText primary={option.friendlyName} secondary={`${option.path} • ${option.propertyType}${option.enumName?(' • '+option.enumName):''}`}/>
+            </ListItem>
+          )}
+          renderInput={(params)=> (
+            <TextField {...params} label='Add field' size='small' placeholder='Pick field to add' />
+          )}
+        />
+
+        <Box sx={{mt:3}}>
+          <Typography variant='subtitle2' sx={{mb:1}}>Selected fields</Typography>
+          {selected.length === 0 && (
+            <Typography variant='body2' color='text.secondary'>No fields selected yet.</Typography>
+          )}
+          {selected.map((it, idx) => {
+            const methods = METHOD_OPTIONS[it.localProperty] || ['Equals']
+            return (
+              <Box key={`${it.path}-${idx}`} sx={{display:'grid', gridTemplateColumns:'1fr 160px 110px 120px auto 40px', gap:1, alignItems:'center', mb:1}}>
+                <TextField
+                  size='small'
+                  label='Friendly name'
+                  value={it.friendlyName || ''}
+                  onChange={(e)=> updateFriendly(idx, e.target.value)}
+                />
+                <Select size='small' value={it.method} onChange={(e)=> updateMethod(idx, e.target.value)}>
+                  {methods.map(m => (<MenuItem key={m} value={m}>{m}</MenuItem>))}
+                </Select>
+                <Box sx={{display:'flex', alignItems:'center', gap:1}}>
+                  <Typography variant='caption'>Or list</Typography>
+                  <Switch size='small' checked={!!it.isOrList} onChange={()=> toggleFlag(idx, 'isOrList')}/>
+                </Box>
+                <Box sx={{display:'flex', alignItems:'center', gap:1}}>
+                  <Typography variant='caption'>Check null</Typography>
+                  <Switch size='small' checked={!!it.checkForNull} onChange={()=> toggleFlag(idx, 'checkForNull')}/>
+                </Box>
+                {/* New: Build value subfilter for Class entries */}
+                <Box sx={{display:'flex', alignItems:'center', justifyContent:'flex-start'}}>
+                  {it.localProperty === 'Class' && (
+                    <IconButton size='small' title='Add filter for class values' onClick={()=> { setSubIdx(idx); setSubDto(it.dtoClassName); setOpenSubFilter(true); }}>
+                      <FilterPlus fontSize='small'/>
+                    </IconButton>
+                  )}
+                </Box>
+                <IconButton color='error' onClick={()=> removeItem(idx)}>
+                  <DeleteOutline/>
+                </IconButton>
+                <Box sx={{gridColumn:'1 / span 6'}}>
+                  <Typography variant='caption' color='text.secondary'>{normalizedRoot}.{it.path} • {it.localProperty}{it.enumName?(' • '+it.enumName):''}</Typography>
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button variant='text' color='secondary' onClick={onClose}>Close</Button>
+        <Button variant='contained' onClick={handleSave}>Save</Button>
+      </DialogActions>
+
+      {/* Nested subfilter builder for Class entries */}
+      <Dialog
+        fullWidth
+        open={openSubFilter}
+        maxWidth='lg'
+        scroll='body'
+        onClose={() => setOpenSubFilter(false)}
+      >
+        <CustomFilterDialog
+          handleFilterChange={(key, val) => handleSubFilterChange(key, val, subIdx)}
+          className={subDto}
+          handleToggleDialogs={() => setOpenSubFilter(false)}
+          Filter={selected?.[subIdx]?.Tfilter || []}
+          filterIndex={0}
+          LocalFilter={true}
+          selectTFilter={[]}
+        />
+      </Dialog>
+
+    </>
+  )
+}