@ssplib/react-components 0.0.248 → 0.0.250
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.
- package/package.json +2 -2
- package/src/components/detalhes/Category.js +7 -0
- package/src/components/detalhes/Field.js +35 -0
- package/src/components/detalhes/FieldLabel.js +21 -0
- package/src/components/detalhes/File.js +35 -0
- package/src/components/form/checkbox/CheckBox.js +12 -0
- package/{components → src/components}/form/checkbox/CheckBoxAdditional.js +11 -37
- package/src/components/form/checkbox/CheckBoxWarning.js +14 -0
- package/src/components/form/checkbox/RequiredCheckBoxValidator.js +56 -0
- package/src/components/form/date/DatePicker.js +71 -0
- package/src/components/form/date/TimePicker.js +53 -0
- package/src/components/form/file/DropFileUpload.js +207 -0
- package/src/components/form/file/FileUpload.js +171 -0
- package/src/components/form/input/ActiveInput.js +27 -0
- package/src/components/form/input/AutoComplete.js +40 -0
- package/src/components/form/input/FetchAutoComplete.js +103 -0
- package/src/components/form/input/FixedAutoComplete.js +46 -0
- package/{components → src/components}/form/input/Input.js +22 -52
- package/src/components/form/input/MaskInput.js +52 -0
- package/src/components/form/input/MultInput.js +38 -0
- package/src/components/form/input/OtherCheckBox.js +27 -0
- package/src/components/form/stepper/Stepper.js +105 -0
- package/src/components/form/stepper/StepperBlock.js +67 -0
- package/src/components/form/switch/Switch.js +27 -0
- package/src/components/form/switch/ToggleVisibility.js +33 -0
- package/{components → src/components}/form/table/Table.js +200 -230
- package/src/components/icons/icons.js +16 -0
- package/src/components/modal/Modal.js +75 -0
- package/src/components/navbar/NavBar.js +127 -0
- package/src/components/navbar/TabNavBar.js +135 -0
- package/src/components/providers/FormProvider.js +23 -0
- package/src/components/providers/KeycloakAuthProvider.js +69 -0
- package/{components → src/components}/providers/OAuthProvider.js +19 -49
- package/src/components/providers/SspComponentsProvider.js +11 -0
- package/{components → src/components}/utils/Bt.js +7 -13
- package/src/components/utils/CustomMenu.js +33 -0
- package/src/context/auth.js +2 -0
- package/{context → src/context}/form.d.ts +2 -3
- package/src/context/form.js +2 -0
- package/src/index.js +41 -0
- package/src/types/auth.js +1 -0
- package/{types → src/types}/form.js +4 -7
- package/components/detalhes/Category.js +0 -14
- package/components/detalhes/Field.js +0 -42
- package/components/detalhes/FieldLabel.js +0 -28
- package/components/detalhes/File.js +0 -62
- package/components/form/checkbox/CheckBox.js +0 -18
- package/components/form/checkbox/CheckBoxWarning.js +0 -43
- package/components/form/checkbox/RequiredCheckBoxValidator.js +0 -85
- package/components/form/date/DatePicker.js +0 -100
- package/components/form/date/TimePicker.js +0 -82
- package/components/form/file/DropFileUpload.js +0 -236
- package/components/form/file/FileUpload.js +0 -200
- package/components/form/input/ActiveInput.js +0 -33
- package/components/form/input/AutoComplete.js +0 -69
- package/components/form/input/FetchAutoComplete.js +0 -132
- package/components/form/input/FixedAutoComplete.js +0 -76
- package/components/form/input/MaskInput.js +0 -78
- package/components/form/input/MultInput.js +0 -67
- package/components/form/input/OtherCheckBox.js +0 -56
- package/components/form/stepper/Stepper.js +0 -135
- package/components/form/stepper/StepperBlock.js +0 -97
- package/components/form/switch/Switch.js +0 -54
- package/components/form/switch/ToggleVisibility.js +0 -61
- package/components/icons/icons.js +0 -24
- package/components/modal/Modal.js +0 -105
- package/components/navbar/NavBar.js +0 -156
- package/components/navbar/TabNavBar.js +0 -164
- package/components/providers/FormProvider.js +0 -49
- package/components/providers/KeycloakAuthProvider.js +0 -98
- package/components/providers/SspComponentsProvider.js +0 -18
- package/components/utils/CustomMenu.js +0 -39
- package/context/auth.js +0 -5
- package/context/form.js +0 -5
- package/index.js +0 -80
- package/types/auth.js +0 -2
- /package/{components → src/components}/detalhes/Category.d.ts +0 -0
- /package/{components → src/components}/detalhes/Field.d.ts +0 -0
- /package/{components → src/components}/detalhes/FieldLabel.d.ts +0 -0
- /package/{components → src/components}/detalhes/File.d.ts +0 -0
- /package/{components → src/components}/form/checkbox/CheckBox.d.ts +0 -0
- /package/{components → src/components}/form/checkbox/CheckBoxAdditional.d.ts +0 -0
- /package/{components → src/components}/form/checkbox/CheckBoxWarning.d.ts +0 -0
- /package/{components → src/components}/form/checkbox/RequiredCheckBoxValidator.d.ts +0 -0
- /package/{components → src/components}/form/date/DatePicker.d.ts +0 -0
- /package/{components → src/components}/form/date/TimePicker.d.ts +0 -0
- /package/{components → src/components}/form/file/DropFileUpload.d.ts +0 -0
- /package/{components → src/components}/form/file/FileUpload.d.ts +0 -0
- /package/{components → src/components}/form/input/ActiveInput.d.ts +0 -0
- /package/{components → src/components}/form/input/AutoComplete.d.ts +0 -0
- /package/{components → src/components}/form/input/FetchAutoComplete.d.ts +0 -0
- /package/{components → src/components}/form/input/FixedAutoComplete.d.ts +0 -0
- /package/{components → src/components}/form/input/Input.d.ts +0 -0
- /package/{components → src/components}/form/input/MaskInput.d.ts +0 -0
- /package/{components → src/components}/form/input/MultInput.d.ts +0 -0
- /package/{components → src/components}/form/input/OtherCheckBox.d.ts +0 -0
- /package/{components → src/components}/form/stepper/Stepper.d.ts +0 -0
- /package/{components → src/components}/form/stepper/StepperBlock.d.ts +0 -0
- /package/{components → src/components}/form/switch/Switch.d.ts +0 -0
- /package/{components → src/components}/form/switch/ToggleVisibility.d.ts +0 -0
- /package/{components → src/components}/form/table/Table.d.ts +0 -0
- /package/{components → src/components}/icons/icons.d.ts +0 -0
- /package/{components → src/components}/modal/Modal.d.ts +0 -0
- /package/{components → src/components}/navbar/NavBar.d.ts +0 -0
- /package/{components → src/components}/navbar/TabNavBar.d.ts +0 -0
- /package/{components → src/components}/providers/FormProvider.d.ts +0 -0
- /package/{components → src/components}/providers/KeycloakAuthProvider.d.ts +0 -0
- /package/{components → src/components}/providers/OAuthProvider.d.ts +0 -0
- /package/{components → src/components}/providers/SspComponentsProvider.d.ts +0 -0
- /package/{components → src/components}/utils/Bt.d.ts +0 -0
- /package/{components → src/components}/utils/CustomMenu.d.ts +0 -0
- /package/{context → src/context}/auth.d.ts +0 -0
- /package/{index.d.ts → src/index.d.ts} +0 -0
- /package/{types → src/types}/auth.d.ts +0 -0
- /package/{types → src/types}/form.d.ts +0 -0
|
@@ -1,51 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
exports.Table = void 0;
|
|
30
|
-
const icons_material_1 = require("@mui/icons-material");
|
|
31
|
-
const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
|
|
32
|
-
const FileDownload_1 = __importDefault(require("@mui/icons-material/FileDownload"));
|
|
33
|
-
const NavigateNextRounded_1 = __importDefault(require("@mui/icons-material/NavigateNextRounded"));
|
|
34
|
-
const Search_1 = __importDefault(require("@mui/icons-material/Search"));
|
|
35
|
-
const material_1 = require("@mui/material");
|
|
36
|
-
const Grid_1 = __importDefault(require("@mui/material/Grid"));
|
|
37
|
-
const Pagination_1 = __importDefault(require("@mui/material/Pagination"));
|
|
38
|
-
const TextField_1 = __importDefault(require("@mui/material/TextField"));
|
|
39
|
-
const Typography_1 = __importDefault(require("@mui/material/Typography"));
|
|
40
|
-
const x_date_pickers_1 = require("@mui/x-date-pickers");
|
|
41
|
-
const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
|
|
42
|
-
const dayjs_1 = __importDefault(require("dayjs"));
|
|
43
|
-
const jszip_1 = __importDefault(require("jszip"));
|
|
44
|
-
const lodash_get_1 = __importDefault(require("lodash.get"));
|
|
45
|
-
const react_1 = __importStar(require("react"));
|
|
46
|
-
const auth_1 = require("../../../context/auth");
|
|
47
|
-
const Modal_1 = require("../../modal/Modal");
|
|
48
|
-
const CustomMenu_1 = __importDefault(require("../../utils//CustomMenu"));
|
|
1
|
+
import { ExpandLess, ExpandMore, FilterAlt, KeyboardArrowDown, KeyboardArrowUp, PendingRounded, Refresh, ReportProblemRounded } from '@mui/icons-material';
|
|
2
|
+
import Clear from '@mui/icons-material/Clear';
|
|
3
|
+
import FileDownloadIcon from '@mui/icons-material/FileDownload';
|
|
4
|
+
import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
|
|
5
|
+
import { default as Search, default as SearchIcon } from '@mui/icons-material/Search';
|
|
6
|
+
import { Alert, Autocomplete, Box, Button, Collapse, FormControl, IconButton, LinearProgress, Menu, MenuItem, PaginationItem, Paper, Select, Skeleton, Stack, useMediaQuery, useTheme, } from '@mui/material';
|
|
7
|
+
import Grid from '@mui/material/Grid';
|
|
8
|
+
import Pagination from '@mui/material/Pagination';
|
|
9
|
+
import TextField from '@mui/material/TextField';
|
|
10
|
+
import Typography from '@mui/material/Typography';
|
|
11
|
+
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
|
12
|
+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
13
|
+
import dayjs from 'dayjs';
|
|
14
|
+
import JSZip from 'jszip';
|
|
15
|
+
import get from 'lodash.get';
|
|
16
|
+
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
|
|
17
|
+
import { AuthContext } from '../../../context/auth';
|
|
18
|
+
import { MODAL } from '../../modal/Modal';
|
|
19
|
+
import CustomMenu from '../../utils//CustomMenu';
|
|
49
20
|
function removePunctuationAndAccents(text) {
|
|
50
21
|
// Remove accents and diacritics
|
|
51
22
|
const normalizedText = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
@@ -67,7 +38,7 @@ let localTableName = '';
|
|
|
67
38
|
let orderAsc = false;
|
|
68
39
|
let filtersFuncData = {};
|
|
69
40
|
let localTableNameCache = '';
|
|
70
|
-
function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
41
|
+
export function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
71
42
|
user: 'Nenhum dado encontrado',
|
|
72
43
|
public: 'Nenhum dado encontrado',
|
|
73
44
|
}, 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,
|
|
@@ -75,26 +46,26 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
|
|
|
75
46
|
// filterSeparator = '|',
|
|
76
47
|
hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], customErrorMsg = undefined, customTableStyle = {}, id, }) {
|
|
77
48
|
var _a;
|
|
78
|
-
const [isLoading, setIsLoading] =
|
|
79
|
-
const [error, setError] =
|
|
80
|
-
const [data, setData] =
|
|
81
|
-
const { user, userLoaded } =
|
|
82
|
-
const [list, setList] =
|
|
83
|
-
const [listClone, setListClone] =
|
|
49
|
+
const [isLoading, setIsLoading] = useState(true);
|
|
50
|
+
const [error, setError] = useState(null);
|
|
51
|
+
const [data, setData] = useState(null);
|
|
52
|
+
const { user, userLoaded } = useContext(AuthContext);
|
|
53
|
+
const [list, setList] = useState([]);
|
|
54
|
+
const [listClone, setListClone] = useState([]);
|
|
84
55
|
//numero de items pra ser mostrado
|
|
85
|
-
const [itemsCount, setItemsCount] =
|
|
86
|
-
const [currentPage, setCurrentPage] =
|
|
87
|
-
const [paginationCount, setPagCount] =
|
|
88
|
-
const [listPage, setListPage] =
|
|
89
|
-
const [oldSelectState, setOldSelectState] =
|
|
90
|
-
const [expandObj, setExpandObj] =
|
|
91
|
-
const [showExpandObj, setShowExpandObj] =
|
|
92
|
-
const [showExpandObjOnExited, setShowExpandObjOnExited] =
|
|
93
|
-
const [filterKey, setFilterKey] =
|
|
94
|
-
const theme =
|
|
95
|
-
const isSmall =
|
|
96
|
-
const filterContainer =
|
|
97
|
-
const lg =
|
|
56
|
+
const [itemsCount, setItemsCount] = useState(itemCount);
|
|
57
|
+
const [currentPage, setCurrentPage] = useState(0);
|
|
58
|
+
const [paginationCount, setPagCount] = useState(1);
|
|
59
|
+
const [listPage, setListPage] = useState(1);
|
|
60
|
+
const [oldSelectState, setOldSelectState] = useState('');
|
|
61
|
+
const [expandObj, setExpandObj] = useState({});
|
|
62
|
+
const [showExpandObj, setShowExpandObj] = useState({});
|
|
63
|
+
const [showExpandObjOnExited, setShowExpandObjOnExited] = useState({});
|
|
64
|
+
const [filterKey, setFilterKey] = useState('filterKey');
|
|
65
|
+
const theme = useTheme();
|
|
66
|
+
const isSmall = useMediaQuery(theme.breakpoints.only('xs'));
|
|
67
|
+
const filterContainer = useRef(null);
|
|
68
|
+
const lg = useMediaQuery(theme.breakpoints.up(2000));
|
|
98
69
|
localTableName = `tableFilter_${id}`;
|
|
99
70
|
localTableNameCache = `tableFilterCache_${id}`;
|
|
100
71
|
filtersFuncData = filtersFunc !== null && filtersFunc !== void 0 ? filtersFunc : {};
|
|
@@ -104,7 +75,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
104
75
|
localStorage.setItem(localTableNameCache, JSON.stringify(filters));
|
|
105
76
|
localStorage.removeItem(localTableName);
|
|
106
77
|
}
|
|
107
|
-
|
|
78
|
+
useEffect(() => {
|
|
108
79
|
setError(null);
|
|
109
80
|
if (userLoaded || !useKC) {
|
|
110
81
|
setIsLoading(true);
|
|
@@ -127,7 +98,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
127
98
|
status: j.statusCode,
|
|
128
99
|
});
|
|
129
100
|
else {
|
|
130
|
-
let value = dataPath ? (
|
|
101
|
+
let value = dataPath ? get(j, dataPath) : j;
|
|
131
102
|
if (!value || !Array.isArray(value)) {
|
|
132
103
|
setData({ body: { data: [] } });
|
|
133
104
|
startData = [];
|
|
@@ -147,20 +118,20 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
147
118
|
});
|
|
148
119
|
}
|
|
149
120
|
}, [userLoaded, fetchFunc]);
|
|
150
|
-
const getCount =
|
|
121
|
+
const getCount = useCallback((countData) => {
|
|
151
122
|
if (countData.length <= 0)
|
|
152
123
|
return 1;
|
|
153
124
|
let count = countData.length / itemsCount;
|
|
154
125
|
count = count < 1 ? 1 : count;
|
|
155
126
|
return Math.ceil(count);
|
|
156
127
|
}, [itemsCount]);
|
|
157
|
-
const getData =
|
|
128
|
+
const getData = useCallback((dt) => {
|
|
158
129
|
if (Array.isArray(dt))
|
|
159
130
|
return dt;
|
|
160
131
|
if (typeof dt === 'object')
|
|
161
|
-
return (
|
|
132
|
+
return get(dt, dataPath);
|
|
162
133
|
}, []);
|
|
163
|
-
|
|
134
|
+
useEffect(() => {
|
|
164
135
|
if (isLoading || error || !getData(data))
|
|
165
136
|
return;
|
|
166
137
|
const value = getData(data);
|
|
@@ -171,10 +142,10 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
171
142
|
filtrar(JSON.parse(localStorage.getItem(localTableName)));
|
|
172
143
|
}
|
|
173
144
|
}, [itemsCount, isLoading, data, getCount, error]);
|
|
174
|
-
|
|
145
|
+
useEffect(() => {
|
|
175
146
|
setCurrentPage(listPage - 1);
|
|
176
147
|
}, [listPage]);
|
|
177
|
-
const onPaginationChange =
|
|
148
|
+
const onPaginationChange = useCallback((e, page) => {
|
|
178
149
|
setListPage(page);
|
|
179
150
|
}, []);
|
|
180
151
|
function onInputChange(e) {
|
|
@@ -191,7 +162,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
191
162
|
const dataStr = [];
|
|
192
163
|
Object.keys(x).map((key) => {
|
|
193
164
|
var _a;
|
|
194
|
-
let value = (_a = (
|
|
165
|
+
let value = (_a = get(x, key, '')) !== null && _a !== void 0 ? _a : '';
|
|
195
166
|
if (typeof value === 'number')
|
|
196
167
|
value = value.toString();
|
|
197
168
|
if (typeof value !== 'string')
|
|
@@ -255,7 +226,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
255
226
|
setCurrentPage(0);
|
|
256
227
|
setListPage(1);
|
|
257
228
|
}
|
|
258
|
-
const getMaxItems =
|
|
229
|
+
const getMaxItems = useCallback(() => {
|
|
259
230
|
const start = currentPage * itemsCount;
|
|
260
231
|
return list.slice(start, start + itemsCount);
|
|
261
232
|
}, [list, itemsCount, currentPage]);
|
|
@@ -274,7 +245,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
274
245
|
return cell;
|
|
275
246
|
}
|
|
276
247
|
// download file
|
|
277
|
-
const downloadCSV =
|
|
248
|
+
const downloadCSV = useCallback((e, zip = false) => {
|
|
278
249
|
e.preventDefault();
|
|
279
250
|
if (list.length <= 0)
|
|
280
251
|
return;
|
|
@@ -282,7 +253,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
282
253
|
if (generateCsvZip && zip) {
|
|
283
254
|
const keys = originalKeys.filter((k) => !csvExcludeKeys.includes(k));
|
|
284
255
|
const header = keys.map((k) => (csvCustomKeyNames[k] ? csvCustomKeyNames[k] : k)).join(',') + '\n';
|
|
285
|
-
const zip = new
|
|
256
|
+
const zip = new JSZip();
|
|
286
257
|
const obj = {};
|
|
287
258
|
list.forEach((x) => {
|
|
288
259
|
if (!obj[x[csvZipFileNamesKey]])
|
|
@@ -417,7 +388,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
417
388
|
}
|
|
418
389
|
return '[' + arrString.join(' - ') + ']';
|
|
419
390
|
}
|
|
420
|
-
const downloadCSVAll =
|
|
391
|
+
const downloadCSVAll = useCallback((e) => {
|
|
421
392
|
e.preventDefault();
|
|
422
393
|
if (list.length <= 0)
|
|
423
394
|
return;
|
|
@@ -485,7 +456,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
485
456
|
switch (dt.operator) {
|
|
486
457
|
case 'igual':
|
|
487
458
|
currentData.forEach((cd) => {
|
|
488
|
-
const value = Number((
|
|
459
|
+
const value = Number(get(cd, dt.keyName, ''));
|
|
489
460
|
if (value === Number(dt.value)) {
|
|
490
461
|
filteredData.push(cd);
|
|
491
462
|
}
|
|
@@ -493,7 +464,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
493
464
|
break;
|
|
494
465
|
case 'maior que':
|
|
495
466
|
currentData.forEach((cd) => {
|
|
496
|
-
const value = Number((
|
|
467
|
+
const value = Number(get(cd, dt.keyName, ''));
|
|
497
468
|
if (value > Number(dt.value)) {
|
|
498
469
|
filteredData.push(cd);
|
|
499
470
|
}
|
|
@@ -501,7 +472,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
501
472
|
break;
|
|
502
473
|
case 'menor que':
|
|
503
474
|
currentData.forEach((cd) => {
|
|
504
|
-
const value = Number((
|
|
475
|
+
const value = Number(get(cd, dt.keyName, ''));
|
|
505
476
|
if (value < Number(dt.value)) {
|
|
506
477
|
filteredData.push(cd);
|
|
507
478
|
}
|
|
@@ -514,7 +485,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
514
485
|
switch (dt.operator) {
|
|
515
486
|
case 'igual':
|
|
516
487
|
currentData.forEach((cd) => {
|
|
517
|
-
const value = (
|
|
488
|
+
const value = get(cd, dt.keyName, '');
|
|
518
489
|
if (dt.useList) {
|
|
519
490
|
if (formatarString(value) === formatarString(dt.value.id)) {
|
|
520
491
|
filteredData.push(cd);
|
|
@@ -529,7 +500,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
529
500
|
break;
|
|
530
501
|
case 'contem':
|
|
531
502
|
currentData.forEach((cd) => {
|
|
532
|
-
const value = (
|
|
503
|
+
const value = get(cd, dt.keyName, '');
|
|
533
504
|
if (!value)
|
|
534
505
|
return;
|
|
535
506
|
if (dt.useList) {
|
|
@@ -546,7 +517,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
546
517
|
break;
|
|
547
518
|
case 'tem um dos':
|
|
548
519
|
currentData.forEach((cd) => {
|
|
549
|
-
const value = (
|
|
520
|
+
const value = get(cd, dt.keyName, '');
|
|
550
521
|
if (!value)
|
|
551
522
|
return;
|
|
552
523
|
if (dt.value.map((x) => formatarString(x.id)).includes(formatarString(value))) {
|
|
@@ -560,19 +531,19 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
560
531
|
switch (dt.operator) {
|
|
561
532
|
case 'data exata':
|
|
562
533
|
currentData.forEach((cd) => {
|
|
563
|
-
const value = (
|
|
534
|
+
const value = dayjs(get(cd, dt.keyName, ''), 'DD/MM/YYYY');
|
|
564
535
|
if (!value.isValid())
|
|
565
536
|
return;
|
|
566
|
-
if (value.isSame((
|
|
537
|
+
if (value.isSame(dayjs(dt.value, 'DD/MM/YYYY'))) {
|
|
567
538
|
filteredData.push(cd);
|
|
568
539
|
}
|
|
569
540
|
});
|
|
570
541
|
break;
|
|
571
542
|
case 'entre':
|
|
572
|
-
const dateA = dt.value ? (
|
|
573
|
-
const dateB = dt.value2 ? (
|
|
543
|
+
const dateA = dt.value ? dayjs(dt.value, 'DD/MM/YYYY') : dayjs('01/01/2000', 'DD/MM/YYYY');
|
|
544
|
+
const dateB = dt.value2 ? dayjs(dt.value2, 'DD/MM/YYYY') : dayjs('31/12/2030', 'DD/MM/YYYY');
|
|
574
545
|
currentData.forEach((cd) => {
|
|
575
|
-
const value = (
|
|
546
|
+
const value = dayjs(get(cd, dt.keyName, ''), 'DD/MM/YYYY');
|
|
576
547
|
if ((value.isAfter(dateA) || value.isSame(dateA)) && (value.isBefore(dateB) || value.isSame(dateB))) {
|
|
577
548
|
filteredData.push(cd);
|
|
578
549
|
}
|
|
@@ -585,12 +556,12 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
585
556
|
case 'data inicio':
|
|
586
557
|
currentData.forEach((cd) => {
|
|
587
558
|
var _a;
|
|
588
|
-
const dates = (_a = filtersFuncData[dt.customFunc]((
|
|
559
|
+
const dates = (_a = filtersFuncData[dt.customFunc](get(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
589
560
|
if (dates.length <= 0)
|
|
590
561
|
return;
|
|
591
562
|
var inicioDate = dates[0];
|
|
592
|
-
var inicioValue = (
|
|
593
|
-
if (inicioValue.isSame((
|
|
563
|
+
var inicioValue = dayjs(inicioDate, 'DD/MM/YYYY');
|
|
564
|
+
if (inicioValue.isSame(dayjs(dt.value, 'DD/MM/YYYY'))) {
|
|
594
565
|
filteredData.push(cd);
|
|
595
566
|
}
|
|
596
567
|
});
|
|
@@ -598,12 +569,12 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
598
569
|
case 'data fim':
|
|
599
570
|
currentData.forEach((cd) => {
|
|
600
571
|
var _a;
|
|
601
|
-
const dates = (_a = filtersFuncData[dt.customFunc]((
|
|
572
|
+
const dates = (_a = filtersFuncData[dt.customFunc](get(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
602
573
|
if (dates.length <= 0)
|
|
603
574
|
return;
|
|
604
575
|
var fimDate = dates[dates.length - 1];
|
|
605
|
-
var fimValue = (
|
|
606
|
-
if (fimValue.isSame((
|
|
576
|
+
var fimValue = dayjs(fimDate, 'DD/MM/YYYY');
|
|
577
|
+
if (fimValue.isSame(dayjs(dt.value, 'DD/MM/YYYY'))) {
|
|
607
578
|
filteredData.push(cd);
|
|
608
579
|
}
|
|
609
580
|
});
|
|
@@ -611,23 +582,23 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
611
582
|
case 'tem a data':
|
|
612
583
|
currentData.forEach((cd) => {
|
|
613
584
|
var _a;
|
|
614
|
-
const dates = (_a = filtersFuncData[dt.customFunc]((
|
|
585
|
+
const dates = (_a = filtersFuncData[dt.customFunc](get(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
615
586
|
if (dates.includes(dt.value)) {
|
|
616
587
|
filteredData.push(cd);
|
|
617
588
|
}
|
|
618
589
|
});
|
|
619
590
|
break;
|
|
620
591
|
case 'entre':
|
|
621
|
-
const dateA = dt.value ? (
|
|
622
|
-
const dateB = dt.value2 ? (
|
|
592
|
+
const dateA = dt.value ? dayjs(dt.value, 'DD/MM/YYYY') : dayjs('01/01/2000', 'DD/MM/YYYY');
|
|
593
|
+
const dateB = dt.value2 ? dayjs(dt.value2, 'DD/MM/YYYY') : dayjs('31/12/2030', 'DD/MM/YYYY');
|
|
623
594
|
currentData.forEach((cd) => {
|
|
624
595
|
var _a;
|
|
625
|
-
const dates = (_a = filtersFuncData[dt.customFunc]((
|
|
596
|
+
const dates = (_a = filtersFuncData[dt.customFunc](get(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
|
|
626
597
|
let isBetween = false;
|
|
627
598
|
dates.forEach((dtStr) => {
|
|
628
599
|
if (isBetween)
|
|
629
600
|
return;
|
|
630
|
-
const dt = (
|
|
601
|
+
const dt = dayjs(dtStr, 'DD/MM/YYYY');
|
|
631
602
|
if (!dt.isValid())
|
|
632
603
|
return;
|
|
633
604
|
if ((dt.isAfter(dateA) || dt.isSame(dateA)) && (dt.isBefore(dateB) || dt.isSame(dateB))) {
|
|
@@ -654,8 +625,8 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
654
625
|
function ordenar(order) {
|
|
655
626
|
let oldList = [...list];
|
|
656
627
|
oldList.sort((a, b) => {
|
|
657
|
-
const aValue = order.type === 'string' ? (
|
|
658
|
-
const bValue = order.type === 'string' ? (
|
|
628
|
+
const aValue = order.type === 'string' ? get(a, order.key, '') : Number(get(a, order.key, 0));
|
|
629
|
+
const bValue = order.type === 'string' ? get(b, order.key, '') : Number(get(b, order.key, 0));
|
|
659
630
|
if (orderAsc) {
|
|
660
631
|
if (aValue < bValue)
|
|
661
632
|
return -1;
|
|
@@ -674,45 +645,45 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
674
645
|
setList(oldList);
|
|
675
646
|
}
|
|
676
647
|
// effect usado quando for mostrar "VER MAIS" e "VER MENOS"
|
|
677
|
-
|
|
648
|
+
useEffect(() => {
|
|
678
649
|
const start = currentPage * itemsCount;
|
|
679
650
|
const newList = list.slice(start, start + itemsCount);
|
|
680
651
|
let obj = {};
|
|
681
652
|
newList.forEach((x, index) => {
|
|
682
653
|
columns.forEach((c) => {
|
|
683
654
|
var _a;
|
|
684
|
-
obj[index] = obj[index] === true ? true : ((_a = (
|
|
655
|
+
obj[index] = obj[index] === true ? true : ((_a = get(x, c.keyName, '')) !== null && _a !== void 0 ? _a : 'Não Informado').toString().length >= expandTextMaxLength;
|
|
685
656
|
});
|
|
686
657
|
});
|
|
687
658
|
setShowExpandObj(obj);
|
|
688
659
|
}, [list, itemsCount, currentPage]);
|
|
689
|
-
|
|
660
|
+
useEffect(() => {
|
|
690
661
|
console.log(filterContainer.current);
|
|
691
662
|
}, [filterContainer.current]);
|
|
692
663
|
if (error)
|
|
693
|
-
return (
|
|
694
|
-
|
|
664
|
+
return (React.createElement(Box, { bgcolor: '#fff2c8', color: '#3e3129', padding: 2, marginX: 2, borderRadius: 4 },
|
|
665
|
+
React.createElement(Typography, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
|
|
695
666
|
error.status === 403 && 'Acesso negado',
|
|
696
|
-
error.status === 500 && (
|
|
697
|
-
|
|
698
|
-
|
|
667
|
+
error.status === 500 && (React.createElement(Box, { fontWeight: 500, textAlign: 'center' },
|
|
668
|
+
React.createElement(ReportProblemRounded, { sx: { transform: 'scale(2)', marginY: 1, fill: '#3e3129' } }),
|
|
669
|
+
React.createElement(Box, null, customErrorMsg ? (customErrorMsg) : (React.createElement(React.Fragment, null,
|
|
699
670
|
"N\u00E3o foi poss\u00EDvel se conectar ao servidor no momento. Por favor, aguarde alguns instantes e tente de novo.",
|
|
700
|
-
|
|
701
|
-
|
|
671
|
+
React.createElement("br", null),
|
|
672
|
+
React.createElement("br", null),
|
|
702
673
|
"Caso precise de ajuda, entre em contato pelo email: ",
|
|
703
|
-
|
|
674
|
+
React.createElement("strong", null, "cdes@ssp.df.gov.br")))))))));
|
|
704
675
|
if (isLoading)
|
|
705
|
-
return (
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
676
|
+
return (React.createElement(Stack, { sx: { height: '100%', width: '100%' }, justifyContent: 'center', alignItems: 'center' },
|
|
677
|
+
React.createElement(Box, { width: '100%' },
|
|
678
|
+
React.createElement(Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', justifyItems: 'center', spacing: 2, marginY: 4 },
|
|
679
|
+
React.createElement(PendingRounded, { sx: { fill: '#5e5e5e' } }),
|
|
680
|
+
React.createElement(Typography, { fontWeight: 600, fontSize: 20, textTransform: 'capitalize', textAlign: 'center', color: '#5e5e5e' },
|
|
710
681
|
"Carregando ",
|
|
711
682
|
tableName)),
|
|
712
|
-
|
|
683
|
+
React.createElement(LinearProgress, { color: 'inherit' }),
|
|
713
684
|
Array(10)
|
|
714
685
|
.fill('')
|
|
715
|
-
.map((x) => (
|
|
686
|
+
.map((x) => (React.createElement(Stack, { direction: {
|
|
716
687
|
xs: 'column',
|
|
717
688
|
md: 'row',
|
|
718
689
|
}, spacing: {
|
|
@@ -720,17 +691,17 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
720
691
|
md: 1,
|
|
721
692
|
}, justifyContent: 'space-between', paddingY: 8, borderBottom: '1px solid #cacaca' }, Array(7)
|
|
722
693
|
.fill(0)
|
|
723
|
-
.map((y) => (
|
|
724
|
-
|
|
725
|
-
|
|
694
|
+
.map((y) => (React.createElement(Box, null,
|
|
695
|
+
React.createElement(Skeleton, { width: 60 }),
|
|
696
|
+
React.createElement(Skeleton, { width: 120 }))))))))));
|
|
726
697
|
if (!userLoaded && useKC)
|
|
727
|
-
return
|
|
728
|
-
return (
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
startAdornment:
|
|
698
|
+
return React.createElement(LinearProgress, null);
|
|
699
|
+
return (React.createElement(React.Fragment, null,
|
|
700
|
+
React.createElement(Box, Object.assign({ marginX: isSmall ? customMarginMobile : customMargin, bgcolor: 'white', p: 2, borderRadius: 6 }, customTableStyle),
|
|
701
|
+
React.createElement(Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' } },
|
|
702
|
+
React.createElement(Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' }, height: { md: '40px', xs: 'inherit' }, width: '100%' },
|
|
703
|
+
React.createElement(TextField, { InputProps: {
|
|
704
|
+
startAdornment: React.createElement(SearchIcon, { sx: { marginRight: 1, fill: '#c0c0c0' } }),
|
|
734
705
|
sx: {
|
|
735
706
|
'.MuiOutlinedInput-notchedOutline': { border: 'none' },
|
|
736
707
|
},
|
|
@@ -740,24 +711,24 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
740
711
|
borderRadius: '50px',
|
|
741
712
|
maxWidth: '600px',
|
|
742
713
|
}, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` }),
|
|
743
|
-
|
|
714
|
+
React.createElement(Button, { startIcon: React.createElement(FilterAlt, null), variant: 'contained', onClick: (e) => MODAL.open(React.createElement(CriarFiltro, { key: filterKey, reset: reset, filtrar: filtrar, baseFilters: [...filters], filters: localStorage.getItem(localTableName) ? JSON.parse(localStorage.getItem(localTableName)) : [...filters] })), sx: {
|
|
744
715
|
borderRadius: 3,
|
|
745
716
|
paddingX: '24px',
|
|
746
717
|
paddingY: '8px',
|
|
747
718
|
backgroundColor: '#208FE8',
|
|
748
719
|
textTransform: 'capitalize',
|
|
749
720
|
} },
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
721
|
+
React.createElement(Stack, { direction: 'row', borderRadius: 5, padding: 0 },
|
|
722
|
+
React.createElement("span", null, "Filtrar"))),
|
|
723
|
+
React.createElement(Stack, { direction: 'row', spacing: 1 },
|
|
724
|
+
React.createElement(CustomMenu, { data: orderBy.map((x) => ({
|
|
754
725
|
name: x.label,
|
|
755
726
|
onClick: () => ordenar(x),
|
|
756
727
|
})), btProps: {
|
|
757
|
-
startIcon:
|
|
728
|
+
startIcon: React.createElement(KeyboardArrowDown, null),
|
|
758
729
|
fullWidth: true,
|
|
759
730
|
} }, "Ordenar"),
|
|
760
|
-
|
|
731
|
+
React.createElement(Button, { variant: 'contained', fullWidth: true, startIcon: isExpandAll ? React.createElement(KeyboardArrowUp, null) : React.createElement(KeyboardArrowDown, null), sx: {
|
|
761
732
|
backgroundColor: '#637082',
|
|
762
733
|
':hover': {
|
|
763
734
|
backgroundColor: '#3c4757',
|
|
@@ -768,32 +739,32 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
768
739
|
md: '0px 8px',
|
|
769
740
|
},
|
|
770
741
|
}, onClick: expandAll }, isExpandAll ? 'Recolher' : 'Expandir'))),
|
|
771
|
-
|
|
772
|
-
|
|
742
|
+
React.createElement(Stack, { alignItems: 'end', width: { xs: '100%', md: '20%' }, direction: { xs: 'row', md: 'column' }, spacing: { xs: 1, md: 0 } },
|
|
743
|
+
React.createElement(Typography, { fontWeight: 600, textAlign: 'end' },
|
|
773
744
|
"Registro de ",
|
|
774
745
|
tableName,
|
|
775
746
|
"s"),
|
|
776
|
-
|
|
777
|
-
|
|
747
|
+
React.createElement(Stack, { justifyContent: 'center' },
|
|
748
|
+
React.createElement(Typography, null,
|
|
778
749
|
"Exibindo ",
|
|
779
750
|
currentPage * itemsCount + 1,
|
|
780
751
|
"-",
|
|
781
752
|
currentPage * itemsCount + 1 + getMaxItems().length - 1,
|
|
782
753
|
" de ",
|
|
783
754
|
list.length)))),
|
|
784
|
-
localStorage.getItem(localTableName) && (
|
|
755
|
+
localStorage.getItem(localTableName) && (React.createElement(Box, { display: 'inline-flex', flexWrap: 'wrap', padding: 0.5, borderRadius: 4, marginBottom: 1 }, JSON.parse((_a = localStorage.getItem(localTableName)) !== null && _a !== void 0 ? _a : '[]')
|
|
785
756
|
.filter((x) => x.value || (x.operator === 'entre' && (x.value || x.value2)))
|
|
786
|
-
.map((x) => (
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
757
|
+
.map((x) => (React.createElement(Stack, { direction: 'row', spacing: 1, bgcolor: '#4e85c1', color: 'white', width: 'fit-content', paddingY: 0.5, borderRadius: 2, paddingX: 1, m: 0.5 },
|
|
758
|
+
React.createElement(Typography, { fontWeight: 700 }, x.label),
|
|
759
|
+
React.createElement(Typography, { fontStyle: 'italic' }, x.operator),
|
|
760
|
+
React.createElement(Typography, { bgcolor: 'white', borderRadius: 2, paddingX: 1, color: 'black' }, Array.isArray(x.value)
|
|
790
761
|
? x.value.map((x) => x.label).join(' - ')
|
|
791
762
|
: typeof x.value === 'object'
|
|
792
763
|
? x.value.label
|
|
793
764
|
: x.operator === 'entre'
|
|
794
765
|
? `${x.value ? x.value : 'Antes'} e ${x.value2 ? x.value2 : 'Depois'}`
|
|
795
766
|
: x.value.toString()),
|
|
796
|
-
|
|
767
|
+
React.createElement(IconButton, { onClick: (e) => {
|
|
797
768
|
var _a;
|
|
798
769
|
let currentValue = JSON.parse((_a = localStorage.getItem(localTableName)) !== null && _a !== void 0 ? _a : '[]');
|
|
799
770
|
currentValue = currentValue.map((item) => {
|
|
@@ -806,71 +777,71 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
806
777
|
}, size: 'small', sx: {
|
|
807
778
|
padding: 0,
|
|
808
779
|
} },
|
|
809
|
-
|
|
780
|
+
React.createElement(Clear, { sx: {
|
|
810
781
|
fill: 'white',
|
|
811
782
|
} }))))))),
|
|
812
|
-
|
|
813
|
-
|
|
783
|
+
React.createElement(Stack, { spacing: 0.2 }, getMaxItems().length <= 0 ? (React.createElement(Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
|
|
784
|
+
React.createElement(Typography, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public))) : (getMaxItems().map((x, index) => (React.createElement(Paper, { key: index, sx: {
|
|
814
785
|
padding: 0.5,
|
|
815
786
|
backgroundColor: index % 2 === 0 ? '#F8FAFC' : 'white',
|
|
816
787
|
paddingTop: 2,
|
|
817
788
|
borderTop: 'solid 1.5px #E2E8F0',
|
|
818
789
|
position: 'relative',
|
|
819
790
|
}, elevation: 0 },
|
|
820
|
-
|
|
791
|
+
React.createElement(Grid, { container: true, spacing: isSmall ? 2 : 0, paddingX: 2, rowSpacing: 2 },
|
|
821
792
|
columns.map((c) => {
|
|
822
793
|
var _a, _b;
|
|
823
|
-
return (
|
|
794
|
+
return (React.createElement(Grid, { 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), sx: {
|
|
824
795
|
overflow: 'hidden',
|
|
825
796
|
} },
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
797
|
+
React.createElement(Box, { sx: { width: 'max-content', paddingX: 1 } },
|
|
798
|
+
React.createElement(Typography, { fontSize: 16, fontWeight: 700, color: '#1E293B', fontFamily: 'Inter' }, c.title)),
|
|
799
|
+
React.createElement(Box, { paddingLeft: 1, position: 'relative' },
|
|
800
|
+
React.createElement(Collapse, { in: expandObj[index] === true, collapsedSize: collapsedSize, onExited: (e) => setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: false }))) },
|
|
801
|
+
React.createElement(Box, { sx: {
|
|
831
802
|
wordWrap: 'break-word',
|
|
832
803
|
color: '#1E293B',
|
|
833
804
|
fontSize: 16,
|
|
834
805
|
}, fontFamily: 'Inter' },
|
|
835
|
-
|
|
836
|
-
|
|
806
|
+
React.createElement(Box, null, c.customComponent ? (c.customComponent(get(x, c.keyName), x)) : (React.createElement(Box, { color: 'transparent', sx: { pointerEvents: 'none', userSelect: 'none' } }, get(x, c.keyName, '')))),
|
|
807
|
+
React.createElement(Box, { position: 'absolute', top: 0 }, c.customComponent ? (c.customComponent(get(x, c.keyName), x)) : (React.createElement(React.Fragment, null, showExpandObjOnExited[index] ? (get(x, c.keyName, '')) : ((_a = get(x, c.keyName, '')) !== null && _a !== void 0 ? _a : '').toString().length >= expandTextMaxLength ? (React.createElement(React.Fragment, null, ((_b = get(x, c.keyName, '')) !== null && _b !== void 0 ? _b : '').toString().substring(0, expandTextMaxLength) + '...')) : (get(x, c.keyName, ''))))))))));
|
|
837
808
|
}),
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
showExpandObj[index] && (
|
|
841
|
-
|
|
809
|
+
React.createElement(Grid, { item: true, xs: 12, md: lg ? 12 / columnSize : mediaQueryLG ? mediaQueryLG.action : 12 / columnSize },
|
|
810
|
+
React.createElement(Stack, { direction: 'row', alignItems: 'center', justifyContent: isSmall ? 'start' : 'flex-end', sx: { height: '100%', paddingBottom: isSmall ? 2 : 0 } }, action(x))),
|
|
811
|
+
showExpandObj[index] && (React.createElement(Stack, { direction: 'row', justifyContent: 'flex-end', bottom: 0, width: '100%' },
|
|
812
|
+
React.createElement(Button, { onClick: (e) => {
|
|
842
813
|
setExpandObj((s) => (Object.assign(Object.assign({}, s), { [index]: !s[index] })));
|
|
843
814
|
setShowExpandObjOnExited((s) => (Object.assign(Object.assign({}, s), { [index]: true })));
|
|
844
815
|
}, sx: {
|
|
845
816
|
padding: 0,
|
|
846
817
|
color: '#637082',
|
|
847
818
|
textTransform: 'capitalize',
|
|
848
|
-
}, startIcon: expandObj[index] ?
|
|
849
|
-
getMaxItems().length > 0 && (
|
|
819
|
+
}, startIcon: expandObj[index] ? React.createElement(ExpandLess, null) : React.createElement(ExpandMore, null) }, expandObj[index] ? 'Ver Menos' : 'Ver Mais'))))))))),
|
|
820
|
+
getMaxItems().length > 0 && (React.createElement(Stack, { padding: 1, direction: {
|
|
850
821
|
xs: 'column',
|
|
851
822
|
md: 'row',
|
|
852
823
|
}, spacing: {
|
|
853
824
|
xs: 2,
|
|
854
825
|
md: 0,
|
|
855
|
-
}, justifyContent: 'space-between', alignItems: 'center' }, csv && (
|
|
826
|
+
}, justifyContent: 'space-between', alignItems: 'center' }, csv && (React.createElement(Stack, { direction: {
|
|
856
827
|
xs: 'column',
|
|
857
828
|
md: 'row',
|
|
858
829
|
}, justifyContent: 'flex-end', spacing: 1 },
|
|
859
|
-
csvWithoutZip && (
|
|
860
|
-
csvShowAllButton && (
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
830
|
+
csvWithoutZip && (React.createElement(Button, { startIcon: React.createElement(FileDownloadIcon, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#5a88b0', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvNoZipText)),
|
|
831
|
+
csvShowAllButton && (React.createElement(Button, { startIcon: React.createElement(FileDownloadIcon, null), variant: 'contained', size: 'small', onClick: downloadCSVAll, sx: { backgroundColor: '#64748B', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvAllButtonTitle)),
|
|
832
|
+
React.createElement(Button, { startIcon: React.createElement(FileDownloadIcon, null), variant: 'contained', size: 'small', onClick: (e) => downloadCSV(e, true), sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle)))))),
|
|
833
|
+
React.createElement(Stack, { direction: 'row', justifyContent: 'center', paddingY: 1, paddingTop: 2 },
|
|
834
|
+
React.createElement(Stack, { direction: 'row', justifyContent: 'center', alignItems: 'center', spacing: 2 },
|
|
835
|
+
React.createElement(Button, { onClick: (e) => setListPage((s) => {
|
|
865
836
|
if (s > 1) {
|
|
866
837
|
return s - 1;
|
|
867
838
|
}
|
|
868
839
|
return 1;
|
|
869
840
|
}), sx: { bgcolor: 'white', borderRadius: '50px', height: '40px', width: '40px', minWidth: 0, border: 'solid 1px #E2E8F0' } },
|
|
870
|
-
|
|
871
|
-
|
|
841
|
+
React.createElement(NavigateNextRoundedIcon, { sx: { transform: 'scale(1.5) scaleX(-1)' } })),
|
|
842
|
+
React.createElement(Pagination, { renderItem: (item) => {
|
|
872
843
|
if (item.type === 'page')
|
|
873
|
-
return (
|
|
844
|
+
return (React.createElement(Button, { onClick: item.onClick, sx: Object.assign(Object.assign({ fontWeight: 600 }, (item.selected
|
|
874
845
|
? {
|
|
875
846
|
bgcolor: '#33B55D',
|
|
876
847
|
color: 'white',
|
|
@@ -879,7 +850,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
879
850
|
color: '#1E293B',
|
|
880
851
|
})), { borderRadius: '100%', padding: 0, margin: 0, minWidth: 0, width: '40px', height: '40px', marginX: 0.25 }) }, item.page));
|
|
881
852
|
if (!['next', 'previous', 'page'].includes(item.type))
|
|
882
|
-
return
|
|
853
|
+
return React.createElement(PaginationItem, Object.assign({}, item));
|
|
883
854
|
}, count: paginationCount, siblingCount: isSmall ? 0 : 6, size: 'large', onChange: onPaginationChange, page: listPage, shape: 'circular', variant: 'outlined', sx: {
|
|
884
855
|
'.MuiPagination-ul': {
|
|
885
856
|
backgroundColor: 'white',
|
|
@@ -889,24 +860,23 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
|
|
|
889
860
|
paddingY: 0.5,
|
|
890
861
|
},
|
|
891
862
|
} }),
|
|
892
|
-
|
|
863
|
+
React.createElement(Button, { onClick: (e) => setListPage((s) => {
|
|
893
864
|
if (s < paginationCount) {
|
|
894
865
|
return s + 1;
|
|
895
866
|
}
|
|
896
867
|
return paginationCount;
|
|
897
868
|
}), sx: { bgcolor: 'white', borderRadius: '50px', height: '40px', width: '40px', minWidth: 0, border: 'solid 1px #E2E8F0' } },
|
|
898
|
-
|
|
869
|
+
React.createElement(NavigateNextRoundedIcon, { sx: { transform: 'scale(1.5)' } }))))));
|
|
899
870
|
}
|
|
900
|
-
exports.Table = Table;
|
|
901
871
|
function CriarFiltro({ filters, baseFilters, filtrar, reset }) {
|
|
902
|
-
const [data, setData] =
|
|
903
|
-
const [resetFields, setResetFields] =
|
|
872
|
+
const [data, setData] = useState(filters);
|
|
873
|
+
const [resetFields, setResetFields] = useState(false);
|
|
904
874
|
function addRule(filter) {
|
|
905
875
|
setData((dt) => {
|
|
906
876
|
return [...dt, filter];
|
|
907
877
|
});
|
|
908
878
|
}
|
|
909
|
-
const [anchorEl, setAnchorEl] =
|
|
879
|
+
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
910
880
|
const open = Boolean(anchorEl);
|
|
911
881
|
const handleClick = (event) => {
|
|
912
882
|
setAnchorEl(event.currentTarget);
|
|
@@ -914,25 +884,25 @@ function CriarFiltro({ filters, baseFilters, filtrar, reset }) {
|
|
|
914
884
|
const handleClose = () => {
|
|
915
885
|
setAnchorEl(null);
|
|
916
886
|
};
|
|
917
|
-
return (
|
|
887
|
+
return (React.createElement(Box, { width: {
|
|
918
888
|
xs: 'inherit',
|
|
919
889
|
md: 850,
|
|
920
890
|
} },
|
|
921
|
-
|
|
891
|
+
React.createElement(Menu, { open: open, onClose: handleClose, anchorEl: anchorEl }, baseFilters.map((x) => (React.createElement(MenuItem, { onClick: (e) => {
|
|
922
892
|
addRule(x);
|
|
923
893
|
setAnchorEl(null);
|
|
924
894
|
} }, x.label)))),
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
895
|
+
React.createElement(Stack, { direction: 'row', justifyContent: 'space-between' },
|
|
896
|
+
React.createElement(Typography, { fontWeight: 700, fontSize: 18 }, "Filtrar"),
|
|
897
|
+
React.createElement(Button, { startIcon: React.createElement(Refresh, null), sx: {
|
|
928
898
|
textTransform: 'capitalize',
|
|
929
899
|
}, onClick: (e) => {
|
|
930
900
|
reset();
|
|
931
|
-
|
|
901
|
+
MODAL.close();
|
|
932
902
|
} }, "Limpar")),
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
903
|
+
React.createElement(Box, { marginBottom: 1 },
|
|
904
|
+
React.createElement(Alert, { severity: 'warning' }, "Preencha apenas os campos que deseja filtrar.")),
|
|
905
|
+
React.createElement(Stack, null, resetFields ? (data.map((d, idx) => (React.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
|
|
936
906
|
setData((dt) => {
|
|
937
907
|
let arr = [...dt];
|
|
938
908
|
arr[idx] = valueData;
|
|
@@ -944,7 +914,7 @@ function CriarFiltro({ filters, baseFilters, filtrar, reset }) {
|
|
|
944
914
|
arr.splice(idx, 1);
|
|
945
915
|
return arr;
|
|
946
916
|
});
|
|
947
|
-
} })))) : (
|
|
917
|
+
} })))) : (React.createElement(Box, null, data.map((d, idx) => (React.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
|
|
948
918
|
setData((dt) => {
|
|
949
919
|
let arr = [...dt];
|
|
950
920
|
arr[idx] = valueData;
|
|
@@ -957,43 +927,43 @@ function CriarFiltro({ filters, baseFilters, filtrar, reset }) {
|
|
|
957
927
|
return arr;
|
|
958
928
|
});
|
|
959
929
|
} })))))),
|
|
960
|
-
|
|
961
|
-
|
|
930
|
+
React.createElement(Stack, { direction: 'row', justifyContent: 'flex-end', marginTop: 1 },
|
|
931
|
+
React.createElement(Button, { variant: 'contained', color: 'success', startIcon: React.createElement(Search, null), sx: {
|
|
962
932
|
textTransform: 'capitalize',
|
|
963
933
|
}, onClick: (e) => {
|
|
964
934
|
filtrar(data);
|
|
965
|
-
|
|
935
|
+
MODAL.close();
|
|
966
936
|
} }, "Filtrar"))));
|
|
967
937
|
}
|
|
968
938
|
function FilterRow({ filterValue, setDt, removeDt, idx, setReset, }) {
|
|
969
|
-
const [currentOperator, setCurrentOperator] =
|
|
970
|
-
const [data, setData] =
|
|
971
|
-
const theme =
|
|
972
|
-
const isSmall =
|
|
973
|
-
|
|
939
|
+
const [currentOperator, setCurrentOperator] = useState(filterValue.operator);
|
|
940
|
+
const [data, setData] = useState(filterValue);
|
|
941
|
+
const theme = useTheme();
|
|
942
|
+
const isSmall = useMediaQuery(theme.breakpoints.only('xs'));
|
|
943
|
+
useEffect(() => {
|
|
974
944
|
setDt(data);
|
|
975
945
|
}, [data]);
|
|
976
|
-
return (
|
|
977
|
-
!isSmall && (
|
|
978
|
-
|
|
946
|
+
return (React.createElement(Stack, { direction: 'row', alignItems: 'end', spacing: 1, width: '100%', bgcolor: idx % 2 === 0 ? '#ededed' : 'inherit', padding: 0.5, borderRadius: 2 },
|
|
947
|
+
!isSmall && (React.createElement(Typography, { width: '100%', alignContent: 'center', fontWeight: 600, color: '#323232' }, filterValue.label)),
|
|
948
|
+
React.createElement(FormControl, { sx: {
|
|
979
949
|
width: '100%',
|
|
980
950
|
} },
|
|
981
|
-
isSmall &&
|
|
982
|
-
|
|
951
|
+
isSmall && React.createElement(Typography, null, filterValue.label),
|
|
952
|
+
React.createElement(Select, { onChange: (e) => {
|
|
983
953
|
const value = e.target.value;
|
|
984
954
|
setData((obj) => (Object.assign(Object.assign({}, obj), { operator: value, value: '' })));
|
|
985
955
|
setCurrentOperator(value);
|
|
986
956
|
}, defaultValue: currentOperator, size: 'small', sx: {
|
|
987
957
|
bgcolor: 'white',
|
|
988
|
-
}, fullWidth: true }, filterValue.operators.map((x) => (
|
|
989
|
-
|
|
958
|
+
}, fullWidth: true }, filterValue.operators.map((x) => (React.createElement(MenuItem, { value: x }, x))))),
|
|
959
|
+
React.createElement(FilterField, { filterValue: filterValue, operator: data.operator, onChange: (value, type = 'value') => {
|
|
990
960
|
setData((obj) => (Object.assign(Object.assign({}, obj), { [type]: value })));
|
|
991
961
|
} })));
|
|
992
962
|
}
|
|
993
963
|
function FilterField({ filterValue, operator, onChange }) {
|
|
994
964
|
switch (filterValue.type) {
|
|
995
965
|
case 'number':
|
|
996
|
-
return (
|
|
966
|
+
return (React.createElement(TextField, { type: 'number', size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
|
|
997
967
|
onChange(e.target.value);
|
|
998
968
|
}, sx: {
|
|
999
969
|
bgcolor: 'white',
|
|
@@ -1002,24 +972,24 @@ function FilterField({ filterValue, operator, onChange }) {
|
|
|
1002
972
|
if (filterValue.useList) {
|
|
1003
973
|
switch (operator) {
|
|
1004
974
|
case 'tem um dos':
|
|
1005
|
-
return (
|
|
975
|
+
return (React.createElement(Autocomplete, { multiple: true, id: 'tags-standard', onChange: (e, value) => {
|
|
1006
976
|
if (value.length <= 0) {
|
|
1007
977
|
onChange('');
|
|
1008
978
|
return;
|
|
1009
979
|
}
|
|
1010
980
|
onChange(value);
|
|
1011
|
-
}, options: filterValue.useList, defaultValue: Array.isArray(filterValue.value) ? filterValue.value : [], renderInput: (params) =>
|
|
981
|
+
}, options: filterValue.useList, defaultValue: Array.isArray(filterValue.value) ? filterValue.value : [], renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { variant: 'standard', placeholder: 'Escolha os valores', fullWidth: true })), fullWidth: true }));
|
|
1012
982
|
case 'contem':
|
|
1013
983
|
case 'igual':
|
|
1014
|
-
return (
|
|
1015
|
-
|
|
984
|
+
return (React.createElement(Box, { width: '100%' },
|
|
985
|
+
React.createElement(Autocomplete, { options: filterValue.useList, onChange: (e, value) => {
|
|
1016
986
|
onChange(value);
|
|
1017
|
-
}, defaultValue: typeof filterValue.value === 'object' ? filterValue.value : undefined, isOptionEqualToValue: (option, value) => option.label === value.label, renderInput: (params) => (
|
|
987
|
+
}, defaultValue: typeof filterValue.value === 'object' ? filterValue.value : undefined, isOptionEqualToValue: (option, value) => option.label === value.label, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: 'small', placeholder: 'Escolha um valor', fullWidth: true, sx: {
|
|
1018
988
|
bgcolor: 'white',
|
|
1019
989
|
} }))), fullWidth: true })));
|
|
1020
990
|
}
|
|
1021
991
|
}
|
|
1022
|
-
return (
|
|
992
|
+
return (React.createElement(TextField, { size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
|
|
1023
993
|
onChange(e.target.value);
|
|
1024
994
|
}, sx: {
|
|
1025
995
|
bgcolor: 'white',
|
|
@@ -1031,10 +1001,10 @@ function FilterField({ filterValue, operator, onChange }) {
|
|
|
1031
1001
|
case 'data fim':
|
|
1032
1002
|
case 'data inicio':
|
|
1033
1003
|
case 'tem a data':
|
|
1034
|
-
return (
|
|
1035
|
-
|
|
1004
|
+
return (React.createElement(LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs },
|
|
1005
|
+
React.createElement(DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
|
|
1036
1006
|
onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
|
|
1037
|
-
}, defaultValue: filterValue.value ? (
|
|
1007
|
+
}, defaultValue: filterValue.value ? dayjs(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
|
|
1038
1008
|
div: {
|
|
1039
1009
|
input: {
|
|
1040
1010
|
paddingX: 2,
|
|
@@ -1043,12 +1013,12 @@ function FilterField({ filterValue, operator, onChange }) {
|
|
|
1043
1013
|
},
|
|
1044
1014
|
width: '100%',
|
|
1045
1015
|
bgcolor: 'white',
|
|
1046
|
-
}, inputRef: (params) =>
|
|
1016
|
+
}, inputRef: (params) => React.createElement(TextField, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
|
|
1047
1017
|
case 'entre':
|
|
1048
|
-
return (
|
|
1049
|
-
|
|
1018
|
+
return (React.createElement(LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs },
|
|
1019
|
+
React.createElement(DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
|
|
1050
1020
|
onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
|
|
1051
|
-
}, defaultValue: filterValue.value ? (
|
|
1021
|
+
}, defaultValue: filterValue.value ? dayjs(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
|
|
1052
1022
|
div: {
|
|
1053
1023
|
input: {
|
|
1054
1024
|
paddingX: 2,
|
|
@@ -1057,10 +1027,10 @@ function FilterField({ filterValue, operator, onChange }) {
|
|
|
1057
1027
|
},
|
|
1058
1028
|
width: '100%',
|
|
1059
1029
|
bgcolor: 'white',
|
|
1060
|
-
}, inputRef: (params) =>
|
|
1061
|
-
|
|
1030
|
+
}, inputRef: (params) => React.createElement(TextField, Object.assign({}, params, { size: 'small', fullWidth: true })) }),
|
|
1031
|
+
React.createElement(DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
|
|
1062
1032
|
onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '', 'value2');
|
|
1063
|
-
}, defaultValue: filterValue.value2 ? (
|
|
1033
|
+
}, defaultValue: filterValue.value2 ? dayjs(filterValue.value2, 'DD/MM/YYYY') : undefined, sx: {
|
|
1064
1034
|
div: {
|
|
1065
1035
|
input: {
|
|
1066
1036
|
paddingX: 2,
|
|
@@ -1069,10 +1039,10 @@ function FilterField({ filterValue, operator, onChange }) {
|
|
|
1069
1039
|
},
|
|
1070
1040
|
width: '100%',
|
|
1071
1041
|
bgcolor: 'white',
|
|
1072
|
-
}, inputRef: (params) =>
|
|
1042
|
+
}, inputRef: (params) => React.createElement(TextField, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
|
|
1073
1043
|
}
|
|
1074
1044
|
break;
|
|
1075
1045
|
}
|
|
1076
|
-
return
|
|
1046
|
+
return React.createElement(React.Fragment, null);
|
|
1077
1047
|
}
|
|
1078
|
-
|
|
1048
|
+
export default React.memo(Table);
|