@ssplib/react-components 0.0.207 → 0.0.209

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 (3) hide show
  1. package/components/form/table/Table.d.ts +8 -2
  2. package/components/form/table/Table.js +77 -7
  3. package/package.json +1 -1
package/components/form/table/Table.d.ts CHANGED
@@ -5,8 +5,12 @@ interface ColumnData {
5
5
  customComponent?: (content: string, obj: any) => JSX.Element;
6
6
  size?: number;
7
7
  }
8
- type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval' | 'data-a-z' | 'data-z-a';
9
- export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, useKC, statusKeyName, csvExcludeKeys, csvExcludeKeysCSV, csvExcludeKeysAll, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvNoZipText, csvAllButtonTitle, removeQuotes, normalize, csvShowAllButton, csvWithoutZip, itemCount, csvUpper, csvZipFileNamesKey, generateCsvZip, filters, hideTitleCSV, csvExcludeUpper, filterSeparator, filterStorageName, multipleDataPath, }: {
8
+ type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval' | 'data-a-z' | 'data-z-a' | 'select';
9
+ export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, useKC, statusKeyName, csvExcludeKeys, csvExcludeKeysCSV, csvExcludeKeysAll, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvNoZipText, csvAllButtonTitle, removeQuotes, normalize, csvShowAllButton, csvWithoutZip, itemCount, csvUpper, csvZipFileNamesKey, generateCsvZip, filters, hideTitleCSV, csvExcludeUpper, filterSeparator, filterStorageName, multipleDataPath, }: {
10
+ mediaQueryLG?: {
11
+ all: number;
12
+ action: number;
13
+ };
10
14
  normalize?: boolean;
11
15
  csvUpper?: boolean;
12
16
  multipleDataPath?: string;
@@ -49,6 +53,8 @@ export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableNam
49
53
  type: FilterTypes;
50
54
  keyName: string;
51
55
  name: string;
56
+ listEndpoint?: string;
57
+ selectList?: string[];
52
58
  referenceKey?: string;
53
59
  options?: {
54
60
  name: string;
package/components/form/table/Table.js CHANGED
@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
+ return new (P || (P = Promise))(function (resolve, reject) {
28
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
32
+ });
33
+ };
25
34
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
35
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
36
  };
@@ -43,6 +52,7 @@ const DatePicker_1 = __importDefault(require("../date/DatePicker"));
43
52
  const dayjs_1 = __importDefault(require("dayjs"));
44
53
  const jszip_1 = __importDefault(require("jszip"));
45
54
  const NavigateNextRounded_1 = __importDefault(require("@mui/icons-material/NavigateNextRounded"));
55
+ const axios_1 = __importDefault(require("axios"));
46
56
  function removePunctuationAndAccents(text) {
47
57
  // Remove accents and diacritics
48
58
  const normalizedText = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
@@ -51,7 +61,7 @@ function removePunctuationAndAccents(text) {
51
61
  return cleanedText;
52
62
  }
53
63
  let startData = [];
54
- function Table({ columns, fetchFunc, emptyMsg = {
64
+ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
55
65
  user: 'Nenhum dado encontrado',
56
66
  public: 'Nenhum dado encontrado',
57
67
  }, dataPath = '', tableName = 'Dados', csv, columnSize, action, useKC = true, statusKeyName = '', csvExcludeKeys = [], csvExcludeKeysCSV = [], csvExcludeKeysAll = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvNoZipText = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', removeQuotes = false, normalize = false, csvShowAllButton = false, csvWithoutZip = false, itemCount = 10, csvUpper = false, csvZipFileNamesKey = '', generateCsvZip = false, filters = {}, hideTitleCSV = false, csvExcludeUpper = [], filterSeparator = '|', filterStorageName = 'tableFilters', multipleDataPath = '', }) {
@@ -66,11 +76,13 @@ function Table({ columns, fetchFunc, emptyMsg = {
66
76
  const [paginationCount, setPagCount] = (0, react_1.useState)(1);
67
77
  const [listPage, setListPage] = (0, react_1.useState)(1);
68
78
  const [appliedFilters, setAppliedFilters] = (0, react_1.useState)([]);
79
+ const [oldSelectState, setOldSelectState] = (0, react_1.useState)('');
69
80
  // filters states
70
81
  const [filterCollapse, setFilterCollapse] = (0, react_1.useState)(Array(Object.keys(filters).length).fill(false));
71
82
  const [filterOpen, setFilterOpen] = (0, react_1.useState)(false);
72
83
  const theme = (0, material_1.useTheme)();
73
84
  const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
85
+ const lg = (0, material_1.useMediaQuery)(theme.breakpoints.up(2000));
74
86
  (0, react_1.useEffect)(() => {
75
87
  setError(null);
76
88
  if (userLoaded || !useKC) {
@@ -429,6 +441,11 @@ function Table({ columns, fetchFunc, emptyMsg = {
429
441
  return (react_1.default.createElement(Typography_1.default, { color: '#991b1b', fontWeight: 600, fontFamily: 'Inter' }, "FORA DO PRAZO"));
430
442
  }
431
443
  }, []);
444
+ function getSelectValues(url) {
445
+ return __awaiter(this, void 0, void 0, function* () {
446
+ return ['dd'];
447
+ });
448
+ }
432
449
  (0, react_1.useEffect)(() => {
433
450
  filterBasedOnList(appliedFilters);
434
451
  }, [appliedFilters]);
@@ -494,7 +511,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
494
511
  return 0;
495
512
  });
496
513
  } //
497
- else if (type === 'items') {
514
+ else if (type === 'items' || type === 'select') {
498
515
  rawList = rawList
499
516
  .filter((x) => String(x[keyName])
500
517
  .toLowerCase()
@@ -719,9 +736,22 @@ function Table({ columns, fetchFunc, emptyMsg = {
719
736
  borderRadius: '8px',
720
737
  paddingX: '24px',
721
738
  paddingY: '8px',
739
+ minWidth: 200,
722
740
  backgroundColor: '#208FE8',
723
741
  textTransform: 'capitalize',
724
- } }, "Filtro"))),
742
+ } },
743
+ react_1.default.createElement(material_1.Stack, { direction: 'row', marginLeft: 2, borderRadius: 5, padding: 0 },
744
+ react_1.default.createElement("span", null, "Filtro"),
745
+ react_1.default.createElement("span", { style: {
746
+ whiteSpace: 'nowrap',
747
+ marginLeft: 8,
748
+ backgroundColor: '#15528f',
749
+ borderRadius: 8,
750
+ padding: '0px 8px',
751
+ } },
752
+ appliedFilters.length,
753
+ " aplicado",
754
+ appliedFilters.length > 1 ? 's' : ''))))),
725
755
  react_1.default.createElement(material_1.Stack, { alignItems: 'end', width: '100%', pb: 2 },
726
756
  react_1.default.createElement(Typography_1.default, { fontWeight: 600 }, "Demandas cadastradas"),
727
757
  react_1.default.createElement(material_1.Stack, { justifyContent: 'center' },
@@ -734,13 +764,13 @@ function Table({ columns, fetchFunc, emptyMsg = {
734
764
  list.length)))),
735
765
  react_1.default.createElement(material_1.Stack, { spacing: 0.2 }, getMaxItems().length <= 0 ? (react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
736
766
  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 ? '#F8FAFC' : 'white', paddingY: 2, borderTop: 'solid 1.5px #E2E8F0' }, elevation: 0 },
737
- react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2 },
738
- columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: (12 / columnSize) * (!!c.size ? c.size : 1) },
767
+ react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2, rowSpacing: 2 },
768
+ columns.map((c) => (react_1.default.createElement(Grid_1.default, { key: c.keyName + index, item: true, xs: 12, md: lg ? (12 / columnSize) * (!!c.size ? c.size : 1) : mediaQueryLG ? mediaQueryLG.all : (12 / columnSize) * (!!c.size ? c.size : 1) },
739
769
  react_1.default.createElement(material_1.Box, { sx: { width: 'max-content', paddingX: 1 } },
740
770
  react_1.default.createElement(Typography_1.default, { fontSize: 16, fontWeight: 700, color: '#1E293B', fontFamily: 'Inter' }, c.title)),
741
771
  react_1.default.createElement(material_1.Box, { paddingLeft: 1 },
742
772
  react_1.default.createElement(material_1.Box, { sx: { wordWrap: 'break-word', color: '#1E293B', fontSize: 16 }, fontFamily: 'Inter' }, c.customComponent ? (c.customComponent((0, lodash_get_1.default)(x, c.keyName), x)) : c.keyName === statusKeyName ? (getStatusMsg((0, lodash_get_1.default)(x, c.keyName))) : (react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, lodash_get_1.default)(x, c.keyName) } }))))))),
743
- react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: 12 / columnSize },
773
+ react_1.default.createElement(Grid_1.default, { item: true, xs: 12, md: lg ? 12 / columnSize : mediaQueryLG ? mediaQueryLG.action : 12 / columnSize },
744
774
  react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))))))))),
745
775
  getMaxItems().length > 0 && (react_1.default.createElement(material_1.Stack, { padding: 1, direction: {
746
776
  xs: 'column',
@@ -820,7 +850,35 @@ function Table({ columns, fetchFunc, emptyMsg = {
820
850
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
821
851
  react_1.default.createElement(material_1.Stack, { marginTop: 2 },
822
852
  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"),
823
- 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)}`) && {
853
+ 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"))))))) : x.selectList ? (react_1.default.createElement(react_1.default.Fragment, null,
854
+ react_1.default.createElement(material_1.Autocomplete, { options: x.selectList.map((x) => ({
855
+ id: x.toLowerCase(),
856
+ label: x,
857
+ })), onFocus: (e) => console.log('ata'), onChange: (e, value) => {
858
+ console.log(value);
859
+ if (value) {
860
+ const id = `${f}:${JSON.stringify(value)}`;
861
+ handleFilterOption(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.label.toLowerCase(), x.referenceKey);
862
+ setOldSelectState(id);
863
+ }
864
+ else {
865
+ removeFilter(oldSelectState);
866
+ }
867
+ }, sx: {
868
+ margin: 1,
869
+ }, size: 'small', renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: 'Teste' })) }))) : x.listEndpoint ? (react_1.default.createElement(react_1.default.Fragment, null,
870
+ react_1.default.createElement(FetchSelectAutoComplete, { url: x.listEndpoint, label: x.name, onChange: (e, value) => {
871
+ console.log(value);
872
+ if (value) {
873
+ const id = `${f}:${JSON.stringify(value)}`;
874
+ console.log(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.label.toLowerCase(), x.referenceKey);
875
+ handleFilterOption(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.id.toLowerCase(), x.referenceKey);
876
+ setOldSelectState(id);
877
+ }
878
+ else {
879
+ removeFilter(oldSelectState);
880
+ }
881
+ } }))) : (react_1.default.createElement(material_1.Stack, { direction: 'row', sx: Object.assign({}, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(x)}`) && {
824
882
  bgcolor: '#b7e4c7',
825
883
  ':hover': { bgcolor: '#b7e4c7' },
826
884
  })) },
@@ -837,4 +895,16 @@ function Table({ columns, fetchFunc, emptyMsg = {
837
895
  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"))));
838
896
  }
839
897
  exports.Table = Table;
898
+ function FetchSelectAutoComplete(props) {
899
+ const [data, setData] = (0, react_1.useState)([]);
900
+ (0, react_1.useEffect)(() => {
901
+ axios_1.default.get(props.url).then((dt) => {
902
+ setData(dt.data);
903
+ });
904
+ }, []);
905
+ return (react_1.default.createElement(react_1.default.Fragment, null,
906
+ react_1.default.createElement(material_1.Autocomplete, { options: data, onFocus: (e) => console.log('ata'), onChange: props.onChange, sx: {
907
+ margin: 1,
908
+ }, size: 'small', renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: props.label })) })));
909
+ }
840
910
  exports.default = react_1.default.memo(Table);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssplib/react-components",
3
- "version": "0.0.207",
3
+ "version": "0.0.209",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",