drf-react-by-schema 0.5.4 → 0.6.0
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.d.ts +14 -16
- package/dist/api.js +88 -59
- package/dist/components/DataGridBySchemaEditable/FooterToolbar.d.ts +1 -1
- package/dist/components/DataGridBySchemaEditable/FooterToolbar.js +5 -11
- package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.d.ts +5 -5
- package/dist/components/DataGridBySchemaEditable/SelectEditInputCell.js +32 -34
- package/dist/components/DataGridBySchemaEditable.d.ts +4 -1
- package/dist/components/DataGridBySchemaEditable.js +187 -134
- package/dist/components/GenericModelList.d.ts +3 -2
- package/dist/components/GenericModelList.js +68 -43
- package/dist/utils.d.ts +14 -1
- package/package.json +3 -2
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Item, SchemaType, Id, GridEnrichedBySchemaColDef } from '../utils';
|
|
2
|
+
import { Item, SchemaType, Id, GridEnrichedBySchemaColDef, PaginationModel } from '../utils';
|
|
3
3
|
import { SxProps } from '@mui/material';
|
|
4
4
|
import { OnEditModelType } from '../context/APIWrapperContext';
|
|
5
5
|
interface DataGridBySchemaEditableProps {
|
|
6
6
|
schema: SchemaType;
|
|
7
7
|
data: Item[];
|
|
8
|
+
rowCount?: number;
|
|
8
9
|
columns: GridEnrichedBySchemaColDef[];
|
|
9
10
|
model: string;
|
|
10
11
|
fieldKey?: string;
|
|
@@ -31,6 +32,8 @@ interface DataGridBySchemaEditableProps {
|
|
|
31
32
|
defaultValues?: Item;
|
|
32
33
|
hideFooterPagination?: boolean;
|
|
33
34
|
setVisibleRows?: (p: any) => void;
|
|
35
|
+
paginationModel?: PaginationModel;
|
|
36
|
+
setPaginationModel?: (x: PaginationModel) => void;
|
|
34
37
|
}
|
|
35
38
|
declare const DataGridBySchemaEditable: React.ForwardRefExoticComponent<DataGridBySchemaEditableProps & React.RefAttributes<unknown>>;
|
|
36
39
|
export default DataGridBySchemaEditable;
|
|
@@ -71,9 +71,8 @@ const FooterToolbar_1 = require("./DataGridBySchemaEditable/FooterToolbar");
|
|
|
71
71
|
const ConfirmDialog_1 = require("./DataGridBySchemaEditable/ConfirmDialog");
|
|
72
72
|
const APIWrapperContext_1 = require("../context/APIWrapperContext");
|
|
73
73
|
const stringMask = require('string-mask');
|
|
74
|
-
;
|
|
75
74
|
const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
76
|
-
var { schema, data, columns, model, fieldKey, labelKey = 'nome', index, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', stateToLink = {}, minWidth = 80, modelParent, modelParentId, customColumnOperations, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, sx = { mr: 2 }, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows } = _a, other = __rest(_a, ["schema", "data", "columns", "model", "fieldKey", "labelKey", "index", "name", "indexField", "addExistingModel", "indexFieldMinWidth", "indexFieldBasePath", "stateToLink", "minWidth", "modelParent", "modelParentId", "customColumnOperations", "customLinkDestination", "LinkComponent", "onProcessRow", "onDataChange", "onEditModel", "isEditable", "sx", "isAutoHeight", "defaultValues", "hideFooterPagination", "setVisibleRows"]);
|
|
75
|
+
var { schema, data, rowCount = 0, columns, model, fieldKey, labelKey = 'nome', index, name = Math.floor(Math.random() * 1000000).toString(), indexField = 'nome', addExistingModel, indexFieldMinWidth = 350, indexFieldBasePath = '', stateToLink = {}, minWidth = 80, modelParent, modelParentId, customColumnOperations, customLinkDestination, LinkComponent, onProcessRow, onDataChange, onEditModel, isEditable = false, sx = { mr: 2 }, isAutoHeight = false, defaultValues = {}, hideFooterPagination = false, setVisibleRows, paginationModel = undefined, setPaginationModel = undefined } = _a, other = __rest(_a, ["schema", "data", "rowCount", "columns", "model", "fieldKey", "labelKey", "index", "name", "indexField", "addExistingModel", "indexFieldMinWidth", "indexFieldBasePath", "stateToLink", "minWidth", "modelParent", "modelParentId", "customColumnOperations", "customLinkDestination", "LinkComponent", "onProcessRow", "onDataChange", "onEditModel", "isEditable", "sx", "isAutoHeight", "defaultValues", "hideFooterPagination", "setVisibleRows", "paginationModel", "setPaginationModel"]);
|
|
77
76
|
const { serverEndPoint } = DRFReactBySchemaContext_1.DRFReactBySchemaContext
|
|
78
77
|
? react_1.default.useContext(DRFReactBySchemaContext_1.DRFReactBySchemaContext)
|
|
79
78
|
: { serverEndPoint: null };
|
|
@@ -81,10 +80,12 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
81
80
|
const initialSnackBar = {
|
|
82
81
|
open: false,
|
|
83
82
|
msg: '',
|
|
84
|
-
severity: 'info'
|
|
83
|
+
severity: 'info',
|
|
85
84
|
};
|
|
86
85
|
const [snackBar, setSnackBar] = (0, react_1.useState)(initialSnackBar);
|
|
87
|
-
const [dataGrid, setDataGrid] = (0, react_1.useState)({
|
|
86
|
+
const [dataGrid, setDataGrid] = (0, react_1.useState)({
|
|
87
|
+
data: [],
|
|
88
|
+
});
|
|
88
89
|
const [preparedColumns, setPreparedColumns] = (0, react_1.useState)(null);
|
|
89
90
|
const [dataGridLoading, setDataGridLoading] = (0, react_1.useState)(false);
|
|
90
91
|
const [rowModesModel, setRowModesModel] = (0, react_1.useState)({});
|
|
@@ -101,8 +102,12 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
101
102
|
if (!schema[col.field]) {
|
|
102
103
|
continue;
|
|
103
104
|
}
|
|
104
|
-
if (['field', 'nested object'].includes(schema[col.field].type) &&
|
|
105
|
-
|
|
105
|
+
if (['field', 'nested object'].includes(schema[col.field].type) &&
|
|
106
|
+
!(col.field in optionsAC.current)) {
|
|
107
|
+
const options = yield (0, api_1.getAutoComplete)({
|
|
108
|
+
model: col.field,
|
|
109
|
+
serverEndPoint,
|
|
110
|
+
});
|
|
106
111
|
if (options) {
|
|
107
112
|
optionsAC.current[col.field] = options;
|
|
108
113
|
continue;
|
|
@@ -115,7 +120,10 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
115
120
|
continue;
|
|
116
121
|
}
|
|
117
122
|
if (col.field === indexField && addExistingModel && !optionsAC.current[col.field]) {
|
|
118
|
-
const options = yield (0, api_1.getAutoComplete)({
|
|
123
|
+
const options = yield (0, api_1.getAutoComplete)({
|
|
124
|
+
model: addExistingModel,
|
|
125
|
+
serverEndPoint,
|
|
126
|
+
});
|
|
119
127
|
if (options) {
|
|
120
128
|
optionsAC.current[col.field] = options;
|
|
121
129
|
continue;
|
|
@@ -139,108 +147,112 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
139
147
|
if (isInEditMode) {
|
|
140
148
|
return [
|
|
141
149
|
react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `save_${id}`, icon: react_1.default.createElement(Check_1.default, null), label: "Salvar", onClick: handleSaveClick(id), color: "success" }),
|
|
142
|
-
react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `cancel_${id}`, icon: react_1.default.createElement(Undo_1.default, null), label: "Cancelar", onClick: handleCancelClick(id), color: "inherit" })
|
|
150
|
+
react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `cancel_${id}`, icon: react_1.default.createElement(Undo_1.default, null), label: "Cancelar", onClick: handleCancelClick(id), color: "inherit" }),
|
|
143
151
|
];
|
|
144
152
|
}
|
|
145
153
|
return [
|
|
146
154
|
react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `edit_${id}`, icon: react_1.default.createElement(Edit_1.default, null), label: "Edit", onClick: handleEditClick(id), color: "inherit" }),
|
|
147
|
-
react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `remove_${id}`, icon: react_1.default.createElement(Clear_1.default, null), label: "Delete", onClick: handleDeleteClick(id), color: "error" })
|
|
155
|
+
react_1.default.createElement(x_data_grid_1.GridActionsCellItem, { key: `remove_${id}`, icon: react_1.default.createElement(Clear_1.default, null), label: "Delete", onClick: handleDeleteClick(id), color: "error" }),
|
|
148
156
|
];
|
|
149
|
-
}
|
|
157
|
+
},
|
|
150
158
|
});
|
|
151
159
|
}
|
|
152
160
|
cols = [...cols, ...columns];
|
|
153
|
-
cols = cols.map(col => {
|
|
161
|
+
cols = cols.map((col) => {
|
|
154
162
|
if (!schema[col.field]) {
|
|
155
163
|
return col;
|
|
156
164
|
}
|
|
157
|
-
const isIndexField =
|
|
165
|
+
const isIndexField = indexField !== '' && col.field === indexField;
|
|
158
166
|
let column = col;
|
|
159
167
|
if (isIndexField) {
|
|
160
168
|
col.isIndexField = true;
|
|
161
169
|
}
|
|
162
|
-
column.editable =
|
|
170
|
+
column.editable =
|
|
171
|
+
isEditable &&
|
|
172
|
+
(!schema[col.field].read_only ||
|
|
173
|
+
['field', 'nested object'].includes(schema[col.field].type));
|
|
163
174
|
if (['field', 'nested object'].includes(schema[col.field].type)) {
|
|
164
|
-
column.creatable =
|
|
175
|
+
column.creatable =
|
|
176
|
+
'related_editable' in schema[col.field]
|
|
177
|
+
? schema[col.field].related_editable
|
|
178
|
+
: column.creatable;
|
|
165
179
|
}
|
|
166
180
|
switch (schema[col.field].type) {
|
|
167
181
|
case 'date':
|
|
168
182
|
column.type = 'date';
|
|
169
|
-
column.valueFormatter = params => params.value
|
|
170
|
-
|
|
171
|
-
: ''
|
|
172
|
-
|
|
183
|
+
column.valueFormatter = (params) => params.value ? (0, moment_1.default)(params.value).format('DD/MM/YYYY') : '';
|
|
184
|
+
column.filterOperators = (0, utils_2.quantityOnlyOperators)({
|
|
185
|
+
type: 'date',
|
|
186
|
+
});
|
|
173
187
|
break;
|
|
174
188
|
case 'datetime':
|
|
175
189
|
column.type = 'dateTime';
|
|
176
190
|
column.minWidth = 180;
|
|
177
|
-
column.valueFormatter = params => params.value
|
|
178
|
-
? (0, moment_1.default)(params.value).format('DD/MM/YYYY HH:mm')
|
|
179
|
-
: '';
|
|
191
|
+
column.valueFormatter = (params) => params.value ? (0, moment_1.default)(params.value).format('DD/MM/YYYY HH:mm') : '';
|
|
180
192
|
break;
|
|
181
193
|
case 'nested object':
|
|
182
194
|
column.minWidth = 150;
|
|
183
195
|
if (isEditable) {
|
|
184
|
-
column.valueFormatter = params => {
|
|
185
|
-
return
|
|
196
|
+
column.valueFormatter = (params) => {
|
|
197
|
+
return !params.value ? '' : params.value.label;
|
|
186
198
|
};
|
|
187
199
|
column.filterable = false;
|
|
188
200
|
column.sortComparator = (v1, v2, param1, param2) => {
|
|
189
201
|
return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.label, v2.label, param1, param2);
|
|
190
202
|
};
|
|
191
|
-
column.renderEditCell = (params) => react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField, onEditModel: onEditModel }));
|
|
203
|
+
column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField, onEditModel: onEditModel })));
|
|
192
204
|
break;
|
|
193
205
|
}
|
|
194
|
-
column.valueGetter = params => {
|
|
195
|
-
return
|
|
206
|
+
column.valueGetter = (params) => {
|
|
207
|
+
return !params.value ? '' : params.value.label;
|
|
196
208
|
};
|
|
197
209
|
break;
|
|
198
210
|
case 'field':
|
|
199
211
|
column.orderable = false;
|
|
200
212
|
if (isEditable) {
|
|
201
213
|
column.minWidth = 300;
|
|
202
|
-
column.valueFormatter = params => {
|
|
203
|
-
return
|
|
214
|
+
column.valueFormatter = (params) => {
|
|
215
|
+
return !params.value || !Array.isArray(params.value)
|
|
204
216
|
? ''
|
|
205
|
-
: params.value.map(val => val.label).join(', ');
|
|
217
|
+
: params.value.map((val) => val.label).join(', ');
|
|
206
218
|
};
|
|
207
219
|
column.filterable = false;
|
|
208
|
-
column.renderEditCell = (params) => react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField, multiple: schema[col.field].many || false }));
|
|
220
|
+
column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField, multiple: schema[col.field].many || false })));
|
|
209
221
|
break;
|
|
210
222
|
}
|
|
211
|
-
column.valueGetter = params => {
|
|
212
|
-
return
|
|
223
|
+
column.valueGetter = (params) => {
|
|
224
|
+
return !params.value || !Array.isArray(params.value)
|
|
213
225
|
? ''
|
|
214
|
-
: params.value.map(val => val.label).join(', ');
|
|
226
|
+
: params.value.map((val) => val.label).join(', ');
|
|
215
227
|
};
|
|
216
228
|
break;
|
|
217
229
|
case 'choice':
|
|
218
230
|
if (isEditable) {
|
|
219
231
|
column.minWidth = 150;
|
|
220
|
-
column.valueFormatter = params => {
|
|
221
|
-
return
|
|
232
|
+
column.valueFormatter = (params) => {
|
|
233
|
+
return !params.value ? '' : params.value.display_name;
|
|
222
234
|
};
|
|
223
235
|
column.filterable = false;
|
|
224
236
|
column.sortComparator = (v1, v2, param1, param2) => {
|
|
225
237
|
return (0, x_data_grid_1.gridStringOrNumberComparator)(v1.display_name, v2.display_name, param1, param2);
|
|
226
238
|
};
|
|
227
|
-
column.renderEditCell = (params) => react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField }));
|
|
239
|
+
column.renderEditCell = (params) => (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: isIndexField })));
|
|
228
240
|
break;
|
|
229
241
|
}
|
|
230
|
-
column.valueGetter = params => {
|
|
231
|
-
return
|
|
242
|
+
column.valueGetter = (params) => {
|
|
243
|
+
return !params.value ? '' : params.value.display_name;
|
|
232
244
|
};
|
|
233
245
|
break;
|
|
234
246
|
case 'boolean':
|
|
235
247
|
if (isEditable) {
|
|
236
|
-
column.valueFormatter = params => {
|
|
237
|
-
return
|
|
248
|
+
column.valueFormatter = (params) => {
|
|
249
|
+
return params.value ? 'Sim' : 'Não';
|
|
238
250
|
};
|
|
239
|
-
column.renderEditCell = (params) => react_1.default.createElement(BooleanInputCell_1.BooleanInputCell, Object.assign({}, params, { column: column }));
|
|
251
|
+
column.renderEditCell = (params) => (react_1.default.createElement(BooleanInputCell_1.BooleanInputCell, Object.assign({}, params, { column: column })));
|
|
240
252
|
break;
|
|
241
253
|
}
|
|
242
|
-
column.valueGetter = params => {
|
|
243
|
-
return
|
|
254
|
+
column.valueGetter = (params) => {
|
|
255
|
+
return params.value ? 'Sim' : 'Não';
|
|
244
256
|
};
|
|
245
257
|
break;
|
|
246
258
|
case 'decimal':
|
|
@@ -250,32 +262,36 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
250
262
|
const suffix = schema[col.field].suffix || '';
|
|
251
263
|
const isCurrency = schema[col.field].is_currency;
|
|
252
264
|
column.type = 'number';
|
|
253
|
-
column.valueFormatter = params => {
|
|
254
|
-
return
|
|
265
|
+
column.valueFormatter = (params) => {
|
|
266
|
+
return !params.value
|
|
255
267
|
? ''
|
|
256
268
|
: parseFloat(params.value).toLocaleString('pt-BR', {
|
|
257
269
|
minimumFractionDigits: decimalScale,
|
|
258
|
-
maximumFractionDigits: decimalScale
|
|
270
|
+
maximumFractionDigits: decimalScale,
|
|
259
271
|
});
|
|
260
272
|
};
|
|
261
273
|
if (isEditable) {
|
|
262
|
-
column.renderEditCell = (params) => react_1.default.createElement(GridDecimalInput_1.GridDecimalInput, Object.assign({}, params, {
|
|
274
|
+
column.renderEditCell = (params) => (react_1.default.createElement(GridDecimalInput_1.GridDecimalInput, Object.assign({}, params, { decimalPlaces: decimalScale, isCurrency: isCurrency, prefix: prefix, suffix: suffix, column: column })));
|
|
263
275
|
}
|
|
264
|
-
column.filterOperators = (0, utils_2.quantityOnlyOperators)({
|
|
276
|
+
column.filterOperators = (0, utils_2.quantityOnlyOperators)({
|
|
277
|
+
type: 'float',
|
|
278
|
+
});
|
|
265
279
|
break;
|
|
266
280
|
case 'number':
|
|
267
281
|
case 'integer':
|
|
268
282
|
column.type = 'number';
|
|
269
|
-
column.filterOperators = (0, utils_2.quantityOnlyOperators)({
|
|
283
|
+
column.filterOperators = (0, utils_2.quantityOnlyOperators)({
|
|
284
|
+
type: 'number',
|
|
285
|
+
});
|
|
270
286
|
break;
|
|
271
287
|
}
|
|
272
288
|
if (indexFieldMinWidth && !column.minWidth) {
|
|
273
|
-
column.minWidth =
|
|
289
|
+
column.minWidth = col.field === indexField ? indexFieldMinWidth : minWidth;
|
|
274
290
|
}
|
|
275
291
|
if (indexField) {
|
|
276
292
|
if (col.field === indexField) {
|
|
277
293
|
column.flex = 1;
|
|
278
|
-
column.renderCell = params => {
|
|
294
|
+
column.renderCell = (params) => {
|
|
279
295
|
if (LinkComponent && customLinkDestination) {
|
|
280
296
|
return (react_1.default.createElement(LinkComponent, { to: `${customLinkDestination(params)}`, state: stateToLink }, params.formattedValue));
|
|
281
297
|
}
|
|
@@ -283,9 +299,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
283
299
|
!indexFieldBasePath ||
|
|
284
300
|
(['field', 'nested object'].includes(schema[col.field].type) &&
|
|
285
301
|
(!params.row[col.field] || !params.row[col.field].id))) {
|
|
286
|
-
return
|
|
302
|
+
return react_1.default.createElement(react_1.default.Fragment, null, params.formattedValue);
|
|
287
303
|
}
|
|
288
|
-
const targetId =
|
|
304
|
+
const targetId = ['field', 'nested object'].includes(schema[col.field].type)
|
|
289
305
|
? params.row[col.field].id.toString()
|
|
290
306
|
: params.row.id.toString();
|
|
291
307
|
return (react_1.default.createElement(LinkComponent, { to: `${indexFieldBasePath}${targetId}`, state: stateToLink }, params.formattedValue));
|
|
@@ -296,7 +312,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
296
312
|
addExistingModel) {
|
|
297
313
|
column.renderEditCell = (params) => {
|
|
298
314
|
if (!(0, utils_1.isTmpId)(params.id)) {
|
|
299
|
-
return
|
|
315
|
+
return react_1.default.createElement(x_data_grid_1.GridEditInputCell, Object.assign({}, params));
|
|
300
316
|
}
|
|
301
317
|
return (react_1.default.createElement(SelectEditInputCell_1.SelectEditInputCell, Object.assign({}, params, { column: column, type: schema[col.field].type, optionsAC: optionsAC, isIndexField: true })));
|
|
302
318
|
};
|
|
@@ -309,7 +325,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
309
325
|
}
|
|
310
326
|
// format numbers:
|
|
311
327
|
if (column.patternFormat) {
|
|
312
|
-
column.valueFormatter = params => {
|
|
328
|
+
column.valueFormatter = (params) => {
|
|
313
329
|
if (!params.value || typeof params.value !== 'string') {
|
|
314
330
|
return params.value;
|
|
315
331
|
}
|
|
@@ -317,7 +333,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
317
333
|
return formattedValue;
|
|
318
334
|
};
|
|
319
335
|
if (isEditable) {
|
|
320
|
-
column.renderEditCell = params => react_1.default.createElement(GridPatternInput_1.GridPatternInput, Object.assign({}, params, { patternFormat: column.patternFormat }));
|
|
336
|
+
column.renderEditCell = (params) => (react_1.default.createElement(GridPatternInput_1.GridPatternInput, Object.assign({}, params, { patternFormat: column.patternFormat })));
|
|
321
337
|
}
|
|
322
338
|
}
|
|
323
339
|
// Finally!
|
|
@@ -349,14 +365,14 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
349
365
|
setDialogOpen(false);
|
|
350
366
|
return;
|
|
351
367
|
}
|
|
352
|
-
const newData = dataGrid.data.filter(row => row.id !== idToRemove.current);
|
|
368
|
+
const newData = dataGrid.data.filter((row) => row.id !== idToRemove.current);
|
|
353
369
|
setDataGrid(Object.assign(Object.assign({}, dataGrid), { data: newData }));
|
|
354
370
|
if (modelParent && modelParentId && apiContext) {
|
|
355
371
|
apiContext.onDeleteRelatedModel({
|
|
356
372
|
model: modelParent,
|
|
357
373
|
id: modelParentId,
|
|
358
374
|
relatedModel: model,
|
|
359
|
-
relatedModelId: idToRemove.current
|
|
375
|
+
relatedModelId: idToRemove.current,
|
|
360
376
|
});
|
|
361
377
|
}
|
|
362
378
|
// Reflect changes to the outside, for example for doing global calculations over multiple rows:
|
|
@@ -368,9 +384,9 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
368
384
|
};
|
|
369
385
|
const handleCancelClick = (id) => () => {
|
|
370
386
|
setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [id]: { mode: x_data_grid_1.GridRowModes.View, ignoreModifications: true } }));
|
|
371
|
-
const editedRow = dataGrid.data.find(row => row.id === id);
|
|
387
|
+
const editedRow = dataGrid.data.find((row) => row.id === id);
|
|
372
388
|
if (editedRow && editedRow.isNew) {
|
|
373
|
-
setDataGrid(Object.assign(Object.assign({}, dataGrid), { data: dataGrid.data.filter(row => row.id !== id) }));
|
|
389
|
+
setDataGrid(Object.assign(Object.assign({}, dataGrid), { data: dataGrid.data.filter((row) => row.id !== id) }));
|
|
374
390
|
}
|
|
375
391
|
};
|
|
376
392
|
(0, react_1.useEffect)(() => {
|
|
@@ -388,7 +404,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
388
404
|
emptyItem.current[col.field] = defaultValues[col.field];
|
|
389
405
|
continue;
|
|
390
406
|
}
|
|
391
|
-
emptyItem.current[col.field] =
|
|
407
|
+
emptyItem.current[col.field] = schema[col.field]
|
|
392
408
|
? (0, utils_1.emptyByType)(schema[col.field])
|
|
393
409
|
: null;
|
|
394
410
|
}
|
|
@@ -400,10 +416,10 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
400
416
|
yupValidationSchema.current = (0, utils_1.buildGenericYupValidationSchema)({
|
|
401
417
|
data: emptyItem.current,
|
|
402
418
|
schema,
|
|
403
|
-
skipFields
|
|
419
|
+
skipFields,
|
|
404
420
|
});
|
|
405
421
|
setDataGrid({
|
|
406
|
-
data
|
|
422
|
+
data,
|
|
407
423
|
});
|
|
408
424
|
}, [data]);
|
|
409
425
|
(0, react_1.useEffect)(() => {
|
|
@@ -420,14 +436,18 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
420
436
|
return false;
|
|
421
437
|
}
|
|
422
438
|
setDataGridLoading(true);
|
|
423
|
-
const indexCol = preparedColumns.find(col => col.field === indexField);
|
|
439
|
+
const indexCol = preparedColumns.find((col) => col.field === indexField);
|
|
424
440
|
processingRow.current = newRow.id;
|
|
425
441
|
yield yupValidationSchema.current.validate(newRow);
|
|
426
|
-
const onlyAddExisting =
|
|
442
|
+
const onlyAddExisting = indexField &&
|
|
443
|
+
(0, utils_1.isTmpId)(newRow.id) &&
|
|
444
|
+
newRow[indexField] &&
|
|
445
|
+
!(0, utils_1.isTmpId)(newRow[indexField].id) &&
|
|
446
|
+
(!indexCol || !indexCol.valueFormatter);
|
|
447
|
+
const createNewItem = indexField &&
|
|
427
448
|
(0, utils_1.isTmpId)(newRow.id) &&
|
|
428
|
-
|
|
429
|
-
(
|
|
430
|
-
const createNewItem = (indexField && (0, utils_1.isTmpId)(newRow.id) && newRow[indexField] && (0, utils_1.isTmpId)(newRow[indexField].id));
|
|
449
|
+
newRow[indexField] &&
|
|
450
|
+
(0, utils_1.isTmpId)(newRow[indexField].id);
|
|
431
451
|
if (onlyAddExisting) {
|
|
432
452
|
const row = {};
|
|
433
453
|
row.id_to_add = newRow[indexField].id;
|
|
@@ -456,7 +476,7 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
456
476
|
relatedModelId: newRow.id,
|
|
457
477
|
newRow,
|
|
458
478
|
schema,
|
|
459
|
-
onlyAddExisting
|
|
479
|
+
onlyAddExisting,
|
|
460
480
|
});
|
|
461
481
|
const responseAsData = response;
|
|
462
482
|
if ((onlyAddExisting && typeof response != 'boolean') ||
|
|
@@ -490,79 +510,112 @@ const DataGridBySchemaEditable = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
490
510
|
setDataGridLoading(false);
|
|
491
511
|
return false;
|
|
492
512
|
});
|
|
493
|
-
const customPaddings =
|
|
513
|
+
const customPaddings = isAutoHeight
|
|
494
514
|
? {
|
|
495
|
-
'&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': {
|
|
496
|
-
|
|
497
|
-
|
|
515
|
+
'&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': {
|
|
516
|
+
py: '8px',
|
|
517
|
+
},
|
|
518
|
+
'&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': {
|
|
519
|
+
py: '15px',
|
|
520
|
+
},
|
|
521
|
+
'&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': {
|
|
522
|
+
py: '22px',
|
|
523
|
+
},
|
|
498
524
|
}
|
|
499
525
|
: undefined;
|
|
500
526
|
return (react_1.default.createElement(Box_1.default, { className: `dataGrid_${name}`, sx: { height: '100%' } },
|
|
501
|
-
preparedColumns === null
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
if (newVisibleRowsJSON !== visibleRows.current) {
|
|
511
|
-
setVisibleRows(newVisibleRows);
|
|
512
|
-
visibleRows.current = newVisibleRowsJSON;
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
}, editMode: "row", loading: dataGridLoading, hideFooterPagination: hideFooterPagination, getRowHeight: () => {
|
|
516
|
-
if (isAutoHeight) {
|
|
517
|
-
return 'auto';
|
|
518
|
-
}
|
|
519
|
-
return null;
|
|
520
|
-
}, isCellEditable: params => {
|
|
521
|
-
var _a;
|
|
522
|
-
return (((_a = rowModesModel[params.row.id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit &&
|
|
523
|
-
(!(0, utils_1.isTmpId)(params.row.id) ||
|
|
524
|
-
((0, utils_1.isTmpId)(params.row.id) &&
|
|
525
|
-
(params.field === indexField ||
|
|
526
|
-
!optionsAC.current ||
|
|
527
|
-
!Object.prototype.hasOwnProperty.call(optionsAC.current, indexField) ||
|
|
528
|
-
(preparedColumns.find(col => col.field === indexField) &&
|
|
529
|
-
Object.prototype.hasOwnProperty.call(preparedColumns.find(col => col.field === indexField), 'valueFormatter'))))));
|
|
530
|
-
}, rowModesModel: rowModesModel, onRowEditStart: handleRowEditStart, onRowEditStop: handleRowEditStop, processRowUpdate: processRowUpdate, onProcessRowUpdateError: (e) => {
|
|
531
|
-
setDataGridLoading(false);
|
|
532
|
-
if (processingRow.current) {
|
|
533
|
-
setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [processingRow.current]: { mode: x_data_grid_1.GridRowModes.Edit } }));
|
|
534
|
-
}
|
|
535
|
-
const msg = `Erro em "${e.path}": ${e.errors}`;
|
|
536
|
-
setSnackBar({
|
|
537
|
-
open: true,
|
|
538
|
-
severity: 'error',
|
|
539
|
-
msg
|
|
527
|
+
preparedColumns === null ? (react_1.default.createElement(Box_1.default, { sx: styles_1.Layout.loadingBox },
|
|
528
|
+
react_1.default.createElement(CircularProgress_1.default, null))) : (react_1.default.createElement(x_data_grid_1.DataGrid, { rows: dataGrid.data, columns: preparedColumns, onStateChange: (state) => {
|
|
529
|
+
if (setVisibleRows) {
|
|
530
|
+
const newVisibleRows = Object.entries(state.filter.visibleRowsLookup)
|
|
531
|
+
.filter((entry) => {
|
|
532
|
+
return entry[1] === true;
|
|
533
|
+
})
|
|
534
|
+
.map((entry) => {
|
|
535
|
+
return entry[0];
|
|
540
536
|
});
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
537
|
+
const newVisibleRowsJSON = JSON.stringify(newVisibleRows);
|
|
538
|
+
if (newVisibleRowsJSON !== visibleRows.current) {
|
|
539
|
+
setVisibleRows(newVisibleRows);
|
|
540
|
+
visibleRows.current = newVisibleRowsJSON;
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
}, editMode: "row", loading: dataGridLoading, hideFooterPagination: hideFooterPagination, getRowHeight: () => {
|
|
544
|
+
if (isAutoHeight) {
|
|
545
|
+
return 'auto';
|
|
546
|
+
}
|
|
547
|
+
return null;
|
|
548
|
+
}, isCellEditable: (params) => {
|
|
549
|
+
var _a;
|
|
550
|
+
return (((_a = rowModesModel[params.row.id]) === null || _a === void 0 ? void 0 : _a.mode) === x_data_grid_1.GridRowModes.Edit &&
|
|
551
|
+
(!(0, utils_1.isTmpId)(params.row.id) ||
|
|
552
|
+
((0, utils_1.isTmpId)(params.row.id) &&
|
|
553
|
+
(params.field === indexField ||
|
|
554
|
+
!optionsAC.current ||
|
|
555
|
+
!Object.prototype.hasOwnProperty.call(optionsAC.current, indexField) ||
|
|
556
|
+
(preparedColumns.find((col) => col.field === indexField) &&
|
|
557
|
+
Object.prototype.hasOwnProperty.call(preparedColumns.find((col) => col.field === indexField), 'valueFormatter'))))));
|
|
558
|
+
}, rowModesModel: rowModesModel, onRowEditStart: handleRowEditStart, onRowEditStop: handleRowEditStop, processRowUpdate: processRowUpdate, onProcessRowUpdateError: (e) => {
|
|
559
|
+
setDataGridLoading(false);
|
|
560
|
+
if (processingRow.current) {
|
|
561
|
+
setRowModesModel(Object.assign(Object.assign({}, rowModesModel), { [processingRow.current]: {
|
|
562
|
+
mode: x_data_grid_1.GridRowModes.Edit,
|
|
563
|
+
} }));
|
|
564
|
+
}
|
|
565
|
+
const msg = `Erro em "${e.path}": ${e.errors}`;
|
|
566
|
+
setSnackBar({
|
|
567
|
+
open: true,
|
|
568
|
+
severity: 'error',
|
|
569
|
+
msg,
|
|
570
|
+
});
|
|
571
|
+
console.log(e);
|
|
572
|
+
}, components: {
|
|
573
|
+
Toolbar: CustomToolbar_1.CustomToolbar,
|
|
574
|
+
Footer: FooterToolbar_1.FooterToolbar,
|
|
575
|
+
}, componentsProps: {
|
|
576
|
+
toolbar: {
|
|
577
|
+
preparedColumns,
|
|
578
|
+
setPreparedColumns,
|
|
579
|
+
showQuickFilter: true,
|
|
580
|
+
quickFilterProps: { debounceMs: 500 },
|
|
581
|
+
},
|
|
582
|
+
footer: {
|
|
583
|
+
name,
|
|
584
|
+
setRowModesModel,
|
|
585
|
+
dataGrid,
|
|
586
|
+
setDataGrid,
|
|
587
|
+
emptyItem,
|
|
588
|
+
indexField,
|
|
589
|
+
isEditable,
|
|
590
|
+
},
|
|
591
|
+
filterPanel: {
|
|
592
|
+
sx: {
|
|
593
|
+
'& .MuiDataGrid-filterFormValueInput': {
|
|
594
|
+
width: 300,
|
|
595
|
+
},
|
|
557
596
|
},
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
597
|
+
},
|
|
598
|
+
}, experimentalFeatures: { newEditingApi: isEditable }, sx: customPaddings, paginationMode: paginationModel ? 'server' : 'client', onPageChange: (newPage) => {
|
|
599
|
+
if (setPaginationModel && paginationModel) {
|
|
600
|
+
setPaginationModel(Object.assign(Object.assign({}, paginationModel), { page: newPage }));
|
|
601
|
+
}
|
|
602
|
+
}, onPageSizeChange: (newPageSize) => {
|
|
603
|
+
if (setPaginationModel && paginationModel) {
|
|
604
|
+
setPaginationModel(Object.assign(Object.assign({}, paginationModel), { pageSize: newPageSize }));
|
|
605
|
+
}
|
|
606
|
+
}, rowCount: paginationModel && typeof rowCount !== 'undefined'
|
|
607
|
+
? rowCount
|
|
608
|
+
: undefined, pageSize: paginationModel ? paginationModel.pageSize : 100, rowsPerPageOptions: [2], filterMode: paginationModel ? 'server' : 'client', onFilterModelChange: paginationModel
|
|
609
|
+
? (newFilter) => {
|
|
610
|
+
if (setPaginationModel && paginationModel) {
|
|
611
|
+
setPaginationModel(Object.assign(Object.assign({}, paginationModel), { filter: newFilter }));
|
|
562
612
|
}
|
|
563
|
-
}
|
|
613
|
+
}
|
|
614
|
+
: undefined })),
|
|
564
615
|
react_1.default.createElement(ConfirmDialog_1.ConfirmDialog, { open: dialogOpen, onClose: handleDialogClose, onConfirm: handleDeleteSave }),
|
|
565
|
-
react_1.default.createElement(Snackbar_1.default, { open: snackBar.open, autoHideDuration: 5000, onClose: () => {
|
|
616
|
+
react_1.default.createElement(Snackbar_1.default, { open: snackBar.open, autoHideDuration: 5000, onClose: () => {
|
|
617
|
+
setSnackBar(Object.assign(Object.assign({}, initialSnackBar), { open: false }));
|
|
618
|
+
}, anchorOrigin: { vertical: 'top', horizontal: 'center' } },
|
|
566
619
|
react_1.default.createElement(Alert_1.default, { severity: snackBar.severity }, snackBar.msg))));
|
|
567
620
|
});
|
|
568
621
|
DataGridBySchemaEditable.displayName = 'DataGridBySchemaEditable';
|
|
@@ -13,8 +13,9 @@ interface GenericModelListProps {
|
|
|
13
13
|
isAutoHeight?: boolean;
|
|
14
14
|
model: string;
|
|
15
15
|
forceReload: boolean;
|
|
16
|
-
LinkComponent?:
|
|
16
|
+
LinkComponent?: any | null;
|
|
17
17
|
hasHeader: boolean;
|
|
18
|
+
paginationMode: 'server' | 'client';
|
|
18
19
|
}
|
|
19
|
-
declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, }: GenericModelListProps) => JSX.Element;
|
|
20
|
+
declare const GenericModelList: ({ columnFields, hiddenFields, minWidthFields, indexFieldBasePath, indexField, customColumnOperations, customLinkDestination, sumRows, isAutoHeight, model, forceReload, LinkComponent, hasHeader, paginationMode, }: GenericModelListProps) => JSX.Element;
|
|
20
21
|
export default GenericModelList;
|