drf-react-by-schema 0.1.0 → 0.2.0

package/src/components/DataGridBySchemaEditable/ConfirmDialog.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+
+type FConfirmDialogProps = {
+    open: boolean,
+    onClose: (p: any) => void,
+    onConfirm: (p: any) => void
+};
+const FConfirmDialog = ({
+    open,
+    onClose,
+    onConfirm
+}: FConfirmDialogProps) => {
+    return (
+        <Dialog open={open} onClose={onClose}>
+            <DialogTitle>
+                Confirmar
+            </DialogTitle>
+            <DialogContent>
+                Tem certeza de que você quer remover este item?
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    onClick={onClose}
+                >
+                        Cancelar
+                </Button>
+                <Button
+                    onClick={onConfirm}
+                >
+                    Remover
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+export const ConfirmDialog = React.memo(FConfirmDialog);

package/src/components/DataGridBySchemaEditable/CustomToolbar.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import {
+    useGridApiContext,
+    GridToolbarContainer,
+    GridToolbarColumnsButton,
+    GridToolbarFilterButton,
+    GridToolbarDensitySelector,
+    GridToolbarExport,
+    GridToolbarQuickFilter
+} from '@mui/x-data-grid';
+import Button from '@mui/material/Button';
+import ExpandIcon from '@mui/icons-material/Expand';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+import { GridEnrichedBySchemaColDef } from '../../utils';
+import { resizeColumns } from './utils';
+
+type CustomToolbarProps = {
+    preparedColumns: GridEnrichedBySchemaColDef[],
+    setPreparedColumns: (p:null | GridEnrichedBySchemaColDef[]) => void
+};
+
+/**
+ *
+ *
+ * @param {CustomToolbarProps} {
+ *     preparedColumns,
+ *     setPreparedColumns
+ * }
+ * @returns Custom Toolbar for the grid
+ */
+export const CustomToolbar = ({
+    preparedColumns,
+    setPreparedColumns
+}:CustomToolbarProps) => {
+    const apiRef = useGridApiContext();
+    const [resizeMenuAnchorEl, setResizeMenuAnchorEl] = useState<any>(null);
+    const isResizeMenuOpen = Boolean(resizeMenuAnchorEl);
+    const openResizeMenu = (event:React.MouseEvent) => {
+        setResizeMenuAnchorEl(event.currentTarget);
+    };
+    const closeResizeMenu = () => {
+        setResizeMenuAnchorEl(null);
+    };
+    return (
+        <GridToolbarContainer sx={{ justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                <GridToolbarColumnsButton sx={{ ml: '10px', fontSize: '13px' }} />
+                <GridToolbarFilterButton sx={{ ml: '10px', fontSize: '13px' }} />
+                <GridToolbarDensitySelector sx={{ ml: '10px', fontSize: '13px' }} />
+                <Button onClick={openResizeMenu} sx={{ ml: '0px', fontSize: '13px' }}>
+                    <ExpandIcon sx={{ transform: 'rotate(90deg)', mr: '6px' }} />
+                    Ajustar
+                </Button>
+                <Menu
+                    anchorEl={resizeMenuAnchorEl}
+                    open={isResizeMenuOpen}
+                    onClose={closeResizeMenu}
+                >
+                    <MenuItem
+                        onClick={() => {
+                            closeResizeMenu();
+                            setPreparedColumns(resizeColumns(
+                                preparedColumns,
+                                'fitScreen',
+                                apiRef
+                            ));
+                        }}
+                    >
+                        Ajustar à tela
+                    </MenuItem>
+                    <MenuItem
+                        onClick={() => {
+                            closeResizeMenu();
+                            setPreparedColumns(resizeColumns(
+                                preparedColumns,
+                                'maxContent',
+                                apiRef
+                            ));
+                        }}
+                    >
+                        Ajustar ao conteúdo
+                    </MenuItem>
+                </Menu>
+                <GridToolbarExport sx={{ ml: '0px', fontSize: '13px' }} />
+            </div>
+            <div>
+                <GridToolbarQuickFilter />
+            </div>
+        </GridToolbarContainer>
+    );
+};

package/src/components/DataGridBySchemaEditable/FooterToolbar.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+    GridRowModes,
+    GridFooterContainer,
+    GridFooter
+} from '@mui/x-data-grid';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+
+import { getTmpId, Item } from '../../utils';
+
+type FooterToolbarProps = {
+    name: string,
+    setRowModesModel: (p:any) => any,
+    dataGrid: { data:Item[] },
+    setDataGrid: (p:any) => any,
+    emptyItem: { current:Record<string, any> },
+    indexField: string,
+    isEditable: boolean
+};
+
+export const FooterToolbar = ({
+    name,
+    setRowModesModel,
+    dataGrid,
+    setDataGrid,
+    emptyItem,
+    indexField,
+    isEditable
+}:FooterToolbarProps) => {
+    const handleClick = () => {
+        const id = getTmpId();
+        emptyItem.current.id = id;
+        const newData = [
+            { ...emptyItem.current },
+            ...dataGrid.data
+        ];
+        setDataGrid({
+            data: newData
+        });
+        setRowModesModel((oldModel:any) => ({
+            ...oldModel,
+            [id]: { mode: GridRowModes.Edit, fieldToFocus: indexField }
+        }));
+        // Ugly hack to scroll to top, since scroll to cell is only available in Pro
+        const el = document.querySelector(`.dataGrid_${name} .MuiDataGrid-virtualScroller`);
+        // console.log(el, name);
+        if (el) {
+            el.scrollTop = 0;
+            setTimeout(() => {
+                el.scrollTop = 0;
+            }, 10);
+        }
+    };
+
+    return (
+        <GridFooterContainer>
+            {isEditable &&
+                <Button
+                    color="primary"
+                    startIcon={<AddIcon />}
+                    onClick={handleClick}
+                    sx={{ ml: 2 }}
+                >
+                    Adicionar
+                </Button>
+            }
+            <GridFooter
+                sx={
+                    (isEditable)
+                        ? { border: 'none' }
+                        : { width: '100%' }
+                }
+            />
+        </GridFooterContainer>
+    );
+};

package/src/components/DataGridBySchemaEditable/GridDecimalInput.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useGridApiContext } from '@mui/x-data-grid';
+import { NumericFormat } from 'react-number-format';
+import TextField from '@mui/material/TextField';
+
+type GridDecimalInputProps = {
+    field: string,
+    id: number | string,
+    value?: any,
+    column: object
+};
+export const GridDecimalInput = ({
+    id,
+    value,
+    field
+}:GridDecimalInputProps) => {
+    const apiRef = useGridApiContext();
+    const decimalScale = 2;
+    const disableCurrency = true;
+    const handleChange = async (newValue:any) => {
+        await apiRef.current.setEditCellValue({ id, field, value: newValue });
+        apiRef.current.stopCellEditMode({ id, field });
+    };
+    return (
+        <NumericFormat
+            key={field}
+            id={field}
+            onValueChange={(values, sourceInfo) => {
+                handleChange(values.value);
+            }}
+            value={value}
+            thousandSeparator='.'
+            decimalSeparator=','
+            decimalScale={decimalScale}
+            fixedDecimalScale={true}
+            valueIsNumericString
+            prefix={disableCurrency ? '' : 'R$ '}
+            customInput={TextField}
+        />
+    );
+};

package/src/components/DataGridBySchemaEditable/GridPatternInput.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useGridApiContext } from '@mui/x-data-grid';
+import { PatternFormat } from 'react-number-format';
+import TextField from '@mui/material/TextField';
+
+type GridPatternInputProps = {
+    field: string,
+    id: number | string,
+    value?: any,
+    patternFormat?: string
+};
+export const GridPatternInput = ({
+    id,
+    value,
+    field,
+    patternFormat = 'cpf'
+}:GridPatternInputProps) => {
+    const apiRef = useGridApiContext();
+    const handleChange = async (newValue:any) => {
+        await apiRef.current.setEditCellValue({ id, field, value: newValue });
+        apiRef.current.stopCellEditMode({ id, field });
+    };
+    return (
+        <PatternFormat
+            key={field}
+            id={field}
+            onValueChange={(values, sourceInfo) => {
+                handleChange(values.value);
+            }}
+            value={value}
+            valueIsNumericString
+            format={patternFormat}
+            mask="_"
+            customInput={TextField}
+        />
+    );
+};

package/src/components/DataGridBySchemaEditable/InputInterval.tsx

@@ -0,0 +1,194 @@
+import React, { useRef } from 'react';
+import Box from '@mui/system/Box';
+import TextField from '@mui/material/TextField';
+import { NumericFormat } from 'react-number-format';
+import SyncIcon from '@mui/icons-material/Sync';
+
+const SUBMIT_FILTER_STROKE_TIME = 500;
+type InputIntervalProps = {
+    applyValue: (p: any) => void,
+    focusElementRef?: null | ((p: any) => void) | {
+        current: any
+    },
+    item: {
+        columnField: string,
+        id: number | string,
+        operatorValue: string,
+        value: any
+    },
+    type: string
+};
+const InputInterval = ({
+    item,
+    applyValue,
+    focusElementRef = null,
+    type
+}:InputIntervalProps) => {
+    const filterTimeout = useRef<any>();
+    const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+
+    const [applying, setIsApplying] = React.useState(false);
+
+    React.useEffect(() => {
+        return () => {
+            clearTimeout(filterTimeout.current);
+        };
+    }, []);
+
+    React.useEffect(() => {
+        const itemValue = item.value ?? [undefined, undefined];
+        setFilterValueState(itemValue);
+    }, [item.value]);
+
+    const updateFilterValue = (lowerBound:any, upperBound:any) => {
+        clearTimeout(filterTimeout.current);
+        setFilterValueState([lowerBound, upperBound]);
+
+        setIsApplying(true);
+        filterTimeout.current = setTimeout(() => {
+            setIsApplying(false);
+            applyValue({ ...item, value: [lowerBound, upperBound] });
+        }, SUBMIT_FILTER_STROKE_TIME);
+    };
+
+    const handleUpperFilterChange = (event:React.ChangeEvent<HTMLInputElement> | { target: { value: string }}) => {
+        const newUpperBound = event.target?.value;
+        updateFilterValue(filterValueState[0], newUpperBound);
+    };
+    const handleLowerFilterChange = (event:React.ChangeEvent<HTMLInputElement> | { target: { value: string }}) => {
+        const newLowerBound = event.target?.value;
+        updateFilterValue(newLowerBound, filterValueState[1]);
+    };
+
+    return (
+        <Box
+            sx={{
+                display: 'inline-flex',
+                flexDirection: 'row',
+                alignItems: 'end',
+                height: 48,
+                pl: '20px'
+            }}
+        >
+            {type === 'number' &&
+                <>
+                    <TextField
+                        name="lower-bound-input"
+                        placeholder="De"
+                        label="De"
+                        variant="standard"
+                        value={Number(filterValueState[0])}
+                        onChange={handleLowerFilterChange}
+                        type="number"
+                        inputRef={focusElementRef}
+                        sx={{ mr: 2, minWidth: 130 }}
+                    />
+                    <TextField
+                        name="upper-bound-input"
+                        placeholder="Até"
+                        label="Até"
+                        variant="standard"
+                        value={Number(filterValueState[1])}
+                        onChange={handleUpperFilterChange}
+                        type="number"
+                        sx={{ minWidth: 130 }}
+                        InputProps={applying ? { endAdornment: <SyncIcon /> } : {}}
+                    />
+                </>
+            }
+            {type === 'float' &&
+                <>
+                    <NumericFormat
+                        name="lower-bound-input"
+                        placeholder="De"
+                        label="De"
+                        variant="standard"
+                        value={Number(filterValueState[0])}
+                        onValueChange={(values, sourceInfo) => {
+                            handleLowerFilterChange({ target: { value: values.value } });
+                        }}
+                        thousandSeparator='.'
+                        decimalSeparator=','
+                        decimalScale={2}
+                        fixedDecimalScale={true}
+                        valueIsNumericString
+                        inputRef={focusElementRef}
+                        sx={{ mr: 2, minWidth: 130 }}
+                        customInput={TextField}
+                    />
+                    <NumericFormat
+                        name="upper-bound-input"
+                        placeholder="Até"
+                        label="Até"
+                        variant="standard"
+                        value={Number(filterValueState[1])}
+                        onValueChange={(values, sourceInfo) => {
+                            handleUpperFilterChange({ target: { value: values.value } });
+                        }}
+                        thousandSeparator='.'
+                        decimalSeparator=','
+                        decimalScale={2}
+                        fixedDecimalScale={true}
+                        valueIsNumericString
+                        InputProps={applying ? { endAdornment: <SyncIcon /> } : {}}
+                        sx={{ minWidth: 130 }}
+                        customInput={TextField}
+                    />
+                </>
+            }
+            {type === 'date' &&
+                <>
+                    <TextField
+                        name="lower-bound-input"
+                        label="De"
+                        variant="standard"
+                        value={filterValueState[0] || ''}
+                        onChange={handleLowerFilterChange}
+                        type="date"
+                        inputRef={focusElementRef}
+                        InputLabelProps={{ shrink: true }}
+                        sx={{ mr: 2, minWidth: 130 }}
+                    />
+                    <TextField
+                        name="upper-bound-input"
+                        label="Até"
+                        variant="standard"
+                        value={filterValueState[1] || ''}
+                        onChange={handleUpperFilterChange}
+                        type="date"
+                        InputProps={applying ? { endAdornment: <SyncIcon /> } : {}}
+                        InputLabelProps={{ shrink: true }}
+                        sx={{ minWidth: 130 }}
+                    />
+                </>
+            }
+        </Box>
+    );
+};
+
+export const InputNumberInterval = (props: any) => {
+    return (
+        <InputInterval
+            {...props}
+            type="number"
+        />
+    );
+};
+
+export const InputDateInterval = (props: any) => {
+    return (
+        <InputInterval
+            {...props}
+            type="date"
+        />
+    );
+}
+
+export const InputFloatInterval = (props: any) => {
+    return (
+        <InputInterval
+            {...props}
+            type="float"
+        />
+    );
+};

package/src/components/DataGridBySchemaEditable/SelectEditInputCell.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { useGridApiContext } from '@mui/x-data-grid';
+import { SxProps } from '@mui/material';
+import TextField from '@mui/material/TextField';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+
+import { getTmpId } from '../../utils';
+import { GridEnrichedBySchemaColDef, Item } from '../../utils';
+
+const filter = createFilterOptions();
+
+type SelectEditInputCellProps = {
+    field: string,
+    id: number | string,
+    value?: any,
+    column: GridEnrichedBySchemaColDef,
+    type: string,
+    optionsAC: { current: Record<string, Item[]> | null },
+    isIndexField: boolean,
+    multiple?: boolean,
+    sx?: SxProps
+};
+
+/**
+ *
+ *
+ * @param {SelectEditInputCellProps} {
+ *     field,
+ *     id,
+ *     value,
+ *     column,
+ *     type,
+ *     optionsAC,
+ *     isIndexField,
+ *     multiple = false,
+ *     sx = {}
+ * }
+ * @returns {*}  {JSX.Element}
+ */
+export function SelectEditInputCell ({
+    field,
+    id,
+    value,
+    column,
+    type,
+    optionsAC,
+    isIndexField,
+    multiple = false,
+    sx = {}
+}: SelectEditInputCellProps): JSX.Element {
+    // TODO: allow edit option label, as in formautocomplete!
+    const apiRef = useGridApiContext();
+
+    const handleChange = async (newValue:any) => {
+        await apiRef.current.setEditCellValue({ id, field, value: newValue });
+        apiRef.current.stopCellEditMode({ id, field });
+    };
+
+    const labelKey = (['field', 'nested object'].includes(type) || isIndexField)
+        ? 'label'
+        : 'display_name';
+    const valueKey = (['field', 'nested object'].includes(type) || isIndexField)
+        ? 'id'
+        : 'value';
+
+    let creatableProps = {};
+    if (column.creatable || isIndexField) {
+        creatableProps = {
+            freesolo: 'true',
+            filterOptions: (options:Record<string, any>[], params:any) => {
+                const filtered = filter(options, params);
+                const inputValue = (params.inputValue)
+                    ? params.inputValue
+                    : '';
+                const inputValueLower = inputValue.trim().toLowerCase();
+                // Suggest the creation of a new value
+                const isExisting = options.some(option => inputValueLower === option[labelKey].trim().toLowerCase());
+                if (inputValue !== '' && !isExisting) {
+                    filtered.push({
+                        inputValue,
+                        [labelKey]: `Criar "${inputValue}"`
+                    });
+                }
+                return filtered;
+            },
+            handleHomeEndKeys: true,
+            getOptionLabel: (option:string | Record<string, any>) => {
+                // Value selected with enter, right from the input
+                if (typeof option === 'string') {
+                    return option;
+                }
+                // Criar "xxx" option created dynamically
+                if (option.inputValue) {
+                    return option.inputValue;
+                }
+                // Regular option
+                return option[labelKey];
+            },
+            renderOption: (props:any, option:Record<string, any>) => {
+                return (<li key={option[valueKey]} {...props}>{option[labelKey]}</li>);
+            }
+        };
+    };
+
+    return (
+        <Autocomplete
+            key={field}
+            id={field}
+            value={value}
+            options={optionsAC.current && optionsAC.current[field] ? optionsAC.current[field] : []}
+            selectOnFocus
+            autoHighlight
+            multiple={multiple}
+            isOptionEqualToValue={(option, value) => {
+                return (option[labelKey] === value[labelKey]);
+            }}
+            getOptionLabel={(option) => {
+                return option[labelKey];
+            }}
+            onChange={(e, value) => {
+                if (!column.creatable && !isIndexField) {
+                    handleChange(value);
+                    return;
+                }
+                let newValue = value;
+                if (typeof newValue === 'string') {
+                    const tmpId = getTmpId();
+                    newValue = {
+                        [valueKey]: tmpId,
+                        [labelKey]: newValue
+                    };
+                }
+                if (newValue && newValue.inputValue) {
+                    const tmpId = getTmpId();
+                    newValue = {
+                        [valueKey]: tmpId,
+                        [labelKey]: newValue.inputValue
+                    };
+                }
+                handleChange(newValue);
+            }}
+            fullWidth
+            renderInput={params => (
+                <TextField
+                    {...params}
+                    sx={sx}
+                />
+            )}
+
+            {...creatableProps}
+        />
+    );
+}