drf-react-by-schema 0.3.0 → 0.3.1

package/src/components/DataGridBySchemaEditable.tsx

@@ -1,758 +0,0 @@
-import React, { useEffect, useState, useRef, forwardRef } from 'react';
-import moment from 'moment';
-import {
-    DataGrid,
-    GridEditInputCell,
-    GridRowModes,
-    GridActionsCellItem,
-    gridStringOrNumberComparator,
-    GridRowId
-} from '@mui/x-data-grid';
-import * as Yup from 'yup';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-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 Snackbar from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert';
-
-import { Layout } from '../styles';
-import { getAutoComplete } from '../api';
-import {
-    Item,
-    SchemaType,
-    Choice,
-    Id,
-    GridEnrichedBySchemaColDef,
-    isTmpId,
-    emptyByType,
-    buildGenericYupValidationSchema,
-    ItemSchemaColumnsType
-} from '../utils';
-import { SxProps } from '@mui/material';
-import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaContext';
-import { quantityOnlyOperators } from './DataGridBySchemaEditable/utils';
-import { CustomToolbar } from './DataGridBySchemaEditable/CustomToolbar';
-import { SelectEditInputCell } from './DataGridBySchemaEditable/SelectEditInputCell';
-import { GridDecimalInput } from './DataGridBySchemaEditable/GridDecimalInput';
-import { GridPatternInput } from './DataGridBySchemaEditable/GridPatternInput';
-import { FooterToolbar } from './DataGridBySchemaEditable/FooterToolbar';
-import { ConfirmDialog } from './DataGridBySchemaEditable/ConfirmDialog';
-import { APIWrapperContext } from '../context/APIWrapperContext';
-
-const stringMask = require('string-mask');
-
-interface DataGridBySchemaEditableProps {
-    schema: SchemaType;
-    data: Item[];
-    columns: GridEnrichedBySchemaColDef[];
-    model: string;
-    fieldKey?: string;
-    labelKey?: string;
-    index?: number;
-    name?: string;
-    indexField?: string;
-    addExistingModel?: string;
-    indexFieldMinWidth?: number;
-    indexFieldBasePath?: string;
-    stateToLink?: object;
-    minWidth?: number;
-    
-    modelParentId?: Id;
-    modelParent?: string;
-    
-    customColumnOperations?: (p: any) => GridEnrichedBySchemaColDef;
-    customLinkDestination?: (p: any) => string;
-    LinkComponent?: any;
-    onProcessRow?: (p: any) => void;
-    onDataChange?: (p: any) => void;
-    isEditable?: boolean;
-    sx?: SxProps;
-    isAutoHeight?: boolean;
-    defaultValues?: Item;
-    hideFooterPagination?: boolean;
-    setVisibleRows?: (p: any) => void;
-};
-
-const DataGridBySchemaEditable = forwardRef((
-    {
-        schema,
-        data,
-        columns,
-        model,
-        fieldKey,
-        labelKey = 'nome',
-        index,
-        name = Math.floor(Math.random() * 1000000).toString(),
-        indexField = 'nome',
-        addExistingModel,
-        indexFieldMinWidth = 350,
-        indexFieldBasePath = '',
-        stateToLink = {},
-        minWidth = 80,
-        modelParent,
-        modelParentId,
-        customColumnOperations,
-        customLinkDestination,
-        LinkComponent,
-        onProcessRow,
-        onDataChange,
-        isEditable = false,
-        sx = { mr: 2 },
-        isAutoHeight = false,
-        defaultValues = {},
-        hideFooterPagination = false,
-        setVisibleRows,
-        ...other
-    }: DataGridBySchemaEditableProps,
-    ref
-) => {
-    const { serverEndPoint } = DRFReactBySchemaContext
-        ? React.useContext(DRFReactBySchemaContext) as DRFReactBySchemaContextType
-        : { serverEndPoint: null };
-
-    const apiContext = React.useContext(APIWrapperContext);
-
-    const initialSnackBar:Item = {
-        open: false,
-        msg: '',
-        severity: 'info'
-    };
-    const [snackBar, setSnackBar] = useState(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({ model: col.field, serverEndPoint });
-                if (options) {
-                    optionsAC.current[col.field] = options;
-                    continue;
-                }
-                console.log(`Couldn't load autocomplete options from '${col.field}'`);
-                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({ model: addExistingModel, serverEndPoint });
-                if (options) {
-                    optionsAC.current[col.field] = options;
-                    continue;
-                }
-                if (!(col.field in optionsAC.current)) {
-                    delete optionsAC.current[col.field];
-                }
-            }
-        }
-    };
-
-    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 (LinkComponent && customLinkDestination) {
-                            return (
-                                <LinkComponent to={`${customLinkDestination(params)}`} state={stateToLink}>
-                                    {params.formattedValue}
-                                </LinkComponent>
-                            );
-                        }
-
-                        if (
-                            !LinkComponent ||
-                            !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 (
-                            <LinkComponent to={`${indexFieldBasePath}${targetId}`} state={stateToLink}>
-                                {params.formattedValue}
-                            </LinkComponent>
-                        );
-                    };
-                    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(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 = () => {
-        if (idToRemove.current === null) {
-            setDialogOpen(false);
-            return;
-        }
-        const newData = dataGrid.data.filter(row => row.id !== idToRemove.current);
-        setDataGrid({
-            ...dataGrid,
-            data: newData
-        });
-        if (modelParent && modelParentId && apiContext) {
-            apiContext.onDeleteRelatedModel({
-                model: modelParent,
-                id: modelParentId,
-                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 (modelParent && modelParentId && apiContext) {
-            const response = await apiContext.onEditRelatedModelSave({
-                model: modelParent,
-                id: modelParentId,
-                relatedModel: model,
-                relatedModelId: newRow.id,
-                newRow,
-                schema,
-                onlyAddExisting
-            });
-
-            const responseAsData = response as ItemSchemaColumnsType;
-            if (
-                (onlyAddExisting && typeof response != 'boolean') ||
-                (parseInt(response as string) && (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(response as string);
-                            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 newVisibleRows = Object.entries(state.filter.visibleRowsLookup)
-                                .filter(entry => { return entry[1] === true; })
-                                .map((entry:Item) => { return entry[0]; }) as GridRowId[];
-                            setVisibleRows(newVisibleRows);
-                        }
-                    }}
-                    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({ ...initialSnackBar, open: false }); }}
-                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-            >
-                <Alert severity={snackBar.severity}>
-                    {snackBar.msg}
-                </Alert>
-            </Snackbar>
-        </Box>
-    );
-});
-
-DataGridBySchemaEditable.displayName = 'DataGridBySchemaEditable';
-
-export default DataGridBySchemaEditable;