Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated HTML to MUI components on index.jsx #1762

Open
wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Updated HTML to MUI components on index.jsx #1762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
279 changes: 173 additions & 106 deletions client/src/components/admin/reports/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {useState} from 'react';
import Loading from '../donutChartLoading';
import DatePicker from 'react-datepicker';
import { Box, Button, Table, TableHead, TableRow, TableCell, TableBody, Typography } from '@mui/material';
import 'react-datepicker/dist/react-datepicker.css';
import '../../../common/datepicker/index.scss';
import './index.scss';
Expand All @@ -26,6 +27,87 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
const [startTextDate, setStartTextDate] = useState(new Date().toLocaleDateString("en-US"));
const [endTextDate, setEndTextDate] = useState(new Date().toLocaleDateString("en-US"));

const styles = {
adminTableReport: {
margin: '10px 0',
fontSize: '15px',
textAlign: 'center',
},
statsSection: {
marginTop: '10px',
textAlign: 'right'
},
tableHeader: {
fontSize: '15px',
fontWeight: 'bold',
backgroundColor: '#3d5a6c47',
margin: '20px 0 5px',
padding: '5px',
borderRadius: '7px 7px 0 0',
textAlign: 'center'
},
adminTable: {
width: '100%',
marginTop: '10px',
borderCollapse: 'collapse',
border: 'none',
},
tableCell: {
textAlign: 'center',
height: '30px',
border: 'none',
},
lastRowCell: {
color: '#3D5A6C',
fontWeight: 'bold',
borderTop: '1px solid lightgray',
borderBottom: 'none',
textAlign: 'center',
height: '30px',

},
firstRowCell: {
color: '#3D5A6C',
fontWeight: 'bold',
borderBottom: 'none',
textAlign: 'center',
height: '30px',

},
filterButton: {
color: '#3D5A6C',
border: '1px solid lightgray',
borderRadius: '20px',
lineHeight: '1',
padding: '10px 20px',
margin: '0 auto',
transition: '.3s ease',
maxWidth: '120px',
minWidth: '120px',
height: 'auto',
fontFamily: "'Open Sans', sans-serif",
fontSize: '15px',
},
calcButton: {
maxWidth: '150px',
minWidth: '150px',
},
chartImage: {
maxWidth: '90px',
},
timeDescription: {
fontSize: '13px',
textAlign: 'right',
marginTop: '10px',
},
boldText: {
fontWeight: 'bold',
fontSize: '18px',
color: '#3D5A6C',
},

};

prepareDataForReport(
eventTypeStats,
eventTypes,
Expand Down Expand Up @@ -151,23 +233,19 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
}

return (
<div className="table-report-wrap">
<Box className="table-report-wrap">
{!isLoading ? (
<div className="admin-table-report">
{isFilterButton &&
<button
className="filter-button"
type="button"
onClick={() => handleSetFilterBtn()}
>
<Box style={styles.adminTableReport}>
{isFilterButton && (
<Button style={styles.filterButton} onClick={() => handleSetFilterBtn()}>
Set Filter
</button>
}
</Button>
)}

{isDatepicker &&
<div className="datepicker-section">
<div className="datepicker-wrap">
<p className="datepicker-name">Start</p>
<Box>
<Box>
<Typography>Start</Typography>
<DatePicker
placeholderText='Start date range'
selected={startDate}
Expand All @@ -177,10 +255,10 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
endDate={endDate}
maxDate={endDate}
/>
</div>
</Box>

<div className="datepicker-wrap">
<p className="datepicker-name">End</p>
<Box>
<Typography>End</Typography>
<DatePicker
placeholderText='End data range'
selected={endDate}
Expand All @@ -190,107 +268,96 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
endDate={endDate}
maxDate={new Date()}
/>
</div>
</Box>

<button
className="filter-button calc-button"
type="button"
onClick={(event) => handleCalculateStatsBtn(event)}
>
<Button variant="outlined" style = {styles.filterButton} onClick={(event) => handleCalculateStatsBtn(event)}>
Calculate Stats
</button>
</div>
</Button>
</Box>
}

<div className="stats-section">
<div className="time-description">
<span>Stats calculated by: </span>
{!isFiltered ? (
<span>all time</span>
) : (
<span>
<span>{startTextDate}</span>
<span> - </span>
<span>{endTextDate}</span>
</span>
)}
</div>
<Box style={styles.statsSection}>
<Typography variant="body1">
Stats calculated by: {!isFiltered ? 'all time' : `${startTextDate} - ${endTextDate}`}
</Typography>

<div className="table-header m-t-small">All Events By Event Type</div>
<Box>
<Typography variant="h6" style={styles.tableHeader}>All Events By Event Type</Typography>
</Box>
{isStatsByLocation ? (
<table className="admin-table">
<thead>
<tr>
{headerGroups.map(header => (
<th key={header}>{header}</th>
))}
</tr>
</thead>

<tbody>
{dataForAllEventsReport.map((event) => (
<tr key={`events-${event.location}`}>
<td key={`${event.location + event.id}`}>{event.location}</td>
<td key={`v-${event.totalVolunteers + event.id}`}>{event.totalVolunteers}</td>
<td key={`h-${event.totalVolunteerHours + event.id}`}>{event.totalVolunteerHours}</td>
<td key={`ha-${event.totalVolunteerAvgHours + event.id}`}>{event.totalVolunteerAvgHours}</td>
</tr>
))}

{totalForAllEvents &&
<tr>
<td key={`events-total`}>Total</td>
{totalForAllEvents.map((total, i) => (
<td key={`${headerGroups[i]}-events-total`}>{total}</td>
<Table style={styles.adminTable}>
<TableHead>
<TableRow>
{headerGroups.map((header) => (
<TableCell key={header}style={styles.firstRowCell}>{header}</TableCell>
))}
</tr>
}
</tbody>
</table>
) : (
<div>No data for calculation stats</div>
)}


<div className="table-header">HackNight Only</div>
{isStatsByHackNight ? (
<table className="admin-table">
<thead>
<tr>
{headerGroups.map(header => (
<th key={header}>{header}</th>
</TableRow>
</TableHead>
<TableBody>
{dataForAllEventsReport.map((event) => (
<TableRow key={`events-${event.location}`}>
<TableCell style={styles.tableCell}>{event.location}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteers}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteerHours}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteerAvgHours}</TableCell>
</TableRow>
))}
</tr>
</thead>

<tbody>
{isStatsByHackNight && dataForHackNightReport.map((event) => (
<tr key={`hack-night-${event.location}`}>
<td key={`${event.location + event.id}`}>{event.location}</td>
<td key={`tv-${event.totalVolunteers + event.id}`}>{event.totalVolunteers}</td>
<td key={`th-${event.totalVolunteerHours + event.id}`}>{event.totalVolunteerHours}</td>
<td key={`ah-${event.totalVolunteerAvgHours + event.id}`}>{event.totalVolunteerAvgHours}</td>
</tr>
))}

{totalForHackNight &&
<tr>
<td key={`hack-night-total`}>Total</td>
{totalForHackNight.map((total, i) => (
<td key={`${headerGroups[i]}-hack-total`}>{total}</td>
))}
</tr>
}
</tbody>
</table>
{totalForAllEvents && (
<TableRow>
<TableCell style={styles.lastRowCell}>Total</TableCell>
{totalForAllEvents.map((total, i) => (
<TableCell key={`${headerGroups[i]}-events-total`}style={styles.lastRowCell}>{total}</TableCell>
))}
</TableRow>
)}
</TableBody>
</Table>
) : (
<div>No data for calculation stats</div>
<Typography>No data for calculation stats</Typography>
)}
</div>
</div>
) : <Loading /> }
</div>

<Box>
<Typography variant="h6" style={styles.tableHeader}>HackNight Only</Typography>
</Box>
{isStatsByHackNight ? (
<Table style={styles.adminTable}>
<TableHead>
<TableRow>
{headerGroups.map((header) => (
<TableCell key={header} style={styles.firstRowCell}>{header}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{dataForHackNightReport.map((event) => (
<TableRow key={`hack-night-${event.location}`}>
<TableCell style={styles.tableCell}>{event.location}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteers}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteerHours}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteerAvgHours}</TableCell>
</TableRow>
))}
{totalForHackNight && (
<TableRow>
<TableCell style={styles.lastRowCell}>Total</TableCell>
{totalForHackNight.map((total, i) => (
<TableCell key={`${headerGroups[i]}-hack-total`} style={styles.lastRowCell}>{total}</TableCell>
))}
</TableRow>
)}
</TableBody>
</Table>
) : (
<Typography>No data for calculation stats</Typography>
)}
</Box>
</Box>
) : (
<Loading />
)}
</Box>
);
};

export default LocationTableReport;

2 changes: 1 addition & 1 deletion client/src/components/admin/reports/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,4 @@
font-size: 13px;
text-align: right;
margin-top: 10px;
}
}
Loading