basic save button

compendium_v2/routes/survey.py

@@ -41,7 +41,7 @@ def get_nrens() -> Any:
 @common.require_accepts_json
 def open_survey(nren_name) -> Any:
 
-    # just a hardcoded year and nren for development for now
+    # just a hardcoded year for development for now
     nren = db.session.execute(select(NREN).filter(NREN.name == nren_name)).scalar_one()
     year = 1989
     last_year = 2022
@@ -87,12 +87,12 @@ def open_survey(nren_name) -> Any:
     return jsonify(open_survey)
 
 
-@routes.route('/save', methods=['POST'])
+@routes.route('/save/<string:nren_name>', methods=['POST'])
 @common.require_accepts_json
-def save_survey() -> Any:
+def save_survey(nren_name) -> Any:
 
-    # just a hardcoded year and nren for development for now
-    nren = db.session.execute(select(NREN).order_by(NREN.id).limit(1)).scalar_one()
+    # just a hardcoded year for development for now
+    nren = db.session.execute(select(NREN).filter(NREN.name == nren_name)).scalar_one()
     year = 1989
     survey = db.session.scalar(select(Survey).where(Survey.year == year))
     if survey is None:

survey-frontend/src/SurveyComponent.tsx

@@ -49,12 +49,12 @@ function SurveyComponent({ nrenName }) {
     }
 
     const selector = '[data-name="' + question.name + '"]';
-    const header = document.querySelector(selector)!.querySelector('h5')!;
-    const old = header.querySelector(".verification");
+    const header = document.querySelector(selector)?.querySelector('h5');
+    const old = header?.querySelector(".verification");
     if (old) {
       old.replaceWith(btn);
     } else {
-      header.appendChild(btn);
+      header?.appendChild(btn);
     }
   }
 
@@ -62,6 +62,25 @@ function SurveyComponent({ nrenName }) {
   //   console.log(sender.data);
   // }, []);
 
+  function saveSurveyData (survey, success?, failure?) {
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", "/api/survey/save/" + nrenName);
+    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('/api/survey/open/' + nrenName);
     const json = await response.json();
@@ -107,36 +126,25 @@ function SurveyComponent({ nrenName }) {
       innerCss: "sv-btn sv-btn--navigation sv-footer__complete-btn"
     });
 
-    survey.onComplete.add((sender, options) => {
-      console.log(sender.data);
+    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"
+    });
 
+    survey.onComplete.add((sender, options) => {
       options.showSaveInProgress();
-      const xhr = new XMLHttpRequest();
-      xhr.open("POST", "/api/survey/save");
-      xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
-      xhr.onload = xhr.onerror = function () {
-        if (xhr.status == 200) {
-          // Display the "Success" message (pass a string value to display a custom message)
-          options.showSaveSuccess();
-          // Alternatively, you can clear all messages:
-          // options.clearSaveMessages();
-        } else {
-          // Display the "Error" message (pass a string value to display a custom message)
-          options.showSaveError();
-        }
-      };
-
-      const saveData = {
-        data: sender.data,
-        page: sender.currentPageNo,
-        verification_status: Object.fromEntries(verificationStatus.current)
-      }
-      xhr.send(JSON.stringify(saveData));
+      saveSurveyData(sender, () => options.showSaveSuccess(), () => options.showSaveError());
     });
-    survey.onPartialSend.add((sender, options) => {
-      console.log(sender.data)
-
-      // TODO same as above
+    survey.onPartialSend.add((sender) => {
+      saveSurveyData(sender);
     });
 
     survey.onAfterRenderQuestion.add(function (survey, options) {