Fix model mutation and improve feedback for survey validation

compendium-frontend/src/survey/SurveyContainerComponent.tsx

@@ -18,6 +18,18 @@ import { userContext } from "compendium/providers/UserProvider";
 Serializer.addProperty("itemvalue", "customDescription:text");
 Serializer.addProperty("question", "hideCheckboxLabels:boolean");
 
+function modifyModel(surveyModel: Model) {
+    // Used to create a new reference to the survey model to force a rerender.
+    // This is a hack to get around the fact that the survey model state is not part of the react state.
+    const newModel = Object.create(surveyModel);
+
+    if (!newModel.css.question.title.includes("sv-header-flex")) {
+        newModel.css.question.title = "sv-title sv-question__title sv-header-flex";
+        newModel.css.question.titleOnError = "sv-question__title--error sv-error-color-fix";
+    }
+    return newModel
+}
+
 function SurveyContainerComponent({ loadFrom }) {
     const [surveyModel, setSurveyModel] = useState<Model>();  // note that this is never updated and we abuse that fact by adding extra state to the surveyModel
     const { year, nren } = useParams();  // nren stays empty for inspect and try
@@ -122,9 +134,11 @@ function SurveyContainerComponent({ loadFrom }) {
             if (!response.ok) {
                 return json['message'];
             }
-            surveyModel.mode = json['mode'];
-            surveyModel['lockedBy'] = json['locked_by'];
-            surveyModel['status'] = json['status'];
+            const newModel = modifyModel(survey);
+            newModel.mode = json['mode'];
+            newModel['lockedBy'] = json['locked_by'];
+            newModel['status'] = json['status'];
+            setSurveyModel(newModel);
         } catch (e) {
             return "Unknown Error: " + (e as Error).message;
         }
@@ -204,12 +218,14 @@ function SurveyContainerComponent({ loadFrom }) {
             for (const questionName in json["verification_status"]) {
                 surveyModel['verificationStatus'].set(questionName, json["verification_status"][questionName]);
             }
-            surveyModel.data = json['data'];
-            surveyModel.clearIncorrectValues(true);
-            surveyModel.mode = json['mode'];
-            surveyModel['lockedBy'] = json['locked_by']
-            surveyModel['lockUUID'] = json['lock_uuid'];
-            surveyModel['status'] = json['status'];
+            const newModel = modifyModel(surveyModel);
+            newModel.data = json['data'];
+            newModel.clearIncorrectValues(true);
+            newModel.mode = json['mode'];
+            newModel['lockedBy'] = json['locked_by']
+            newModel['lockUUID'] = json['lock_uuid'];
+            newModel['status'] = json['status'];
+            setSurveyModel(newModel);
             // Validate when we start editing to ensure invalid fields are corrected by the user
             const allFieldsValid = validateWithAnswerVerification(surveyModel.validate.bind(surveyModel, true, true), false);
             if (!allFieldsValid) {
@@ -225,9 +241,11 @@ function SurveyContainerComponent({ loadFrom }) {
                 toast("Failed releasing lock: " + json['message']);
                 return;
             }
-            surveyModel.mode = json['mode'];
-            surveyModel['lockedBy'] = json['locked_by'];
-            surveyModel['status'] = json['status'];
+            const newModel = modifyModel(surveyModel);
+            newModel.mode = json['mode'];
+            newModel['lockedBy'] = json['locked_by'];
+            newModel['status'] = json['status'];
+            setSurveyModel(newModel);
         },
         'validatePage': () => {
             const validSurvey = validateWithAnswerVerification(surveyModel.validatePage.bind(surveyModel));
@@ -237,15 +255,11 @@ function SurveyContainerComponent({ loadFrom }) {
         }
     }
 
-    if (!surveyModel.css.question.title.includes("sv-header-flex")) {
-        surveyModel.css.question.title = "sv-title sv-question__title sv-header-flex";
-        surveyModel.css.question.titleOnError = "sv-question__title--error sv-error-color-fix";
-    }
-
     const onPageChange = (page) => {
         if (!surveyModel) return;
-        surveyModel.currentPageNo = page;
-        setSurveyModel(Object.create(surveyModel));
+        const newModel = modifyModel(surveyModel);
+        newModel.currentPageNo = page;
+        setSurveyModel(newModel);
     }
 
     return (

compendium-frontend/src/survey/management/SurveyManagementComponent.tsx

@@ -168,11 +168,19 @@ function SurveyManagementComponent() {
                                                     helpText="Validate all survey responses. This will check if all required questions are answered and if the answers are in the correct format."
                                                     enabled={survey.status == SurveyStatus.preview || survey.status == SurveyStatus.published}
                                                     onClick={async () => {
+                                                        let allValid = true;
                                                         const responses = [...survey.responses].sort((a, b) => a.nren.name.localeCompare(b.nren.name));
-                                                        const values = await Promise.all(responses.map(response => validateSurvey(survey.year, response.nren.name)));
-                                                        const valid = values.every(value => value);
+                                                        for (const response of responses) {
+                                                            const valid = await validateSurvey(survey.year, response.nren.name);
+                                                            if (!valid) {
+                                                                toast.error(`${response.nren.name} ${survey.year} survey is not valid.`);
+                                                            } else {
+                                                                toast.success(`${response.nren.name} ${survey.year} survey is valid.`);
+                                                            }
+                                                            allValid = allValid && valid;   
+                                                        }
 
-                                                        if (!valid) {
+                                                        if (!allValid) {
                                                             toast.error("Some surveys are not valid.\nPlease check the responses")
                                                         } else {
                                                             toast.success("All surveys are valid")