Skip to content
Snippets Groups Projects
Commit d6c23644 authored by Remco Tukker's avatar Remco Tukker
Browse files

refactor the survey frontend to split the survey logic between a couple of components

parent 9cdb938f
No related branches found
No related tags found
1 merge request!54Feature/refactor survey frontend
Show whitespace changes
Inline Side-by-side
survey-frontend/src/App.tsx
+ 5
− 5
View file @ d6c23644
......@@ -4,7 +4,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import ShowUser from './ShowUser';
import SurveyManagementComponent from './SurveyManagementComponent';
import UserManagementComponent from './UserManagementComponent';
import SurveyComponent from "./SurveyComponent";
import SurveyContainerComponent from "./SurveyContainerComponent";
function App(): ReactElement {
......@@ -14,10 +14,10 @@ function App(): ReactElement {
<Routes>
<Route path="survey/admin/surveys" element={<SurveyManagementComponent />} />
<Route path="survey/admin/users" element={<UserManagementComponent />} />
<Route path="survey/admin/inspect/:year" element={<SurveyComponent loadFrom={'/api/survey/inspect/'} />}/>
<Route path="survey/admin/try/:year" element={<SurveyComponent loadFrom={'/api/survey/try/'} />}/>
<Route path="survey/respond/:year/:nren" element={<SurveyComponent loadFrom={'/api/survey/load/'} saveTo={'/api/survey/save/'} />}/>
<Route path="survey/show/:year/:nren" element={<SurveyComponent loadFrom={'/api/survey/load/'} readonly />}/>
<Route path="survey/admin/inspect/:year" element={<SurveyContainerComponent loadFrom={'/api/survey/inspect/'} />}/>
<Route path="survey/admin/try/:year" element={<SurveyContainerComponent loadFrom={'/api/survey/try/'} />}/>
<Route path="survey/respond/:year/:nren" element={<SurveyContainerComponent loadFrom={'/api/survey/load/'} saveTo={'/api/survey/save/'} />}/>
<Route path="survey/show/:year/:nren" element={<SurveyContainerComponent loadFrom={'/api/survey/load/'} readonly />}/>
<Route path="*" element={<ShowUser />} />
</Routes>
</Router>
......
......
survey-frontend/src/ProgressBar.tsx
+ 108
− 45
View file @ d6c23644
import React from "react";
function ProgressBar({
completionPercentage,
unansweredPercentage,
pages,
pageTitle,
}) {
const progressBarContainerStyle: React.CSSProperties = {
import React, { useEffect, useState } from "react";
interface Progress {
completionPercentage: number;
unansweredPercentage: number;
totalPages: number;
pageTitle: string;
}
function ProgressBar({ surveyModel, pageNoSetter }) {
const [progress, setProgress] = useState<Progress[]>([]);
const filterCallback = (question) => {
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(() => {
surveyModel.onValueChanged.add((sender) => {
calculateProgress(sender);
});
calculateProgress(surveyModel);
}, [surveyModel]);
function progressBarContainerStyle(sectionProgress): React.CSSProperties {
return {
display: "flex",
flexWrap: "wrap",
height: "10px",
margin: "5px",
width: `${100 / pages}%`,
};
width: `${100 / sectionProgress.totalPages}%`,
}
}
const progressBarFillStyle: React.CSSProperties = {
height: "100%",
transition: "width 0.3s ease",
};
const progressBarFillStyleCopy: React.CSSProperties = {
function progressBarFillStyleCopy(sectionProgress): React.CSSProperties {
return {
...progressBarFillStyle,
width: `${completionPercentage}%`,
width: `${sectionProgress.completionPercentage}%`,
backgroundColor: "#1ab394",
};
const unansweredProgressBarFillStyle: React.CSSProperties = {
}
}
function unansweredProgressBarFillStyle(sectionProgress): React.CSSProperties {
return {
...progressBarFillStyle,
width: `${unansweredPercentage}%`,
width: `${sectionProgress.unansweredPercentage}%`,
backgroundColor: "#9d9d9d",
};
}
}
const pageTitleStyle: React.CSSProperties ={
function pageTitleStyle(index): React.CSSProperties {
if (surveyModel.currentPageNo == index) {
return {
width: "100%",
textAlign: "center",
fontWeight: "bold"
}
} else {
return {
width: "100%",
textAlign: "center"
}
}
}
return (
<div style={progressBarContainerStyle}>
<div style={progressBarFillStyleCopy} />
<div style={unansweredProgressBarFillStyle} />
<div style={pageTitleStyle}>{pageTitle}</div>
<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>
);
}
......
......
survey-frontend/src/Schema.tsx 0 → 100644
+ 9
− 0
View file @ d6c23644
export enum VerificationStatus {
New = "new", // a question that was not answered last year
Answered = "answered", // a question that was not answered last year but has an answer now
Unverified = "unverified", // a question that has its answered copied from last year
Verified = "verified", // a question for which last years answer was verified
Edited = "edited" // a question for which last years answer was edited
}
survey-frontend/src/SurveyComponent.tsx
+ 74
− 254
View file @ d6c23644
import React, { useState, useEffect, useRef } from "react";
import { Model, Serializer, ComputedUpdater, Question, FunctionFactory } from "survey-core";
import React, { useEffect } from "react";
import { Question, FunctionFactory } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/modern.min.css";
import './survey.scss';
import ProgressBar from "./ProgressBar";
import { useParams } from "react-router-dom";
import { VerificationStatus } from './Schema';
Serializer.addProperty("itemvalue", "customDescription:text");
Serializer.addProperty("question", "hideCheckboxLabels:boolean");
interface Progress {
completionPercentage: number;
unansweredPercentage: number;
totalPages: number;
pageTitle: string;
}
enum VerificationStatus {
New = "new", // a question that was not answered last year
Answered = "answered", // a question that was not answered last year but has an answer now
Unverified = "unverified", // a question that has its answered copied from last year
Verified = "verified", // a question for which last years answer was verified
Edited = "edited" // a question for which last years answer was edited
}
function SurveyComponent({ loadFrom, saveTo = '', readonly = false}) {
const [surveyModel, setSurveyModel] = useState<Model>();
const [progress, setProgress] = useState<Progress[]>([]);
const verificationStatus = useRef<Map<string, VerificationStatus>>(new Map());
const { year, nren } = useParams();
function SurveyComponent({ surveyModel, verificationStatus }) {
function setVerifyButton(question: Question, state: VerificationStatus) {
......@@ -60,46 +35,6 @@ function SurveyComponent({ loadFrom, saveTo = '', readonly = false}) {
}
}
// const surveyComplete = useCallback((sender) => {
// console.log(sender.data);
// }, []);
function saveSurveyData (survey, success?, failure?) {
if (saveTo == '') {
return;
}
const xhr = new XMLHttpRequest();
xhr.open("POST", saveTo + year + '/' + nren);
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.onload = xhr.onerror = () => {
if (xhr.status == 200 && success) {
success();
} else if (xhr.status != 200 && failure) {
failure();
}
}
const saveData = {
data: survey.data,
page: survey.currentPageNo,
verification_status: Object.fromEntries(verificationStatus.current)
}
xhr.send(JSON.stringify(saveData));
}
async function getModel() {
const response = await fetch(loadFrom + year + (nren ? '/' + nren : '')) // year is always set, nren stays empty for inspect and try
const json = await response.json();
for (const questionName in json["verification_status"]) {
verificationStatus.current.set(questionName, json["verification_status"][questionName]);
}
const survey = new Model(json['model']);
if (readonly) {
survey.mode = 'display';
}
function validateWebsiteUrl(params) {
const value = params[0];
if (value === undefined || value == null || value == '') {
......@@ -113,70 +48,18 @@ function SurveyComponent({ loadFrom, saveTo = '', readonly = false}) {
}
}
FunctionFactory.Instance.register("validateWebsiteUrl", validateWebsiteUrl);
survey.setVariable('surveyyear', year);
survey.setVariable('previousyear', parseInt(year!) - 1);
survey.data = json['data'];
survey.clearIncorrectValues(true); // TODO test if this really removes all old values and such
survey.currentPageNo = json['page'];
survey.addNavigationItem({
id: "sv-nav-compendium-complete",
title: "Complete",
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error: visible may be a ComputedUpdater but the types are not (yet?) aware of this
visible: new ComputedUpdater(() => survey.isLastPage),
action: () => {
let firstValidationError = '';
const verificationValidator = (survey, options) => {
const status = verificationStatus.current.get(options.name);
if (status == VerificationStatus.Unverified) {
if (firstValidationError == '') {
firstValidationError = options.name;
}
options.error = 'Please verify that last years data is correct by editing the value or pressing the verification button!';
}
};
survey.onValidateQuestion.add(verificationValidator);
const validSurvey = survey.validate();
survey.onValidateQuestion.remove(verificationValidator);
if (validSurvey) {
survey.completeLastPage(); // continue with usual completion process
} else {
survey.focusQuestion(firstValidationError);
}
},
innerCss: "sv-btn sv-btn--navigation sv-footer__complete-btn"
});
survey.addNavigationItem({
id: "sv-nav-compendium-save",
title: "Save",
action: (context) => {
console.log(context);
saveSurveyData(survey);
// notification doesnt show up in the right place, maybe fix with CSS. Also see settings.notifications.lifetime if you want to fix this
// but probably easier/better to just use react popup everywhere instead
// survey.notify('Saved!', "success");
},
innerCss: "sv-btn sv-btn--navigation sv-footer__complete-btn"
});
useEffect(() => {
survey.onComplete.add((sender, options) => {
options.showSaveInProgress();
saveSurveyData(sender, () => options.showSaveSuccess(), () => options.showSaveError());
});
FunctionFactory.Instance.register("validateWebsiteUrl", validateWebsiteUrl);
survey.onAfterRenderQuestion.add(function (survey, options) {
surveyModel.onAfterRenderQuestion.add(function (survey, options) {
const status = verificationStatus.current.get(options.question.name);
if (status) {
setVerifyButton(options.question, status);
}
});
survey.onValueChanged.add(function (survey, options) {
surveyModel.onValueChanged.add(function (survey, options) {
const currentStatus = verificationStatus.current.get(options.question.name);
if (currentStatus == VerificationStatus.New) {
setVerifyButton(options.question, VerificationStatus.Answered);
......@@ -185,14 +68,14 @@ function SurveyComponent({ loadFrom, saveTo = '', readonly = false}) {
}
});
survey.onUpdateQuestionCssClasses.add(function (_, options) {
surveyModel.onUpdateQuestionCssClasses.add(function (_, options) {
if (options.question.hideCheckboxLabels) {
const classes = options.cssClasses;
classes.root += " hidden-checkbox-labels";
}
});
survey.onMatrixAfterCellRender.add((survey, options) => {
surveyModel.onMatrixAfterCellRender.add((survey, options) => {
// get the customDescription for matrix rows and set it in the title
// attribute so that it shows up as a hover popup
// NB I would have preferred using onAfterRenderQuestion, but unfortunately that is
......@@ -201,81 +84,18 @@ function SurveyComponent({ loadFrom, saveTo = '', readonly = false}) {
if (options.column['indexValue'] == 0 && 'item' in options.row) {
const item = options.row['item'] as object;
if (item['customDescription'] !== undefined) {
options.htmlElement.parentElement?.children[0].setAttribute(
"title",
item['customDescription']
);
options.htmlElement.parentElement?.children[0].setAttribute("title", item['customDescription']);
}
}
});
survey.onCurrentPageChanged.add((sender) => {
console.log("sender--> " + sender);
calculateProgress(sender);
});
setSurveyModel(survey);
}
const filterCallback = (question) => {
return question.value !== null && question.value !== undefined;
};
const calculateProgress = (survey) => {
// console.log("survey--> "+ survey);
if (survey && survey.pages) {
console.log("survey.page--> " + 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(() => {
getModel();
}, []);
useEffect(() => {
if (surveyModel) {
calculateProgress(surveyModel);
}
}, [surveyModel]);
if (surveyModel) {
return (
<div className="survey-container">
<div className="survey-progress">
{progress.map((sectionProgress, index) => (
<ProgressBar
key={index}
completionPercentage={sectionProgress.completionPercentage}
unansweredPercentage={sectionProgress.unansweredPercentage}
pages={sectionProgress.totalPages}
pageTitle={sectionProgress.pageTitle}
/>
))}
</div>
<Survey model={surveyModel} />
</div>
);
} else {
return <span>loading...</span>;
}
}
export default SurveyComponent;
survey-frontend/src/SurveyContainerComponent.tsx 0 → 100644
+ 129
− 0
View file @ d6c23644
import React, { useEffect, useRef, useState } from "react";
import { Model, Serializer } from "survey-core";
import { useParams } from "react-router-dom";
import SurveyComponent from "./SurveyComponent";
import SurveyNavigationComponent from "./SurveyNavigationComponent";
import { VerificationStatus } from './Schema';
import "survey-core/modern.min.css";
import './survey.scss';
Serializer.addProperty("itemvalue", "customDescription:text");
Serializer.addProperty("question", "hideCheckboxLabels:boolean");
function SurveyContainerComponent({ loadFrom, saveTo = '', readonly = false }) {
const [surveyModel, setSurveyModel] = useState<Model>();
const verificationStatus = useRef<Map<string, VerificationStatus>>(new Map());
const { year, nren } = useParams();
useEffect(() => {
getModel();
}, []);
if (surveyModel === undefined) {
return 'loading...'
}
async function getModel() {
const response = await fetch(loadFrom + year + (nren ? '/' + nren : '')) // year is always set, nren stays empty for inspect and try
const json = await response.json();
for (const questionName in json["verification_status"]) {
verificationStatus.current.set(questionName, json["verification_status"][questionName]);
}
const survey = new Model(json['model']);
survey.setVariable('surveyyear', year);
survey.setVariable('previousyear', parseInt(year!) - 1);
survey.data = json['data'];
survey.clearIncorrectValues(true); // TODO test if this really removes all old values and such
survey.currentPageNo = json['page'];
survey.showNavigationButtons = false;
survey.showTOC = false;
if (readonly) {
survey.mode = 'display';
}
setSurveyModel(survey);
}
function saveSurveyData(survey, success?, failure?) {
if (saveTo == '') {
return;
}
const xhr = new XMLHttpRequest();
xhr.open("POST", saveTo + year + '/' + nren);
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.onload = xhr.onerror = () => {
if (xhr.status == 200 && success) {
success();
} else if (xhr.status != 200 && failure) {
failure();
}
}
const saveData = {
data: survey.data,
page: survey.currentPageNo,
verification_status: Object.fromEntries(verificationStatus.current)
}
xhr.send(JSON.stringify(saveData));
}
const saveSurvey = () => { saveSurveyData(surveyModel); };
const endSurvey = () => {
let firstValidationError = '';
const verificationValidator = (survey, options) => {
const status = verificationStatus.current.get(options.name);
if (status == VerificationStatus.Unverified) {
if (firstValidationError == '') {
firstValidationError = options.name;
}
options.error = 'Please verify that last years data is correct by editing the value or pressing the verification button!';
}
};
surveyModel.onValidateQuestion.add(verificationValidator);
const validSurvey = surveyModel.validate();
surveyModel.onValidateQuestion.remove(verificationValidator);
if (validSurvey) {
// TODO replace the following with our own notifications:
surveyModel.options.showSaveInProgress();
saveSurveyData(surveyModel, () => surveyModel.showSaveSuccess(), () => surveyModel.showSaveError());
} else {
surveyModel.focusQuestion(firstValidationError);
}
};
const validatePage = () => {
// TODO remove duplication with funtion above and perhaps also first focus normal validation errors and only afterwards the verification validation errors
let firstValidationError = '';
const verificationValidator = (survey, options) => {
const status = verificationStatus.current.get(options.name);
if (status == VerificationStatus.Unverified) {
if (firstValidationError == '') {
firstValidationError = options.name;
}
options.error = 'Please verify that last years data is correct by editing the value or pressing the verification button!';
}
};
surveyModel.onValidateQuestion.add(verificationValidator);
const validSurvey = surveyModel.validateCurrentPage();
surveyModel.onValidateQuestion.remove(verificationValidator);
if (validSurvey) {
// TODO some notification
} else {
surveyModel.focusQuestion(firstValidationError);
}
}
return (
<div>
<SurveyNavigationComponent surveyModel={surveyModel} endSurvey={endSurvey} saveSurvey={saveSurvey} validatePage={validatePage}>
<SurveyComponent surveyModel={surveyModel} verificationStatus={verificationStatus} />
</SurveyNavigationComponent>
</div>
);
}
export default SurveyContainerComponent;
survey-frontend/src/SurveyNavigationComponent.tsx 0 → 100644
+ 54
− 0
View file @ d6c23644
import React, { useEffect, useState } from "react";
import ProgressBar from './ProgressBar';
function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validatePage, children }) {
const [pageNo, setPageNo] = useState(0);
useEffect(() => {
setPageNo(surveyModel.currentPageNo)
}, [surveyModel]);
const pageNoSetter = (page) => {
setPageNo(page);
surveyModel.currentPageNo = page;
}
const decrementPageNo = () => { pageNoSetter(surveyModel.currentPageNo - 1); };
const incrementPageNo = () => { pageNoSetter(surveyModel.currentPageNo + 1); };
const renderButton = (text, func) => {
// TODO add sv-footer__complete-btn for complete button, and save button perhaps too?
return (
<button className="sv-btn sv-btn--navigation" onClick={func}>
{text}
</button>
);
};
const renderExternalNavigation = () => {
return (
<div className="navigation-block">
<div className="navigation-progress-container">
<div className="navigation-buttons-container">
{(pageNo === surveyModel.visiblePages.length - 1) && renderButton('Complete', endSurvey)}
{renderButton('Save', saveSurvey)}
{(pageNo !== surveyModel.visiblePages.length - 1) && renderButton('Next Page', incrementPageNo)}
{renderButton('Validate Page', validatePage)}
{pageNo !== 0 && renderButton('Previous Page', decrementPageNo)}
</div>
</div>
</div>
);
};
return (
<div>
<ProgressBar surveyModel={surveyModel} pageNoSetter={pageNoSetter} />
{renderExternalNavigation()}
{children}
{renderExternalNavigation()}
</div>
);
}
export default SurveyNavigationComponent;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment