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)}>