diff --git a/client/src/components/user-admin/UserPermissionSearch.jsx b/client/src/components/user-admin/UserPermissionSearch.jsx index 96f1a950f..e8a7e6b72 100644 --- a/client/src/components/user-admin/UserPermissionSearch.jsx +++ b/client/src/components/user-admin/UserPermissionSearch.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { Box, Button, @@ -101,7 +101,7 @@ const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => { }; const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => { - const [userType, setUserType] = useState('admin'); // Which results will display + const [userType] = useState('admin'); // Which results will display const [searchText, setSearchText] = useState(''); // Search term for the admin/PM search const [isProjectLead, setIsProjectLead] = useState(false); @@ -136,7 +136,7 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => { .filter((user) => isProjectLead ? user.isProjectLead === true - : user.isProjectLead === undefined + : user.isProjectLead === undefined, ) .flatMap((user) => isProjectLead && user.managedProjectNames.length > 0 @@ -144,7 +144,7 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => { ...user, managedProjectName, })) - : [{ ...user }] + : [{ ...user }], ) .filter((user) => { const fullName = @@ -175,13 +175,13 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => { filteredData = resultData.filter((user) => isProjectLead ? user.isProjectLead === true - : user.isProjectLead === undefined + : user.isProjectLead === undefined, ); if (!isProjectLead) { // Default display for admins, sorted ASC based on first name filteredData.sort((u1, u2) => - u1.name?.firstName.localeCompare(u2.name?.firstName) + u1.name?.firstName.localeCompare(u2.name?.firstName), ); } else { // Default display of all PMs, sorted ASC based on project name, then first name @@ -194,7 +194,7 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => { tempFilter.sort( (u1, u2) => u1.managedProjectName.localeCompare(u2.managedProjectName) || - u1.name?.firstName.localeCompare(u2.name?.firstName) + u1.name?.firstName.localeCompare(u2.name?.firstName), ); filteredData = [...tempFilter]; } @@ -203,6 +203,42 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => { filteredData = getFilteredData(resultData, searchText, isProjectLead); } + // No need to limit export to the search results + const exportAllData = getFilteredData(resultData, '', isProjectLead); + + // Export CSV file + const exportCSV = (data, fileName) => { + // Header row + const headers = ['User Name', 'Project Name']; + + // Map each user into CSV row values + const dataItems = data.map((user) => [ + `${user.name?.firstName ?? ''} ${user.name?.lastName ?? ''}`, + user.managedProjectName ?? '', + ]); + + // Combine header + data rows + const rows = [headers, ...dataItems]; + + // Convert rows to CSV formatted string + const csvData = rows.map((row) => row.join(',')).join('\r\n'); + + // Create CSV Blob from string + const blob = new Blob([csvData], { type: 'text/csv' }); + const url = URL.createObjectURL(blob); + + // Create a temporary download link + const link = document.createElement('a'); + link.href = url; + link.download = fileName; + + // Trigger download + link.click(); + + // Clean up object URL + URL.revokeObjectURL(url); + }; + return ( { + {isProjectLead && ( + + + + )}