Added Download button to all tables

Signed-off-by: Sascha Pfeiffer <sascha.pfeiffer@esaqa.com>

Author: Sascha Pfeiffer

public/locales/en/translation.json

@@ -1,4 +1,5 @@
 {
+  "DOWNLOAD": "Download",
   "RETRY": "Retry",
   "SERVER_UNSUPPORTED": "Server unsupported",
   "THE_VERSION_OF_THE_SERVER_IS_TOO_OLD_AND_NOT_SUPPORTED_PLEASE_UPGRADE": "The version of the server is too old. This client doesn't support the old version anymore. Please update your server or tell your administrator to update it.",

src/components/Table/CustomMaterialTable.jsx

@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
+import moment from 'moment';
 
 import AddBox from '@material-ui/icons/AddBox';
 import ArrowDownward from '@material-ui/icons/ArrowDownward';
@@ -12,6 +13,7 @@ import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import Clear from '@material-ui/icons/Clear';
 import Delete from '@material-ui/icons/Delete';
+import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
 import Edit from '@material-ui/icons/Edit';
 import FilterList from '@material-ui/icons/FilterList';
 import FirstPage from '@material-ui/icons/FirstPage';
@@ -76,6 +78,135 @@ const CustomMaterialTable = ({
 
     const mergedOptions = { ...defaultOptions, ...options };
 
+    const downloaddataAsCsv = async (pageSize = 100) => {
+        let allData = [];
+        let currentPage = 0;
+        let hasMoreData = true;
+
+        try {
+            // Handle case where data is already an array
+            if (typeof data !== 'function') {
+                if (!Array.isArray(data)) {
+                    throw new Error(
+                        'Data must be either a function or an array'
+                    );
+                }
+
+                allData = data;
+                if (!allData.length) {
+                    return;
+                }
+
+                const headers = Object.keys(allData[0] || {}).sort();
+                return generateAndDownloadCsv(allData, headers);
+            }
+
+            // Handle case where data is a function
+            const firstPageQuery = {
+                page: currentPage,
+                pageSize: pageSize,
+                search: '',
+            };
+
+            const firstPageResponse = await data(firstPageQuery);
+            if (!firstPageResponse.data.length) {
+                return;
+            }
+
+            // Get headers from first item and sort alphabetically
+            const headers = Object.keys(firstPageResponse.data[0]).sort();
+            allData = [...firstPageResponse.data];
+
+            // Continue fetching if there's more data
+            hasMoreData =
+                firstPageResponse.data.length === pageSize &&
+                allData.length < firstPageResponse.totalCount;
+            currentPage++;
+
+            // Fetch remaining pages
+            while (hasMoreData) {
+                const query = {
+                    page: currentPage,
+                    pageSize: pageSize,
+                    search: '',
+                };
+
+                const response = await data(query);
+                allData = [...allData, ...response.data];
+
+                hasMoreData =
+                    response.data.length === pageSize &&
+                    allData.length < response.totalCount;
+                currentPage++;
+            }
+
+            return generateAndDownloadCsv(allData, headers);
+        } catch (error) {
+            console.error('Error downloading data:', error);
+            throw error;
+        }
+    };
+
+    // Helper function to generate and download CSV
+    const generateAndDownloadCsv = (allData, headers) => {
+        // Convert data to CSV format
+        const csvContent = [
+            // Add headers
+            headers.join(','),
+            // Add data rows, handling missing fields
+            ...allData.map((item) =>
+                headers
+                    .map((header) => {
+                        const value = item[header] ?? '';
+                        // Handle special cases like arrays and objects
+                        const processedValue =
+                            typeof value === 'object'
+                                ? JSON.stringify(value)
+                                : String(value);
+                        // Escape commas, quotes, and newlines
+                        const escapedValue = processedValue
+                            .replace(/"/g, '""')
+                            .replace(/\n/g, ' ');
+                        return `"${escapedValue}"`;
+                    })
+                    .join(',')
+            ),
+        ].join('\n');
+
+        // Create and download the CSV file
+        const blob = new Blob([csvContent], {
+            type: 'text/csv;charset=utf-8;',
+        });
+        const link = document.createElement('a');
+        const url = URL.createObjectURL(blob);
+
+        link.setAttribute('href', url);
+        link.setAttribute(
+            'download',
+            `download_${moment().format('YYYY-MM-DD_HH-mm-ss')}.csv`
+        );
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+
+        return {
+            totalItems: allData.length,
+            columns: headers,
+        };
+    };
+
+    if (!actions) {
+        actions = [];
+    }
+
+    actions.push({
+        tooltip: t('DOWNLOAD'),
+        icon: CloudDownloadIcon,
+        isFreeAction: true,
+        onClick: (evt) => downloaddataAsCsv(),
+    });
+
     return (
         <MaterialTable
             onChangeRowsPerPage={setPageSize}

src/views/Users/Index.jsx

@@ -2,7 +2,6 @@ import React, { useRef, useState } from 'react';
 import { Grid } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import moment from 'moment';
-import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 
 import { GridItem, CustomMaterialTable } from '../../components';