@ssplib/react-components 0.0.122 → 0.0.124
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.
|
@@ -63,7 +63,7 @@ function DatePicker(_a) {
|
|
|
63
63
|
}, [value]);
|
|
64
64
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
65
65
|
react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
|
|
66
|
-
title && react_1.default.createElement(material_1.InputLabel,
|
|
66
|
+
title && react_1.default.createElement(material_1.InputLabel, { required: required }, title),
|
|
67
67
|
react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: pt_br_1.default, dateAdapter: AdapterDayjs_1.AdapterDayjs },
|
|
68
68
|
react_1.default.createElement(x_date_pickers_2.DatePicker, { minDate: (0, dayjs_1.default)(minDt, 'DD/MM/YYYY'), maxDate: (0, dayjs_1.default)(maxDt, 'DD/MM/YYYY'), format: 'DD/MM/YYYY', value: value, onChange: handleChange, disableHighlightToday: true, sx: {
|
|
69
69
|
outline: (0, lodash_get_1.default)(context.errors, name) ? '1px solid #a51c30' : '',
|
|
@@ -77,8 +77,7 @@ function FileUpload({ name, tipoArquivo, title, required = false, multiple = fal
|
|
|
77
77
|
method: 'POST',
|
|
78
78
|
body: fd,
|
|
79
79
|
headers: {
|
|
80
|
-
|
|
81
|
-
Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NywibmFtZSI6IlBlZGluIiwiZW1haWwiOiJnYWl0YWNoaTBAZ21haWwuY29tIiwicGhvbmVfbnVtYmVyIjoiNjE5OTMwNTg0MjMiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiIwNTUxOTQyOTE2MiIsInJvbGVzIjpbeyJjb2RlIjoxLCJuYW1lIjoiVXNlciBFdmVudG9zIiwic3lzdGVtIjoyfSx7ImNvZGUiOjIsIm5hbWUiOiJBZG1pbiBFdmVudG9zIiwic3lzdGVtIjoyfSx7ImNvZGUiOjQsIm5hbWUiOiJDb25zZWcgVmFsaWRhZG9yIiwic3lzdGVtIjozfSx7ImNvZGUiOjYsIm5hbWUiOiJVc2VyIENvbnNlZyIsInN5c3RlbSI6M31dLCJpYXQiOjE2OTE2MDEyODksImV4cCI6MTY5MjIwNjA4OSwiYXVkIjoiVXNlcnMiLCJpc3MiOiJBdXRoU1NQIiwic3ViIjoiMDU1MTk0MjkxNjIifQ.SNU02JpcWQejBnrG6OMGVof4ALAgSEIAc3qAUnKDHSY`,
|
|
80
|
+
Authorization: `Bearer ${user ? user.token : ''}`,
|
|
82
81
|
},
|
|
83
82
|
})
|
|
84
83
|
.then((res) => {
|
|
@@ -4,7 +4,8 @@ interface ColumnData {
|
|
|
4
4
|
keyName: string;
|
|
5
5
|
size?: number;
|
|
6
6
|
}
|
|
7
|
-
|
|
7
|
+
type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval';
|
|
8
|
+
export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic, statusKeyName, csvExcludeKeys, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvAllButtonTitle, csvShowAllButton, itemCount, filters, }: {
|
|
8
9
|
columns: ColumnData[];
|
|
9
10
|
tableName: string;
|
|
10
11
|
csvShowAllButton?: boolean;
|
|
@@ -30,8 +31,16 @@ export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableNam
|
|
|
30
31
|
dataPath?: string;
|
|
31
32
|
isPublic?: boolean;
|
|
32
33
|
filters?: {
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
[key: string]: {
|
|
35
|
+
type: FilterTypes;
|
|
36
|
+
keyName: string;
|
|
37
|
+
name: string;
|
|
38
|
+
options?: {
|
|
39
|
+
name: string;
|
|
40
|
+
color: string;
|
|
41
|
+
key: string;
|
|
42
|
+
}[];
|
|
43
|
+
}[];
|
|
35
44
|
};
|
|
36
45
|
}): JSX.Element;
|
|
37
46
|
declare const _default: React.MemoExoticComponent<typeof Table>;
|
|
@@ -37,10 +37,15 @@ const Typography_1 = __importDefault(require("@mui/material/Typography"));
|
|
|
37
37
|
const lodash_get_1 = __importDefault(require("lodash.get"));
|
|
38
38
|
const react_1 = __importStar(require("react"));
|
|
39
39
|
const auth_1 = require("../../../context/auth");
|
|
40
|
+
const icons_material_1 = require("@mui/icons-material");
|
|
41
|
+
const FormProvider_1 = __importDefault(require("../../providers/FormProvider"));
|
|
42
|
+
const DatePicker_1 = __importDefault(require("../date/DatePicker"));
|
|
43
|
+
const dayjs_1 = __importDefault(require("dayjs"));
|
|
44
|
+
let startData = [];
|
|
40
45
|
function Table({ columns, fetchFunc, emptyMsg = {
|
|
41
46
|
user: 'Nenhum dado encontrado',
|
|
42
47
|
public: 'Nenhum dado encontrado',
|
|
43
|
-
}, dataPath = '', tableName = 'Dados', csv, columnSize, action, isPublic = false, statusKeyName = '', csvExcludeKeys = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', csvShowAllButton = false, itemCount = 10, }) {
|
|
48
|
+
}, dataPath = '', tableName = 'Dados', csv, columnSize, action, isPublic = false, statusKeyName = '', csvExcludeKeys = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', csvShowAllButton = false, itemCount = 10, filters = {}, }) {
|
|
44
49
|
const [isLoading, setIsLoading] = (0, react_1.useState)(true);
|
|
45
50
|
const [error, setError] = (0, react_1.useState)(null);
|
|
46
51
|
const [data, setData] = (0, react_1.useState)(null);
|
|
@@ -51,7 +56,9 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
51
56
|
const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
|
|
52
57
|
const [paginationCount, setPagCount] = (0, react_1.useState)(1);
|
|
53
58
|
const [listPage, setListPage] = (0, react_1.useState)(1);
|
|
54
|
-
|
|
59
|
+
// filters states
|
|
60
|
+
const [filterCollapse, setFilterCollapse] = (0, react_1.useState)(Array(Object.keys(filters).length).fill(false));
|
|
61
|
+
const [filterOpen, setFilterOpen] = (0, react_1.useState)(false);
|
|
55
62
|
const theme = (0, material_1.useTheme)();
|
|
56
63
|
const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
|
|
57
64
|
(0, react_1.useEffect)(() => {
|
|
@@ -63,14 +70,18 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
63
70
|
status: 500,
|
|
64
71
|
});
|
|
65
72
|
return res.json().then((j) => {
|
|
66
|
-
if (j.statusCode === 204)
|
|
73
|
+
if (j.statusCode === 204) {
|
|
67
74
|
setData({ body: { data: [] } });
|
|
75
|
+
startData = [];
|
|
76
|
+
}
|
|
68
77
|
else if (j.statusCode === 403)
|
|
69
78
|
setError({
|
|
70
79
|
status: j.statusCode,
|
|
71
80
|
});
|
|
72
|
-
else
|
|
81
|
+
else {
|
|
73
82
|
setData(j);
|
|
83
|
+
startData = JSON.parse(JSON.stringify(j));
|
|
84
|
+
}
|
|
74
85
|
console.log(j.statusCode);
|
|
75
86
|
setIsLoading(false);
|
|
76
87
|
});
|
|
@@ -81,9 +92,6 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
81
92
|
});
|
|
82
93
|
});
|
|
83
94
|
}, [userLoaded]);
|
|
84
|
-
(0, react_1.useEffect)(() => {
|
|
85
|
-
setGridSize(12 / (columns.length + (user ? 1 : 0)));
|
|
86
|
-
}, [user, columns]);
|
|
87
95
|
const getCount = (0, react_1.useCallback)((countData) => {
|
|
88
96
|
if (countData.length <= 0)
|
|
89
97
|
return 1;
|
|
@@ -270,21 +278,102 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
270
278
|
return (react_1.default.createElement(Typography_1.default, { color: '#6366F1', fontWeight: 600, fontFamily: 'Inter' }, "PR\u00C9 APROVADO"));
|
|
271
279
|
}
|
|
272
280
|
}, []);
|
|
273
|
-
const
|
|
274
|
-
if (
|
|
275
|
-
setList(getData(data));
|
|
276
|
-
setPagCount(getCount(getData(data)));
|
|
281
|
+
const toggleDrawer = (open) => (event) => {
|
|
282
|
+
if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
|
|
277
283
|
return;
|
|
278
284
|
}
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
285
|
+
};
|
|
286
|
+
const handleFilterOption = (type, keyName, customValue) => {
|
|
287
|
+
const filtered = JSON.parse(JSON.stringify(list));
|
|
288
|
+
if (type === 'a-z') {
|
|
289
|
+
filtered.sort((a, b) => {
|
|
290
|
+
const aValue = a[keyName];
|
|
291
|
+
const bValue = b[keyName];
|
|
292
|
+
const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
|
|
293
|
+
const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
|
|
294
|
+
if (valueA < valueB) {
|
|
295
|
+
return -1;
|
|
296
|
+
}
|
|
297
|
+
if (valueA > valueB) {
|
|
298
|
+
return 1;
|
|
299
|
+
}
|
|
300
|
+
return 0;
|
|
301
|
+
});
|
|
302
|
+
} //
|
|
303
|
+
else if (type === 'z-a') {
|
|
304
|
+
filtered.sort((a, b) => {
|
|
305
|
+
const aValue = a[keyName];
|
|
306
|
+
const bValue = b[keyName];
|
|
307
|
+
const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
|
|
308
|
+
const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
|
|
309
|
+
if (valueA < valueB) {
|
|
310
|
+
return 1;
|
|
311
|
+
}
|
|
312
|
+
if (valueA > valueB) {
|
|
313
|
+
return -1;
|
|
314
|
+
}
|
|
315
|
+
return 0;
|
|
316
|
+
});
|
|
317
|
+
} //
|
|
318
|
+
else if (type === 'items') {
|
|
319
|
+
filtered.sort((a, b) => {
|
|
320
|
+
const aValue = a[keyName];
|
|
321
|
+
const bValue = b[keyName];
|
|
322
|
+
const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
|
|
323
|
+
const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
|
|
324
|
+
if (valueA === customValue)
|
|
325
|
+
return -1;
|
|
326
|
+
if (valueB === customValue)
|
|
327
|
+
return 1;
|
|
328
|
+
if (valueA < valueB) {
|
|
329
|
+
return -1;
|
|
330
|
+
}
|
|
331
|
+
if (valueA > valueB) {
|
|
332
|
+
return 1;
|
|
333
|
+
}
|
|
334
|
+
return 0;
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
setList(filtered);
|
|
338
|
+
setFilterOpen(false);
|
|
339
|
+
};
|
|
340
|
+
const handleFilterReset = () => {
|
|
341
|
+
const value = Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath);
|
|
342
|
+
console.log(value);
|
|
343
|
+
setList(value);
|
|
344
|
+
setFilterOpen(false);
|
|
345
|
+
};
|
|
346
|
+
const handleDateFilter = (from, to, keyName) => {
|
|
347
|
+
const separator = ',';
|
|
348
|
+
let filtered = JSON.parse(JSON.stringify(list));
|
|
349
|
+
filtered = filtered.filter((x) => {
|
|
350
|
+
const dts = x[keyName].split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; });
|
|
351
|
+
let inside = false;
|
|
352
|
+
dts.forEach((k) => {
|
|
353
|
+
if (inside)
|
|
354
|
+
return;
|
|
355
|
+
const dt = (0, dayjs_1.default)(k, 'D/M/YYYY');
|
|
356
|
+
const dtFrom = (0, dayjs_1.default)(from, 'D/M/YYYY');
|
|
357
|
+
if (to) {
|
|
358
|
+
const dtTo = (0, dayjs_1.default)(to, 'D/M/YYYY');
|
|
359
|
+
if ((dtFrom.isBefore(dt) || dtFrom.isSame(dt)) && (dtTo.isAfter(dt) || dtTo.isSame(dt))) {
|
|
360
|
+
inside = true;
|
|
361
|
+
}
|
|
362
|
+
} //
|
|
363
|
+
else {
|
|
364
|
+
if (dtFrom.isBefore(dt) || dtFrom.isSame(dt)) {
|
|
365
|
+
inside = true;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
});
|
|
369
|
+
return inside;
|
|
284
370
|
});
|
|
285
|
-
setList(
|
|
286
|
-
setPagCount(getCount(
|
|
287
|
-
|
|
371
|
+
setList(filtered);
|
|
372
|
+
setPagCount(getCount(filtered));
|
|
373
|
+
setCurrentPage(0);
|
|
374
|
+
setListPage(1);
|
|
375
|
+
setFilterOpen(false);
|
|
376
|
+
};
|
|
288
377
|
if (error)
|
|
289
378
|
return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
|
|
290
379
|
react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
|
|
@@ -300,10 +389,11 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
300
389
|
return react_1.default.createElement(material_1.LinearProgress, null);
|
|
301
390
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
302
391
|
react_1.default.createElement(material_1.Box, { marginX: isSmall ? 0 : 4 },
|
|
303
|
-
react_1.default.createElement(material_1.Stack, { spacing:
|
|
392
|
+
react_1.default.createElement(material_1.Stack, { spacing: 1, direction: { xs: 'column', md: 'row' }, marginBottom: 2 },
|
|
304
393
|
react_1.default.createElement(TextField_1.default, { InputProps: {
|
|
305
394
|
startAdornment: react_1.default.createElement(Search_1.default, { sx: { marginRight: 1, fill: '#c0c0c0' } }),
|
|
306
|
-
}, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` })
|
|
395
|
+
}, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` }),
|
|
396
|
+
react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.FilterAlt, null), variant: 'contained', onClick: (e) => setFilterOpen(true) }, "Filtrar")),
|
|
307
397
|
react_1.default.createElement(material_1.Stack, { spacing: 0.2 },
|
|
308
398
|
getMaxItems().length <= 0 ? (react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
|
|
309
399
|
react_1.default.createElement(Typography_1.default, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public))) : (getMaxItems().map((x, index) => (react_1.default.createElement(material_1.Paper, { key: index, sx: { padding: 0.5, backgroundColor: index % 2 === 0 ? '#E2E8F0' : '#F8FAFC', paddingY: 2 }, elevation: 0 },
|
|
@@ -337,7 +427,32 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
337
427
|
md: 'row',
|
|
338
428
|
}, justifyContent: 'flex-end', spacing: 1 },
|
|
339
429
|
csvShowAllButton && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSVAll, sx: { backgroundColor: '#64748B', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvAllButtonTitle)),
|
|
340
|
-
react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle))))))
|
|
430
|
+
react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle)))))),
|
|
431
|
+
react_1.default.createElement(material_1.SwipeableDrawer, { anchor: isSmall ? 'bottom' : 'right', open: filterOpen, onClose: (e) => setFilterOpen(false), onOpen: (e) => setFilterOpen(true) },
|
|
432
|
+
react_1.default.createElement(material_1.List, { sx: { minWidth: 300 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
433
|
+
react_1.default.createElement(material_1.ListItemButton, { onClick: (e) => setFilterCollapse((s) => s.map((x, idx) => {
|
|
434
|
+
if (idx === fIndex)
|
|
435
|
+
return !x;
|
|
436
|
+
return x;
|
|
437
|
+
})), sx: {
|
|
438
|
+
backgroundColor: '#ebeef2',
|
|
439
|
+
} },
|
|
440
|
+
react_1.default.createElement(material_1.ListItemIcon, null,
|
|
441
|
+
react_1.default.createElement(icons_material_1.Circle, { transform: 'scale(0.4)' })),
|
|
442
|
+
react_1.default.createElement(material_1.ListItemText, { primary: f }),
|
|
443
|
+
filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
|
|
444
|
+
react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
|
|
445
|
+
react_1.default.createElement(material_1.List, { component: 'div', disablePadding: true, sx: { backgroundColor: 'white' } }, filters[f].map((x) => (react_1.default.createElement(react_1.default.Fragment, null, x.options ? (x.options.map((o) => (react_1.default.createElement(material_1.ListItemButton, { sx: { pl: 4, borderBottom: 1, borderColor: '#ebeef2' } },
|
|
446
|
+
react_1.default.createElement(material_1.ListItemText, { primary: o.name, onClick: (e) => handleFilterOption(x.type, x.keyName, o.key), sx: { color: o.color, fontWeight: 600 } }))))) : x.type === 'date-interval' ? (react_1.default.createElement(material_1.Box, { padding: 2 },
|
|
447
|
+
react_1.default.createElement(FormProvider_1.default, { onSubmit: (d) => handleDateFilter(d['filterDtStart'], d['filterDtEnd'], x.keyName) },
|
|
448
|
+
react_1.default.createElement(DatePicker_1.default, { name: 'filterDtStart', title: 'A partir de:', required: true }),
|
|
449
|
+
react_1.default.createElement(material_1.Box, { marginTop: 2 }),
|
|
450
|
+
react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
|
|
451
|
+
react_1.default.createElement(material_1.Stack, { marginTop: 2 },
|
|
452
|
+
react_1.default.createElement(material_1.Button, { type: 'submit', variant: 'outlined', startIcon: react_1.default.createElement(icons_material_1.CalendarToday, null) }, "Filtrar por Data"))))) : (react_1.default.createElement(material_1.ListItemButton, { sx: { pl: 4, borderBottom: 1, borderColor: '#ebeef2' } },
|
|
453
|
+
react_1.default.createElement(material_1.ListItemIcon, { sx: { minWidth: '25px' } }, x.type === 'a-z' ? react_1.default.createElement(icons_material_1.South, { transform: 'scale(0.5)' }) : x.type === 'z-a' ? react_1.default.createElement(icons_material_1.North, { transform: 'scale(0.5)' }) : null),
|
|
454
|
+
react_1.default.createElement(material_1.ListItemText, { primary: x.name, onClick: (e) => handleFilterOption(x.type, x.keyName) })))))))))))),
|
|
455
|
+
react_1.default.createElement(material_1.Button, { variant: 'contained', onClick: handleFilterReset, startIcon: react_1.default.createElement(icons_material_1.RestartAlt, null), sx: { marginX: 2, marginBottom: 2 } }, "Reiniciar"))));
|
|
341
456
|
}
|
|
342
457
|
exports.Table = Table;
|
|
343
458
|
exports.default = react_1.default.memo(Table);
|