drf-react-by-schema 0.2.1 → 0.3.0

package/src/components/GenericModelList.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import Box from '@mui/material/Box';
+import { GridRowId } from '@mui/x-data-grid';
 
 import DataGridBySchemaEditable from './DataGridBySchemaEditable';
 import DataTotals, { SumRowsType } from './DataTotals';
 import { Layout } from '../styles';
-// import CONSTANTS from '../constants';
-import { GridEnrichedBySchemaColDef, Item, SchemaType } from '../utils';
-import { DataSchemaColumnsType, getGenericModelList, getGenericModelListProps } from '../api';
-import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from '../context/DRFReactBySchemaProvider';
+import { GridEnrichedBySchemaColDef, Item, SchemaType, DataSchemaColumnsType } from '../utils';
+import { getGenericModelList, getGenericModelListProps } from '../api';
+import { DRFReactBySchemaContext } from '../context/DRFReactBySchemaContext';
+import { APIWrapperContext } from '../context/APIWrapperContext';
 
 interface GenericModelListProps {
     columnFields: string[];
@@ -20,9 +21,8 @@ interface GenericModelListProps {
     sumRows?: SumRowsType;
     isAutoHeight?: boolean;
     model: string;
-    handleLoading: (p: any) => void;
     forceReload: boolean;
-    LinkComponent: React.ReactNode;
+    LinkComponent?: React.ReactNode;
 }
 
 const GenericModelList = ({
@@ -36,24 +36,30 @@ const GenericModelList = ({
     sumRows,
     isAutoHeight = true,
     model,
-    handleLoading,
     forceReload = false,
     LinkComponent = null
 }: GenericModelListProps) => {
-    const { serverEndPoint, isInBatches, firstBatchLength }:DRFReactBySchemaContextType = DRFReactBySchemaContext
-        ? React.useContext(DRFReactBySchemaContext) as DRFReactBySchemaContextType
-        : { serverEndPoint: null };
-    if (!serverEndPoint) {
+    const context = React.useContext(DRFReactBySchemaContext);
+    const apiContext = React.useContext(APIWrapperContext);
+    if (!context.serverEndPoint || !apiContext) {
         console.error('Error: There is no endpoint defined in DRFReactBySchemaProvider!');
         return (<></>);
     }
+    const {
+        serverEndPoint,
+        isInBatches,
+        firstBatchLength
+    } = context;
+    const {
+        handleLoading
+    } = apiContext;
     interface dataProps {
         data: Item[];
         schema: SchemaType;
         columns: GridEnrichedBySchemaColDef[]
     };
     const [data, setData] = useState<DataSchemaColumnsType | boolean>(false);
-    const [visibleRows, setVisibleRows] = useState<string[]>([]);
+    const [visibleRows, setVisibleRows] = useState<GridRowId[]>([]);
     const [hideFooterPagination, setHideFooterPagination] = useState(false);
 
     const finalCustomColumnOperations = (column: GridEnrichedBySchemaColDef) => {
@@ -116,7 +122,7 @@ const GenericModelList = ({
 
     return (
         <>
-            {data && typeof data !== 'boolean' && data.columns &&
+            {typeof data !== 'boolean' && data.columns &&
                 <>
                     <Box sx={Layout.dataGridWithTabs}>
                         <DataGridBySchemaEditable
@@ -131,7 +137,11 @@ const GenericModelList = ({
                             hideFooterPagination={hideFooterPagination}
                             customColumnOperations={finalCustomColumnOperations}
                             customLinkDestination={customLinkDestination}
-                            setVisibleRows={setVisibleRows}
+                            setVisibleRows={(newVisibleRows:GridRowId[]) => {
+                                if (JSON.stringify(newVisibleRows) !== JSON.stringify(visibleRows)) {
+                                    setVisibleRows(newVisibleRows);
+                                }
+                            }}
                             onDataChange={newData => {
                                 setData({
                                     ...data,

package/src/components/GenericRelatedModelList.tsx

@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import { GridRowId } from '@mui/x-data-grid';
+
+import DataGridBySchemaEditable from './DataGridBySchemaEditable';
+import DataTotals from './DataTotals';
+import { DRFReactBySchemaContext } from '../context/DRFReactBySchemaContext';
+import { APIWrapperContext } from '../context/APIWrapperContext';
+import { DataSchemaColumnsType, GridEnrichedBySchemaColDef, Id, Item } from '../utils';
+import { getGenericModelList } from '../api';
+import { SumRowsType } from './DataTotals';
+import { Layout } from '../styles';
+
+interface GenericRelatedModelListProps {
+    model: string;
+    id: Id;
+    relatedModel: string;
+    columnFields: string[];
+    creatableFields: string[];
+    hiddenFields: string[];
+    usuaria?: Item | null;
+    minWidthFields?: Record<string, number>;
+    indexField?: string;
+    addExistingModel?: string;
+    onProcessRow?: (p: any) => void;
+    sumRows?: SumRowsType;
+    customColumnOperations?: (column: GridEnrichedBySchemaColDef) => GridEnrichedBySchemaColDef;
+    isEditable?: boolean;
+    isAutoHeight?: boolean;
+    isInBatches?: boolean;
+    indexFieldBasePath?: string;
+    LinkComponent?: React.ReactNode;
+};
+
+export default function GenericRelatedModelList ({
+    model,
+    id,
+    relatedModel,
+    columnFields,
+    creatableFields,
+    hiddenFields,
+    usuaria,
+    minWidthFields,
+    indexField = '',
+    addExistingModel = '',
+    onProcessRow,
+    sumRows,
+    customColumnOperations,
+    isEditable = true,
+    isAutoHeight = false,
+    indexFieldBasePath,
+    LinkComponent
+}:GenericRelatedModelListProps) {
+    const context = React.useContext(DRFReactBySchemaContext);
+    const apiContext = React.useContext(APIWrapperContext);
+    if (!context.serverEndPoint || !apiContext) {
+        console.error('Error: There is no endpoint defined in DRFReactBySchemaProvider!');
+        return (<></>);
+    }
+    const {
+        serverEndPoint,
+        isInBatches,
+        firstBatchLength,
+    } = context;
+    const {
+        onEditRelatedModelSave,
+        onDeleteRelatedModel
+    } = apiContext;
+    
+    const [data, setData] = useState<DataSchemaColumnsType | boolean>(false);
+    const [visibleRows, setVisibleRows] = useState<GridRowId[]>([]);
+    const [hideFooterPagination, setHideFooterPagination] = useState(false);
+
+    const finalCustomColumnOperations = (column:GridEnrichedBySchemaColDef) => {
+        if (minWidthFields) {
+            if (Object.prototype.hasOwnProperty.call(minWidthFields, column.field)) {
+                column.minWidth = minWidthFields[column.field];
+            }
+        }
+
+        if (customColumnOperations) {
+            return customColumnOperations(column);
+        }
+
+        return column;
+    };
+
+    const loadObjectList = async () => {
+        const loadParams = {
+            model,
+            serverEndPoint,
+            id,
+            relatedModel,
+            columnFields,
+            hiddenFields,
+            creatableFields,
+            isInBatches
+        };
+        const loadedData = await getGenericModelList(loadParams);
+        if (loadedData) {
+            setData(loadedData);
+            if (isInBatches && loadedData.data.length === firstBatchLength) {
+                setHideFooterPagination(true);
+                getGenericModelList({
+                    ...loadParams,
+                    loadedSchema: loadedData.schema
+                }).then(lastBatchData => {
+                    if (lastBatchData) {
+                        setData({
+                            ...loadedData,
+                            data: [
+                                ...loadedData.data,
+                                ...lastBatchData.data
+                            ]
+                        });
+                    }
+                    setHideFooterPagination(false);
+                });
+            }
+            return;
+        }
+        console.log('error retrieving data!');
+    };
+
+    useEffect(() => {
+        loadObjectList();
+    }, []);
+
+    return (
+        <>
+            {typeof data !== 'boolean' && data.columns &&
+                <>
+                    <Box sx={Layout.dataGridFixedHeight}>
+                        <DataGridBySchemaEditable
+                            data={data.data}
+                            columns={data.columns}
+                            schema={data.schema}
+                            model={relatedModel}
+                            indexField={indexField}
+                            indexFieldBasePath={indexFieldBasePath}
+                            addExistingModel={addExistingModel}
+                            isEditable={isEditable}
+                            modelParent={model}
+                            modelParentId={id}
+                            customColumnOperations={finalCustomColumnOperations}
+                            setVisibleRows={setVisibleRows}
+                            isAutoHeight={isAutoHeight}
+                            hideFooterPagination={hideFooterPagination}
+                            onProcessRow={onProcessRow}
+                            onDataChange={newData => {
+                                setData({
+                                    ...data,
+                                    data: newData
+                                });
+                            }}
+                            LinkComponent={LinkComponent}
+                        />
+                    </Box>
+                    <DataTotals
+                        data={data.data}
+                        sumRows={sumRows}
+                        visibleRows={visibleRows}
+                    />
+                </>
+            }
+        </>
+    );
+}

package/src/context/APIWrapper.tsx

@@ -0,0 +1,447 @@
+import React, { useState, useReducer, useEffect, useRef } from 'react';
+import {
+    Id,
+    Item,
+    reducer,
+    SchemaType,
+    populateValues,
+    buildGenericYupValidationSchema,
+    getTmpId,
+    isTmpId
+} from '../utils';
+
+import DialogJSONSchemaForm from '../components/DialogJSONSchemaForm';
+import DialogActions from '../components/DialogActions';
+import { DRFReactBySchemaContext, DRFReactBySchemaContextType } from './DRFReactBySchemaContext';
+import {
+    isLoggedIn,
+    getAutoComplete,
+    getGenericModel,
+    updateDataBySchema,
+    addExistingRelatedModel,
+    deleteData,
+    getJSONSchema,
+    createOrUpdateJSONSchema
+} from '../api';
+import { AxiosResponse } from 'axios';
+import {
+    APIWrapperContext, 
+    DialogType,
+    LoadSinglePageDataProps,
+    OnDeleteRelatedModelType,
+    OnEditModelType,
+    OnEditRelatedModelType,
+    PageFormType,
+    SnackBarType
+} from './APIWrapperContext';
+
+interface APIWrapperProps {
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    handleLoading: (p: boolean) => void;
+    setSnackBar: React.Dispatch<React.SetStateAction<SnackBarType>>;
+    setDialog: React.Dispatch<React.SetStateAction<DialogType>>;
+    children: React.ReactNode;
+};
+
+function APIWrapper ({
+    setLoading,
+    handleLoading,
+    setSnackBar,
+    setDialog,
+    children
+}:APIWrapperProps) {
+    const { serverEndPoint } = DRFReactBySchemaContext
+        ? React.useContext(DRFReactBySchemaContext) as DRFReactBySchemaContextType
+        : { serverEndPoint: null };
+    if (!serverEndPoint) {
+        return (
+            <>
+                {children}
+            </>
+        );
+    }
+
+    const [usuaria, setUsuaria] = useState<Item | null>(null);
+    const [optionsAC, setOptionsAC] = useReducer(reducer, {});
+    const initialPageForm:PageFormType = {
+        id: '',
+        schema: null,
+        initialValues: null,
+        validationSchema: null
+    };
+    const [pageForm, setPageForm] = useReducer(reducer, initialPageForm);
+    const editModel = useRef<Item>({});
+    const jsonSchemaFormRef = useRef<any>(null);
+
+    useEffect(() => {
+        setUsuaria(null);
+        isLoggedIn(serverEndPoint).then(usuaria => {
+            setUsuaria(usuaria || { erro: 'token inválido' });
+        });
+    }, []);
+
+    useEffect(() => {
+        setPageForm(initialPageForm);
+    }, []);
+
+    const onTriggerSnackBar = ({ msg, severity = 'info' }:SnackBarType) => {
+        setSnackBar({
+            open: true,
+            msg,
+            severity
+        });
+    };
+
+    const loadSinglePageData = async ({
+        model,
+        objId,
+        objTitleField = 'nome',
+        optionsACModels,
+        basePath = '/',
+        formPath = null,
+        extraValidators = {}
+    }: LoadSinglePageDataProps) => {
+        setLoading(true);
+        if (objId === 'novo') {
+            objId = getTmpId();
+        }
+
+        const object = await getGenericModel({
+            model,
+            serverEndPoint,
+            id: isTmpId(objId) ? null : objId
+        });
+
+        if (object === false) {
+            setPageForm({ schema: false, id: '' });
+            console.log('Houve um erro ao tentar carregar os dados!');
+            return false;
+        }
+
+        setLoading(false);
+
+        populateOptionsAC(optionsACModels);
+
+        const values = populateInitialValues({
+            model,
+            id: objId,
+            extraValidators,
+            ...object
+        });
+
+        return values;
+    };
+
+    const onSubmit = async (
+        model:string, 
+        id:Id, 
+        data:Item, 
+        e:React.SyntheticEvent<HTMLButtonElement, SubmitEvent>
+    ) => {
+        setLoading(true);
+        const response = await updateDataBySchema({
+            model,
+            modelObjectId: id,
+            serverEndPoint,
+            data,
+            schema: pageForm.schema
+        });
+        setLoading(false);
+        if (!['number', 'string'].includes(typeof response)) {
+            onTriggerSnackBar({
+                msg: 'Houve um problema ao salvar seus dados! Por favor, entre em contato',
+                severity: 'error'
+            });
+            console.log({
+                msg: 'Error saving model',
+                errors: response,
+                data
+            });
+            return false;
+        }
+
+        onTriggerSnackBar({
+            msg: (id)
+                ? 'Dados atualizados com sucesso!'
+                : 'Criado com sucesso!'
+        });
+
+        return response as Id;
+    };
+
+    const populateOptionsAC = (optionsACModels:string[]) => {
+        for (const model of optionsACModels) {
+            getAutoComplete({ model, serverEndPoint }).then(options => {
+                setOptionsAC({ [model]: options });
+            });
+        }
+    };
+
+    interface PopulateInitialValuesProps {
+        model: string;
+        id: Id;
+        data: Item;
+        schema: SchemaType;
+        extraValidators: Item;
+        isEditModel?: boolean;
+    };
+    const populateInitialValues = ({
+        model,
+        id,
+        isEditModel,
+        extraValidators,
+        ...object
+    }:PopulateInitialValuesProps) => {
+        const values = populateValues(object);
+        const yupSchema = buildGenericYupValidationSchema({ ...object, data: values, extraValidators });
+        setPageForm({
+            model,
+            id,
+            schema: object.schema,
+            initialValues: values,
+            validationSchema: yupSchema
+        });
+        return values;
+    };
+
+    const onEditModel = ({
+        fieldKey,
+        index,
+        model,
+        id,
+        labelKey,
+        setValue,
+        getValues
+    }: OnEditModelType) => {
+        setDialog({
+            open: true,
+            loading: true
+        });
+        getJSONSchema({ model, serverEndPoint, id }).then(data => {
+            const jsonSchemaSubmit = async (e:React.SyntheticEvent<HTMLElement, SubmitEvent>) => {
+                jsonSchemaFormRef.current.onSubmit(e);
+                return true;
+            };
+            setDialog({
+                loading: false,
+                title: 'Editar',
+                Body: <DialogJSONSchemaForm
+                    jsonSchemaFormRef = {jsonSchemaFormRef}
+                    schema = {data.serializer.schema}
+                    uiSchema = {data.serializer.uiSchema}
+                    formData = {data.formData}
+                    onSubmit = {onEditModelSave}
+                />,
+                Actions: <DialogActions
+                    setDialog = {setDialog}
+                    handleSave = {jsonSchemaSubmit}
+                />
+            } as DialogType);
+            editModel.current = {
+                fieldKey,
+                index,
+                model,
+                id,
+                labelKey,
+                setValue,
+                getValues
+            };
+        });
+    };
+
+    const onEditModelSave = async ({ formData }:{ formData: Item }) => {
+        setDialog({ open: false });
+        setLoading(true);
+        const {
+            fieldKey,
+            index,
+            model,
+            id,
+            labelKey,
+            setValue,
+            getValues
+        } = editModel.current;
+        const newModelId = await createOrUpdateJSONSchema({
+            model,
+            serverEndPoint,
+            id,
+            formData
+        });
+        if (newModelId.errors) {
+            console.log(newModelId.errors);
+            onTriggerSnackBar({
+                msg: 'Houve um problema ao salvar a alteração! Por favor, entre em contato.',
+                severity: 'error'
+            });
+            return;
+        }
+        onTriggerSnackBar({
+            msg: 'Alterações salvas com sucesso!',
+            severity: 'info'
+        });
+        const targetKey = (fieldKey && index >= 0)
+            ? `${fieldKey}.${index}.${model}`
+            : model;
+        const newValue = {
+            ...getValues(targetKey),
+            ...formData,
+            label: formData[labelKey]
+        };
+        setValue(targetKey, newValue);
+        populateOptionsAC([model]);
+        setLoading(false);
+    };
+
+    const onDeleteModel = (model:string, id:Id, onSuccess:()=>void | null) => {
+        setDialog({
+            open: true,
+            loading: false,
+            title: 'Apagar',
+            Body: 'Tem certeza de que deseja apagar este item?',
+            Actions: <DialogActions
+                setDialog = {setDialog}
+                handleSave = {(e:React.SyntheticEvent) => {
+                    return onDeleteModelSave(model, id, onSuccess);
+                }}
+                btnConfirm = "Sim, apagar"
+            />
+        });
+    };
+
+    const onDeleteModelSave = async (model:string, id:Id, onSuccess:()=>void | null) => {
+        setDialog({ open: false });
+        setLoading(true);
+        const ret = await deleteData(model, serverEndPoint, id);
+        if (ret !== false) {
+            onTriggerSnackBar({
+                msg: 'Apagado com com sucesso!',
+                severity: 'info'
+            });
+            if (onSuccess !== null) {
+                onSuccess();
+            }
+            return true;
+        }
+
+        setLoading(false);
+        onTriggerSnackBar({
+            msg: 'Houve um problema ao remover o item! Por favor, entre em contato.',
+            severity: 'error'
+        });
+        return false;
+    };
+
+    const onEditRelatedModelSave = async ({
+        model,
+        id,
+        relatedModel,
+        relatedModelId,
+        newRow,
+        schema,
+        onlyAddExisting
+    }:OnEditRelatedModelType) => {
+        const updateUrl = `${model}/${id}/${relatedModel}`;
+        if (onlyAddExisting) {
+            const response = await addExistingRelatedModel({
+                model,
+                id,
+                serverEndPoint,
+                data: {
+                    onlyAddExisting: {
+                        key: relatedModel,
+                        value: newRow.id_to_add
+                    }
+                }
+            });
+            if (Object.prototype.hasOwnProperty.call(response, 'errors')) {
+                console.log(response);
+                onTriggerSnackBar({
+                    msg: 'Houve um problema ao salvar a alteração! Por favor, entre em contato.',
+                    severity: 'error'
+                });
+                return false;
+            }
+            onTriggerSnackBar({
+                msg: 'Alterações salvas com sucesso!',
+                severity: 'info'
+            });
+            const object = await getGenericModel({
+                model,
+                id,
+                serverEndPoint,
+                relatedModel,
+                relatedModelId: newRow.id_to_add
+            });
+            return object;
+        }
+        // This is important for related data
+        if (schema[model] && !newRow[model]) {
+            newRow[model] = id;
+        }
+        const response = await updateDataBySchema({
+            model: relatedModel,
+            modelObjectId: newRow.id,
+            serverEndPoint,
+            data: newRow,
+            schema,
+            path: updateUrl
+        });
+        if (response && !Object.prototype.hasOwnProperty.call(response, 'errors')) {
+            onTriggerSnackBar({
+                msg: 'Alterações salvas com sucesso!',
+                severity: 'info'
+            });
+            return response as Id;
+        }
+        onTriggerSnackBar({
+            msg: 'Não foi possível salvar os dados. Confira os erros.',
+            severity: 'error'
+        });
+        return false;
+    };
+
+    const onDeleteRelatedModel = async ({
+        model,
+        id,
+        relatedModel,
+        relatedModelId
+    }:OnDeleteRelatedModelType) => {
+        const deleteUrl = `${model}/${id}/${relatedModel}`;
+        const response = await deleteData(deleteUrl, serverEndPoint, relatedModelId);
+        if (response) {
+            onTriggerSnackBar({
+                msg: 'Alterações salvas com sucesso!',
+                severity: 'info'
+            });
+            return response;
+        }
+        onTriggerSnackBar({
+            msg: 'Houve um problema ao remover o item! Por favor, entre em contato.',
+            severity: 'error'
+        });
+        return false;
+    };
+
+    return (
+        <APIWrapperContext.Provider
+            value = {{
+                usuaria,
+                onSubmit,
+                loadSinglePageData,
+                handleLoading,
+                optionsACState: [optionsAC, setOptionsAC],
+                pageFormState: [pageForm, setPageForm],
+                onEditModel,
+                onDeleteModel,
+                onEditRelatedModelSave,
+                onDeleteRelatedModel,
+                onTriggerSnackBar,
+                setDialog
+            }}
+        >
+            {children}
+        </APIWrapperContext.Provider>
+    );
+}
+
+export default React.memo(APIWrapper);