drf-react-by-schema 0.6.1 → 0.6.3

package/dist/api.d.ts

@@ -1,6 +1,7 @@
 import { serverEndPointType } from './context/DRFReactBySchemaContext';
 import { Item, SchemaType, modelOptionsType, DataSchemaColumnsType, ItemSchemaColumnsType, PaginatedResult } from './utils';
-import { GridFilterModel } from '@mui/x-data-grid';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid';
+import { AlertColor } from '@mui/material/Alert';
 type Id = string | number | null;
 interface TargetApiParams {
     path: string;
@@ -70,8 +71,20 @@ export interface getGenericModelListProps {
     loadedModelOptions?: modelOptionsType | boolean;
     page?: number;
     filter?: GridFilterModel;
+    sort?: GridSortModel;
+    sumRows?: SumRowsType;
 }
-export declare const getGenericModelList: ({ model, serverEndPoint, id, relatedModel, relatedModelId, columnFields, hiddenFields, creatableFields, isInBatches, loadedSchema, loadedModelOptions, page, filter, }: getGenericModelListProps) => Promise<false | DataSchemaColumnsType>;
+export interface SumRowsType {
+    rows: SumRowsItem[];
+    severity?: AlertColor;
+}
+interface SumRowsItem {
+    field: string;
+    prefix?: string;
+    suffix?: string;
+    isCount?: boolean;
+}
+export declare const getGenericModelList: ({ model, serverEndPoint, id, relatedModel, relatedModelId, columnFields, hiddenFields, creatableFields, isInBatches, loadedSchema, loadedModelOptions, page, filter, sort, sumRows, }: getGenericModelListProps) => Promise<false | DataSchemaColumnsType>;
 export declare const getGenericModel: ({ model, serverEndPoint, id, relatedModel, relatedModelId, }: {
     model: string;
     serverEndPoint: serverEndPointType | null;

package/dist/api.js

@@ -540,7 +540,7 @@ const isLoggedIn = (serverEndPoint) => __awaiter(void 0, void 0, void 0, functio
     return usuaria;
 });
 exports.isLoggedIn = isLoggedIn;
-const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', columnFields, hiddenFields = ['id'], creatableFields = [], isInBatches = false, loadedSchema, loadedModelOptions, page, filter, }) => __awaiter(void 0, void 0, void 0, function* () {
+const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', columnFields, hiddenFields = ['id'], creatableFields = [], isInBatches = false, loadedSchema, loadedModelOptions, page, filter, sort, sumRows, }) => __awaiter(void 0, void 0, void 0, function* () {
     let path = `${model}/${id}`;
     let schemaPath = model;
     let schema = loadedSchema;
@@ -550,16 +550,16 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
         path += `/${relatedModel}/${relatedModelId}`;
         schemaPath += `/${id}/${relatedModel}`;
     }
-    if (page || filter) {
-        path += '?';
-    }
-    if (page) {
-        path += `page=${page + 1}`;
+    const queryParams = [];
+    // SERVER-SIDE TOTALS (sumRows):
+    if (sumRows) {
+        const sumRowsParams = sumRows.rows.map(row => row.field).join(',');
+        queryParams.push(`sum_rows=${sumRowsParams}`);
     }
+    // SERVER-SIDE FILTERING:
     if (filter) {
-        const filtersArr = [];
         if (filter.quickFilterValues && filter.quickFilterValues.length > 0 && filter.quickFilterValues[0]) {
-            filtersArr.push(`search=${filter.quickFilterValues[0]}`);
+            queryParams.push(`search=${filter.quickFilterValues[0]}`);
         }
         for (const item of filter.items) {
             if (!item.operatorValue) {
@@ -568,12 +568,23 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
             const queryParam = item.value
                 ? `columnField=${item.columnField}&operatorValue=${item.operatorValue}&value=${item.value}`
                 : `columnField=${item.columnField}&operatorValue=${item.operatorValue}`;
-            filtersArr.push(queryParam);
+            queryParams.push(queryParam);
         }
-        if (page) {
-            path += '&';
+    }
+    // SERVER-SIDE SORTING:
+    if (sort) {
+        const sortParams = [];
+        for (const item of sort) {
+            sortParams.push(item.sort === 'desc' ? `-${item.field}` : item.field);
         }
-        path += filtersArr.join('&');
+        queryParams.push(`ordering=${sortParams.join(',')}`);
+    }
+    // SERVER-SIDE PAGINATION:
+    if (page) {
+        queryParams.push(`page=${page + 1}`);
+    }
+    if (queryParams.length > 0) {
+        path += `?${queryParams.join('&')}`;
     }
     // Only get schema and columns if not in batches or in first batch:
     if (!schema) {
@@ -589,6 +600,7 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
         }
     }
     let rowCount = 0;
+    let sumRowsTotals = null;
     let data = [];
     if (!id || (id && !relatedModelId)) {
         if (isInBatches) {
@@ -601,6 +613,9 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
         const dataRaw = 'results' in ret ? ret.results : ret;
         if ('results' in ret) {
             rowCount = ret.count;
+            if (sumRows) {
+                sumRowsTotals = ret.sum_rows;
+            }
         }
         data = dataRaw.map((row) => {
             const newRow = {};
@@ -624,10 +639,10 @@ const getGenericModelList = ({ model, serverEndPoint, id = '', relatedModel = ''
     }
     if (loadedSchema) {
         // DEBUG console.log({ path, data });
-        return { data, rowCount };
+        return { data, rowCount, sumRowsTotals };
     }
     // DEBUG  console.log({ path, data, columns, schema });
-    return { data, columns, schema, modelOptions, rowCount };
+    return { data, columns, schema, modelOptions, rowCount, sumRowsTotals };
 });
 exports.getGenericModelList = getGenericModelList;
 const getGenericModel = ({ model, serverEndPoint, id = '', relatedModel = '', relatedModelId = '', }) => __awaiter(void 0, void 0, void 0, function* () {

package/dist/components/DataGridBySchemaEditable.js

@@ -578,6 +578,10 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     setPreparedColumns,
                     showQuickFilter: true,
                     quickFilterProps: { debounceMs: 500 },
+                    getRowsToExport: (e) => {
+                        console.log(e);
+                        return [];
+                    },
                 },
                 footer: {
                     name,
@@ -611,6 +615,12 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                         setPaginationModel(Object.assign(Object.assign({}, paginationModel), { filter: newFilter }));
                     }
                 }
+                : undefined, sortingMode: paginationModel ? 'server' : 'client', onSortModelChange: paginationModel
+                ? (newSorting) => {
+                    if (setPaginationModel && paginationModel) {
+                        setPaginationModel(Object.assign(Object.assign({}, paginationModel), { sort: newSorting }));
+                    }
+                }
                 : undefined })),
         react_1.default.createElement(ConfirmDialog_1.ConfirmDialog, { open: dialogOpen, onClose: handleDialogClose, onConfirm: handleDeleteSave }),
         react_1.default.createElement(Snackbar_1.default, { open: snackBar.open, autoHideDuration: 5000, onClose: () => {

package/dist/components/DataTotals.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-import { AlertColor } from '@mui/material/Alert';
 import { GridRowId } from '@mui/x-data-grid';
 import { Item } from '../utils';
-export interface SumRowsType {
-    rows: Item[];
-    severity?: AlertColor;
-}
+import { SumRowsType } from '../api';
 interface DataTotalsProps {
     data?: Item[];
     sumRows?: SumRowsType;

package/dist/components/DataTotalsServer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SumRowsType } from '../api';
+interface DataTotalsServerProps {
+    sumRows?: SumRowsType;
+    totals?: null | Record<string, number>;
+}
+declare const DataTotalsServer: ({ sumRows, totals }: DataTotalsServerProps) => JSX.Element;
+export default DataTotalsServer;

package/dist/components/DataTotalsServer.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Alert_1 = __importDefault(require("@mui/material/Alert"));
+const List_1 = __importDefault(require("@mui/material/List"));
+const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const react_number_format_1 = require("react-number-format");
+;
+const DataTotalsServer = ({ sumRows, totals }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, sumRows && sumRows.rows.length > 0 &&
+        react_1.default.createElement(Alert_1.default, { severity: sumRows.severity || 'info' },
+            react_1.default.createElement(List_1.default, { dense: true }, sumRows.rows.map(row => (react_1.default.createElement(ListItem_1.default, { key: `sumRows_${row.field}` },
+                react_1.default.createElement(react_number_format_1.NumericFormat, { value: totals ? totals[`${row.field}_total`] : 0, thousandSeparator: '.', decimalSeparator: ',', displayType: 'text', decimalScale: row.isCount ? 0 : 2, fixedDecimalScale: true, prefix: row.prefix, suffix: row.suffix }))))))));
+};
+exports.default = DataTotalsServer;

package/dist/components/GenericModelList.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SumRowsType } from './DataTotals';
 import { GridEnrichedBySchemaColDef } from '../utils';
+import { SumRowsType } from '../api';
 interface GenericModelListProps {
     columnFields: string[];
     hiddenFields?: string[];

package/dist/components/GenericModelList.js

@@ -42,6 +42,7 @@ const Button_1 = __importDefault(require("@mui/material/Button"));
 const AddCircleOutline_1 = __importDefault(require("@mui/icons-material/AddCircleOutline"));
 const DataGridBySchemaEditable_1 = __importDefault(require("./DataGridBySchemaEditable"));
 const DataTotals_1 = __importDefault(require("./DataTotals"));
+const DataTotalsServer_1 = __importDefault(require("./DataTotalsServer"));
 const styles_1 = require("../styles");
 const api_1 = require("../api");
 const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
@@ -102,6 +103,8 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
                     hiddenFields,
                     page: paginationModel ? paginationModel.page : 0,
                     filter: paginationModel ? paginationModel.filter : undefined,
+                    sort: paginationModel ? paginationModel.sort : undefined,
+                    sumRows,
                 };
                 const paginatedData = yield (0, api_1.getGenericModelList)(loadPaginatedParams);
                 if (paginatedData && typeof paginatedData !== 'boolean') {
@@ -142,6 +145,8 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
                     : typeof data.rowCount !== undefined
                         ? data.rowCount
                         : 0 })),
-        react_1.default.createElement(DataTotals_1.default, { data: data.data, sumRows: sumRows, visibleRows: visibleRows })))));
+        paginationMode === 'client'
+            ? react_1.default.createElement(DataTotals_1.default, { data: data.data, sumRows: sumRows, visibleRows: visibleRows })
+            : react_1.default.createElement(DataTotalsServer_1.default, { sumRows: sumRows, totals: data.sumRowsTotals })))));
 };
 exports.default = GenericModelList;

package/dist/utils.d.ts

@@ -1,16 +1,18 @@
-import { GridActionsColDef, GridColDef, GridFilterModel } from '@mui/x-data-grid';
+import { GridActionsColDef, GridColDef, GridFilterModel, GridSortModel } 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;
+    sum_rows: null | Record<string, number>;
     results: Item[];
 };
 export interface PaginationModel {
     page: number;
     pageSize: number;
     filter?: GridFilterModel;
+    sort?: GridSortModel;
 }
 export type SchemaType = Record<string, Field>;
 export type modelOptionsType = Record<string, string>;
@@ -54,9 +56,10 @@ interface GridActionsBySchemaColDef extends GridActionsColDef {
 export type GridEnrichedBySchemaColDef = GridBySchemaColDef | GridActionsBySchemaColDef;
 export interface DataSchemaColumnsType {
     data: Item[];
-    rowCount?: number;
     schema: SchemaType;
     modelOptions: modelOptionsType;
+    rowCount?: number;
+    sumRowsTotals?: null | Record<string, number>;
     columns?: GridEnrichedBySchemaColDef[];
 }
 export interface ItemSchemaColumnsType {

package/package.json

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