@ssplib/react-components 0.0.138 → 0.0.140
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/components/form/table/Table.js +66 -31
- package/package.json +1 -1
|
@@ -83,6 +83,11 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
83
83
|
else {
|
|
84
84
|
setData(j);
|
|
85
85
|
startData = JSON.parse(JSON.stringify(j));
|
|
86
|
+
const oldFilters = localStorage.getItem('tableFilters');
|
|
87
|
+
if (oldFilters) {
|
|
88
|
+
const filters = JSON.parse(oldFilters);
|
|
89
|
+
setAppliedFilters(filters);
|
|
90
|
+
}
|
|
86
91
|
}
|
|
87
92
|
setIsLoading(false);
|
|
88
93
|
});
|
|
@@ -346,7 +351,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
346
351
|
const filterBasedOnList = (filteredList) => {
|
|
347
352
|
if (filteredList.length === 0)
|
|
348
353
|
return;
|
|
349
|
-
let rawList = Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath);
|
|
354
|
+
let rawList = JSON.parse(JSON.stringify(Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath)));
|
|
350
355
|
function category(type, keyName, uniqueName, customValue, referencekey) {
|
|
351
356
|
if (type === 'a-z') {
|
|
352
357
|
rawList = rawList.sort((a, b) => {
|
|
@@ -521,35 +526,50 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
521
526
|
setPagCount(getCount(rawList));
|
|
522
527
|
setCurrentPage(0);
|
|
523
528
|
setListPage(1);
|
|
524
|
-
setFilterOpen(false);
|
|
525
529
|
};
|
|
526
530
|
const handleFilterOption = (type, keyName, uniqueName, customValue, referencekey) => {
|
|
527
|
-
setAppliedFilters((s) =>
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
531
|
+
setAppliedFilters((s) => {
|
|
532
|
+
const value = [
|
|
533
|
+
...s.filter((x) => (x.isDate ? true : x.keyName !== keyName)),
|
|
534
|
+
{
|
|
535
|
+
type,
|
|
536
|
+
keyName,
|
|
537
|
+
uniqueName,
|
|
538
|
+
customValue,
|
|
539
|
+
referencekey,
|
|
540
|
+
},
|
|
541
|
+
];
|
|
542
|
+
localStorage.setItem('tableFilters', JSON.stringify(value));
|
|
543
|
+
return value;
|
|
544
|
+
});
|
|
537
545
|
};
|
|
538
546
|
const handleFilterReset = () => {
|
|
539
|
-
const value = Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath);
|
|
547
|
+
const value = JSON.parse(JSON.stringify(Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath)));
|
|
540
548
|
setList(value);
|
|
541
549
|
setAppliedFilters([]);
|
|
550
|
+
localStorage.setItem('tableFilters', JSON.stringify([]));
|
|
551
|
+
};
|
|
552
|
+
const removeFilter = (uniqueName) => {
|
|
553
|
+
if (uniqueName === 'isDate')
|
|
554
|
+
setAppliedFilters((s) => s.filter((x) => !x.isDate));
|
|
555
|
+
else
|
|
556
|
+
setAppliedFilters((s) => s.filter((x) => x.uniqueName !== uniqueName));
|
|
542
557
|
};
|
|
543
558
|
const handleDateFilter = (from, to, keyName) => {
|
|
544
|
-
setAppliedFilters((s) =>
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
559
|
+
setAppliedFilters((s) => {
|
|
560
|
+
const value = [
|
|
561
|
+
...s.filter((x) => !x.isDate),
|
|
562
|
+
{
|
|
563
|
+
isDate: true,
|
|
564
|
+
from,
|
|
565
|
+
to,
|
|
566
|
+
keyName,
|
|
567
|
+
id: from + keyName,
|
|
568
|
+
},
|
|
569
|
+
];
|
|
570
|
+
localStorage.setItem('tableFilters', JSON.stringify(value));
|
|
571
|
+
return value;
|
|
572
|
+
});
|
|
553
573
|
};
|
|
554
574
|
if (error)
|
|
555
575
|
return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
|
|
@@ -619,20 +639,35 @@ function Table({ columns, fetchFunc, emptyMsg = {
|
|
|
619
639
|
react_1.default.createElement(material_1.ListItemText, { primary: f }),
|
|
620
640
|
filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
|
|
621
641
|
react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
|
|
622
|
-
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' } }
|
|
623
|
-
|
|
642
|
+
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: Object.assign({ pl: 4, borderBottom: 1, borderColor: '#ebeef2' }, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(o)}`) && {
|
|
643
|
+
bgcolor: '#b7e4c7',
|
|
644
|
+
':hover': { bgcolor: '#b7e4c7' },
|
|
645
|
+
})) },
|
|
646
|
+
react_1.default.createElement(material_1.ListItemText, { primary: o.name, onClick: (e) => handleFilterOption(x.type, x.keyName, `${f}:${JSON.stringify(o)}`, o.key, x.referenceKey), sx: { color: o.color, fontWeight: 600 } }),
|
|
647
|
+
react_1.default.createElement(material_1.Box, null, appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(o)}`) && (react_1.default.createElement(material_1.Tooltip, { title: 'Remover' },
|
|
648
|
+
react_1.default.createElement(material_1.IconButton, { sx: { bgcolor: '#c71c1c', height: '30px', width: '30px', ':hover': { bgcolor: 'red', border: '2px solid #9e2929' } }, onClick: (e) => removeFilter(`${f}:${JSON.stringify(o)}`) },
|
|
649
|
+
react_1.default.createElement(icons_material_1.Delete, { sx: { fill: 'white', transform: 'scale(0.8, 0.8)' } }))))))))) : x.type === 'date-interval' ? (react_1.default.createElement(material_1.Box, { padding: 2 },
|
|
624
650
|
react_1.default.createElement(FormProvider_1.default, { onSubmit: (d) => handleDateFilter(d['filterDtStart'], d['filterDtEnd'], x.keyName) },
|
|
625
651
|
react_1.default.createElement(DatePicker_1.default, { name: 'filterDtStart', title: 'A partir de:', required: true }),
|
|
626
652
|
react_1.default.createElement(material_1.Box, { marginTop: 2 }),
|
|
627
653
|
react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
|
|
628
654
|
react_1.default.createElement(material_1.Stack, { marginTop: 2 },
|
|
629
|
-
react_1.default.createElement(material_1.Button, { type: 'submit', variant: 'outlined', startIcon: react_1.default.createElement(icons_material_1.CalendarToday, null)
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
655
|
+
react_1.default.createElement(material_1.Button, { type: 'submit', variant: 'outlined', startIcon: react_1.default.createElement(icons_material_1.CalendarToday, null), sx: { width: '100%' } }, "Filtrar por Data"),
|
|
656
|
+
react_1.default.createElement(material_1.Box, null, appliedFilters.filter((x) => x.isDate).length > 0 && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Delete, { sx: { fill: 'white' } }), variant: 'contained', color: 'error', sx: { width: '100%', marginTop: 1 }, onClick: (e) => removeFilter('isDate') }, "Remover Filtro Data"))))))) : (react_1.default.createElement(material_1.Stack, { direction: 'row', sx: Object.assign({}, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(x)}`) && {
|
|
657
|
+
bgcolor: '#b7e4c7',
|
|
658
|
+
':hover': { bgcolor: '#b7e4c7' },
|
|
659
|
+
})) },
|
|
660
|
+
react_1.default.createElement(material_1.ListItemButton, { sx: {
|
|
661
|
+
pl: 4,
|
|
662
|
+
borderBottom: 1,
|
|
663
|
+
borderColor: '#ebeef2',
|
|
664
|
+
}, onClick: (e) => handleFilterOption(x.type, x.keyName, `${f}:${JSON.stringify(x)}`) },
|
|
665
|
+
react_1.default.createElement(material_1.ListItemIcon, { sx: { minWidth: '25px' } }, x.type === 'a-z' || x.type === 'data-a-z' ? (react_1.default.createElement(icons_material_1.South, { transform: 'scale(0.5)' })) : x.type === 'z-a' || x.type === 'data-z-a' ? (react_1.default.createElement(icons_material_1.North, { transform: 'scale(0.5)' })) : null),
|
|
666
|
+
react_1.default.createElement(material_1.ListItemText, { primary: x.name })),
|
|
667
|
+
react_1.default.createElement(material_1.Stack, { justifyContent: 'center', marginX: 2 }, appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(x)}`) && (react_1.default.createElement(material_1.Tooltip, { title: 'Remover' },
|
|
668
|
+
react_1.default.createElement(material_1.IconButton, { sx: { bgcolor: '#c71c1c', height: '30px', width: '30px', ':hover': { bgcolor: 'red', border: '2px solid #9e2929' } }, onClick: (e) => removeFilter(`${f}:${JSON.stringify(x)}`) },
|
|
669
|
+
react_1.default.createElement(icons_material_1.Delete, { sx: { fill: 'white', transform: 'scale(0.8, 0.8)' } })))))))))))))))),
|
|
670
|
+
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"))));
|
|
636
671
|
}
|
|
637
672
|
exports.Table = Table;
|
|
638
673
|
exports.default = react_1.default.memo(Table);
|