@ssplib/react-components 0.0.126 → 0.0.128

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

@@ -5,12 +5,17 @@ interface ColumnData {
     size?: number;
 }
 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, }: {
+export declare function Table({ columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, isPublic, statusKeyName, csvExcludeKeys, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvAllButtonTitle, removeQuotes, normalize, csvShowAllButton, itemCount, csvUpper, csvZipFileNamesKey, generateCsvZip, filters, filterSeparator, }: {
+    normalize?: boolean;
+    csvUpper?: boolean;
+    removeQuotes?: boolean;
     columns: ColumnData[];
     tableName: string;
     csvShowAllButton?: boolean;
     csvAllButtonTitle?: string;
     csvButtonTitle?: string;
+    csvZipFileNamesKey: string;
+    generateCsvZip: boolean;
     csvExcludeValidate?: (key: string, value: string | number) => boolean;
     csvCustomKeyNames?: {
         [key: string]: string;

package/components/form/table/Table.js

@@ -41,11 +41,12 @@ 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"));
+const jszip_1 = __importDefault(require("jszip"));
 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, filters = {}, filterSeparator = '|', }) {
+}, dataPath = '', tableName = 'Dados', csv, columnSize, action, isPublic = false, statusKeyName = '', csvExcludeKeys = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', removeQuotes = false, normalize = false, csvShowAllButton = false, itemCount = 10, csvUpper = false, csvZipFileNamesKey = '', generateCsvZip = false, 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);
@@ -203,36 +204,88 @@ function Table({ columns, fetchFunc, emptyMsg = {
         const originalKeys = Object.keys(list[0]);
         const keys = originalKeys.filter((k) => !csvExcludeKeys.includes(k));
         const header = keys.map((k) => (csvCustomKeyNames[k] ? csvCustomKeyNames[k] : k)).join(',') + '\n';
-        const values = [];
-        list.forEach((x) => {
-            let include = true;
-            originalKeys.forEach((k) => {
-                //verificar se pode incluir
-                if (csvExcludeValidate(k, x[k])) {
-                    include = false;
+        if (generateCsvZip) {
+            const zip = new jszip_1.default();
+            const obj = {};
+            list.forEach((x) => {
+                if (!obj[x[csvZipFileNamesKey]])
+                    obj[x[csvZipFileNamesKey]] = [];
+                obj[x[csvZipFileNamesKey]].push(x);
+            });
+            Object.keys(obj).forEach((objKey) => {
+                const values = [];
+                obj[objKey].forEach((x) => {
+                    let include = true;
+                    originalKeys.forEach((k) => {
+                        //verificar se pode incluir
+                        if (csvExcludeValidate(k, x[k])) {
+                            include = false;
+                        }
+                    });
+                    if (include) {
+                        const value = keys
+                            .map((k) => {
+                            if (k === 'tbRa')
+                                return x[k]['NO_CIDADE'];
+                            if (k === 'rlEventoData')
+                                return `${x[k][0]['DT_INICIO']} - ${x[k][0]['HR_INICIO']}`;
+                            if (typeof x[k] === 'string') {
+                                let item = csvUpper ? x[k].toUpperCase() : x[k];
+                                item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                                return removeQuotes ? `${item}` : `"${item}"`;
+                            }
+                            return x[k];
+                        })
+                            .join(',');
+                        values.push(value);
+                    }
+                });
+                const csvData = '\uFEFF' + header + values.join('\n');
+                zip.file(`${objKey}.csv`, csvData);
+            });
+            // // download
+            var link = window.document.createElement('a');
+            zip.generateAsync({ type: 'base64' }).then((base) => {
+                link.setAttribute('href', 'data:application/zip;base64,' + base);
+                link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.zip`);
+                link.click();
+            });
+        }
+        else {
+            const values = [];
+            list.forEach((x) => {
+                let include = true;
+                originalKeys.forEach((k) => {
+                    //verificar se pode incluir
+                    if (csvExcludeValidate(k, x[k])) {
+                        include = false;
+                    }
+                });
+                if (include) {
+                    const value = keys
+                        .map((k) => {
+                        if (k === 'tbRa')
+                            return x[k]['NO_CIDADE'];
+                        if (k === 'rlEventoData')
+                            return `${x[k][0]['DT_INICIO']} - ${x[k][0]['HR_INICIO']}`;
+                        if (typeof x[k] === 'string') {
+                            let item = csvUpper ? x[k].toUpperCase() : x[k];
+                            item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                            return removeQuotes ? `${item}` : `"${item}"`;
+                        }
+                        return x[k];
+                    })
+                        .join(',');
+                    values.push(value);
                 }
             });
-            if (include) {
-                const value = keys
-                    .map((k) => {
-                    if (k === 'tbRa')
-                        return x[k]['NO_CIDADE'];
-                    if (k === 'rlEventoData')
-                        return `${x[k][0]['DT_INICIO']} - ${x[k][0]['HR_INICIO']}`;
-                    if (typeof x[k] === 'string')
-                        return `"${x[k]}"`;
-                    return x[k];
-                })
-                    .join(',');
-                values.push(value);
-            }
-        });
-        const csvData = header + values.join('\n');
-        // download
-        var link = window.document.createElement('a');
-        link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURI(csvData));
-        link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.csv`);
-        link.click();
+            const csvData = header + values.join('\n');
+            // download
+            var link = window.document.createElement('a');
+            link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURI(csvData));
+            link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.csv`);
+            link.click();
+        }
     }, [list]);
     const downloadCSVAll = (0, react_1.useCallback)((e) => {
         e.preventDefault();
@@ -248,8 +301,11 @@ function Table({ columns, fetchFunc, emptyMsg = {
                     return x[k]['NO_CIDADE'];
                 if (k === 'rlEventoData')
                     return `${x[k][0]['DT_INICIO']} - ${x[k][0]['HR_INICIO']}`;
-                if (typeof x[k] === 'string')
-                    return `"${x[k]}"`;
+                if (typeof x[k] === 'string') {
+                    let item = csvUpper ? x[k].toUpperCase() : x[k];
+                    item = normalize ? item.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : item;
+                    return removeQuotes ? `${item}` : `"${item}"`;
+                }
                 return x[k];
             })
                 .join(',');
@@ -486,7 +542,7 @@ function Table({ columns, fetchFunc, emptyMsg = {
                 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}` }),
-                react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.FilterAlt, null), variant: 'contained', onClick: (e) => setFilterOpen(true) }, "Filtrar")),
+                Object.keys(filters).length > 0 && (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 },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ssplib/react-components",
-    "version": "0.0.126",
+    "version": "0.0.128",
     "description": "SSP React Components",
     "main": "index.js",
     "author": "Pedro Henrique <sr.hudrick@gmail.com>",
@@ -14,7 +14,8 @@
         "react-query": "^3.39.3",
         "dayjs": "^1.11.7",
         "lodash.hasin": "^4.5.2",
-        "react-google-recaptcha": "^2.1.0"
+        "react-google-recaptcha": "^2.1.0",
+        "jszip": "^3.10.1"
     },
     "devDependencies": {
         "@types/lodash.get": "^4.4.7",