@ssplib/react-components 0.0.139 → 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.
Files changed (2) hide show
  1. package/components/form/table/Table.js +65 -27
  2. package/package.json +1 -1
package/components/form/table/Table.js CHANGED
@@ -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
- ...s.filter((x) => x.type !== type),
529
- {
530
- type,
531
- keyName,
532
- uniqueName,
533
- customValue,
534
- referencekey,
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
- ...s.filter((x) => !x.isDate),
546
- {
547
- isDate: true,
548
- from,
549
- to,
550
- keyName,
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,16 +639,34 @@ 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
- 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 } }))))) : x.type === 'date-interval' ? (react_1.default.createElement(material_1.Box, { padding: 2 },
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) }, "Filtrar por Data"))))) : (react_1.default.createElement(material_1.ListItemButton, { sx: { pl: 4, borderBottom: 1, borderColor: '#ebeef2' } },
630
- 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),
631
- react_1.default.createElement(material_1.ListItemText, { primary: x.name, onClick: (e) => handleFilterOption(x.type, x.keyName, `${f}:${JSON.stringify(x)}`) })))))))))))),
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)' } })))))))))))))))),
632
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"))));
633
671
  }
634
672
  exports.Table = Table;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssplib/react-components",
3
- "version": "0.0.139",
3
+ "version": "0.0.140",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",