@ssplib/react-components 0.0.206 → 0.0.208

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 +79 -8
  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,11 +441,17 @@ 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]);
435
452
  const filterBasedOnList = (filteredList) => {
436
- let rawList = JSON.parse(JSON.stringify(Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath)));
453
+ var _a;
454
+ let rawList = JSON.parse(JSON.stringify(Array.isArray(startData) ? startData : (_a = (0, lodash_get_1.default)(startData, dataPath)) !== null && _a !== void 0 ? _a : '[]'));
437
455
  if (filteredList.length <= 0 || rawList.length <= 0) {
438
456
  setList(rawList);
439
457
  setPagCount(getCount(rawList));
@@ -493,7 +511,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
493
511
  return 0;
494
512
  });
495
513
  } //
496
- else if (type === 'items') {
514
+ else if (type === 'items' || type === 'select') {
497
515
  rawList = rawList
498
516
  .filter((x) => String(x[keyName])
499
517
  .toLowerCase()
@@ -718,9 +736,22 @@ function Table({ columns, fetchFunc, emptyMsg = {
718
736
  borderRadius: '8px',
719
737
  paddingX: '24px',
720
738
  paddingY: '8px',
739
+ minWidth: 200,
721
740
  backgroundColor: '#208FE8',
722
741
  textTransform: 'capitalize',
723
- } }, "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' : ''))))),
724
755
  react_1.default.createElement(material_1.Stack, { alignItems: 'end', width: '100%', pb: 2 },
725
756
  react_1.default.createElement(Typography_1.default, { fontWeight: 600 }, "Demandas cadastradas"),
726
757
  react_1.default.createElement(material_1.Stack, { justifyContent: 'center' },
@@ -733,13 +764,13 @@ function Table({ columns, fetchFunc, emptyMsg = {
733
764
  list.length)))),
734
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' },
735
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 },
736
- react_1.default.createElement(Grid_1.default, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2 },
737
- 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) },
738
769
  react_1.default.createElement(material_1.Box, { sx: { width: 'max-content', paddingX: 1 } },
739
770
  react_1.default.createElement(Typography_1.default, { fontSize: 16, fontWeight: 700, color: '#1E293B', fontFamily: 'Inter' }, c.title)),
740
771
  react_1.default.createElement(material_1.Box, { paddingLeft: 1 },
741
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) } }))))))),
742
- 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 },
743
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))))))))),
744
775
  getMaxItems().length > 0 && (react_1.default.createElement(material_1.Stack, { padding: 1, direction: {
745
776
  xs: 'column',
@@ -819,7 +850,34 @@ function Table({ columns, fetchFunc, emptyMsg = {
819
850
  react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
820
851
  react_1.default.createElement(material_1.Stack, { marginTop: 2 },
821
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"),
822
- 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
+ handleFilterOption(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.label.toLowerCase(), x.referenceKey);
875
+ setOldSelectState(id);
876
+ }
877
+ else {
878
+ removeFilter(oldSelectState);
879
+ }
880
+ } }))) : (react_1.default.createElement(material_1.Stack, { direction: 'row', sx: Object.assign({}, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(x)}`) && {
823
881
  bgcolor: '#b7e4c7',
824
882
  ':hover': { bgcolor: '#b7e4c7' },
825
883
  })) },
@@ -836,4 +894,17 @@ function Table({ columns, fetchFunc, emptyMsg = {
836
894
  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"))));
837
895
  }
838
896
  exports.Table = Table;
897
+ function FetchSelectAutoComplete(props) {
898
+ const [data, setData] = (0, react_1.useState)([]);
899
+ (0, react_1.useEffect)(() => {
900
+ axios_1.default.get(props.url).then((dt) => {
901
+ setData(dt.data);
902
+ });
903
+ }, []);
904
+ return (react_1.default.createElement(react_1.default.Fragment, null,
905
+ react_1.default.createElement(Typography_1.default, { marginLeft: 1 }, props.label),
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
+ }
839
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.206",
3
+ "version": "0.0.208",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",