Merge pull request #2804 from objectcomputing/feature-2802/pageable-pulse-responses

Moved the pulse responses up to the pie chart card, made them…

Author: mkimberlin

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 = () => {
     </Card>
   );
 
-  const scoreDistributionChart = () => (
-    <Card>
-      <CardHeader
-        title="Distribution of pulse scores for selected team members"
-        titleTypographyProps={{ variant: 'h5', component: 'h2' }}
-      />
-      <CardContent>
-        <BarChart
-          width={500}
-          height={300}
-          data={barChartData}
-          margin={{
-            top: 5,
-            right: 30,
-            left: 20,
-            bottom: 5
-          }}
-        >
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="score" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.INTERNAL) &&
-            <Bar
-              dataKey="internal"
-              fill={ociDarkBlue}
-              name={ScoreOptionLabel[ScoreOption.INTERNAL]}
-            />
-            }
-          {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.EXTERNAL) &&
-            <Bar
-              dataKey="external"
-              fill={ociOrange}
-              name={ScoreOptionLabel[ScoreOption.EXTERNAL]}
-            />
-          }
-        </BarChart>
-        <ExpandMore
-          expand={expanded}
-          onClick={() => setExpanded(!expanded)}
-          aria-expanded={expanded}
-          aria-label={expanded ? 'show less' : 'show more'}
-          size="large"
-        />
-        <Collapse
-          className="bottom-row"
-          in={expanded}
-          timeout="auto"
-          unmountOnExit
-        >
-          {responseSummary()}
-        </Collapse>
-      </CardContent>
-    </Card>
-  );
-
   const handleCommentClick = pulse => {
     setSelectedPulse(pulse);
     setShowComments(true);
@@ -725,16 +675,36 @@ const PulseReportPage = () => {
             </div>
           }
         </div>
+        <ExpandMore
+          expand={expanded}
+          onClick={() => setExpanded(!expanded)}
+          aria-expanded={expanded}
+          aria-label={expanded ? 'show less' : 'show more'}
+          size="large"
+        />
+        <Collapse
+          className="bottom-row"
+          in={expanded}
+          timeout="auto"
+          unmountOnExit
+        >
+          {responseSummary()}
+        </Collapse>
       </CardContent>
     </Card>
   </>
   );
 
   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 = () => {
             </div>
           );
         })}
+        <Link to="#"
+              style={leftDisabled ? { cursor: 'auto' } : { cursor: 'pointer' }}
+              onClick={(event) => {
+          event.preventDefault();
+          if (!leftDisabled) {
+            setPulsesPageNumber(pulsesPageNumber - 1);
+          }
+        }}>
+          <ArrowBackIcon/>
+        </Link>
+        <Link to="#"
+              style={rightDisabled ? { cursor: 'auto' } : { cursor: 'pointer' }}
+              onClick={(event) => {
+                event.preventDefault();
+                if (!rightDisabled) {
+                  setPulsesPageNumber(pulsesPageNumber + 1);
+                }
+              }}>
+          <ArrowForwardIcon/>
+        </Link>
       </>
     );
   };
@@ -840,7 +830,6 @@ const PulseReportPage = () => {
           />
           {pulseScoresChart()}
           {averageScores()}
-          {scoreDistributionChart()}
           <Modal open={showComments} onClose={() => setShowComments(false)}>
             <Card className="feedback-request-enable-edits-modal">
               <CardHeader