diff --git a/web-ui/src/pages/PulseReportPage.jsx b/web-ui/src/pages/PulseReportPage.jsx index 4cf902f10..4a4a9a9a3 100644 --- a/web-ui/src/pages/PulseReportPage.jsx +++ b/web-ui/src/pages/PulseReportPage.jsx @@ -22,6 +22,8 @@ import { SentimentSatisfied, SentimentVerySatisfied, } from '@mui/icons-material'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import { Avatar, Card, @@ -33,7 +35,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 +82,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 +122,7 @@ const PulseReportPage = () => { const [expanded, setExpanded] = useState(false); const [scoreChartData, setScoreChartData] = useState([]); const [pulses, setPulses] = useState([]); + const [pulsesPageNumber, setPulsesPageNumber] = useState(0); const [scope, setScope] = useState('Individual'); const [scoreType, setScoreType] = useState(ScoreOption.COMBINED); const [selectedPulse, setSelectedPulse] = useState(null); @@ -329,6 +335,7 @@ const PulseReportPage = () => { return compare; }); setPulses(pulses); + setPulsesPageNumber(0); }; useEffect(() => { @@ -389,63 +396,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 +675,36 @@ const PulseReportPage = () => { } + setExpanded(!expanded)} + aria-expanded={expanded} + aria-label={expanded ? 'show less' : 'show more'} + size="large" + /> + + {responseSummary()} + ); const responseSummary = () => { - let filteredPulses = pulses; + const leftDisabled = (pulsesPageNumber <= 0); + const rightDisabled = (((pulsesPageNumber + 1) * pulsesPerPage) >= pulses.length); + const start = pulsesPageNumber * pulsesPerPage; + const pulsesSlice = pulses.slice(start, start + pulsesPerPage); + + 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 +743,26 @@ const PulseReportPage = () => { ); })} + { + event.preventDefault(); + if (!leftDisabled) { + setPulsesPageNumber(pulsesPageNumber - 1); + } + }}> + + + { + event.preventDefault(); + if (!rightDisabled) { + setPulsesPageNumber(pulsesPageNumber + 1); + } + }}> + + ); }; @@ -840,7 +830,6 @@ const PulseReportPage = () => { /> {pulseScoresChart()} {averageScores()} - {scoreDistributionChart()} setShowComments(false)}>