drf-react-by-schema 0.8.3 → 0.8.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/api.js +3 -3
- package/dist/components/DataGridBySchemaEditable/InputInterval.js +17 -20
- package/dist/components/DataGridBySchemaEditable/utils.d.ts +2 -2
- package/dist/components/DataGridBySchemaEditable/utils.js +4 -6
- package/dist/components/DataGridBySchemaEditable.js +3 -0
- package/dist/components/GenericModelList.d.ts +3 -1
- package/dist/components/GenericModelList.js +10 -8
- package/dist/components/forms/inputs/EditableAutocompleteFieldBySchema.js +1 -1
- package/dist/context/Overlays.js +4 -4
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +26 -1
- package/package.json +3 -3
package/dist/api.js
CHANGED
|
@@ -495,7 +495,7 @@ const getSignUpOptions = (serverEndPoint) => __awaiter(void 0, void 0, void 0, f
|
|
|
495
495
|
});
|
|
496
496
|
exports.getSignUpOptions = getSignUpOptions;
|
|
497
497
|
const signUp = (data, serverEndPoint) => __awaiter(void 0, void 0, void 0, function* () {
|
|
498
|
-
var _q
|
|
498
|
+
var _q;
|
|
499
499
|
if (!serverEndPoint || !serverEndPoint.signUp) {
|
|
500
500
|
return false;
|
|
501
501
|
}
|
|
@@ -523,8 +523,8 @@ const signUp = (data, serverEndPoint) => __awaiter(void 0, void 0, void 0, funct
|
|
|
523
523
|
return false;
|
|
524
524
|
}
|
|
525
525
|
}
|
|
526
|
-
console.log(`Error updating data at ${url}`, data,
|
|
527
|
-
return { errors:
|
|
526
|
+
console.log(`Error updating data at ${url}`, data, err.response);
|
|
527
|
+
return { errors: err.response ? err.response.data : `Error updating data at ${url}` };
|
|
528
528
|
}
|
|
529
529
|
}
|
|
530
530
|
});
|
|
@@ -72,34 +72,31 @@ const InputInterval = ({ item, applyValue, focusElementRef = null, type }) => {
|
|
|
72
72
|
flexDirection: 'row',
|
|
73
73
|
alignItems: 'end',
|
|
74
74
|
height: 48,
|
|
75
|
-
pl: '20px'
|
|
75
|
+
pl: '20px',
|
|
76
76
|
} },
|
|
77
|
-
type === 'number' &&
|
|
78
|
-
react_1.default.createElement(
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
react_1.default.createElement(react_1.default.Fragment, null,
|
|
91
|
-
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 } }),
|
|
92
|
-
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 } }))));
|
|
77
|
+
type === 'number' && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
78
|
+
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 } }),
|
|
79
|
+
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) } : {} }))),
|
|
80
|
+
type === 'float' && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
81
|
+
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) => {
|
|
82
|
+
handleLowerFilterChange({ target: { value: values.value } });
|
|
83
|
+
}, thousandSeparator: ".", decimalSeparator: ",", decimalScale: 2, fixedDecimalScale: true, valueIsNumericString: true, inputRef: focusElementRef, sx: { mr: 2, minWidth: 130 }, customInput: TextField_1.default }),
|
|
84
|
+
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) => {
|
|
85
|
+
handleUpperFilterChange({ target: { value: values.value } });
|
|
86
|
+
}, 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 }))),
|
|
87
|
+
type === 'date' && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
88
|
+
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 } }),
|
|
89
|
+
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 } })))));
|
|
93
90
|
};
|
|
94
91
|
const InputNumberInterval = (props) => {
|
|
95
|
-
return
|
|
92
|
+
return react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "number" }));
|
|
96
93
|
};
|
|
97
94
|
exports.InputNumberInterval = InputNumberInterval;
|
|
98
95
|
const InputDateInterval = (props) => {
|
|
99
|
-
return
|
|
96
|
+
return react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "date" }));
|
|
100
97
|
};
|
|
101
98
|
exports.InputDateInterval = InputDateInterval;
|
|
102
99
|
const InputFloatInterval = (props) => {
|
|
103
|
-
return
|
|
100
|
+
return react_1.default.createElement(InputInterval, Object.assign({}, props, { type: "float" }));
|
|
104
101
|
};
|
|
105
102
|
exports.InputFloatInterval = InputFloatInterval;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { GridApi } from
|
|
3
|
-
import { GridEnrichedBySchemaColDef } from
|
|
2
|
+
import { GridApi } from '@mui/x-data-grid';
|
|
3
|
+
import { GridEnrichedBySchemaColDef } from '../../utils';
|
|
4
4
|
export type ResizeType = 'condense' | 'maxContent' | 'fitScreen';
|
|
5
5
|
/**
|
|
6
6
|
*
|
|
@@ -18,7 +18,7 @@ function maxOfCol(colIndex) {
|
|
|
18
18
|
invisibleContainer.style.left = '0';
|
|
19
19
|
document.body.append(invisibleContainer);
|
|
20
20
|
const widths = [];
|
|
21
|
-
document.querySelectorAll(`[aria-colindex='${colIndex}']`).forEach(cell => {
|
|
21
|
+
document.querySelectorAll(`[aria-colindex='${colIndex}']`).forEach((cell) => {
|
|
22
22
|
const invisibleCell = document.createElement('div');
|
|
23
23
|
invisibleCell.innerHTML = cell.innerHTML;
|
|
24
24
|
invisibleCell.style.width = 'max-content';
|
|
@@ -65,9 +65,7 @@ function resizeColumns(columns, resizeType, apiRef) {
|
|
|
65
65
|
}
|
|
66
66
|
exports.resizeColumns = resizeColumns;
|
|
67
67
|
const quantityOnlyOperators = ({ type }) => {
|
|
68
|
-
const builtInFilters =
|
|
69
|
-
? (0, x_data_grid_1.getGridDateOperators)()
|
|
70
|
-
: (0, x_data_grid_1.getGridNumericOperators)();
|
|
68
|
+
const builtInFilters = type === 'date' ? (0, x_data_grid_1.getGridDateOperators)() : (0, x_data_grid_1.getGridNumericOperators)();
|
|
71
69
|
let InputComponent = InputInterval_1.InputNumberInterval;
|
|
72
70
|
if (type === 'date') {
|
|
73
71
|
InputComponent = InputInterval_1.InputDateInterval;
|
|
@@ -93,8 +91,8 @@ const quantityOnlyOperators = ({ type }) => {
|
|
|
93
91
|
value <= filterItem.value[1]);
|
|
94
92
|
};
|
|
95
93
|
},
|
|
96
|
-
InputComponent
|
|
97
|
-
}
|
|
94
|
+
InputComponent,
|
|
95
|
+
},
|
|
98
96
|
];
|
|
99
97
|
};
|
|
100
98
|
exports.quantityOnlyOperators = quantityOnlyOperators;
|
|
@@ -193,6 +193,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
193
193
|
column.type = 'dateTime';
|
|
194
194
|
column.minWidth = 180;
|
|
195
195
|
column.valueFormatter = (params) => params.value ? (0, moment_1.default)(params.value).format('DD/MM/YYYY HH:mm') : '';
|
|
196
|
+
column.filterOperators = (0, utils_2.quantityOnlyOperators)({
|
|
197
|
+
type: 'date',
|
|
198
|
+
});
|
|
196
199
|
break;
|
|
197
200
|
case 'nested object':
|
|
198
201
|
column.minWidth = 150;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { GridFilterModel } from '@mui/x-data-grid';
|
|
2
3
|
import { GridEnrichedBySchemaColDef } from '../utils';
|
|
3
4
|
import { SumRowsType } from '../api';
|
|
4
5
|
interface GenericModelListProps {
|
|
@@ -16,6 +17,7 @@ interface GenericModelListProps {
|
|
|
16
17
|
LinkComponent?: any | null;
|
|
17
18
|
hasHeader: boolean;
|
|
18
19
|
paginationMode: 'server' | 'client';
|
|
20
|
+
defaultFilter?: GridFilterModel;
|
|
19
21
|
}
|
|
20
|
-
declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, paginationMode, }: GenericModelListProps) => JSX.Element;
|
|
22
|
+
declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, paginationMode, defaultFilter, }: GenericModelListProps) => JSX.Element;
|
|
21
23
|
export default GenericModelList;
|
|
@@ -44,10 +44,11 @@ const DataGridBySchemaEditable_1 = __importDefault(require("./DataGridBySchemaEd
|
|
|
44
44
|
const DataTotals_1 = __importDefault(require("./DataTotals"));
|
|
45
45
|
const DataTotalsServer_1 = __importDefault(require("./DataTotalsServer"));
|
|
46
46
|
const styles_1 = require("../styles");
|
|
47
|
+
const utils_1 = require("../utils");
|
|
47
48
|
const api_1 = require("../api");
|
|
48
49
|
const DRFReactBySchemaContext_1 = require("../context/DRFReactBySchemaContext");
|
|
49
50
|
const APIWrapperContext_1 = require("../context/APIWrapperContext");
|
|
50
|
-
const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight = true, model, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', }) => {
|
|
51
|
+
const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight = true, model, forceReload = false, LinkComponent = null, hasHeader = false, paginationMode = 'client', defaultFilter, }) => {
|
|
51
52
|
const context = react_1.default.useContext(DRFReactBySchemaContext_1.DRFReactBySchemaContext);
|
|
52
53
|
const apiContext = react_1.default.useContext(APIWrapperContext_1.APIWrapperContext);
|
|
53
54
|
if (!apiContext) {
|
|
@@ -100,14 +101,17 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
|
|
|
100
101
|
console.log('error retrieving data!');
|
|
101
102
|
return;
|
|
102
103
|
case 'server':
|
|
104
|
+
const page = paginationModel ? paginationModel.page : 0;
|
|
105
|
+
const filter = (0, utils_1.mergeFilterItems)(defaultFilter, paginationModel ? paginationModel.filter : undefined);
|
|
106
|
+
const sort = paginationModel ? paginationModel.sort : undefined;
|
|
103
107
|
const loadPaginatedParams = {
|
|
104
108
|
model,
|
|
105
109
|
serverEndPoint,
|
|
106
110
|
columnFields,
|
|
107
111
|
hiddenFields,
|
|
108
|
-
page
|
|
109
|
-
filter
|
|
110
|
-
sort
|
|
112
|
+
page,
|
|
113
|
+
filter,
|
|
114
|
+
sort,
|
|
111
115
|
sumRows,
|
|
112
116
|
};
|
|
113
117
|
const paginatedData = yield (0, api_1.getGenericModelList)(loadPaginatedParams);
|
|
@@ -125,7 +129,7 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
|
|
|
125
129
|
}
|
|
126
130
|
(0, react_1.useEffect)(() => {
|
|
127
131
|
loadObjectList();
|
|
128
|
-
}, [model]);
|
|
132
|
+
}, [model, defaultFilter]);
|
|
129
133
|
(0, react_1.useEffect)(() => {
|
|
130
134
|
if (paginationMode === 'server') {
|
|
131
135
|
loadObjectList();
|
|
@@ -149,8 +153,6 @@ const GenericModelList = ({ columnFields, hiddenFields = [], minWidthFields, ind
|
|
|
149
153
|
: typeof data.rowCount !== undefined
|
|
150
154
|
? data.rowCount
|
|
151
155
|
: 0 })),
|
|
152
|
-
paginationMode === 'client'
|
|
153
|
-
? react_1.default.createElement(DataTotals_1.default, { data: data.data, sumRows: sumRows, visibleRows: visibleRows })
|
|
154
|
-
: react_1.default.createElement(DataTotalsServer_1.default, { sumRows: sumRows, totals: data.sumRowsTotals })))));
|
|
156
|
+
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 }))))));
|
|
155
157
|
};
|
|
156
158
|
exports.default = GenericModelList;
|
|
@@ -56,7 +56,7 @@ const EditableAutocompleteFieldBySchema = react_1.default.forwardRef((_a, ref) =
|
|
|
56
56
|
if (!optionsModel) {
|
|
57
57
|
optionsModel = model;
|
|
58
58
|
}
|
|
59
|
-
const options = optionsAC ? optionsAC[optionsModel] : [];
|
|
59
|
+
const options = optionsAC && optionsAC[optionsModel] ? optionsAC[optionsModel] : [];
|
|
60
60
|
if (fieldKey && index && index >= 0) {
|
|
61
61
|
name = `${fieldKey}.${index}.${name}`;
|
|
62
62
|
}
|
package/dist/context/Overlays.js
CHANGED
|
@@ -73,14 +73,14 @@ function Overlays({ children }) {
|
|
|
73
73
|
react_1.default.createElement(APIWrapper_1.default, { setLoading: setLoading, handleLoading: handleLoading, setSnackBar: setSnackBar, setDialog: setDialog, children: children }),
|
|
74
74
|
react_1.default.createElement(Backdrop_1.default, { sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: loading },
|
|
75
75
|
react_1.default.createElement(CircularProgress_1.default, null)),
|
|
76
|
-
react_1.default.createElement(Snackbar_1.default, { open: snackBar.open, autoHideDuration: 3000, onClose: () => {
|
|
76
|
+
snackBar && (react_1.default.createElement(Snackbar_1.default, { open: snackBar.open, autoHideDuration: 3000, onClose: () => {
|
|
77
77
|
setSnackBar({ open: false });
|
|
78
78
|
}, anchorOrigin: { vertical: 'top', horizontal: 'right' } },
|
|
79
|
-
react_1.default.createElement(Alert_1.default, { severity: snackBar.severity }, snackBar.msg)),
|
|
80
|
-
react_1.default.createElement(Dialog_1.default, { open: dialog.open, onClose: handleDialogClose },
|
|
79
|
+
react_1.default.createElement(Alert_1.default, { severity: snackBar.severity }, snackBar.msg))),
|
|
80
|
+
dialog && (react_1.default.createElement(Dialog_1.default, { open: dialog.open, onClose: handleDialogClose },
|
|
81
81
|
react_1.default.createElement(DialogTitle_1.default, null, dialog.loading ? 'Carregando...' : dialog.title),
|
|
82
82
|
react_1.default.createElement(DialogContent_1.default, null, dialog.loading ? (react_1.default.createElement(Box_1.default, { sx: { display: 'flex' } },
|
|
83
83
|
react_1.default.createElement(CircularProgress_1.default, null))) : (react_1.default.createElement(react_1.default.Fragment, null, dialog.Body))),
|
|
84
|
-
react_1.default.createElement(DialogActions_1.default, null, !dialog.loading && react_1.default.createElement(react_1.default.Fragment, null, dialog.Actions)))));
|
|
84
|
+
react_1.default.createElement(DialogActions_1.default, null, !dialog.loading && react_1.default.createElement(react_1.default.Fragment, null, dialog.Actions))))));
|
|
85
85
|
}
|
|
86
86
|
exports.default = Overlays;
|
package/dist/utils.d.ts
CHANGED
|
@@ -138,4 +138,5 @@ export type AddParametersToEnd<TFunction extends (...args: any) => any, TParamet
|
|
|
138
138
|
export declare function buildDateFormatBySchema(dateViews: string[] | null | undefined): "DD/MM/yyyy" | "MM/yyyy" | "yyyy" | "MM" | "DD";
|
|
139
139
|
export declare const slugToCamelCase: (str: string) => string;
|
|
140
140
|
export declare const slugify: (text: string) => string;
|
|
141
|
+
export declare function mergeFilterItems(defaultFilter: GridFilterModel | undefined, filter: GridFilterModel | undefined): any;
|
|
141
142
|
export {};
|
package/dist/utils.js
CHANGED
|
@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
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;
|
|
26
|
+
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;
|
|
27
27
|
const Yup = __importStar(require("yup"));
|
|
28
28
|
const emptyByType = (field, forDatabase = false) => {
|
|
29
29
|
if (field.model_default) {
|
|
@@ -328,3 +328,28 @@ const slugify = (text) => text
|
|
|
328
328
|
.replace(/[^\w-]+/g, '')
|
|
329
329
|
.replace(/--+/g, '-');
|
|
330
330
|
exports.slugify = slugify;
|
|
331
|
+
function mergeFilterItems(defaultFilter, filter) {
|
|
332
|
+
if (!filter && defaultFilter) {
|
|
333
|
+
return defaultFilter;
|
|
334
|
+
}
|
|
335
|
+
if (!defaultFilter && filter) {
|
|
336
|
+
return filter;
|
|
337
|
+
}
|
|
338
|
+
if (filter && defaultFilter) {
|
|
339
|
+
const items = filter.items;
|
|
340
|
+
const defaultItems = defaultFilter.items;
|
|
341
|
+
const mergedItems = defaultItems.map((defaultItem) => {
|
|
342
|
+
const itemFound = items.find((item) => item.columnField === defaultItem.columnField);
|
|
343
|
+
if (itemFound) {
|
|
344
|
+
return itemFound;
|
|
345
|
+
}
|
|
346
|
+
return defaultItem;
|
|
347
|
+
});
|
|
348
|
+
const unMergedItems = items.filter((item) => !defaultItems
|
|
349
|
+
.map((defaultItem) => defaultItem.columnField)
|
|
350
|
+
.includes(item.columnField));
|
|
351
|
+
return Object.assign(Object.assign({}, filter), { items: [...mergedItems, ...unMergedItems] });
|
|
352
|
+
}
|
|
353
|
+
return undefined;
|
|
354
|
+
}
|
|
355
|
+
exports.mergeFilterItems = mergeFilterItems;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drf-react-by-schema",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.5",
|
|
4
4
|
"description": "Components and Tools for building a React App having Django Rest Framework (DRF) as server",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"build": "tsc",
|
|
10
10
|
"styleguide": "styleguidist server",
|
|
11
11
|
"styleguide:build": "styleguidist build",
|
|
12
|
-
"release:major": "tsc
|
|
13
|
-
"release:minor": "tsc
|
|
12
|
+
"release:major": "tsc || true && yarn version --version $(semver $npm_package_version -i major) && yarn publish --tag latest",
|
|
13
|
+
"release:minor": "tsc || true && yarn version --new-version $(semver $npm_package_version -i minor) && yarn publish --tag latest",
|
|
14
14
|
"release:patch": "tsc || true && yarn version --new-version $(semver $npm_package_version -i patch) && yarn publish --tag latest"
|
|
15
15
|
},
|
|
16
16
|
"repository": {
|