@ssplib/react-components 0.0.229 → 0.0.230

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

@@ -10,12 +10,15 @@ interface OrderBy {
     key: string;
     type: 'string' | 'number';
 }
-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, }: {
+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, }: {
     id: string;
     mediaQueryLG?: {
         all: number;
         action: number;
     };
+    filtersFunc?: {
+        [key: string]: (value: string) => any;
+    };
     filters?: FilterValue[];
     orderBy?: OrderBy[];
     customMargin?: number;
@@ -59,8 +62,8 @@ export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, data
     dataPath?: string;
     useKC?: boolean;
 }): JSX.Element;
-type FilterType = 'string' | 'number' | 'date';
-type FilterOperators = 'igual' | 'contem' | 'maior que' | 'menor que' | 'data exata' | 'após' | 'antes de' | 'entre' | 'tem um dos';
+type FilterType = 'string' | 'number' | 'date' | 'dates';
+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';
 interface FilterValue {
     label: string;
     keyName: string;
@@ -73,6 +76,7 @@ interface FilterValue {
         id: string;
         label: string;
     }[];
+    customFunc?: string;
 }
 declare const _default: React.MemoExoticComponent<typeof Table>;
 export default _default;

package/components/form/table/Table.js

@@ -57,13 +57,14 @@ let startData = [];
 let isExpandAll = false;
 let localTableName = '';
 let orderAsc = false;
+let filtersFuncData = {};
 function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     user: 'Nenhum dado encontrado',
     public: 'Nenhum dado encontrado',
 }, 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 = {},
 // filterSeparator = '|',
-hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filters = [], orderBy = [], id, }) {
+hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filtersFunc, filters = [], orderBy = [], id, }) {
     var _a;
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
@@ -86,6 +87,7 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
     const filterContainer = (0, react_1.useRef)(null);
     const lg = (0, material_1.useMediaQuery)(theme.breakpoints.up(2000));
     localTableName = `tableFilter_${id}`;
+    filtersFuncData = filtersFunc !== null && filtersFunc !== void 0 ? filtersFunc : {};
     (0, react_1.useEffect)(() => {
         setError(null);
         if (userLoaded || !useKC) {
@@ -556,8 +558,46 @@ hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMax
                             break;
                     }
                     break;
+                case 'dates':
+                    switch (dt.operator) {
+                        case 'data inicio':
+                            currentData.forEach((cd) => {
+                                var _a;
+                                const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
+                                if (dates.length <= 0)
+                                    return;
+                                var inicioDate = dates[0];
+                                var inicioValue = (0, dayjs_1.default)(inicioDate, 'DD/MM/YYYY');
+                                if (inicioValue.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'data fim':
+                            currentData.forEach((cd) => {
+                                var _a;
+                                const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
+                                if (dates.length <= 0)
+                                    return;
+                                var fimDate = dates[dates.length - 1];
+                                var fimValue = (0, dayjs_1.default)(fimDate, 'DD/MM/YYYY');
+                                if (fimValue.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'tem a data':
+                            currentData.forEach((cd) => {
+                                var _a;
+                                const dates = (_a = filtersFuncData[dt.customFunc]((0, lodash_get_1.default)(cd, dt.keyName, ''))) !== null && _a !== void 0 ? _a : [];
+                                if (dates.includes(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                    }
+                    break;
             }
-            console.log('filtred: ', filteredData);
             currentData = filteredData;
         });
         setList(currentData);
@@ -917,8 +957,12 @@ function FilterField({ filterValue, operator, onChange }) {
                     bgcolor: 'white',
                 }, fullWidth: true }));
         case 'date':
+        case 'dates':
             switch (operator) {
                 case 'data exata':
+                case 'data fim':
+                case 'data inicio':
+                case 'tem a data':
                     return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
                         react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
                                 onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');

package/package.json

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