drf-react-by-schema 0.0.1 → 0.1.0

package/src/components/DataGridBySchemaEditable.tsx

@@ -0,0 +1,1401 @@
+import React, { useEffect, useState, useReducer, useRef } from 'react';
+import moment from 'moment';
+// import Mask from 'string-mask';
+import {
+    GridApi,
+    DataGrid,
+    GridEditInputCell,
+    GridRowModes,
+    GridToolbarContainer,
+    GridToolbarColumnsButton,
+    GridToolbarFilterButton,
+    GridToolbarDensitySelector,
+    GridToolbarExport,
+    GridToolbarQuickFilter,
+    GridFooter,
+    GridFooterContainer,
+    GridActionsCellItem,
+    gridVisibleSortedRowIdsSelector,
+    useGridApiContext,
+    gridStringOrNumberComparator,
+    getGridNumericOperators,
+    getGridDateOperators,
+    GridFilterOperator
+} from '@mui/x-data-grid';
+import * as Yup from 'yup';
+import { Link } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import SyncIcon from '@mui/icons-material/Sync';
+import ExpandIcon from '@mui/icons-material/Expand';
+import AddIcon from '@mui/icons-material/Add';
+import EditIcon from '@mui/icons-material/Edit';
+import ClearIcon from '@mui/icons-material/Clear';
+import CheckIcon from '@mui/icons-material/Check';
+import UndoIcon from '@mui/icons-material/Undo';
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+import { NumericFormat, PatternFormat } from 'react-number-format';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+
+import { Layout } from '../styles';
+import { getAutoComplete } from '../api';
+import {
+    Item,
+    Schema,
+    Choice,
+    Id,
+    GridEnrichedBySchemaColDef,
+    reducer,
+    getTmpId,
+    isTmpId,
+    emptyByType,
+    buildGenericYupValidationSchema
+} from '../utils';
+import { SxProps } from '@mui/material';
+import { ObjectShape } from 'yup/lib/object';
+
+const filter = createFilterOptions();
+const stringMask = require('string-mask');
+
+// returns width of the biggest row inside a column
+function maxOfCol (colIndex: number) {
+    const invisibleContainer = document.createElement('div');
+
+    invisibleContainer.style.visibility = 'hidden';
+    invisibleContainer.style.zIndex = '-9999999999';
+    invisibleContainer.style.position = 'absolute';
+    invisibleContainer.style.fontSize = '14px';
+    invisibleContainer.style.top = '0';
+    invisibleContainer.style.left = '0';
+    document.body.append(invisibleContainer);
+    const widths: any[] = [];
+    document.querySelectorAll(
+        `[aria-colindex='${colIndex}']`
+    ).forEach(cell => {
+        const invisibleCell = document.createElement('div');
+        invisibleCell.innerHTML = cell.innerHTML;
+        invisibleCell.style.width = 'max-content';
+        invisibleCell.style.maxWidth = 'none';
+        invisibleCell.style.minWidth = 'none';
+        invisibleContainer.append(invisibleCell);
+        widths.push(Math.ceil(invisibleCell.clientWidth));
+    });
+    let max = Math.max(...widths);
+    if (max !== 0 && max < 50) {
+        max = 50;
+    }
+    invisibleContainer.remove();
+    return max;
+}
+
+type ResizeType = 'condense' | 'maxContent' | 'fitScreen';
+
+function resizeColumns (
+    columns: GridEnrichedBySchemaColDef[],
+    resizeType: ResizeType,
+    apiRef: React.MutableRefObject<GridApi>
+) {
+    const cols = [...columns];
+    cols.forEach((col, index: number) => {
+        if (resizeType === 'fitScreen') {
+            delete col.width;
+            col.minWidth = 80;
+            if (col.isIndexField) {
+                col.flex = 1;
+            }
+        } else if (resizeType === 'maxContent') {
+            const maxColWidth = maxOfCol(index);
+            delete col.flex;
+            delete col.minWidth;
+            col.width = maxColWidth + 22;
+        } else {
+            col.width = 0;
+        }
+    });
+    return cols;
+}
+
+type CustomToolbarProps = {
+    preparedColumns: GridEnrichedBySchemaColDef[],
+    setPreparedColumns: (p:null | GridEnrichedBySchemaColDef[]) => void
+};
+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>
+    );
+};
+
+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
+};
+function SelectEditInputCell ({
+    id,
+    value,
+    field,
+    column,
+    type,
+    optionsAC,
+    isIndexField,
+    multiple = false,
+    sx = {}
+}: SelectEditInputCellProps) {
+    // 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}
+        />
+    );
+}
+
+type GridDecimalInputProps = {
+    field: string,
+    id: number | string,
+    value?: any,
+    column: object
+};
+function 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}
+        />
+    );
+}
+
+type GridPatternInputProps = {
+    field: string,
+    id: number | string,
+    value?: any,
+    patternFormat?: string
+};
+function 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}
+        />
+    );
+}
+
+type FooterToolbarProps = {
+    name: string,
+    setRowModesModel: (p:any) => any,
+    dataGrid: { data:Record<string, any>[] },
+    setDataGrid: (p:any) => any,
+    emptyItem: { current:Record<string, any> },
+    indexField: string,
+    isEditable: boolean
+};
+function 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>
+    );
+}
+
+
+// FILTROS "ENTRE":
+
+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
+};
+function 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>
+    );
+}
+
+function InputNumberInterval (props: any) {
+    return (
+        <InputInterval
+            {...props}
+            type="number"
+        />
+    );
+}
+function InputDateInterval (props: any) {
+    return (
+        <InputInterval
+            {...props}
+            type="date"
+        />
+    );
+}
+function InputFloatInterval (props: any) {
+    return (
+        <InputInterval
+            {...props}
+            type="float"
+        />
+    );
+}
+
+const quantityOnlyOperators = ({ type }:{ type: string }) => {
+    const builtInFilters = (type === 'date')
+        ? getGridDateOperators()
+        : getGridNumericOperators();
+    let InputComponent = InputNumberInterval;
+    if (type === 'date') {
+        InputComponent = InputDateInterval;
+    }
+    if (type === 'float') {
+        InputComponent = InputFloatInterval;
+    }
+    return [
+        ...builtInFilters,
+        {
+            label: 'entre',
+            value: 'entre',
+            getApplyFilterFn: (filterItem: any) => {
+                if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
+                    return null;
+                }
+                if (filterItem.value[0] === null || filterItem.value[1] === null) {
+                    return null;
+                }
+
+                return ({ value }: { value: any }) => {
+                    return (
+                        value !== null &&
+                        filterItem.value[0] <= value &&
+                        value <= filterItem.value[1]
+                    );
+                };
+            },
+            InputComponent
+        }
+    ] as GridFilterOperator[];
+};
+
+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>
+    );
+}
+const ConfirmDialog = React.memo(FConfirmDialog);
+
+type DataGridBySchemaEditableProps = {
+    schema: Schema,
+    data: Item[],
+    columns: GridEnrichedBySchemaColDef[],
+    model: string,
+    fieldKey?: string,
+    labelKey?: string,
+    index?: number,
+    name?: string,
+    updateUrl: string,
+    indexField?: string,
+    addExistingModel?: string,
+    indexFieldMinWidth?: number,
+    indexFieldBasePath?: string,
+    stateToLink?: object,
+    minWidth?: number,
+    onEditRelatedModelSave?: (p: any) => Id | { data: Item } | { errors: Item },
+    onDeleteRelatedModel?: (p: any) => any,
+    customColumnOperations?: (p: any) => GridEnrichedBySchemaColDef,
+    customLinkDestination?: (p: any) => string,
+    onProcessRow?: (p: any) => void,
+    onDataChange?: (p: any) => void,
+    isEditable?: boolean,
+    sx?: SxProps,
+    isAutoHeight?: boolean,
+    defaultValues?: Item,
+    hideFooterPagination?: boolean,
+    setVisibleRows?: (p: any) => void
+};
+const DataGridBySchemaEditable = React.forwardRef((
+    {
+        schema,
+        data,
+        columns,
+        model,
+        fieldKey,
+        labelKey = 'nome',
+        index,
+        name = Math.floor(Math.random() * 1000000).toString(),
+        updateUrl,
+        indexField = 'nome',
+        addExistingModel,
+        indexFieldMinWidth = 350,
+        indexFieldBasePath = '',
+        stateToLink = {},
+        minWidth = 80,
+        onEditRelatedModelSave,
+        onDeleteRelatedModel,
+        customColumnOperations,
+        customLinkDestination,
+        onProcessRow,
+        onDataChange,
+        isEditable = false,
+        sx = { mr: 2 },
+        isAutoHeight = false,
+        defaultValues = {},
+        hideFooterPagination = false,
+        setVisibleRows,
+        ...other
+    }: DataGridBySchemaEditableProps,
+    ref
+) => {
+    const initialSnackBar = {
+        open: false,
+        msg: '',
+        severity: 'info'
+    };
+    const [snackBar, setSnackBar] = useReducer(reducer, initialSnackBar);
+    const [dataGrid, setDataGrid] = useState<{ data: Item[] }>({ data: [] });
+    const [preparedColumns, setPreparedColumns] = useState<null | GridEnrichedBySchemaColDef[]>(null);
+    const [dataGridLoading, setDataGridLoading] = useState(false);
+    const [rowModesModel, setRowModesModel] = useState<Record<string, any>>({});
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const optionsAC = useRef<Record<string, Item[]> | null>(null);
+    const emptyItem = useRef<Item>({});
+    const yupValidationSchema = useRef<Yup.AnySchema | null>(null);
+    const processingRow = useRef<number | string | null>(null);
+    const idToRemove = useRef<Id | null>(null);
+
+    const updateOptionsAC = async () => {
+        optionsAC.current = {};
+        for (const col of columns) {
+            if (!schema[col.field]) {
+                continue;
+            }
+            if (['field', 'nested object'].includes(schema[col.field].type) && !(col.field in optionsAC.current)) {
+                const options = await getAutoComplete(col.field);
+                optionsAC.current[col.field] = options;
+                continue;
+            }
+            if (schema[col.field].type === 'choice' && !(col.field in optionsAC.current)) {
+                optionsAC.current[col.field] = schema[col.field].choices as Choice[];
+                continue;
+            }
+            if (col.field === indexField && addExistingModel && !optionsAC.current[col.field]) {
+                const options = await getAutoComplete(addExistingModel);
+                optionsAC.current[col.field] = options;
+            }
+        }
+    };
+
+    const initColumns = () => {
+        let cols:GridEnrichedBySchemaColDef[] = [];
+        if (isEditable) {
+            cols.push({
+                field: 'actions',
+                headerName: '',
+                type: 'actions',
+                getActions: ({ id }: { id: Id }) => {
+                    const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
+                    if (isInEditMode) {
+                        return [
+                            <GridActionsCellItem
+                                key={`save_${id}`}
+                                icon={<CheckIcon />}
+                                label="Salvar"
+                                onClick={handleSaveClick(id)}
+                                color="success"
+                            />,
+                            <GridActionsCellItem
+                                key={`cancel_${id}`}
+                                icon={<UndoIcon />}
+                                label="Cancelar"
+                                onClick={handleCancelClick(id)}
+                                color="inherit"
+                            />
+                        ];
+                    }
+
+                    return [
+                        <GridActionsCellItem
+                            key={`edit_${id}`}
+                            icon={<EditIcon />}
+                            label="Edit"
+                            onClick={handleEditClick(id)}
+                            color="inherit"
+                        />,
+                        <GridActionsCellItem
+                            key={`remove_${id}`}
+                            icon={<ClearIcon />}
+                            label="Delete"
+                            onClick={handleDeleteClick(id)}
+                            color="error"
+                        />
+                    ];
+                }
+            });
+        }
+        cols = [...cols, ...columns];
+        cols = cols.map(col => {
+            if (!schema[col.field]) {
+                return col;
+            }
+            const isIndexField = (indexField !== '' && (col.field === indexField));
+            let column = col;
+            if (isIndexField) {
+                col.isIndexField = true;
+            }
+            column.editable = (isEditable) && (
+                !schema[col.field].read_only || ['field', 'nested object'].includes(schema[col.field].type)
+            );
+            switch (schema[col.field].type) {
+            case 'date':
+                column.type = 'date';
+                column.valueFormatter = params => params.value
+                    ? moment(params.value).format('DD/MM/YYYY')
+                    : '';
+                column.filterOperators = quantityOnlyOperators({ type: 'date' });
+                break;
+            case 'datetime':
+                column.type = 'dateTime';
+                column.minWidth = 180;
+                column.valueFormatter = params => params.value
+                    ? moment(params.value).format('DD/MM/YYYY HH:mm')
+                    : '';
+                break;
+            case 'nested object':
+                column.minWidth = 150;
+                if (isEditable) {
+                    column.valueFormatter = params => {
+                        return (!params.value) ? '' : params.value.label;
+                    };
+                    column.filterable = false;
+                    column.sortComparator = (v1, v2, param1, param2) => {
+                        return gridStringOrNumberComparator(v1.label, v2.label, param1, param2);
+                    };
+                    column.renderEditCell = (params) => <SelectEditInputCell
+                        {...params}
+                        column={column}
+                        type={schema[col.field].type}
+                        optionsAC={optionsAC}
+                        isIndexField={isIndexField}
+                    />;
+                    break;
+                }
+
+                column.valueGetter = params => {
+                    return (!params.value) ? '' : params.value.label;
+                };
+                break;
+            case 'field':
+                column.orderable = false;
+
+                if (isEditable) {
+                    column.minWidth = 300;
+                    column.valueFormatter = params => {
+                        return (!params.value || !Array.isArray(params.value))
+                            ? ''
+                            : params.value.map(val => val.label).join(', ');
+                    };
+                    column.filterable = false;
+                    column.renderEditCell = (params) => <SelectEditInputCell
+                        {...params}
+                        column={column}
+                        type={schema[col.field].type}
+                        optionsAC={optionsAC}
+                        isIndexField={isIndexField}
+                        multiple={true}
+                    />;
+                    break;
+                }
+
+                column.valueGetter = params => {
+                    return (!params.value || !Array.isArray(params.value))
+                        ? ''
+                        : params.value.map(val => val.label).join(', ');
+                };
+                break;
+            case 'choice':
+                if (isEditable) {
+                    column.minWidth = 150;
+                    column.valueFormatter = params => {
+                        return (!params.value) ? '' : params.value.display_name;
+                    };
+                    column.filterable = false;
+                    column.sortComparator = (v1, v2, param1, param2) => {
+                        return gridStringOrNumberComparator(v1.display_name, v2.display_name, param1, param2);
+                    };
+                    column.renderEditCell = (params) => <SelectEditInputCell
+                        {...params}
+                        column={column}
+                        type={schema[col.field].type}
+                        optionsAC={optionsAC}
+                        isIndexField={isIndexField}
+                    />;
+                    break;
+                }
+
+                column.valueGetter = params => {
+                    return (!params.value) ? '' : params.value.display_name;
+                };
+                break;
+            case 'decimal':
+            case 'float':
+                column.type = 'number';
+                column.valueFormatter = params => {
+                    return (!params.value)
+                        ? ''
+                        : parseFloat(params.value).toLocaleString('pt-BR', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2
+                        });
+                };
+                if (isEditable) {
+                    column.renderEditCell = (params) => <GridDecimalInput
+                        {...params}
+                        column={column}
+                    />;
+                }
+                column.filterOperators = quantityOnlyOperators({ type: 'float' });
+                break;
+            case 'number':
+            case 'integer':
+                column.type = 'number';
+                column.filterOperators = quantityOnlyOperators({ type: 'number' });
+                break;
+            }
+
+            if (indexFieldMinWidth && !column.minWidth) {
+                column.minWidth = (col.field === indexField) ? indexFieldMinWidth : minWidth;
+            }
+            if (indexField) {
+                if (col.field === indexField) {
+                    column.flex = 1;
+                    column.renderCell = params => {
+                        if (customLinkDestination) {
+                            return (
+                                <Link to={`${customLinkDestination(params)}`} state={stateToLink}>
+                                    {params.formattedValue}
+                                </Link>
+                            );
+                        }
+
+                        if (
+                            !indexFieldBasePath ||
+                            (
+                                ['field', 'nested object'].includes(schema[col.field].type) &&
+                                (!params.row[col.field] || !params.row[col.field].id)
+                            )
+                        ) {
+                            return (<>{params.formattedValue}</>);
+                        }
+
+                        const targetId = (['field', 'nested object'].includes(schema[col.field].type))
+                            ? params.row[col.field].id.toString()
+                            : params.row.id.toString();
+
+                        return (
+                            <Link to={`${indexFieldBasePath}${targetId}`} state={stateToLink}>
+                                {params.formattedValue}
+                            </Link>
+                        );
+                    };
+                    if (
+                        isEditable &&
+                        optionsAC.current &&
+                        col.field in optionsAC.current &&
+                        addExistingModel
+                    ) {
+                        column.renderEditCell = (params) => {
+                            if (!isTmpId(params.id)) {
+                                return (
+                                    <GridEditInputCell
+                                        {...params}
+                                    />
+                                );
+                            }
+                            return (
+                                <SelectEditInputCell
+                                    {...params}
+                                    column={column}
+                                    type={schema[col.field].type}
+                                    optionsAC={optionsAC}
+                                    isIndexField={true}
+                                />
+                            );
+                        };
+                    }
+                }
+            }
+
+            // Custom column operations:
+            if (customColumnOperations) {
+                column = customColumnOperations(column);
+            }
+
+            // format numbers:
+            if (column.patternFormat) {
+                column.valueFormatter = params => {
+                    if (!params.value || typeof params.value !== 'string') {
+                        return params.value;
+                    }
+                    const formattedValue = new stringMask.Mask(column.patternFormat, {}).apply(params.value);
+                    return formattedValue;
+                };
+                if (isEditable) {
+                    column.renderEditCell = params => <GridPatternInput
+                        {...params}
+                        patternFormat={column.patternFormat}
+                    />;
+                }
+            }
+
+            // Finally!
+            return column;
+        });
+        setPreparedColumns(cols);
+    };
+
+    const handleDialogClose = () => {
+        setDialogOpen(false);
+    };
+
+    const handleRowEditStart = (params: any, event: any) => {
+        event.defaultMuiPrevented = true;
+    };
+
+    const handleRowEditStop = (params: any, event: any) => {
+        event.defaultMuiPrevented = true;
+    };
+
+    const handleEditClick = (id: Id) => () => {
+        setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
+    };
+
+    const handleSaveClick = (id: Id) => () => {
+        setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
+    };
+
+    const handleDeleteClick = (id: Id) => () => {
+        idToRemove.current = id;
+        setDialogOpen(true);
+    };
+
+    const handleDeleteSave = () => {
+        const newData = dataGrid.data.filter(row => row.id !== idToRemove.current);
+        setDataGrid({
+            ...dataGrid,
+            data: newData
+        });
+        if (onDeleteRelatedModel) {
+            onDeleteRelatedModel({
+                relatedModel: model,
+                relatedModelId: idToRemove.current
+            });
+        }
+
+        // Reflect changes to the outside, for example for doing global calculations over multiple rows:
+        if (onDataChange) {
+            onDataChange(newData);
+        }
+        idToRemove.current = null;
+        setDialogOpen(false);
+    };
+
+    const handleCancelClick = (id: Id) => () => {
+        setRowModesModel({
+            ...rowModesModel,
+            [id]: { mode: GridRowModes.View, ignoreModifications: true }
+        });
+
+        const editedRow = dataGrid.data.find(row => row.id === id);
+        if (editedRow && editedRow.isNew) {
+            setDataGrid({
+                ...dataGrid,
+                data: dataGrid.data.filter(row => row.id !== id)
+            });
+        }
+    };
+
+    useEffect(() => {
+        if (!columns) {
+            setDataGrid({ data: [] });
+            return;
+        }
+
+        if (isEditable) {
+            for (const col of columns) {
+                if (schema[col.field].model_default) {
+                    emptyItem.current[col.field] = schema[col.field].model_default;
+                    continue;
+                }
+                if (Object.prototype.hasOwnProperty.call(defaultValues, col.field)) {
+                    emptyItem.current[col.field] = defaultValues[col.field];
+                    continue;
+                }
+                emptyItem.current[col.field] = (schema[col.field])
+                    ? emptyByType(schema[col.field])
+                    : null;
+            }
+        }
+
+        const skipFields = [];
+        if (indexField && addExistingModel) {
+            skipFields.push(indexField);
+        }
+        yupValidationSchema.current = buildGenericYupValidationSchema({
+            data: emptyItem.current,
+            schema,
+            skipFields
+        });
+
+        setDataGrid({
+            data
+        });
+    }, [data]);
+
+    useEffect(() => {
+        if (optionsAC.current) {
+            initColumns();
+            return;
+        }
+
+        updateOptionsAC().then(() => {
+            initColumns();
+        });
+    }, [rowModesModel]);
+
+    const processRowUpdate = async (newRow: Item) => {
+        if (!preparedColumns || !yupValidationSchema.current) {
+            return false;
+        }
+        setDataGridLoading(true);
+        const indexCol = preparedColumns.find(col => col.field === indexField);
+        processingRow.current = newRow.id;
+        await yupValidationSchema.current.validate(newRow);
+        const onlyAddExisting = (
+            indexField &&
+            isTmpId(newRow.id) &&
+            (newRow[indexField] && !isTmpId(newRow[indexField].id)) &&
+            (!indexCol || !indexCol.valueFormatter)
+        );
+        const createNewItem = (indexField && isTmpId(newRow.id) && newRow[indexField] && isTmpId(newRow[indexField].id));
+        if (onlyAddExisting) {
+            const row:Item = {};
+            row.id_to_add = newRow[indexField].id;
+            for (const [key, value] of Object.entries(newRow[indexField])) {
+                if (key === 'id') {
+                    row[key] = newRow.id;
+                    continue;
+                }
+                row[key] = value;
+            }
+            newRow = { ...row };
+        }
+        if (createNewItem && newRow[indexField]) {
+            if (newRow[indexField].inputValue) {
+                newRow[indexField] = newRow[indexField].inputValue;
+            }
+            if (addExistingModel) {
+                newRow[indexField] = newRow[indexField].label;
+            }
+        }
+
+        if (onEditRelatedModelSave) {
+            const response = await onEditRelatedModelSave({
+                relatedModel: model,
+                relatedModelId: newRow.id,
+                newRow,
+                schema,
+                onlyAddExisting
+            });
+
+            const responseAsId = response as 'number';
+            const responseAsData = response as { data: Item };
+            const responseAsErrors = response as { errors: Item }
+    
+            if (
+                (onlyAddExisting && !responseAsErrors.errors) ||
+                (parseInt(responseAsId) && (createNewItem || !onlyAddExisting))
+            ) {
+                updateOptionsAC();
+                const data = [...dataGrid.data];
+                for (const i in data) {
+                    if (data[i].id === newRow.id) {
+                        data[i] = onlyAddExisting ? responseAsData.data : newRow;
+                        if (isTmpId(newRow.id)) {
+                            const newId = parseInt(responseAsId);
+                            data[i].id = newId || responseAsData.data.id;
+                        }
+    
+                        // This is for cases where users want to do custom operations after saving the row,
+                        // like for example make calculations among columns.
+                        if (onProcessRow) {
+                            onProcessRow(data[i]);
+                        }
+    
+                        // Reflect the changes to the outside, for example for global calculations over all data
+                        if (onDataChange) {
+                            onDataChange(data);
+                        }
+    
+                        setDataGrid({ data });
+                        break;
+                    }
+                }
+                setDataGridLoading(false);
+                return newRow;
+            }
+        }
+        setDataGridLoading(false);
+        return false;
+    };
+
+    const customPaddings = (isAutoHeight)
+        ? {
+            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '8px' },
+            '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
+            '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' }
+        }
+        : undefined;
+
+    return (
+        <Box className={`dataGrid_${name}`} sx={{ height: '100%' }}>
+            {preparedColumns === null
+                ? <Box sx={Layout.loadingBox}>
+                    <CircularProgress />
+                </Box>
+                : <DataGrid
+                    rows={dataGrid.data}
+                    columns={preparedColumns}
+                    onStateChange={(state) => {
+                        if (setVisibleRows) {
+                            const newRows = gridVisibleSortedRowIdsSelector(state);
+                            setVisibleRows(newRows);
+                        }
+                    }}
+                    editMode="row"
+                    loading={dataGridLoading}
+                    hideFooterPagination={hideFooterPagination}
+                    getRowHeight={() => {
+                        if (isAutoHeight) {
+                            return 'auto';
+                        }
+                        return null;
+                    }}
+                    isCellEditable={params => (
+                        rowModesModel[params.row.id as string]?.mode === GridRowModes.Edit &&
+                        (
+                            !isTmpId(params.row.id) ||
+                            (
+                                isTmpId(params.row.id) &&
+                                (
+                                    params.field === indexField ||
+                                    !optionsAC.current ||
+                                    !Object.prototype.hasOwnProperty.call(optionsAC.current, indexField) ||
+                                    (
+                                        preparedColumns.find(col => col.field === indexField) &&
+                                        Object.prototype.hasOwnProperty.call(preparedColumns.find(col => col.field === indexField), 'valueFormatter')
+                                    )
+                                )
+                            )
+                        )
+                    ) as boolean}
+                    rowModesModel={rowModesModel}
+                    onRowEditStart={handleRowEditStart}
+                    onRowEditStop={handleRowEditStop}
+                    processRowUpdate={processRowUpdate}
+                    onProcessRowUpdateError={(e) => {
+                        setDataGridLoading(false);
+                        if (processingRow.current) {
+                            setRowModesModel({
+                                ...rowModesModel,
+                                [processingRow.current]: { mode: GridRowModes.Edit }
+                            });
+                        }
+                        const msg = `Erro em "${e.path}": ${e.errors}`;
+                        setSnackBar({
+                            open: true,
+                            severity: 'error',
+                            msg
+                        });
+                        console.log(e);
+                    }}
+                    components={{ Toolbar: CustomToolbar, Footer: FooterToolbar }}
+                    componentsProps={
+                        {
+                            toolbar: {
+                                preparedColumns,
+                                setPreparedColumns,
+                                showQuickFilter: true,
+                                quickFilterProps: { debounceMs: 500 }
+                            },
+                            footer: {
+                                name,
+                                setRowModesModel,
+                                dataGrid,
+                                setDataGrid,
+                                emptyItem,
+                                indexField,
+                                isEditable
+                            },
+                            filterPanel: {
+                                sx: {
+                                    '& .MuiDataGrid-filterFormValueInput': { width: 300 }
+                                }
+                            }
+                        }
+                    }
+                    experimentalFeatures={{ newEditingApi: isEditable }}
+                    sx={customPaddings}
+                />
+            }
+            <ConfirmDialog
+                open={dialogOpen}
+                onClose={handleDialogClose}
+                onConfirm={handleDeleteSave}
+            />
+            <Snackbar
+                open={snackBar.open}
+                autoHideDuration={5000}
+                onClose={() => { setSnackBar({ open: false }); }}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity={snackBar.severity}>
+                    {snackBar.msg}
+                </Alert>
+            </Snackbar>
+        </Box>
+    );
+});
+
+DataGridBySchemaEditable.displayName = 'DataGridBySchemaEditable';
+
+export default DataGridBySchemaEditable;