Skip to content
Snippets Groups Projects
Commit a25fe40c authored by Bjarke Madsen's avatar Bjarke Madsen
Browse files

refactor the survey progressbar component

parent 8b81a79d
No related branches found
No related tags found
1 merge request!56Feature/comp 233 survey navigation
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Col, Container, Row } from "react-bootstrap";
interface Progress { interface Progress {
completionPercentage: number; completionPercentage: number;
...@@ -16,31 +17,33 @@ function ProgressBar({ surveyModel, pageNoSetter }) { ...@@ -16,31 +17,33 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
return question.value !== null && question.value !== undefined; return question.value !== null && question.value !== undefined;
}; };
const calculateProgress = (survey) => {
if (survey && survey.pages) {
const progressArray: Progress[] = [];
survey.pages.forEach((page) => {
const sectionQuestions = page.questions.filter(
(question) => question.startWithNewLine
);
const questionCount = sectionQuestions.length;
const answeredCount = sectionQuestions.filter(filterCallback).length;
const unansweredCount = questionCount - answeredCount;
const completionPercentage = answeredCount / questionCount;
progressArray.push({
completionPercentage: completionPercentage * 100,
unansweredPercentage: (unansweredCount / questionCount) * 100,
totalPages: survey.pages.length,
pageTitle: page.title,
});
});
setProgress(progressArray);
}
};
useEffect(() => { useEffect(() => {
const calculateProgress = (survey) => {
if (survey && survey.pages) {
const progressArray: Progress[] = [];
survey.pages.forEach((page) => {
const sectionQuestions = page.questions.filter(
(question) => question.startWithNewLine
);
const questionCount = sectionQuestions.length;
const answeredCount = sectionQuestions.filter(filterCallback).length;
const unansweredCount = questionCount - answeredCount;
const completionPercentage = answeredCount / questionCount;
progressArray.push({
completionPercentage: completionPercentage * 100,
unansweredPercentage: (unansweredCount / questionCount) * 100,
totalPages: survey.pages.length,
pageTitle: page.title,
});
});
setProgress(progressArray);
}
};
surveyModel.onValueChanged.add((sender) => { surveyModel.onValueChanged.add((sender) => {
calculateProgress(sender); calculateProgress(sender);
}); });
...@@ -49,63 +52,51 @@ function ProgressBar({ surveyModel, pageNoSetter }) { ...@@ -49,63 +52,51 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
}, [surveyModel]); }, [surveyModel]);
function progressBarContainerStyle(sectionProgress): React.CSSProperties { const progressBarStyle: React.CSSProperties = {
return { height: "0.5rem",
display: "flex",
flexWrap: "wrap",
height: "10px",
margin: "5px",
width: `${100 / sectionProgress.totalPages}%`,
}
}
const progressBarFillStyle: React.CSSProperties = {
height: "100%",
transition: "width 0.3s ease", transition: "width 0.3s ease",
}; };
function progressBarFillStyleCopy(sectionProgress): React.CSSProperties {
return {
...progressBarFillStyle,
width: `${sectionProgress.completionPercentage}%`,
backgroundColor: "#1ab394",
}
}
function unansweredProgressBarFillStyle(sectionProgress): React.CSSProperties {
return {
...progressBarFillStyle,
width: `${sectionProgress.unansweredPercentage}%`,
backgroundColor: "#9d9d9d",
}
}
function pageTitleStyle(index): React.CSSProperties {
if (surveyModel.currentPageNo == index) {
return {
width: "100%",
textAlign: "center",
fontWeight: "bold"
}
} else {
return {
width: "100%",
textAlign: "center"
}
}
}
return ( return (
<div className="survey-progress"> <Container className="survey-progress">
{progress.map((sectionProgress, index) => ( <Row>
<div key={index} style={progressBarContainerStyle(sectionProgress)} onClick={() => pageNoSetter(index)}> {progress.map((sectionProgress, index) => (
<div style={progressBarFillStyleCopy(sectionProgress)} /> <Col xs={12} md key={index} onClick={() => pageNoSetter(index)} style={{ cursor: "pointer", margin: '0.5rem' }}>
<div style={unansweredProgressBarFillStyle(sectionProgress)} /> <div>
<div style={pageTitleStyle(index)}>{sectionProgress.pageTitle}</div> <span style={{
</div> whiteSpace: "nowrap",
))} fontSize: "1.5rem",
</div> marginRight: "0.25rem",
); fontWeight: "bold",
color: "#2db394",
}}>{index + 1}</span>
<span style={{
whiteSpace: "nowrap",
...(surveyModel.currentPageNo == index) && {
fontWeight: "bold",
},
}}>{sectionProgress.pageTitle}</span>
<div style={{ display: "flex", flexWrap: "wrap" }}>
<div style={{
...progressBarStyle,
width: `${sectionProgress.completionPercentage}%`,
backgroundColor: "#262261",
}} />
<div style={{
...progressBarStyle,
width: `${sectionProgress.unansweredPercentage}%`,
backgroundColor: "#cdcdcd",
}} />
</div>
</div>
</Col>
))}
</Row>
</Container>);
} }
export default ProgressBar; export default ProgressBar;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment