drf-react-by-schema 0.8.6 → 0.8.8

package/dist/components/GenericModelList.d.ts

@@ -18,6 +18,7 @@ interface GenericModelListProps {
     hasHeader: boolean;
     paginationMode: 'server' | 'client';
     defaultFilter?: GridFilterModel;
+    queryParams?: string[];
 }
-declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, }: GenericModelListProps) => JSX.Element;
+declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, queryParams, }: GenericModelListProps) => JSX.Element;
 export default GenericModelList;

package/dist/components/GenericModelList.js

@@ -48,7 +48,7 @@ const utils_1 = require("../utils");
 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, paginationMode = 'client', defaultFilter, }) => {
+const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight = true, model, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, queryParams, }) => {
     const context = react_1.default.useContext(DRFReactBySchemaContext_1.DRFReactBySchemaContext);
     const apiContext = react_1.default.useContext(APIWrapperContext_1.APIWrapperContext);
     if (!apiContext) {
@@ -82,6 +82,7 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
                     columnFields,
                     hiddenFields,
                     isInBatches,
+                    queryParams,
                 };
                 const loadedData = yield (0, api_1.getGenericModelList)(loadParams);
                 if (loadedData && typeof loadedData !== 'boolean') {
@@ -111,6 +112,7 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
                     hiddenFields,
                     page,
                     filter,
+                    queryParams,
                     sort,
                     sumRows,
                 };
@@ -129,7 +131,7 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
     }
     (0, react_1.useEffect)(() => {
         loadObjectList();
-    }, [model, defaultFilter]);
+    }, [model, defaultFilter, queryParams]);
     (0, react_1.useEffect)(() => {
         if (paginationMode === 'server') {
             loadObjectList();

package/dist/components/GenericRelatedModelList.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { GridFilterModel } from '@mui/x-data-grid';
 import { GridEnrichedBySchemaColDef, Id, Item } from '../utils';
 import { SumRowsType } from '../api';
 interface GenericRelatedModelListProps {
@@ -22,6 +23,9 @@ interface GenericRelatedModelListProps {
     indexFieldBasePath?: string;
     noCardWrapper?: boolean;
     LinkComponent?: React.ReactNode;
+    paginationMode: 'server' | 'client';
+    defaultFilter?: GridFilterModel;
+    queryParams?: string[];
 }
-export default function GenericRelatedModelList({ id, model, relatedModel, columnFields, creatableFields, hiddenFields, usuaria, minWidthFields, indexField, addExistingModel, label, onProcessRow, sumRows, customColumnOperations, isEditable, isAutoHeight, isInBatches, indexFieldBasePath, noCardWrapper, }: GenericRelatedModelListProps): JSX.Element;
+export default function GenericRelatedModelList({ id, model, relatedModel, columnFields, creatableFields, hiddenFields, usuaria, minWidthFields, indexField, addExistingModel, label, onProcessRow, sumRows, customColumnOperations, isEditable, isAutoHeight, isInBatches, indexFieldBasePath, noCardWrapper, paginationMode, defaultFilter, queryParams, }: GenericRelatedModelListProps): JSX.Element;
 export {};

package/dist/components/GenericRelatedModelList.js

@@ -43,18 +43,24 @@ const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
 const DataGridBySchemaEditable_1 = __importDefault(require("./DataGridBySchemaEditable"));
 const DataTotals_1 = __importDefault(require("./DataTotals"));
 const APIWrapperContext_1 = require("../context/APIWrapperContext");
+const utils_1 = require("../utils");
 const api_1 = require("../api");
 const styles_1 = require("../styles");
-const ContentTable = ({ data, relatedModel, model, id, indexField, indexFieldBasePath, addExistingModel, isEditable, onEditModel, finalCustomColumnOperations, setVisibleRows, isAutoHeight, hideFooterPagination, onProcessRow, setData, sumRows, visibleRows, }) => (react_1.default.createElement(react_1.default.Fragment, null,
+const ContentTable = ({ data, relatedModel, model, id, indexField, indexFieldBasePath, addExistingModel, isEditable, onEditModel, finalCustomColumnOperations, setVisibleRows, isAutoHeight, hideFooterPagination, onProcessRow, setData, sumRows, visibleRows, paginationMode = 'client', paginationModel, setPaginationModel, }) => (react_1.default.createElement(react_1.default.Fragment, null,
     data.columns && (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.dataGridFixedHeight },
         react_1.default.createElement(DataGridBySchemaEditable_1.default, { data: data.data, columns: data.columns, schema: data.schema, model: relatedModel, modelParent: model, modelParentId: id, indexField: indexField, indexFieldBasePath: indexFieldBasePath, addExistingModel: addExistingModel, isEditable: isEditable, onEditModel: onEditModel, customColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, isAutoHeight: isAutoHeight, hideFooterPagination: hideFooterPagination, onProcessRow: onProcessRow, onDataChange: (newData) => {
                 setData(Object.assign(Object.assign({}, data), { data: newData }));
-            } }))),
+            }, 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 })));
-function GenericRelatedModelList({ id, model, relatedModel, columnFields, creatableFields, hiddenFields, usuaria = null, minWidthFields, indexField, addExistingModel, label, onProcessRow, sumRows, customColumnOperations, isEditable = true, isAutoHeight = false, isInBatches = true, indexFieldBasePath, noCardWrapper = false, }) {
+function GenericRelatedModelList({ id, model, relatedModel, columnFields, creatableFields, hiddenFields, usuaria = null, minWidthFields, indexField, addExistingModel, label, onProcessRow, sumRows, customColumnOperations, isEditable = true, isAutoHeight = false, isInBatches = true, indexFieldBasePath, noCardWrapper = false, paginationMode = 'client', defaultFilter, queryParams, }) {
     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: 100 } : undefined);
     const { onEditModel, onDeleteRelatedModel, serverEndPoint } = (0, APIWrapperContext_1.useAPIWrapper)();
     const finalCustomColumnOperations = (column) => {
         if (minWidthFields) {
@@ -68,40 +74,74 @@ function GenericRelatedModelList({ id, model, relatedModel, columnFields, creata
         return column;
     };
     const loadObjectList = () => __awaiter(this, void 0, void 0, function* () {
-        const loadParams = {
-            model,
-            id,
-            relatedModel,
-            indexFieldBasePath,
-            columnFields,
-            creatableFields,
-            hiddenFields,
-            usuaria,
-            isInBatches,
-            serverEndPoint,
-        };
-        const loadedData = yield (0, api_1.getGenericModelList)(loadParams);
-        if (loadedData) {
-            setData(loadedData);
-            if (isInBatches && loadedData.data.length === 100) {
-                setHideFooterPagination(true);
-                (0, api_1.getGenericModelList)(Object.assign(Object.assign({}, loadParams), { loadedSchema: loadedData.schema })).then((lastBatchData) => {
-                    if (lastBatchData) {
-                        setData(Object.assign(Object.assign({}, loadedData), { data: [...loadedData.data, ...lastBatchData.data] }));
-                        setHideFooterPagination(false);
+        switch (paginationMode) {
+            case 'client':
+                const loadParams = {
+                    model,
+                    id,
+                    relatedModel,
+                    indexFieldBasePath,
+                    columnFields,
+                    creatableFields,
+                    hiddenFields,
+                    usuaria,
+                    isInBatches,
+                    queryParams,
+                    serverEndPoint,
+                };
+                const loadedData = yield (0, api_1.getGenericModelList)(loadParams);
+                if (loadedData && typeof loadedData !== 'boolean') {
+                    setData(loadedData);
+                    if (isInBatches && loadedData.data.length === 100) {
+                        setHideFooterPagination(true);
+                        (0, api_1.getGenericModelList)(Object.assign(Object.assign({}, loadParams), { loadedSchema: loadedData.schema })).then((lastBatchData) => {
+                            if (lastBatchData) {
+                                setData(Object.assign(Object.assign({}, loadedData), { data: [...loadedData.data, ...lastBatchData.data] }));
+                                setHideFooterPagination(false);
+                            }
+                        });
                     }
-                });
-            }
-            return;
+                    return;
+                }
+                console.log('error retrieving data!');
+                break;
+            case 'server':
+                const page = paginationModel ? paginationModel.page : 0;
+                const filter = (0, utils_1.mergeFilterItems)(defaultFilter, paginationModel ? paginationModel.filter : undefined);
+                const sort = paginationModel ? paginationModel.sort : undefined;
+                const loadPaginatedParams = {
+                    model,
+                    id,
+                    relatedModel,
+                    columnFields,
+                    hiddenFields,
+                    page,
+                    filter,
+                    sort,
+                    sumRows,
+                    queryParams,
+                    serverEndPoint,
+                };
+                const paginatedData = yield (0, api_1.getGenericModelList)(loadPaginatedParams);
+                if (paginatedData && typeof paginatedData !== 'boolean') {
+                    setData(paginatedData);
+                    return;
+                }
+                console.log('error retrieving data!');
+                break;
         }
-        console.log('error retrieving data!');
     });
     (0, react_1.useEffect)(() => {
         loadObjectList();
-    }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null, typeof data !== 'boolean' && data.columns && (react_1.default.createElement(react_1.default.Fragment, null, noCardWrapper ? (react_1.default.createElement(ContentTable, { data: data, model: model, relatedModel: relatedModel, id: id, indexField: indexField || '', indexFieldBasePath: indexFieldBasePath, addExistingModel: addExistingModel, isEditable: isEditable, onEditModel: onEditModel, onDeleteRelatedModel: onDeleteRelatedModel, finalCustomColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, isAutoHeight: isAutoHeight, hideFooterPagination: hideFooterPagination, onProcessRow: onProcessRow, setData: setData, sumRows: sumRows, visibleRows: visibleRows })) : (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard },
+    }, [model, defaultFilter, queryParams]);
+    (0, react_1.useEffect)(() => {
+        if (paginationMode === 'server') {
+            loadObjectList();
+        }
+    }, [paginationModel]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, typeof data !== 'boolean' && data.columns && (react_1.default.createElement(react_1.default.Fragment, null, noCardWrapper ? (react_1.default.createElement(ContentTable, { data: data, model: model, relatedModel: relatedModel, id: id, indexField: indexField || '', indexFieldBasePath: indexFieldBasePath, addExistingModel: addExistingModel, isEditable: isEditable, onEditModel: onEditModel, onDeleteRelatedModel: onDeleteRelatedModel, finalCustomColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, isAutoHeight: isAutoHeight, hideFooterPagination: hideFooterPagination, onProcessRow: onProcessRow, setData: setData, sumRows: sumRows, visibleRows: visibleRows, paginationMode: paginationMode, paginationModel: paginationModel, setPaginationModel: setPaginationModel })) : (react_1.default.createElement(Card_1.default, { sx: styles_1.Layout.formCard },
         react_1.default.createElement(CardHeader_1.default, { title: label }),
         react_1.default.createElement(CardContent_1.default, null,
-            react_1.default.createElement(ContentTable, { data: data, model: model, relatedModel: relatedModel, id: id, indexField: indexField || '', indexFieldBasePath: indexFieldBasePath, addExistingModel: addExistingModel, isEditable: isEditable, onEditModel: onEditModel, onDeleteRelatedModel: onDeleteRelatedModel, finalCustomColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, isAutoHeight: isAutoHeight, hideFooterPagination: hideFooterPagination, onProcessRow: onProcessRow, setData: setData, sumRows: sumRows, visibleRows: visibleRows }))))))));
+            react_1.default.createElement(ContentTable, { data: data, model: model, relatedModel: relatedModel, id: id, indexField: indexField || '', indexFieldBasePath: indexFieldBasePath, addExistingModel: addExistingModel, isEditable: isEditable, onEditModel: onEditModel, onDeleteRelatedModel: onDeleteRelatedModel, finalCustomColumnOperations: finalCustomColumnOperations, setVisibleRows: setVisibleRows, isAutoHeight: isAutoHeight, hideFooterPagination: hideFooterPagination, onProcessRow: onProcessRow, setData: setData, sumRows: sumRows, visibleRows: visibleRows, paginationMode: paginationMode, paginationModel: paginationModel, setPaginationModel: setPaginationModel }))))))));
 }
 exports.default = GenericRelatedModelList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drf-react-by-schema",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "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",