drf-react-by-schema 0.0.2 → 0.2.0

package/src/components/DataGridBySchemaEditable.tsx

@@ -0,0 +1,747 @@
+import React, { useEffect, useState, useRef, forwardRef } from 'react';
+// import moment from 'moment';
+// import Mask from 'string-mask';
+import {
+    DataGrid,
+    GridEditInputCell,
+    GridRowModes,
+    GridActionsCellItem,
+    gridVisibleSortedRowIdsSelector,
+    gridStringOrNumberComparator
+} 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
+} from '../utils';
+import { SxProps } from '@mui/material';
+import { ObjectShape } from 'yup/lib/object';
+import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaProvider';
+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';
+
+const stringMask = require('string-mask');
+const moment = require('moment');
+
+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;
+    onEditRelatedModelSave?: (p: any) => Id | { data: Item } | { errors: Item };
+    onDeleteRelatedModel?: (p: any) => any;
+    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,
+        onEditRelatedModelSave,
+        onDeleteRelatedModel,
+        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 initialSnackBar:Record<string, any> = {
+        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.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({ ...initialSnackBar, open: false }); }}
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            >
+                <Alert severity={snackBar.severity}>
+                    {snackBar.msg}
+                </Alert>
+            </Snackbar>
+        </Box>
+    );
+});
+
+DataGridBySchemaEditable.displayName = 'DataGridBySchemaEditable';
+
+export default DataGridBySchemaEditable;