@ssplib/react-components 0.0.123 → 0.0.125

package/components/form/date/DatePicker.js

@@ -63,7 +63,7 @@ function DatePicker(_a) {
     }, [value]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
-            title && react_1.default.createElement(material_1.InputLabel, null, title),
+            title && react_1.default.createElement(material_1.InputLabel, { required: required }, title),
             react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: pt_br_1.default, dateAdapter: AdapterDayjs_1.AdapterDayjs },
                 react_1.default.createElement(x_date_pickers_2.DatePicker, { minDate: (0, dayjs_1.default)(minDt, 'DD/MM/YYYY'), maxDate: (0, dayjs_1.default)(maxDt, 'DD/MM/YYYY'), format: 'DD/MM/YYYY', value: value, onChange: handleChange, disableHighlightToday: true, sx: {
                         outline: (0, lodash_get_1.default)(context.errors, name) ? '1px solid #a51c30' : '',

package/components/form/table/Table.d.ts

@@ -4,7 +4,8 @@ interface ColumnData {
     keyName: string;
     size?: number;
 }
-export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic, statusKeyName, csvExcludeKeys, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvAllButtonTitle, csvShowAllButton, itemCount, }: {
+type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval' | 'data-a-z' | 'data-z-a';
+export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic, statusKeyName, csvExcludeKeys, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvAllButtonTitle, csvShowAllButton, itemCount, filters, filterSeparator, }: {
     columns: ColumnData[];
     tableName: string;
     csvShowAllButton?: boolean;
@@ -30,9 +31,19 @@ export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableNam
     dataPath?: string;
     isPublic?: boolean;
     filters?: {
-        type: '';
-        options?: object[];
+        [key: string]: {
+            type: FilterTypes;
+            keyName: string;
+            name: string;
+            referenceKey?: string;
+            options?: {
+                name: string;
+                color: string;
+                key: string;
+            }[];
+        }[];
     };
+    filterSeparator?: string;
 }): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Table>;
 export default _default;

package/components/form/table/Table.js

@@ -37,10 +37,15 @@ const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const lodash_get_1 = __importDefault(require("lodash.get"));
 const react_1 = __importStar(require("react"));
 const auth_1 = require("../../../context/auth");
+const icons_material_1 = require("@mui/icons-material");
+const FormProvider_1 = __importDefault(require("../../providers/FormProvider"));
+const DatePicker_1 = __importDefault(require("../date/DatePicker"));
+const dayjs_1 = __importDefault(require("dayjs"));
+let startData = [];
 function Table({ columns, fetchFunc, emptyMsg = {
     user: 'Nenhum dado encontrado',
     public: 'Nenhum dado encontrado',
-}, dataPath = '', tableName = 'Dados', csv, columnSize, action, isPublic = false, statusKeyName = '', csvExcludeKeys = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', csvShowAllButton = false, itemCount = 10, }) {
+}, dataPath = '', tableName = 'Dados', csv, columnSize, action, isPublic = false, statusKeyName = '', csvExcludeKeys = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', csvShowAllButton = false, itemCount = 10, filters = {}, filterSeparator = '|', }) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
     const [data, setData] = (0, react_1.useState)(null);
@@ -51,7 +56,9 @@ function Table({ columns, fetchFunc, emptyMsg = {
     const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
     const [paginationCount, setPagCount] = (0, react_1.useState)(1);
     const [listPage, setListPage] = (0, react_1.useState)(1);
-    const [gridSize, setGridSize] = (0, react_1.useState)(12);
+    // filters states
+    const [filterCollapse, setFilterCollapse] = (0, react_1.useState)(Array(Object.keys(filters).length).fill(false));
+    const [filterOpen, setFilterOpen] = (0, react_1.useState)(false);
     const theme = (0, material_1.useTheme)();
     const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
     (0, react_1.useEffect)(() => {
@@ -63,14 +70,18 @@ function Table({ columns, fetchFunc, emptyMsg = {
                         status: 500,
                     });
                 return res.json().then((j) => {
-                    if (j.statusCode === 204)
+                    if (j.statusCode === 204) {
                         setData({ body: { data: [] } });
+                        startData = [];
+                    }
                     else if (j.statusCode === 403)
                         setError({
                             status: j.statusCode,
                         });
-                    else
+                    else {
                         setData(j);
+                        startData = JSON.parse(JSON.stringify(j));
+                    }
                     console.log(j.statusCode);
                     setIsLoading(false);
                 });
@@ -81,9 +92,6 @@ function Table({ columns, fetchFunc, emptyMsg = {
                 });
             });
     }, [userLoaded]);
-    (0, react_1.useEffect)(() => {
-        setGridSize(12 / (columns.length + (user ? 1 : 0)));
-    }, [user, columns]);
     const getCount = (0, react_1.useCallback)((countData) => {
         if (countData.length <= 0)
             return 1;
@@ -270,21 +278,193 @@ function Table({ columns, fetchFunc, emptyMsg = {
                 return (react_1.default.createElement(Typography_1.default, { color: '#6366F1', fontWeight: 600, fontFamily: 'Inter' }, "PR\u00C9 APROVADO"));
         }
     }, []);
-    const onFilterSelect = (0, react_1.useCallback)((key, newValue) => {
-        if (!newValue) {
-            setList(getData(data));
-            setPagCount(getCount(getData(data)));
+    const toggleDrawer = (open) => (event) => {
+        if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
             return;
         }
-        const listData = getData(data);
-        const newList = [];
-        listData.forEach((l) => {
-            if ((0, lodash_get_1.default)(l, key).toString() === newValue)
-                newList.push(l);
+    };
+    const handleFilterOption = (type, keyName, customValue, referencekey) => {
+        let filtered = JSON.parse(JSON.stringify(list));
+        if (type === 'a-z') {
+            filtered.sort((a, b) => {
+                const aValue = a[keyName];
+                const bValue = b[keyName];
+                const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
+                const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
+                if (valueA < valueB) {
+                    return -1;
+                }
+                if (valueA > valueB) {
+                    return 1;
+                }
+                return 0;
+            });
+        } //
+        else if (type === 'z-a') {
+            filtered.sort((a, b) => {
+                const aValue = a[keyName];
+                const bValue = b[keyName];
+                const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
+                const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
+                if (valueA < valueB) {
+                    return 1;
+                }
+                if (valueA > valueB) {
+                    return -1;
+                }
+                return 0;
+            });
+        } //
+        else if (type === 'items') {
+            filtered.sort((a, b) => {
+                const aValue = a[keyName];
+                const bValue = b[keyName];
+                const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
+                const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
+                // const aRKey = a[referencekey ?? '']
+                // const bRKey = b[referencekey ?? '']
+                // if (valueA === customValue) console.log(valueA, valueB, aRKey, bRKey)
+                if (valueA === customValue)
+                    return -1;
+                if (valueB === customValue)
+                    return 1;
+                if (valueA < valueB) {
+                    return -1;
+                }
+                if (valueA > valueB) {
+                    return 1;
+                }
+                return 0;
+            });
+            if (referencekey) {
+                const data = [];
+                let newFiltered = filtered.filter((x) => {
+                    const item = x[keyName];
+                    const value = typeof item === 'number' ? item : item.toLowerCase();
+                    if (value === customValue) {
+                        data.push(x);
+                        return false;
+                    }
+                    return true;
+                });
+                data.sort((a, b) => {
+                    const aValue = a[referencekey];
+                    const bValue = b[referencekey];
+                    const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
+                    const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
+                    if (valueA < valueB) {
+                        return 1;
+                    }
+                    if (valueA > valueB) {
+                        return -1;
+                    }
+                    return 0;
+                });
+                data.forEach((x) => {
+                    newFiltered.unshift(x);
+                });
+                console.log(newFiltered);
+                filtered = newFiltered;
+            }
+        } //
+        else if (type === 'data-a-z') {
+            filtered.sort((a, b) => {
+                const aValue = a[keyName];
+                const bValue = b[keyName];
+                const separator = filterSeparator;
+                const aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
+                const bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
+                if (!aDt && !bDt)
+                    return 0;
+                const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
+                const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
+                if (valueA.isBefore(valueB)) {
+                    return -1;
+                }
+                if (valueA.isAfter(valueB)) {
+                    return 1;
+                }
+                return 0;
+            });
+        } //
+        else if (type === 'data-z-a') {
+            filtered.sort((a, b) => {
+                const aValue = a[keyName];
+                const bValue = b[keyName];
+                const separator = filterSeparator;
+                const aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
+                const bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
+                if (!aDt && !bDt)
+                    return 0;
+                const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
+                const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
+                if (valueA.isBefore(valueB)) {
+                    return 1;
+                }
+                if (valueA.isAfter(valueB)) {
+                    return -1;
+                }
+                return 0;
+            });
+        }
+        setList(filtered);
+        setFilterOpen(false);
+    };
+    const handleFilterReset = () => {
+        const value = Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath);
+        console.log(value);
+        setList(value);
+        setFilterOpen(false);
+    };
+    const handleDateFilter = (from, to, keyName) => {
+        const separator = filterSeparator;
+        let filtered = JSON.parse(JSON.stringify(list));
+        filtered = filtered.filter((x) => {
+            const dts = x[keyName].split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; });
+            let inside = false;
+            dts.forEach((k) => {
+                if (inside)
+                    return;
+                const dt = (0, dayjs_1.default)(k, 'D/M/YYYY');
+                const dtFrom = (0, dayjs_1.default)(from, 'D/M/YYYY');
+                if (to) {
+                    const dtTo = (0, dayjs_1.default)(to, 'D/M/YYYY');
+                    if ((dtFrom.isBefore(dt) || dtFrom.isSame(dt)) && (dtTo.isAfter(dt) || dtTo.isSame(dt))) {
+                        inside = true;
+                    }
+                } //
+                else {
+                    if (dtFrom.isBefore(dt) || dtFrom.isSame(dt)) {
+                        inside = true;
+                    }
+                }
+            });
+            return inside;
         });
-        setList(newList);
-        setPagCount(getCount(newList));
-    }, [data]);
+        filtered.sort((a, b) => {
+            const aValue = a[keyName];
+            const bValue = b[keyName];
+            const separator = filterSeparator;
+            const aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
+            const bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
+            if (!aDt && !bDt)
+                return 0;
+            const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
+            const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
+            if (valueA.isBefore(valueB)) {
+                return -1;
+            }
+            if (valueA.isAfter(valueB)) {
+                return 1;
+            }
+            return 0;
+        });
+        setList(filtered);
+        setPagCount(getCount(filtered));
+        setCurrentPage(0);
+        setListPage(1);
+        setFilterOpen(false);
+    };
     if (error)
         return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
             react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
@@ -300,10 +480,11 @@ function Table({ columns, fetchFunc, emptyMsg = {
         return react_1.default.createElement(material_1.LinearProgress, null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { marginX: isSmall ? 0 : 4 },
-            react_1.default.createElement(material_1.Stack, { spacing: 2, direction: { xs: 'column', md: 'row' } },
+            react_1.default.createElement(material_1.Stack, { spacing: 1, direction: { xs: 'column', md: 'row' }, marginBottom: 2 },
                 react_1.default.createElement(TextField_1.default, { InputProps: {
                         startAdornment: react_1.default.createElement(Search_1.default, { sx: { marginRight: 1, fill: '#c0c0c0' } }),
-                    }, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` })),
+                    }, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` }),
+                react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.FilterAlt, null), variant: 'contained', onClick: (e) => setFilterOpen(true) }, "Filtrar")),
             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' },
                     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 ? '#E2E8F0' : '#F8FAFC', paddingY: 2 }, elevation: 0 },
@@ -337,7 +518,32 @@ function Table({ columns, fetchFunc, emptyMsg = {
                         md: 'row',
                     }, justifyContent: 'flex-end', spacing: 1 },
                     csvShowAllButton && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSVAll, sx: { backgroundColor: '#64748B', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvAllButtonTitle)),
-                    react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle))))))));
+                    react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(FileDownload_1.default, null), variant: 'contained', size: 'small', onClick: downloadCSV, sx: { backgroundColor: '#22C55E', marginRight: { xs: 2, md: 0 }, width: { xs: '100%', md: 'fit-content' } } }, csvButtonTitle)))))),
+        react_1.default.createElement(material_1.SwipeableDrawer, { anchor: isSmall ? 'bottom' : 'right', open: filterOpen, onClose: (e) => setFilterOpen(false), onOpen: (e) => setFilterOpen(true) },
+            react_1.default.createElement(material_1.List, { sx: { minWidth: 300 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.ListItemButton, { onClick: (e) => setFilterCollapse((s) => s.map((x, idx) => {
+                        if (idx === fIndex)
+                            return !x;
+                        return x;
+                    })), sx: {
+                        backgroundColor: '#ebeef2',
+                    } },
+                    react_1.default.createElement(material_1.ListItemIcon, null,
+                        react_1.default.createElement(icons_material_1.Circle, { transform: 'scale(0.4)' })),
+                    react_1.default.createElement(material_1.ListItemText, { primary: f }),
+                    filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
+                react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
+                    react_1.default.createElement(material_1.List, { component: 'div', disablePadding: true, sx: { backgroundColor: 'white' } }, filters[f].map((x) => (react_1.default.createElement(react_1.default.Fragment, null, x.options ? (x.options.map((o) => (react_1.default.createElement(material_1.ListItemButton, { sx: { pl: 4, borderBottom: 1, borderColor: '#ebeef2' } },
+                        react_1.default.createElement(material_1.ListItemText, { primary: o.name, onClick: (e) => handleFilterOption(x.type, x.keyName, o.key, x.referenceKey), sx: { color: o.color, fontWeight: 600 } }))))) : x.type === 'date-interval' ? (react_1.default.createElement(material_1.Box, { padding: 2 },
+                        react_1.default.createElement(FormProvider_1.default, { onSubmit: (d) => handleDateFilter(d['filterDtStart'], d['filterDtEnd'], x.keyName) },
+                            react_1.default.createElement(DatePicker_1.default, { name: 'filterDtStart', title: 'A partir de:', required: true }),
+                            react_1.default.createElement(material_1.Box, { marginTop: 2 }),
+                            react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
+                            react_1.default.createElement(material_1.Stack, { marginTop: 2 },
+                                react_1.default.createElement(material_1.Button, { type: 'submit', variant: 'outlined', startIcon: react_1.default.createElement(icons_material_1.CalendarToday, null) }, "Filtrar por Data"))))) : (react_1.default.createElement(material_1.ListItemButton, { sx: { pl: 4, borderBottom: 1, borderColor: '#ebeef2' } },
+                        react_1.default.createElement(material_1.ListItemIcon, { sx: { minWidth: '25px' } }, x.type === 'a-z' || x.type === 'data-a-z' ? (react_1.default.createElement(icons_material_1.South, { transform: 'scale(0.5)' })) : x.type === 'z-a' || x.type === 'data-z-a' ? (react_1.default.createElement(icons_material_1.North, { transform: 'scale(0.5)' })) : null),
+                        react_1.default.createElement(material_1.ListItemText, { primary: x.name, onClick: (e) => handleFilterOption(x.type, x.keyName) })))))))))))),
+            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"))));
 }
 exports.Table = Table;
 exports.default = react_1.default.memo(Table);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ssplib/react-components",
-    "version": "0.0.123",
+    "version": "0.0.125",
     "description": "SSP React Components",
     "main": "index.js",
     "author": "Pedro Henrique <sr.hudrick@gmail.com>",