@ssplib/react-components 0.0.139 → 0.0.141

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 +75 -28
  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
  });
@@ -344,9 +349,14 @@ function Table({ columns, fetchFunc, emptyMsg = {
344
349
  filterBasedOnList(appliedFilters);
345
350
  }, [appliedFilters]);
346
351
  const filterBasedOnList = (filteredList) => {
347
- if (filteredList.length === 0)
352
+ let rawList = JSON.parse(JSON.stringify(Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath)));
353
+ if (filteredList.length === 0) {
354
+ setList(rawList);
355
+ setPagCount(getCount(rawList));
356
+ setCurrentPage(0);
357
+ setListPage(1);
348
358
  return;
349
- let rawList = Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath);
359
+ }
350
360
  function category(type, keyName, uniqueName, customValue, referencekey) {
351
361
  if (type === 'a-z') {
352
362
  rawList = rawList.sort((a, b) => {
@@ -521,35 +531,54 @@ function Table({ columns, fetchFunc, emptyMsg = {
521
531
  setPagCount(getCount(rawList));
522
532
  setCurrentPage(0);
523
533
  setListPage(1);
524
- // setFilterOpen(false)
525
534
  };
526
535
  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
- ]);
536
+ setAppliedFilters((s) => {
537
+ const value = [
538
+ ...s.filter((x) => (x.isDate ? true : x.keyName !== keyName)),
539
+ {
540
+ type,
541
+ keyName,
542
+ uniqueName,
543
+ customValue,
544
+ referencekey,
545
+ },
546
+ ];
547
+ localStorage.setItem('tableFilters', JSON.stringify(value));
548
+ return value;
549
+ });
537
550
  };
538
551
  const handleFilterReset = () => {
539
- const value = Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath);
552
+ const value = JSON.parse(JSON.stringify(Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath)));
540
553
  setList(value);
541
554
  setAppliedFilters([]);
555
+ localStorage.setItem('tableFilters', JSON.stringify([]));
556
+ };
557
+ const removeFilter = (uniqueName) => {
558
+ if (uniqueName === 'isDate')
559
+ setAppliedFilters((s) => s.filter((x) => !x.isDate));
560
+ else
561
+ setAppliedFilters((s) => {
562
+ const value = s.filter((x) => x.uniqueName !== uniqueName);
563
+ localStorage.setItem('tableFilters', JSON.stringify(value));
564
+ return value;
565
+ });
542
566
  };
543
567
  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
- ]);
568
+ setAppliedFilters((s) => {
569
+ const value = [
570
+ ...s.filter((x) => !x.isDate),
571
+ {
572
+ isDate: true,
573
+ from,
574
+ to,
575
+ keyName,
576
+ id: from + keyName,
577
+ },
578
+ ];
579
+ localStorage.setItem('tableFilters', JSON.stringify(value));
580
+ return value;
581
+ });
553
582
  };
554
583
  if (error)
555
584
  return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
@@ -619,16 +648,34 @@ function Table({ columns, fetchFunc, emptyMsg = {
619
648
  react_1.default.createElement(material_1.ListItemText, { primary: f }),
620
649
  filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
621
650
  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 },
651
+ 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)}`) && {
652
+ bgcolor: '#b7e4c7',
653
+ ':hover': { bgcolor: '#b7e4c7' },
654
+ })) },
655
+ 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 } }),
656
+ 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' },
657
+ 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)}`) },
658
+ 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
659
  react_1.default.createElement(FormProvider_1.default, { onSubmit: (d) => handleDateFilter(d['filterDtStart'], d['filterDtEnd'], x.keyName) },
625
660
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtStart', title: 'A partir de:', required: true }),
626
661
  react_1.default.createElement(material_1.Box, { marginTop: 2 }),
627
662
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
628
663
  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)}`) })))))))))))),
664
+ 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"),
665
+ 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)}`) && {
666
+ bgcolor: '#b7e4c7',
667
+ ':hover': { bgcolor: '#b7e4c7' },
668
+ })) },
669
+ react_1.default.createElement(material_1.ListItemButton, { sx: {
670
+ pl: 4,
671
+ borderBottom: 1,
672
+ borderColor: '#ebeef2',
673
+ }, onClick: (e) => handleFilterOption(x.type, x.keyName, `${f}:${JSON.stringify(x)}`) },
674
+ 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),
675
+ react_1.default.createElement(material_1.ListItemText, { primary: x.name })),
676
+ 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' },
677
+ 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)}`) },
678
+ react_1.default.createElement(icons_material_1.Delete, { sx: { fill: 'white', transform: 'scale(0.8, 0.8)' } })))))))))))))))),
632
679
  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
680
  }
634
681
  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.141",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",