drf-react-by-schema 0.5.3 → 0.6.0

package/dist/components/GenericModelList.js

@@ -46,18 +46,15 @@ const styles_1 = require("../styles");
 const api_1 = require("../api");
 const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
 const APIWrapperContext_1 = require("../context/APIWrapperContext");
-const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight = true, model, forceReload = false, LinkComponent = null, hasHeader = false, }) => {
+const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight = true, model, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', }) => {
     const context = react_1.default.useContext(DRFReactBySchemaContext_1.DRFReactBySchemaContext);
     const apiContext = react_1.default.useContext(APIWrapperContext_1.APIWrapperContext);
-    if (!context.serverEndPoint || !apiContext) {
-        console.error('Error: There is no endpoint defined in DRFReactBySchemaProvider!');
-        return (react_1.default.createElement(react_1.default.Fragment, null));
-    }
     const { serverEndPoint, isInBatches, firstBatchLength } = context;
     const { handleLoading } = apiContext;
     const [data, setData] = (0, react_1.useState)(false);
     const [visibleRows, setVisibleRows] = (0, react_1.useState)([]);
     const [hideFooterPagination, setHideFooterPagination] = (0, react_1.useState)(false);
+    const [paginationModel, setPaginationModel] = (0, react_1.useState)(paginationMode === 'server' ? { page: 0, pageSize: 2 } : undefined);
     const finalCustomColumnOperations = (column) => {
         if (minWidthFields) {
             if (Object.prototype.hasOwnProperty.call(minWidthFields, column.field)) {
@@ -70,33 +67,51 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
         return column;
     };
     const loadObjectList = () => __awaiter(void 0, void 0, void 0, function* () {
-        const loadParams = {
-            model,
-            serverEndPoint,
-            columnFields,
-            hiddenFields,
-            isInBatches
-        };
         handleLoading(true);
-        const loadedData = yield (0, api_1.getGenericModelList)(loadParams);
-        if (loadedData && typeof loadedData !== 'boolean') {
-            setData(loadedData);
-            handleLoading(false);
-            if (isInBatches && loadedData.data.length === firstBatchLength) {
-                setHideFooterPagination(true);
-                (0, api_1.getGenericModelList)(Object.assign(Object.assign({}, loadParams), { loadedSchema: loadedData.schema, loadedModelOptions: loadedData.modelOptions })).then(lastBatchData => {
-                    if (lastBatchData && typeof lastBatchData !== 'boolean') {
-                        setData(Object.assign(Object.assign({}, loadedData), { data: [
-                                ...loadedData.data,
-                                ...lastBatchData.data
-                            ] }));
+        switch (paginationMode) {
+            case 'client':
+                const loadParams = {
+                    model,
+                    serverEndPoint,
+                    columnFields,
+                    hiddenFields,
+                    isInBatches,
+                };
+                const loadedData = yield (0, api_1.getGenericModelList)(loadParams);
+                if (loadedData && typeof loadedData !== 'boolean') {
+                    setData(loadedData);
+                    handleLoading(false);
+                    if (isInBatches && loadedData.data.length === firstBatchLength) {
+                        setHideFooterPagination(true);
+                        (0, api_1.getGenericModelList)(Object.assign(Object.assign({}, loadParams), { loadedSchema: loadedData.schema, loadedModelOptions: loadedData.modelOptions })).then((lastBatchData) => {
+                            if (lastBatchData && typeof lastBatchData !== 'boolean') {
+                                setData(Object.assign(Object.assign({}, loadedData), { data: [...loadedData.data, ...lastBatchData.data] }));
+                            }
+                            setHideFooterPagination(false);
+                        });
                     }
-                    setHideFooterPagination(false);
-                });
-            }
-            return;
+                    return;
+                }
+                console.log('error retrieving data!');
+                return;
+            case 'server':
+                const loadPaginatedParams = {
+                    model,
+                    serverEndPoint,
+                    columnFields,
+                    hiddenFields,
+                    page: paginationModel ? paginationModel.page : 0,
+                    filter: paginationModel ? paginationModel.filter : undefined,
+                };
+                const paginatedData = yield (0, api_1.getGenericModelList)(loadPaginatedParams);
+                if (paginatedData && typeof paginatedData !== 'boolean') {
+                    setData(paginatedData);
+                    handleLoading(false);
+                    return;
+                }
+                console.log('error retrieving data!');
+                return;
         }
-        console.log('error retrieving data!');
     });
     if (forceReload) {
         loadObjectList();
@@ -104,19 +119,29 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
     (0, react_1.useEffect)(() => {
         loadObjectList();
     }, [model]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, typeof data !== 'boolean' && data.columns &&
-        react_1.default.createElement(react_1.default.Fragment, null,
-            hasHeader &&
-                react_1.default.createElement(Box_1.default, { sx: Object.assign(Object.assign({}, styles_1.Layout.flexRowGrow), { mb: 2 }) },
-                    react_1.default.createElement(Typography_1.default, { variant: "h5" }, data.modelOptions.verbose_name_plural || data.modelOptions.name),
-                    LinkComponent &&
-                        react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.flexRow },
-                            react_1.default.createElement(LinkComponent, { to: `novo` },
-                                react_1.default.createElement(Button_1.default, { variant: "contained", size: "medium", sx: { alignSelf: 'stretch' }, startIcon: react_1.default.createElement(AddCircleOutline_1.default, null) }, "Adicionar")))),
-            react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.dataGridWithTabs },
-                react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema || {}, model: model, indexField: indexField, indexFieldBasePath: indexFieldBasePath, isEditable: false, isAutoHeight: isAutoHeight, hideFooterPagination: hideFooterPagination, customColumnOperations: finalCustomColumnOperations, customLinkDestination: customLinkDestination, setVisibleRows: setVisibleRows, onDataChange: newData => {
-                        setData(Object.assign(Object.assign({}, data), { data: newData }));
-                    }, LinkComponent: LinkComponent })),
-            react_1.default.createElement(DataTotals_1.default, { data: data.data, sumRows: sumRows, visibleRows: visibleRows }))));
+    (0, react_1.useEffect)(() => {
+        if (paginationMode === 'server') {
+            loadObjectList();
+        }
+    }, [paginationModel]);
+    if (!context.serverEndPoint || !apiContext) {
+        console.error('Error: There is no endpoint defined in DRFReactBySchemaProvider!');
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null, typeof data !== 'boolean' && data.columns && (react_1.default.createElement(react_1.default.Fragment, null,
+        hasHeader && (react_1.default.createElement(Box_1.default, { sx: Object.assign(Object.assign({}, styles_1.Layout.flexRowGrow), { mb: 2 }) },
+            react_1.default.createElement(Typography_1.default, { variant: "h5" }, data.modelOptions.verbose_name_plural || data.modelOptions.name),
+            LinkComponent && (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.flexRow },
+                react_1.default.createElement(LinkComponent, { to: `novo` },
+                    react_1.default.createElement(Button_1.default, { variant: "contained", size: "medium", sx: { alignSelf: 'stretch' }, startIcon: react_1.default.createElement(AddCircleOutline_1.default, null) }, "Adicionar")))))),
+        react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.dataGridWithTabs },
+            react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema || {}, model: model, indexField: indexField, indexFieldBasePath: indexFieldBasePath, isEditable: false, isAutoHeight: isAutoHeight, hideFooterPagination: hideFooterPagination, customColumnOperations: finalCustomColumnOperations, customLinkDestination: customLinkDestination, setVisibleRows: setVisibleRows, onDataChange: (newData) => {
+                    setData(Object.assign(Object.assign({}, data), { data: newData }));
+                }, LinkComponent: LinkComponent, paginationModel: paginationMode === 'server' ? paginationModel : undefined, setPaginationModel: paginationMode === 'server' ? setPaginationModel : undefined, rowCount: paginationMode === 'client'
+                    ? undefined
+                    : typeof data.rowCount !== undefined
+                        ? data.rowCount
+                        : 0 })),
+        react_1.default.createElement(DataTotals_1.default, { data: data.data, sumRows: sumRows, visibleRows: visibleRows })))));
 };
 exports.default = GenericModelList;

package/dist/context/APIWrapper.js

@@ -62,7 +62,7 @@ function APIWrapper({ setLoading, handleLoading, setSnackBar, setDialog, childre
         return (react_1.default.createElement(react_1.default.Fragment, null, children));
     }
     const [usuaria, setUsuaria] = (0, react_1.useState)(null);
-    const [optionsAC, setOptionsAC] = (0, react_1.useReducer)(utils_1.reducer, {});
+    const [optionsAC, setOptionsAC] = (0, react_1.useReducer)(utils_1.reducer, null);
     const initialPageForm = {
         id: '',
         schema: null,
@@ -91,7 +91,7 @@ function APIWrapper({ setLoading, handleLoading, setSnackBar, setDialog, childre
             severity
         });
     };
-    const loadSinglePageData = ({ model, objId, optionsACModels, defaults = {}, extraValidators = {} }) => __awaiter(this, void 0, void 0, function* () {
+    const loadSinglePageData = ({ model, objId, optionsACModels = null, defaults = {}, extraValidators = {} }) => __awaiter(this, void 0, void 0, function* () {
         setLoading(true);
         if (!objId || objId === 'novo') {
             objId = (0, utils_1.getTmpId)();
@@ -107,7 +107,9 @@ function APIWrapper({ setLoading, handleLoading, setSnackBar, setDialog, childre
             return false;
         }
         setLoading(false);
-        populateOptionsAC(optionsACModels);
+        if (optionsACModels) {
+            populateOptionsAC(optionsACModels);
+        }
         for (const [field, value] of Object.entries(defaults)) {
             if (!object.data[field]) {
                 object.data[field] = value;
@@ -117,6 +119,10 @@ function APIWrapper({ setLoading, handleLoading, setSnackBar, setDialog, childre
         return values;
     });
     const onSubmit = (model, id, data) => __awaiter(this, void 0, void 0, function* () {
+        if (!pageForm) {
+            console.log('there must be a pageForm!');
+            return false;
+        }
         setLoading(true);
         const response = yield (0, api_1.updateDataBySchema)({
             model,

package/dist/context/APIWrapperContext.d.ts

@@ -6,7 +6,7 @@ export interface LoadSinglePageDataProps {
     model: string;
     objId?: Id;
     objTitleField?: string;
-    optionsACModels: string[];
+    optionsACModels: string[] | null;
     defaults?: Item;
     basePath?: string;
     formPath?: string | null;
@@ -62,12 +62,8 @@ export interface APIWrapperContextType {
     onSubmit: DRFReactBySchemaSubmitHandler;
     loadSinglePageData: (p: LoadSinglePageDataProps) => Promise<boolean | FieldValues>;
     handleLoading: (p: boolean) => void;
-    optionsACState: [{
-        [x: string]: any;
-    }, React.Dispatch<OptionsACType>];
-    pageFormState: [{
-        [x: string]: any;
-    }, React.Dispatch<PageFormType>];
+    optionsACState: [OptionsACType | null, React.Dispatch<OptionsACType>];
+    pageFormState: [Record<string, any> | null, React.Dispatch<PageFormType>];
     onEditModel: (p: OnEditModelType) => void;
     onDeleteModel: (model: string, id: Id, onSuccess?: (e: React.BaseSyntheticEvent) => any) => void;
     onEditRelatedModelSave: (p: OnEditRelatedModelType) => Promise<boolean | Id | ItemSchemaColumnsType>;

package/dist/utils.d.ts

@@ -1,6 +1,17 @@
-import { GridActionsColDef, GridColDef } from '@mui/x-data-grid';
+import { GridActionsColDef, GridColDef, GridFilterModel } from '@mui/x-data-grid';
 export type Id = string | number;
 export type Item = Record<string, any>;
+export type PaginatedResult = {
+    count: number;
+    next: number;
+    previous: number;
+    results: Item[];
+};
+export interface PaginationModel {
+    page: number;
+    pageSize: number;
+    filter?: GridFilterModel;
+}
 export type SchemaType = Record<string, Field>;
 export type modelOptionsType = Record<string, string>;
 export interface Choice {
@@ -24,7 +35,9 @@ export interface Field {
     prefix?: string;
     suffix?: string;
     creatable?: boolean;
+    related_editable?: boolean;
     validators_regex?: Item[];
+    many?: boolean;
 }
 interface GridBySchemaColDef extends GridColDef {
     isIndexField?: boolean;
@@ -41,6 +54,7 @@ interface GridActionsBySchemaColDef extends GridActionsColDef {
 export type GridEnrichedBySchemaColDef = GridBySchemaColDef | GridActionsBySchemaColDef;
 export interface DataSchemaColumnsType {
     data: Item[];
+    rowCount?: number;
     schema: SchemaType;
     modelOptions: modelOptionsType;
     columns?: GridEnrichedBySchemaColDef[];
@@ -76,9 +90,7 @@ export declare const errorProps: ({ type, errors, fieldKey, fieldKeyProp, index
 };
 export declare const getTmpId: () => string;
 export declare const isTmpId: (id: string | number | undefined | null) => boolean;
-export declare const reducer: (state: Record<string, any>, newState: Record<string, any>) => {
-    [x: string]: any;
-};
+export declare const reducer: (state: Record<string, any> | null, newState: Record<string, any>) => Record<string, any> | null;
 export declare const getPatternFormat: (type: string) => string;
 export type AddParametersToEnd<TFunction extends (...args: any) => any, TParameters extends [...args: any]> = (...args: [...Parameters<TFunction>, ...TParameters]) => ReturnType<TFunction>;
 export {};

package/dist/utils.js

@@ -217,7 +217,7 @@ const buildGenericYupValidationSchema = ({ data, schema, many = false, skipField
                 return val.toString().length <= maxDigits;
             });
         }
-        if (field.validators_regex) {
+        if (!field.read_only && field.validators_regex) {
             for (const validator of field.validators_regex) {
                 yupValidator[key] = yupValidator[key].matches(validator.regex, validator.message);
             }
@@ -256,6 +256,12 @@ const isTmpId = (id) => {
 };
 exports.isTmpId = isTmpId;
 const reducer = (state, newState) => {
+    if (newState === null) {
+        return null;
+    }
+    if (state === null) {
+        return newState;
+    }
     return Object.assign(Object.assign({}, state), newState);
 };
 exports.reducer = reducer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -45,10 +45,11 @@
     "@typescript-eslint/parser": "^5.47.0",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-tsdoc": "^0.2.17",
     "install-peers-cli": "^2.2.0",
+    "prettier": "^3.0.0",
     "react-docgen-typescript": "^2.2.2",
     "react-styleguidist": "^13.0.0",
     "semver": "^7.5.1",