@ssplib/react-components 0.0.229 → 0.0.231
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.
|
@@ -10,12 +10,15 @@ interface OrderBy {
|
|
|
10
10
|
key: string;
|
|
11
11
|
type: 'string' | 'number';
|
|
12
12
|
}
|
|
13
|
-
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, hideTitleCSV, csvExcludeUpper, multipleDataPath, expandTextMaxLength, collapsedSize, customMargin, customMarginMobile, filters, orderBy, id, }: {
|
|
13
|
+
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, hideTitleCSV, csvExcludeUpper, multipleDataPath, expandTextMaxLength, collapsedSize, customMargin, customMarginMobile, filtersFunc, filters, orderBy, id, }: {
|
|
14
14
|
id: string;
|
|
15
15
|
mediaQueryLG?: {
|
|
16
16
|
all: number;
|
|
17
17
|
action: number;
|
|
18
18
|
};
|
|
19
|
+
filtersFunc?: {
|
|
20
|
+
[key: string]: (value: string) => any;
|
|
21
|
+
};
|
|
19
22
|
filters?: FilterValue[];
|
|
20
23
|
orderBy?: OrderBy[];
|
|
21
24
|
customMargin?: number;
|
|
@@ -59,8 +62,8 @@ export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, data
|
|
|
59
62
|
dataPath?: string;
|
|
60
63
|
useKC?: boolean;
|
|
61
64
|
}): JSX.Element;
|
|
62
|
-
type FilterType = 'string' | 'number' | 'date';
|
|
63
|
-
type FilterOperators = 'igual' | 'contem' | 'maior que' | 'menor que' | 'data exata' | 'após' | 'antes de' | 'entre' | 'tem um dos';
|
|
65
|
+
type FilterType = 'string' | 'number' | 'date' | 'dates';
|
|
66
|
+
type FilterOperators = 'igual' | 'contem' | 'maior que' | 'menor que' | 'data exata' | 'após' | 'antes de' | 'entre' | 'tem um dos' | 'depois de' | 'antes de' | 'data inicio' | 'data fim' | 'tem a data';
|
|
64
67
|
interface FilterValue {
|
|
65
68
|
label: string;
|
|
66
69
|
keyName: string;
|
|
@@ -73,6 +76,7 @@ interface FilterValue {
|
|
|
73
76
|
id: string;
|
|
74
77
|
label: string;
|
|
75
78
|
}[];
|
|
79
|
+
customFunc?: string;
|
|
76
80
|
}
|
|
77
81
|
declare const _default: React.MemoExoticComponent<typeof Table>;
|
|
78
82
|
export default _default;
|
|
@@ -57,13 +57,15 @@ let startData = [];
|
|
|
57
57
|
let isExpandAll = false;
|
|
58
58
|
let localTableName = '';
|
|
59
59
|
let orderAsc = false;
|
|
60
|
+
let filtersFuncData = {};
|
|
61
|
+
let localTableNameCache = '';
|
|
60
62
|
function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
61
63
|
user: 'Nenhum dado encontrado',
|
|
62
64
|
public: 'Nenhum dado encontrado',
|
|
63
65
|
}, 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,
|
|
64
66
|
// filters = {},
|
|
65
67
|
// filterSeparator = '|',
|
|
66
|
-
hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filters = [], orderBy = [], id, }) {
|
|
68
|
+
hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], id, }) {
|
|
67
69
|
var _a;
|
|
68
70
|
const [isLoading, setIsLoading] = (0, react_1.useState)(true);
|
|
69
71
|
const [error, setError] = (0, react_1.useState)(null);
|
|
@@ -86,6 +88,15 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
86
88
|
const filterContainer = (0, react_1.useRef)(null);
|
|
87
89
|
const lg = (0, material_1.useMediaQuery)(theme.breakpoints.up(2000));
|
|
88
90
|
localTableName = `tableFilter_${id}`;
|
|
91
|
+
localTableNameCache = `tableFilterCache_${id}`;
|
|
92
|
+
filtersFuncData = filtersFunc !== null && filtersFunc !== void 0 ? filtersFunc : {};
|
|
93
|
+
if (!localStorage.getItem(localTableNameCache))
|
|
94
|
+
localStorage.setItem(localTableNameCache, JSON.stringify(filters));
|
|
95
|
+
console.log('DTTTTTTTT: ', localStorage.getItem(localTableNameCache) === JSON.stringify(filters));
|
|
96
|
+
if (localStorage.getItem(localTableNameCache) !== JSON.stringify(filters)) {
|
|
97
|
+
localStorage.setItem(localTableNameCache, JSON.stringify(filters));
|
|
98
|
+
localStorage.removeItem(localTableName);
|
|
99
|
+
}
|
|
89
100
|
(0, react_1.useEffect)(() => {
|
|
90
101
|
setError(null);
|
|
91
102
|
if (userLoaded || !useKC) {
|
|
@@ -556,8 +567,46 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
556
567
|
break;
|
|
557
568
|
}
|
|
558
569
|
break;
|
|
570
|
+
case 'dates':
|
|
571
|
+
switch (dt.operator) {
|
|
572
|
+
case 'data inicio':
|
|
573
|
+
currentData.forEach((cd) => {
|
|
574
|
+
var _a;
|
|
575
|
+
const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
576
|
+
if (dates.length <= 0)
|
|
577
|
+
return;
|
|
578
|
+
var inicioDate = dates[0];
|
|
579
|
+
var inicioValue = (0, dayjs_1.default)(inicioDate, 'DD/MM/YYYY');
|
|
580
|
+
if (inicioValue.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
|
|
581
|
+
filteredData.push(cd);
|
|
582
|
+
}
|
|
583
|
+
});
|
|
584
|
+
break;
|
|
585
|
+
case 'data fim':
|
|
586
|
+
currentData.forEach((cd) => {
|
|
587
|
+
var _a;
|
|
588
|
+
const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
589
|
+
if (dates.length <= 0)
|
|
590
|
+
return;
|
|
591
|
+
var fimDate = dates[dates.length - 1];
|
|
592
|
+
var fimValue = (0, dayjs_1.default)(fimDate, 'DD/MM/YYYY');
|
|
593
|
+
if (fimValue.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
|
|
594
|
+
filteredData.push(cd);
|
|
595
|
+
}
|
|
596
|
+
});
|
|
597
|
+
break;
|
|
598
|
+
case 'tem a data':
|
|
599
|
+
currentData.forEach((cd) => {
|
|
600
|
+
var _a;
|
|
601
|
+
const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
602
|
+
if (dates.includes(dt.value)) {
|
|
603
|
+
filteredData.push(cd);
|
|
604
|
+
}
|
|
605
|
+
});
|
|
606
|
+
break;
|
|
607
|
+
}
|
|
608
|
+
break;
|
|
559
609
|
}
|
|
560
|
-
console.log('filtred: ', filteredData);
|
|
561
610
|
currentData = filteredData;
|
|
562
611
|
});
|
|
563
612
|
setList(currentData);
|
|
@@ -917,8 +966,12 @@ function FilterField({ filterValue, operator, onChange }) {
|
|
|
917
966
|
bgcolor: 'white',
|
|
918
967
|
}, fullWidth: true }));
|
|
919
968
|
case 'date':
|
|
969
|
+
case 'dates':
|
|
920
970
|
switch (operator) {
|
|
921
971
|
case 'data exata':
|
|
972
|
+
case 'data fim':
|
|
973
|
+
case 'data inicio':
|
|
974
|
+
case 'tem a data':
|
|
922
975
|
return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
|
|
923
976
|
react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
|
|
924
977
|
onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
|