robobyte-front-builder 1.0.0

package/src/services/components/UniversalNestedAutocomplete.js

@@ -0,0 +1,331 @@
+import React, { forwardRef, useEffect, useState, useCallback } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Chip from '@mui/material/Chip';
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import CircularProgress from '@mui/material/CircularProgress';
+import ArrowLeft from 'mdi-material-ui/ArrowLeft';
+import Button from '@mui/material/Button'
+import { styled } from '@mui/material/styles';
+import { useRef } from 'react';
+import { Paper } from '@mui/material'
+const GroupHeader = styled('div')(({ theme }) => ({
+    top: '-8px',
+    position: 'sticky',
+    padding: '4px 10px',
+
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.grey[100],
+}));
+
+const GroupItems = styled('ul')({ padding: 0 });
+const UniversalNestedAutocomplete = forwardRef((props, ref) => {
+    const {
+        value,
+        label,
+        onChange,
+        isSingle = false,
+        asyncFetchOptions,
+        asyncFetchChildren,
+        labelField = 'name',
+        groupByField,
+        placeholder = '',
+        disabled = false,
+        freeSolo = false,
+        clearable = true,
+        variant = 'outlined',
+        fullWidth = true,
+        onOpen,
+        onClose,
+        onFocus,
+        multiple = true,
+        disableCloseOnSelect = true,
+        showBreadcrumbs = true,
+        renderOption: customRenderOption,
+        getOptionLabel: customGetOptionLabel,
+        isOptionEqualToValue: customIsOptionEqualToValue,
+        ...rest
+    } = props;
+
+    const [internalValue, setInternalValue] = useState(value || (isSingle ? null : []));
+    const [optionList, setOptionList] = useState([]);
+    const [currentLevelOptions, setCurrentLevelOptions] = useState([]);
+    const [breadcrumbs, setBreadcrumbs] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [open, setOpen] = useState(false);
+    const inputRef = useRef(null);
+
+    useEffect(() => {
+        if (asyncFetchOptions) {
+            fetchOptions();
+        }
+    }, [asyncFetchOptions]);
+
+    const fetchOptions = useCallback(async (parentId = null) => {
+        setLoading(true);
+        try {
+            const options = await asyncFetchOptions(parentId);
+            setOptionList(options || []);
+            setCurrentLevelOptions(options || []);
+        } catch (error) {
+            console.error('Error fetching options:', error);
+            setOptionList([]);
+            setCurrentLevelOptions([]);
+        } finally {
+            setLoading(false);
+        }
+    }, [asyncFetchOptions]);
+
+
+
+    const fetchChildren = useCallback(async (parentId) => {
+        if (!asyncFetchChildren) return;
+        setLoading(true);
+        try {
+            const children = await asyncFetchChildren(parentId);
+            setCurrentLevelOptions(children || []);
+        } catch (error) {
+            console.error('Error fetching children:', error);
+            setCurrentLevelOptions([]);
+        } finally {
+            setLoading(false);
+        }
+    }, [asyncFetchChildren]);
+
+    const handleOpen = () => {
+        setOpen(true);
+        if (breadcrumbs.length === 0) {
+            fetchOptions();
+        }
+        onOpen?.();
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+        setSearchTerm('');
+        onClose?.();
+    };
+
+    const navigateToOption = (option, breadcrumbIndex = null, isArrowClick = false) => {
+        if (isArrowClick && option.hasChildren) {
+            fetchChildren(option.id);
+
+            if (breadcrumbIndex !== null) {
+                const newBreadcrumbs = breadcrumbs.slice(0, breadcrumbIndex + 1);
+                setBreadcrumbs(newBreadcrumbs);
+                return;
+            }
+            else {
+                setBreadcrumbs([...breadcrumbs, option]);
+            }
+            return;
+        }
+
+        if (breadcrumbIndex !== null) {
+            fetchChildren(option.id);
+            const newBreadcrumbs = breadcrumbs.slice(0, breadcrumbIndex + 1);
+            setBreadcrumbs(newBreadcrumbs);
+            return;
+        }
+
+        const newValue = Array.isArray(internalValue) ? [...internalValue] : [];
+        const index = newValue.findIndex(item =>
+            customIsOptionEqualToValue?.(item, option) ?? item?.id === option?.id
+        );
+
+        if (index > -1) {
+            newValue.splice(index, 1);
+        } else {
+            if (isSingle) {
+                newValue.length = 0;
+            }
+            newValue.push(option);
+        }
+
+        setInternalValue(isSingle ? newValue[0] || null : newValue);
+        onChange?.(isSingle ? newValue[0] || null : newValue);
+    };
+    const goBackToTopLevel = () => {
+        setBreadcrumbs([]);
+        fetchOptions();
+    };
+
+    const removeOption = (optionToRemove) => {
+        const newValue = Array.isArray(internalValue)
+            ? internalValue.filter(opt =>
+                !(customIsOptionEqualToValue?.(opt, optionToRemove) ?? opt?.id === optionToRemove?.id)
+            )
+            : null;
+
+        setInternalValue(newValue);
+        onChange?.(newValue);
+    };
+
+    const getOptionLabel = (option) => {
+        if (typeof option === 'string') return option;
+        if (customGetOptionLabel) return customGetOptionLabel(option);
+        return option[labelField] || '';
+    };
+
+    const isOptionEqualToValue = (option, value) => {
+        if (customIsOptionEqualToValue) return customIsOptionEqualToValue(option, value);
+        return option?.id === value?.id;
+    };
+
+    const renderOption = (props, option) => {
+        if (customRenderOption) return customRenderOption(props, option);
+
+        const selected = Array.isArray(internalValue)
+            ? internalValue.some(item => isOptionEqualToValue(item, option))
+            : isOptionEqualToValue(internalValue, option);
+
+        const canNavigateDeeper = option.hasChildren;
+
+        return (
+            <Box
+                {...props}
+                key={option.id}
+                sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    p: 1.5,
+                    cursor: 'pointer',
+                    borderRadius: 1,
+                    backgroundColor: selected ? 'action.selected' : 'transparent',
+                    '&:hover': {
+                        backgroundColor: selected ? 'action.selected' : 'action.hover'
+                    },
+                    border: selected ? '2px solid primary.main' : '1px solid transparent',
+                }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    navigateToOption(option, null, false);
+                }}
+            >
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography sx={{
+                        color: selected ? 'primary.main' : 'text.primary',
+                        fontWeight: selected ? 'bold' : 'normal'
+                    }}>
+                        {getOptionLabel(option)}
+                    </Typography>
+                </Box>
+
+                {canNavigateDeeper && (
+                    <IconButton
+                        size="small"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            navigateToOption(option, null, true);
+                        }}
+                        sx={{
+                            backgroundColor: 'background.default',
+                            color: 'text.secondary',
+                            '&:hover': { backgroundColor: 'action.hover' },
+                            borderRadius: 1,
+                            ml: 'auto'
+                        }}
+                    >
+                        <ArrowLeft style={{ width: '14px' }} />
+                    </IconButton>
+                )}
+            </Box>
+        );
+    };
+
+    const renderBreadcrumbs = () => {
+        if (!showBreadcrumbs || breadcrumbs.length === 0) return null;
+
+        return (
+            <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+                    <Button
+                        size="small"
+                        onClick={goBackToTopLevel}
+                    >
+                        Top Level
+                    </Button>
+                    {breadcrumbs.map((crumb, index) => (
+                        <Box key={crumb.id} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <Typography variant="caption">/</Typography>
+                            <Button
+                                size="small"
+                                onClick={() => navigateToOption(crumb, index)}
+                            >
+                                {getOptionLabel(crumb)}
+                            </Button>
+                        </Box>
+                    ))}
+                </Box>
+            </Box>
+        );
+    };
+
+    const renderTags = (value, getTagProps) => {
+        return (Array.isArray(value) ? value : []).map((option, index) => (
+            <Chip
+                {...getTagProps({ index })}
+                key={option?.id || index}
+                label={getOptionLabel(option)}
+                onDelete={() => removeOption(option)}
+                sx={{ m: 0.5 }}
+            />
+        ));
+    };
+
+    return (
+        <Autocomplete
+            {...rest}
+            ref={ref}
+            multiple={multiple}
+            freeSolo={freeSolo}
+            loading={loading}
+            open={open}
+            onOpen={handleOpen}
+            onClose={handleClose}
+            disableCloseOnSelect={disableCloseOnSelect}
+            options={currentLevelOptions}
+            disabled={disabled}
+            value={internalValue}
+            clearOnEscape={clearable}
+            isOptionEqualToValue={isOptionEqualToValue}
+            getOptionLabel={getOptionLabel}
+            onChange={(_, newValue) => {
+                setInternalValue(newValue);
+                onChange?.(newValue);
+            }}
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    label={label}
+                    onFocus={onFocus}
+                    inputRef={inputRef}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    placeholder={placeholder}
+                    variant={variant}
+                    fullWidth={fullWidth}
+                />
+            )}
+            renderOption={renderOption}
+            renderTags={renderTags}
+            PaperComponent={({ children, ...props }) => (
+                <Paper {...props} sx={{ maxHeight: 400, overflowY: 'auto' }}>
+                    {renderBreadcrumbs()}
+                    {loading && currentLevelOptions.length === 0 ? (
+                        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>
+                            <CircularProgress size={24} />
+                        </Box>
+                    ) : (
+                        <GroupItems>{children}</GroupItems>
+                    )}
+                </Paper>
+            )}
+        />
+    );
+});
+
+export default UniversalNestedAutocomplete;

package/src/services/components/agGridAutoComplete.js

@@ -0,0 +1,172 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useMemo
+} from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Chip from '@mui/material/Chip';
+import {SettingsConsumer} from 'src/@core/contexts/settingsContext';
+import ThemeComponent from 'src/@core/theme/ThemeComponent';
+import moment from 'moment';
+import {lighten, styled} from '@mui/material/styles';
+import izColors from 'src/configs/izColors.json';
+
+// Utility for nested value access
+const getNestedProperty = (obj, path) => {
+  if (!Array.isArray(path)) {
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+  } else {
+    return path
+      .map(p => p.split('.').reduce((acc, part) => acc && acc[part], obj))
+      .join(' - ');
+  }
+};
+
+// Utility for formatting value by type
+const formatValueByType = (value, type) => {
+  if (type === 'datetime') return moment(value).format('L');
+  return value;
+};
+
+const GroupHeader = styled('div')(({theme}) => ({
+  position: 'sticky',
+  top: '-8px',
+  padding: '4px 10px',
+  color: theme.palette.primary.main,
+  backgroundColor: lighten(izColors.grey, 0.70),
+}));
+
+const GroupItems = styled('ul')({
+  padding: 0,
+});
+
+const AutocompleteEditor = (props, ref) => {
+  const {
+    value,
+    onValueChange,
+    isSingle,
+    options: initialOptions,
+    fieldName,
+    groupByField,
+    asyncFetchOptions,
+    type,
+    api
+  } = props;
+  console.log(props)
+  const [selectedValue, setSelectedValue] = useState(value || []);
+  const [options, setOptions] = useState(initialOptions || []);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef(null);
+
+
+  useEffect(() => {
+    if (asyncFetchOptions) {
+      setLoading(true);
+      asyncFetchOptions()
+        .then(setOptions)
+        .finally(() => setLoading(false));
+    }
+  }, [asyncFetchOptions]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedSearchTerm(searchTerm), 300);
+    return () => clearTimeout(timeout);
+  }, [searchTerm]);
+
+  useEffect(() => {
+    if (asyncFetchOptions) {
+      setLoading(true);
+      asyncFetchOptions(debouncedSearchTerm)
+        .then(setOptions)
+        .finally(() => setLoading(false));
+    }
+  }, [debouncedSearchTerm, asyncFetchOptions]);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const handleChange = (event, newValue) => {
+    let finalValue = props.targetValue != null
+      ? getNestedProperty(newValue, props.targetValue)
+      : newValue;
+
+    // If we have targetValues and props.data, update the mapped fields in props.data
+    if (props.targetValues && props.data) {
+      Object.keys(props.targetValues).forEach(key => {
+        const sourcePath = props.targetValues[key];
+        props.data[key] = getNestedProperty(newValue, sourcePath);
+        console.log(props.data[key])
+
+      });
+    }
+    onValueChange(finalValue)
+  };
+
+  return (
+    <SettingsConsumer>
+      {({settings}) => (
+        <ThemeComponent settings={settings}>
+          <Autocomplete
+            multiple={!isSingle}
+            size="small"
+            loading={loading}
+            options={options}
+            groupBy={option => groupByField ? getNestedProperty(option, groupByField) : null}
+            renderGroup={(params) => (
+              <li key={params.key}>
+                {groupByField && <GroupHeader>{params.group}</GroupHeader>}
+                <GroupItems>{params.children}</GroupItems>
+              </li>
+            )}
+            disableCloseOnSelect={!isSingle}
+            isOptionEqualToValue={(option, value) => option?.id === value?.id}
+            getOptionLabel={(option) => {
+              let label = fieldName ? getNestedProperty(option, fieldName) : option?.name;
+              return type ? formatValueByType(label, type) : label;
+            }}
+            value={selectedValue}
+            onChange={handleChange}
+            renderInput={(params) => {
+              params.InputProps.disableUnderline = true;
+              return (
+                <TextField
+                  autoFocus
+                  {...params}
+                  variant="standard"
+                  size="small"
+                  hiddenLabel
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  inputRef={inputRef}
+                />
+              );
+            }}
+            renderTags={(value, getTagProps) =>
+              value.map((option, index) => (
+                <Chip
+                  key={option?.id}
+                  label={option?.name}
+                  {...getTagProps({index})}
+                  onMouseDown={(e) => {
+                    // e.stopPropagation();
+                    // e.preventDefault();
+                  }}
+                />
+              ))
+            }
+          />
+        </ThemeComponent>
+      )}
+    </SettingsConsumer>
+  );
+};
+
+export default AutocompleteEditor;

package/src/services/components/universalAutoComplete.js

@@ -0,0 +1,207 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Chip from '@mui/material/Chip';
+import { styled, lighten } from '@mui/material/styles';
+import moment from 'moment';
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+const getNested = (obj, path) =>
+  Array.isArray(path)
+    ? path.map(p => p.split('.').reduce((a, k) => a?.[k], obj)).join(' - ')
+    : path?.split('.').reduce((a, k) => a?.[k], obj);
+
+const formatValue = (value, type) =>
+  type === 'datetime' ? moment(value).format('L') : value;
+
+const GroupHeader = styled('div')(({ theme }) => ({
+  top: '-8px',
+  position: 'sticky',
+  padding: '4px 10px',
+  color: theme.palette.primary.main,
+  backgroundColor: lighten(theme.palette.grey[200], 0.5),
+}));
+
+const GroupItems = styled('ul')({ padding: 0 });
+
+const resolveFetchResult = (fetcher, search = '') =>
+  Promise.resolve(typeof fetcher === 'function' ? fetcher(search) : []);
+
+const UniversalAutocomplete = forwardRef((params, ref) => {
+  let {
+    value,
+    label,
+    disableCloseOnSelect,
+    onChange,
+    options = [],
+    isSingle= false,
+    asyncFetchOptions,
+    fetchOnOpen = false,           // <-- use this
+    labelField = 'name',
+    groupByField,
+    type,
+    targetValue,
+    targetValues,
+    onOpen,
+    data,
+    placeholder = '',
+    disabled = false,
+    freeSolo = false,
+    clearable = true,
+    variant = 'outlined',
+    fullWidth = true,
+    onClose,
+    onFocus,
+    newRequest = false,
+    onRequestComplete,
+  } = params;
+
+  const [internalValue, setInternalValue] = useState(value || (isSingle ? null : []));
+  const [optionList, setOptionList] = useState(options);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef(null);
+
+  // debounce typing
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearchTerm(searchTerm), 500);
+    return () => clearTimeout(t);
+  }, [searchTerm]);
+
+  // search-based fetch (only when NOT using fetchOnOpen)
+  useEffect(() => {
+    if (!fetchOnOpen && asyncFetchOptions && debouncedSearchTerm) {
+      setLoading(true);
+      setOptionList([]);
+      resolveFetchResult(asyncFetchOptions, debouncedSearchTerm)
+        .then(data => setOptionList(data || []))
+        .catch(() => setOptionList([]))
+        .finally(() => setLoading(false));
+    }
+  }, [debouncedSearchTerm, asyncFetchOptions, fetchOnOpen]);
+
+  // ALWAYS refetch on every open when fetchOnOpen is true
+  const handleOpen = async () => {
+    if (fetchOnOpen && !!asyncFetchOptions) {
+      setLoading(true)
+      let data = await executeJSCode(asyncFetchOptions);
+      console.log(data)
+      // setOptionList([]); // clear while loading
+      setOptionList(data || [])
+
+      resolveFetchResult(asyncFetchOptions, '') // pass empty search or change as needed
+        .then(data => {
+          console.log(data)
+        })
+        .catch(() => setOptionList([]))
+        .finally(() => setLoading(false));
+    }
+    onOpen?.();
+  };
+
+  // external request trigger (still supported)
+  useEffect(() => {
+    if (newRequest && asyncFetchOptions) {
+      setLoading(true);
+      setOptionList([]);
+      resolveFetchResult(asyncFetchOptions, '')
+        .then(data => {
+          setOptionList(data || [])
+        })
+        .catch(() => setOptionList([]))
+        .finally(() => {
+          setLoading(false);
+          onRequestComplete?.();
+        });
+    }
+  }, [newRequest, asyncFetchOptions, onRequestComplete]);
+
+  // keep value in sync
+  useEffect(() => {
+    setInternalValue(value || (isSingle ? null : []));
+  }, [value, isSingle]);
+
+  const handleChange = (_, newValue) => {
+    setInternalValue(newValue);
+
+    if (params.onChange) {
+      params.onChange(newValue);
+    } else if (targetValue) {
+      const extracted = getNested(newValue, targetValue);
+      onChange?.(extracted);
+    }
+
+    if (targetValues && data) {
+      Object.keys(targetValues).forEach(key => {
+        data[key] = getNested(newValue, targetValues[key]);
+      });
+    }
+  };
+
+  const handleClose = () => {
+    setSearchTerm(''); // reset search on close
+    onClose?.();
+  };
+
+  useEffect(() => {
+    console.log(optionList)
+  }, [optionList])
+  return (
+    <Autocomplete
+      {...params}
+      fullWidth={fullWidth}
+      multiple={!isSingle}
+      freeSolo={freeSolo}
+      loading={loading}
+      onOpen={handleOpen}
+      onClose={handleClose}
+      disableCloseOnSelect={disableCloseOnSelect}
+      options={optionList}
+      disabled={disabled}
+      value={internalValue}
+      clearOnEscape={clearable}
+      isOptionEqualToValue={(opt, val) => opt?.id === val?.id}
+      groupBy={groupByField ? opt => getNested(opt, groupByField) : undefined}
+      getOptionLabel={opt => {
+        if (typeof opt === 'string') return opt;
+        if (opt?.categoryName) return opt.categoryName;
+        return formatValue(getNested(opt, labelField), type) || '';
+      }}
+      onChange={handleChange}
+      renderInput={(p) => (
+        <TextField
+          {...p}
+          label={label}
+          onFocus={onFocus}
+          inputRef={ref || inputRef}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          placeholder={placeholder}
+          variant={variant}
+        />
+      )}
+      renderTags={(val, getTagProps) =>
+        (Array.isArray(val) ? val : []).map((opt, idx) => (
+          <Chip
+            key={opt?.id || idx}
+            label={getNested(opt, labelField)}
+            {...getTagProps({ index: idx })}
+          />
+        ))
+      }
+      renderGroup={(p) => (
+        <li key={p.key}>
+          <GroupHeader>{p.group}</GroupHeader>
+          <GroupItems>{p.children}</GroupItems>
+        </li>
+      )}
+    />
+  );
+});
+
+export default UniversalAutocomplete;