drf-react-by-schema 0.8.4 → 0.8.5

package/dist/components/DataGridBySchemaEditable/InputInterval.js

@@ -72,34 +72,31 @@ const InputInterval = ({ item, applyValue, focusElementRef = null, type }) => {
             flexDirection: 'row',
             alignItems: 'end',
             height: 48,
-            pl: '20px'
+            pl: '20px',
         } },
-        type === 'number' &&
-            react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(TextField_1.default, { name: "lower-bound-input", placeholder: "De", label: "De", variant: "standard", value: Number(filterValueState[0]), onChange: handleLowerFilterChange, type: "number", inputRef: focusElementRef, sx: { mr: 2, minWidth: 130 } }),
-                react_1.default.createElement(TextField_1.default, { name: "upper-bound-input", placeholder: "At\u00E9", label: "At\u00E9", variant: "standard", value: Number(filterValueState[1]), onChange: handleUpperFilterChange, type: "number", sx: { minWidth: 130 }, InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {} })),
-        type === 'float' &&
-            react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_number_format_1.NumericFormat, { name: "lower-bound-input", placeholder: "De", label: "De", variant: "standard", value: Number(filterValueState[0]), onValueChange: (values, sourceInfo) => {
-                        handleLowerFilterChange({ target: { value: values.value } });
-                    }, thousandSeparator: '.', decimalSeparator: ',', decimalScale: 2, fixedDecimalScale: true, valueIsNumericString: true, inputRef: focusElementRef, sx: { mr: 2, minWidth: 130 }, customInput: TextField_1.default }),
-                react_1.default.createElement(react_number_format_1.NumericFormat, { name: "upper-bound-input", placeholder: "At\u00E9", label: "At\u00E9", variant: "standard", value: Number(filterValueState[1]), onValueChange: (values, sourceInfo) => {
-                        handleUpperFilterChange({ target: { value: values.value } });
-                    }, thousandSeparator: '.', decimalSeparator: ',', decimalScale: 2, fixedDecimalScale: true, valueIsNumericString: true, InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {}, sx: { minWidth: 130 }, customInput: TextField_1.default })),
-        type === 'date' &&
-            react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(TextField_1.default, { name: "lower-bound-input", label: "De", variant: "standard", value: filterValueState[0] || '', onChange: handleLowerFilterChange, type: "date", inputRef: focusElementRef, InputLabelProps: { shrink: true }, sx: { mr: 2, minWidth: 130 } }),
-                react_1.default.createElement(TextField_1.default, { name: "upper-bound-input", label: "At\u00E9", variant: "standard", value: filterValueState[1] || '', onChange: handleUpperFilterChange, type: "date", InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {}, InputLabelProps: { shrink: true }, sx: { minWidth: 130 } }))));
+        type === 'number' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(TextField_1.default, { name: "lower-bound-input", placeholder: "De", label: "De", variant: "standard", value: Number(filterValueState[0]), onChange: handleLowerFilterChange, type: "number", inputRef: focusElementRef, sx: { mr: 2, minWidth: 130 } }),
+            react_1.default.createElement(TextField_1.default, { name: "upper-bound-input", placeholder: "At\u00E9", label: "At\u00E9", variant: "standard", value: Number(filterValueState[1]), onChange: handleUpperFilterChange, type: "number", sx: { minWidth: 130 }, InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {} }))),
+        type === 'float' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_number_format_1.NumericFormat, { name: "lower-bound-input", placeholder: "De", label: "De", variant: "standard", value: Number(filterValueState[0]), onValueChange: (values, sourceInfo) => {
+                    handleLowerFilterChange({ target: { value: values.value } });
+                }, thousandSeparator: ".", decimalSeparator: ",", decimalScale: 2, fixedDecimalScale: true, valueIsNumericString: true, inputRef: focusElementRef, sx: { mr: 2, minWidth: 130 }, customInput: TextField_1.default }),
+            react_1.default.createElement(react_number_format_1.NumericFormat, { name: "upper-bound-input", placeholder: "At\u00E9", label: "At\u00E9", variant: "standard", value: Number(filterValueState[1]), onValueChange: (values, sourceInfo) => {
+                    handleUpperFilterChange({ target: { value: values.value } });
+                }, thousandSeparator: ".", decimalSeparator: ",", decimalScale: 2, fixedDecimalScale: true, valueIsNumericString: true, InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {}, sx: { minWidth: 130 }, customInput: TextField_1.default }))),
+        type === 'date' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(TextField_1.default, { name: "lower-bound-input", label: "De", variant: "standard", value: filterValueState[0] || '', onChange: handleLowerFilterChange, type: "date", inputRef: focusElementRef, InputLabelProps: { shrink: true }, sx: { mr: 2, minWidth: 130 } }),
+            react_1.default.createElement(TextField_1.default, { name: "upper-bound-input", label: "At\u00E9", variant: "standard", value: filterValueState[1] || '', onChange: handleUpperFilterChange, type: "date", InputProps: applying ? { endAdornment: react_1.default.createElement(Sync_1.default, null) } : {}, InputLabelProps: { shrink: true }, sx: { minWidth: 130 } })))));
 };
 const InputNumberInterval = (props) => {
-    return (react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "number" })));
+    return react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "number" }));
 };
 exports.InputNumberInterval = InputNumberInterval;
 const InputDateInterval = (props) => {
-    return (react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "date" })));
+    return react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "date" }));
 };
 exports.InputDateInterval = InputDateInterval;
 const InputFloatInterval = (props) => {
-    return (react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "float" })));
+    return react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "float" }));
 };
 exports.InputFloatInterval = InputFloatInterval;

package/dist/components/DataGridBySchemaEditable/utils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { GridApi } from "@mui/x-data-grid";
-import { GridEnrichedBySchemaColDef } from "../../utils";
+import { GridApi } from '@mui/x-data-grid';
+import { GridEnrichedBySchemaColDef } from '../../utils';
 export type ResizeType = 'condense' | 'maxContent' | 'fitScreen';
 /**
  *

package/dist/components/DataGridBySchemaEditable/utils.js

@@ -18,7 +18,7 @@ function maxOfCol(colIndex) {
     invisibleContainer.style.left = '0';
     document.body.append(invisibleContainer);
     const widths = [];
-    document.querySelectorAll(`[aria-colindex='${colIndex}']`).forEach(cell => {
+    document.querySelectorAll(`[aria-colindex='${colIndex}']`).forEach((cell) => {
         const invisibleCell = document.createElement('div');
         invisibleCell.innerHTML = cell.innerHTML;
         invisibleCell.style.width = 'max-content';
@@ -65,9 +65,7 @@ function resizeColumns(columns, resizeType, apiRef) {
 }
 exports.resizeColumns = resizeColumns;
 const quantityOnlyOperators = ({ type }) => {
-    const builtInFilters = (type === 'date')
-        ? (0, x_data_grid_1.getGridDateOperators)()
-        : (0, x_data_grid_1.getGridNumericOperators)();
+    const builtInFilters = type === 'date' ? (0, x_data_grid_1.getGridDateOperators)() : (0, x_data_grid_1.getGridNumericOperators)();
     let InputComponent = InputInterval_1.InputNumberInterval;
     if (type === 'date') {
         InputComponent = InputInterval_1.InputDateInterval;
@@ -93,8 +91,8 @@ const quantityOnlyOperators = ({ type }) => {
                         value <= filterItem.value[1]);
                 };
             },
-            InputComponent
-        }
+            InputComponent,
+        },
     ];
 };
 exports.quantityOnlyOperators = quantityOnlyOperators;

package/dist/components/DataGridBySchemaEditable.js

@@ -193,6 +193,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
                     column.type = 'dateTime';
                     column.minWidth = 180;
                     column.valueFormatter = (params) => params.value ? (0, moment_1.default)(params.value).format('DD/MM/YYYY HH:mm') : '';
+                    column.filterOperators = (0, utils_2.quantityOnlyOperators)({
+                        type: 'date',
+                    });
                     break;
                 case 'nested object':
                     column.minWidth = 150;

package/dist/components/GenericModelList.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { GridFilterModel } from '@mui/x-data-grid';
 import { GridEnrichedBySchemaColDef } from '../utils';
 import { SumRowsType } from '../api';
 interface GenericModelListProps {
@@ -16,6 +17,7 @@ interface GenericModelListProps {
     LinkComponent?: any | null;
     hasHeader: boolean;
     paginationMode: 'server' | 'client';
+    defaultFilter?: GridFilterModel;
 }
-declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, paginationMode, }: GenericModelListProps) => JSX.Element;
+declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, }: GenericModelListProps) => JSX.Element;
 export default GenericModelList;

package/dist/components/GenericModelList.js

@@ -44,10 +44,11 @@ const DataGridBySchemaEditable_1 = __importDefault(require("./DataGridBySchemaEd
 const DataTotals_1 = __importDefault(require("./DataTotals"));
 const DataTotalsServer_1 = __importDefault(require("./DataTotalsServer"));
 const styles_1 = require("../styles");
+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', }) => {
+const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight = true, model, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, }) => {
     const context = react_1.default.useContext(DRFReactBySchemaContext_1.DRFReactBySchemaContext);
     const apiContext = react_1.default.useContext(APIWrapperContext_1.APIWrapperContext);
     if (!apiContext) {
@@ -100,14 +101,17 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
                 console.log('error retrieving data!');
                 return;
             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,
                     serverEndPoint,
                     columnFields,
                     hiddenFields,
-                    page: paginationModel ? paginationModel.page : 0,
-                    filter: paginationModel ? paginationModel.filter : undefined,
-                    sort: paginationModel ? paginationModel.sort : undefined,
+                    page,
+                    filter,
+                    sort,
                     sumRows,
                 };
                 const paginatedData = yield (0, api_1.getGenericModelList)(loadPaginatedParams);
@@ -125,7 +129,7 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
     }
     (0, react_1.useEffect)(() => {
         loadObjectList();
-    }, [model]);
+    }, [model, defaultFilter]);
     (0, react_1.useEffect)(() => {
         if (paginationMode === 'server') {
             loadObjectList();
@@ -149,8 +153,6 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
                     : typeof data.rowCount !== undefined
                         ? data.rowCount
                         : 0 })),
-        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 })))));
+        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

@@ -138,4 +138,5 @@ export type AddParametersToEnd<TFunction extends (...args: any) => any, TParamet
 export declare function buildDateFormatBySchema(dateViews: string[] | null | undefined): "DD/MM/yyyy" | "MM/yyyy" | "yyyy" | "MM" | "DD";
 export declare const slugToCamelCase: (str: string) => string;
 export declare const slugify: (text: string) => string;
+export declare function mergeFilterItems(defaultFilter: GridFilterModel | undefined, filter: GridFilterModel | undefined): any;
 export {};

package/dist/utils.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.slugify = exports.slugToCamelCase = exports.buildDateFormatBySchema = exports.getPatternFormat = exports.reducer = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = void 0;
+exports.mergeFilterItems = exports.slugify = exports.slugToCamelCase = exports.buildDateFormatBySchema = exports.getPatternFormat = exports.reducer = exports.isTmpId = exports.getTmpId = exports.errorProps = exports.buildGenericYupValidationSchema = exports.populateValues = exports.getChoiceByValue = exports.emptyByType = void 0;
 const Yup = __importStar(require("yup"));
 const emptyByType = (field, forDatabase = false) => {
     if (field.model_default) {
@@ -328,3 +328,28 @@ const slugify = (text) => text
     .replace(/[^\w-]+/g, '')
     .replace(/--+/g, '-');
 exports.slugify = slugify;
+function mergeFilterItems(defaultFilter, filter) {
+    if (!filter && defaultFilter) {
+        return defaultFilter;
+    }
+    if (!defaultFilter && filter) {
+        return filter;
+    }
+    if (filter && defaultFilter) {
+        const items = filter.items;
+        const defaultItems = defaultFilter.items;
+        const mergedItems = defaultItems.map((defaultItem) => {
+            const itemFound = items.find((item) => item.columnField === defaultItem.columnField);
+            if (itemFound) {
+                return itemFound;
+            }
+            return defaultItem;
+        });
+        const unMergedItems = items.filter((item) => !defaultItems
+            .map((defaultItem) => defaultItem.columnField)
+            .includes(item.columnField));
+        return Object.assign(Object.assign({}, filter), { items: [...mergedItems, ...unMergedItems] });
+    }
+    return undefined;
+}
+exports.mergeFilterItems = mergeFilterItems;

package/package.json

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