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
Branches
Tags
1 merge request!56Feature/comp 233 survey navigation
import React, { useEffect, useState } from "react";
import { Col, Container, Row } from "react-bootstrap";
interface Progress {
completionPercentage: number;
......@@ -16,31 +17,33 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
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(() => {
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) => {
calculateProgress(sender);
});
......@@ -49,63 +52,51 @@ function ProgressBar({ surveyModel, pageNoSetter }) {
}, [surveyModel]);
function progressBarContainerStyle(sectionProgress): React.CSSProperties {
return {
display: "flex",
flexWrap: "wrap",
height: "10px",
margin: "5px",
width: `${100 / sectionProgress.totalPages}%`,
}
}
const progressBarFillStyle: React.CSSProperties = {
height: "100%",
const progressBarStyle: React.CSSProperties = {
height: "0.5rem",
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 (
<div className="survey-progress">
{progress.map((sectionProgress, index) => (
<div key={index} style={progressBarContainerStyle(sectionProgress)} onClick={() => pageNoSetter(index)}>
<div style={progressBarFillStyleCopy(sectionProgress)} />
<div style={unansweredProgressBarFillStyle(sectionProgress)} />
<div style={pageTitleStyle(index)}>{sectionProgress.pageTitle}</div>
</div>
))}
</div>
);
<Container className="survey-progress">
<Row>
{progress.map((sectionProgress, index) => (
<Col xs={12} md key={index} onClick={() => pageNoSetter(index)} style={{ cursor: "pointer", margin: '0.5rem' }}>
<div>
<span style={{
whiteSpace: "nowrap",
fontSize: "1.5rem",
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;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment