Recover survey changes

client/src/pages/survey.vue

@@ -5,25 +5,20 @@
     </h1>
     <div id="survey" />
 
-    <solution
+    <solution :value="solution" v-if="showSolution" />
-      :value="solution"
-      v-if="showSolution"
-    />
     <div v-if="surveyComplete">
-      <a
+      <a class="button button--primary" @click="reopen">Übung bearbeiten</a>
-        class="button button--primary"
-        @click="reopen"
-      >Übung bearbeiten</a>
     </div>
   </div>
 </template>
 
 <script>
+import '@/styles/survey.modern.css';
+import '@/styles/survey.reset.css';
 import { css } from '@/survey.config';
 import gql from 'graphql-tag';
-  import {Model} from 'survey-core';
+import { Model, StylesManager } from 'survey-knockout';
 // we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
-  import 'survey-knockout-ui';
 
 import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
 import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
@@ -34,7 +29,13 @@
 import { meQuery } from '@/graphql/queries';
 
 import { defineAsyncComponent } from 'vue';
-  const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
+const Solution = defineAsyncComponent(() =>
+  import(
+    /* webpackChunkName: "content-components"
+     */ '@/components/content-blocks/Solution'
+  )
+);
+StylesManager.applyTheme('modern');
 
 const MODULE_QUERY = gql`
   query ModuleSolutions($slug: String) {
@@ -54,6 +55,8 @@
   data() {
     return {
       survey: this.initSurvey(),
+      currentPage: null,
+      surveyData: null,
       title: '',
       module: {},
       completed: false,
@@ -80,7 +83,7 @@
           }
           if (answer.type === 'matrix' || answer.type === 'checkbox') {
             // wrap all the answers inside li tags and convert to a single string
-              const answerText = answer.answer.map(a => `<li class="solution-text__list-item">${a}</li>`).join('');
+            const answerText = answer.answer.map((a) => `<li class="solution-text__list-item">${a}</li>`).join('');
             return `
             ${previous}
             <h2 class="solution-text__heading">${answer.title}</h2>
@@ -97,8 +100,8 @@
       };
     },
     answers() {
-        return this.survey.currentPage && this.survey.currentPage.elements
+      return this.currentPage && this.currentPage.elements
-          ? this.survey.currentPage.elements.reduce(extractSurveySolutions, [])
+        ? this.currentPage.elements.reduce(extractSurveySolutions, [])
         : [];
     },
     isTeacher() {
@@ -106,6 +109,14 @@
     },
   },
 
+  mounted() {
+    if (this.surveyData) {
+      this.loadSurveyFromServer(this.surveyData);
+    }
+  },
+
+  destroyed() {},
+
   methods: {
     initSurvey(data, answers) {
       let survey = new Model(data);
@@ -113,15 +124,19 @@
       for (let k in answers) {
         flatAnswers[k] = answers[k].answer;
       }
-        this.$log.debug('flatAnswers', flatAnswers);
-        this.$log.debug('data', survey.data);
       if (Object.keys(flatAnswers).length > 0) {
         // answers are not empty
         survey.data = flatAnswers;
       }
 
+      this.currentPage = survey.currentPage;
+
+      const updatePage = (sender, { oldCurrentPage, newCurrentPage }) => {
+        console.log(oldCurrentPage, newCurrentPage);
+        this.currentPage = newCurrentPage;
+      };
+
       const saveSurvey = (sender, { exit }) => {
-          this.$log.debug('saving survey', sender);
         if (this.saveDisabled) {
           return;
         }
@@ -149,28 +164,38 @@
           data: JSON.stringify(data),
         };
 
-          this.$apollo.mutate({
+        this.$apollo
+          .mutate({
             mutation: UPDATE_ANSWER,
             variables: {
               input: {
                 answer,
               },
             },
-            update: (store, {data: {updateAnswer: {answer}}}) => {
+            update: (
+              store,
+              {
+                data: {
+                  updateAnswer: { answer },
+                },
+              }
+            ) => {
               const query = SURVEY_QUERY;
               const variables = { id: this.id };
               const { survey } = store.readQuery({ query, variables });
               if (survey) {
-                const newData = { // data is already in use in parent scope
+                const newData = {
+                  // data is already in use in parent scope
                   survey: {
                     ...survey,
-                    answer
+                    answer,
-                  }
+                  },
                 };
                 store.writeQuery({ query, variables, data: newData });
               }
             },
-          }).then(() => {
+          })
+          .then(() => {
             if (exit) {
               this.$router.go(-1);
             }
@@ -180,16 +205,16 @@
       survey.onComplete.add((sender, options) => {
         saveSurvey(sender, {
           ...options,
-            exit: true
+          exit: true,
         });
       });
       survey.onCurrentPageChanged.add(saveSurvey);
+      survey.onCurrentPageChanged.add(updatePage);
 
       survey.css = css;
       survey.locale = 'de';
       survey.showProgressBar = 'bottom';
       survey.pageNextText = 'Speichern & Weiter';
-        this.$log.debug(survey.data);
       survey.render('survey');
       return survey;
     },
@@ -201,6 +226,20 @@
       this.survey.data = data; // reapply it
       this.saveDisabled = false;
     },
+    loadSurveyFromServer(survey) {
+      let json = JSON.parse(survey.data);
+      json.showTitle = false;
+      json.showProgressBar = 'bottom';
+      let answer = {};
+      if (survey.answer && survey.answer.data) {
+        answer = JSON.parse(survey.answer.data);
+      }
+
+      if (!this.completed) {
+        this.survey = this.initSurvey(json, answer);
+      }
+      this.title = json.title;
+    },
   },
 
   apollo: {
@@ -214,23 +253,14 @@
       manual: true,
       result({ data, loading }) {
         if (!loading) {
-            let json = JSON.parse(data.survey.data);
+          this.surveyData = data.survey;
-            json.showTitle = false;
+          this.loadSurveyFromServer(data.survey);
-            let answer = {};
-            if (data.survey.answer && data.survey.answer.data) {
-              answer = JSON.parse(data.survey.answer.data);
-            }
-
-            if (!this.completed) {
-              this.survey = this.initSurvey(json, answer);
-            }
-            this.title = json.title;
           const module = data.survey.module;
 
           this.$apollo.addSmartQuery('module', {
             query: MODULE_QUERY,
             variables: {
-                slug: module.slug
+              slug: module.slug,
             },
           });
         }
@@ -242,7 +272,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
 .survey-page {
   max-width: 800px;