diff --git a/web-ui/src/pages/PulseReportPage.jsx b/web-ui/src/pages/PulseReportPage.jsx index 4cf902f10..66e5e8fcb 100644 --- a/web-ui/src/pages/PulseReportPage.jsx +++ b/web-ui/src/pages/PulseReportPage.jsx @@ -33,7 +33,8 @@ import { MenuItem, Modal, TextField, - Typography + Typography, + Link, } from '@mui/material'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; @@ -79,6 +80,8 @@ const ScoreOptionLabel = { 'Combined': 'Both', }; +const pulsesPerPage = 15; + /* // Returns a random, integer score between 1 and 5. // We may want to uncomment this later for testing. @@ -117,6 +120,7 @@ const PulseReportPage = () => { const [expanded, setExpanded] = useState(false); const [scoreChartData, setScoreChartData] = useState([]); const [pulses, setPulses] = useState([]); + const [pulsesUpperBounds, setPulsesUpperBounds] = useState(pulsesPerPage); const [scope, setScope] = useState('Individual'); const [scoreType, setScoreType] = useState(ScoreOption.COMBINED); const [selectedPulse, setSelectedPulse] = useState(null); @@ -329,6 +333,7 @@ const PulseReportPage = () => { return compare; }); setPulses(pulses); + setPulsesUpperBounds(pulsesPerPage); }; useEffect(() => { @@ -389,63 +394,6 @@ const PulseReportPage = () => { ); - const scoreDistributionChart = () => ( - - - - - - - - - - {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.INTERNAL) && - - } - {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.EXTERNAL) && - - } - - setExpanded(!expanded)} - aria-expanded={expanded} - aria-label={expanded ? 'show less' : 'show more'} - size="large" - /> - - {responseSummary()} - - - - ); - const handleCommentClick = pulse => { setSelectedPulse(pulse); setShowComments(true); @@ -725,16 +673,33 @@ const PulseReportPage = () => { } + setExpanded(!expanded)} + aria-expanded={expanded} + aria-label={expanded ? 'show less' : 'show more'} + size="large" + /> + + {responseSummary()} + ); const responseSummary = () => { - let filteredPulses = pulses; + const pulsesSlice = pulses.slice(0, pulsesUpperBounds); + + let filteredPulses = pulsesSlice; const teamMemberIds = teamMembers.map(member => member.id); if (teamMemberIds.length) { - filteredPulses = pulses.filter(pulse => + filteredPulses = pulsesSlice.filter(pulse => teamMemberIds.includes(pulse.teamMemberId) ); } @@ -773,6 +738,14 @@ const PulseReportPage = () => { ); })} + {pulsesUpperBounds < pulses.length && + { + event.preventDefault(); + setPulsesUpperBounds(pulsesUpperBounds + pulsesPerPage); + }}> + Load more... + + } ); }; @@ -840,7 +813,6 @@ const PulseReportPage = () => { /> {pulseScoresChart()} {averageScores()} - {scoreDistributionChart()} setShowComments(false)}>