Recover survey changes

client/src/pages/survey.vue

@@ -5,258 +5,288 @@
     </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 {css} from '@/survey.config';
+import '@/styles/survey.modern.css';
-  import gql from 'graphql-tag';
+import '@/styles/survey.reset.css';
-  import {Model} from 'survey-core';
+import { css } from '@/survey.config';
-  // we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
+import gql from 'graphql-tag';
-  import 'survey-knockout-ui';
+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_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
+import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
-  import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
+import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
 
-  import {extractSurveySolutions} from '@/helpers/survey-solutions';
+import { extractSurveySolutions } from '@/helpers/survey-solutions';
-  import {isTeacher} from '@/helpers/is-teacher';
+import { isTeacher } from '@/helpers/is-teacher';
 
-  import {meQuery} from '@/graphql/queries';
+import { meQuery } from '@/graphql/queries';
 
-  import {defineAsyncComponent} from 'vue';
+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`
+const MODULE_QUERY = gql`
-    query ModuleSolutions($slug: String) {
+  query ModuleSolutions($slug: String) {
-        module(slug: $slug) {
+    module(slug: $slug) {
-            solutionsEnabled
+      solutionsEnabled
-            slug
+      slug
-        }
     }
+  }
 `;
 
-  export default {
+export default {
-    props: ['id'],
+  props: ['id'],
-    components: {
+  components: {
-      Solution,
+    Solution,
-    },
+  },
 
-    data() {
+  data() {
+    return {
+      survey: this.initSurvey(),
+      currentPage: null,
+      surveyData: null,
+      title: '',
+      module: {},
+      completed: false,
+      me: {
+        permissions: [],
+      },
+      saveDisabled: false,
+    };
+  },
+
+  computed: {
+    surveyComplete() {
+      return this.survey && this.survey.isCompleted;
+    },
+    showSolution() {
+      return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
+    },
+    solution() {
+      // todo: should this be done inside of Solution.vue?
       return {
-        survey: this.initSurvey(),
+        text: this.answers.reduce((previous, answer) => {
-        title: '',
+          if (!answer.answer) {
-        module: {},
+            return previous;
-        completed: false,
+          }
-        me: {
+          if (answer.type === 'matrix' || answer.type === 'checkbox') {
-          permissions: [],
+            // 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('');
-        saveDisabled: false,
+            return `
-      };
-    },
-
-    computed: {
-      surveyComplete() {
-        return this.survey && this.survey.isCompleted;
-      },
-      showSolution() {
-        return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
-      },
-      solution() {
-        // todo: should this be done inside of Solution.vue?
-        return {
-          text: this.answers.reduce((previous, answer) => {
-            if (!answer.answer) {
-              return previous;
-            }
-            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('');
-              return `
             ${previous}
             <h2 class="solution-text__heading">${answer.title}</h2>
             <ul class="solution-text__answer solution-text__list">${answerText}</ul>
             `;
-            } else {
+          } else {
-              return `
+            return `
             ${previous}
              <h2 class="solution-text__heading">${answer.title}</h2>
              <p class="solution-text__answer">${answer.answer}</p>
              `;
-            }
+          }
-          }, ''),
+        }, ''),
-        };
+      };
-      },
-      answers() {
-        return this.survey.currentPage && this.survey.currentPage.elements
-          ? this.survey.currentPage.elements.reduce(extractSurveySolutions, [])
-          : [];
-      },
-      isTeacher() {
-        return isTeacher(this);
-      },
     },
+    answers() {
+      return this.currentPage && this.currentPage.elements
+        ? this.currentPage.elements.reduce(extractSurveySolutions, [])
+        : [];
+    },
+    isTeacher() {
+      return isTeacher(this);
+    },
+  },
 
-    methods: {
+  mounted() {
-      initSurvey(data, answers) {
+    if (this.surveyData) {
-        let survey = new Model(data);
+      this.loadSurveyFromServer(this.surveyData);
-        const flatAnswers = {};
+    }
-        for (let k in answers) {
+  },
-          flatAnswers[k] = answers[k].answer;
+
-        }
+  destroyed() {},
-        this.$log.debug('flatAnswers', flatAnswers);
+
-        this.$log.debug('data', survey.data);
+  methods: {
-        if (Object.keys(flatAnswers).length > 0) {
+    initSurvey(data, answers) {
-          // answers are not empty
+      let survey = new Model(data);
-          survey.data = flatAnswers;
+      const flatAnswers = {};
+      for (let k in answers) {
+        flatAnswers[k] = answers[k].answer;
+      }
+      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 }) => {
+        if (this.saveDisabled) {
+          return;
         }
 
-        const saveSurvey = (sender, {exit}) => {
+        this.completed = true;
-          this.$log.debug('saving survey', sender);
+
-          if (this.saveDisabled) {
+        const data = {};
-            return;
+
+        for (let k in survey.data) {
+          // if (survey.data.hasOwnProperty(k)) {
+          if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
+            let question = sender.getQuestionByName(k);
+            data[k] = {
+              answer: survey.data[k],
+              correct: question && question.correctAnswer ? question.correctAnswer : '',
+            };
           }
+        }
+        if (Object.keys(data).length === 0) {
+          // data is empty
+          return;
+        }
+        const answer = {
+          surveyId: this.id,
+          data: JSON.stringify(data),
+        };
 
-          this.completed = true;
+        this.$apollo
-
+          .mutate({
-          const data = {};
-
-          for (let k in survey.data) {
-            // if (survey.data.hasOwnProperty(k)) {
-              if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
-              let question = sender.getQuestionByName(k);
-              data[k] = {
-                answer: survey.data[k],
-                correct: question && question.correctAnswer ? question.correctAnswer : '',
-              };
-            }
-          }
-          if (Object.keys(data).length === 0) {
-            // data is empty
-            return;
-          }
-          const answer = {
-            surveyId: this.id,
-            data: JSON.stringify(data),
-          };
-
-          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 variables = { id: this.id };
-              const {survey} = store.readQuery({query, variables});
+              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});
+                store.writeQuery({ query, variables, data: newData });
               }
             },
-          }).then(() => {
+          })
+          .then(() => {
             if (exit) {
               this.$router.go(-1);
             }
           });
-        };
+      };
 
-        survey.onComplete.add((sender, options) => {
+      survey.onComplete.add((sender, options) => {
-          saveSurvey(sender, {
+        saveSurvey(sender, {
-            ...options,
+          ...options,
-            exit: true
+          exit: true,
-          });
         });
-        survey.onCurrentPageChanged.add(saveSurvey);
+      });
+      survey.onCurrentPageChanged.add(saveSurvey);
+      survey.onCurrentPageChanged.add(updatePage);
 
-        survey.css = css;
+      survey.css = css;
-        survey.locale = 'de';
+      survey.locale = 'de';
-        survey.showProgressBar = 'bottom';
+      survey.showProgressBar = 'bottom';
-        survey.pageNextText = 'Speichern & Weiter';
+      survey.pageNextText = 'Speichern & Weiter';
-        this.$log.debug(survey.data);
+      survey.render('survey');
-        survey.render('survey');
+      return survey;
-        return survey;
+    },
+    reopen() {
+      this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
+      this.completed = false;
+      let data = this.survey.data; // save the data
+      this.survey.clear();
+      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: {
+    survey: {
+      query: SURVEY_QUERY,
+      variables() {
+        return {
+          id: this.id,
+        };
       },
-      reopen() {
+      manual: true,
-        this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
+      result({ data, loading }) {
-        this.completed = false;
+        if (!loading) {
-        let data = this.survey.data; // save the data
+          this.surveyData = data.survey;
-        this.survey.clear();
+          this.loadSurveyFromServer(data.survey);
-        this.survey.data = data; // reapply it
+          const module = data.survey.module;
-        this.saveDisabled = false;
+
+          this.$apollo.addSmartQuery('module', {
+            query: MODULE_QUERY,
+            variables: {
+              slug: module.slug,
+            },
+          });
+        }
       },
     },
-
+    me: meQuery,
-    apollo: {
+  },
-      survey: {
+};
-        query: SURVEY_QUERY,
-        variables() {
-          return {
-            id: this.id,
-          };
-        },
-        manual: true,
-        result({data, loading }) {
-          if (!loading) {
-            let json = JSON.parse(data.survey.data);
-            json.showTitle = false;
-            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
-              },
-            });
-          }
-        },
-      },
-      me: meQuery,
-    },
-  };
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .survey-page {
+.survey-page {
-    max-width: 800px;
+  max-width: 800px;
-    display: grid;
+  display: grid;
-    grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr;
-    grid-auto-rows: auto;
+  grid-auto-rows: auto;
-    grid-row-gap: $large-spacing;
+  grid-row-gap: $large-spacing;
-    justify-self: center;
+  justify-self: center;
-    padding: 100px 0;
+  padding: 100px 0;
-    width: 100%;
+  width: 100%;
 
-    &__title {
+  &__title {
-      @include meta-title;
+    @include meta-title;
-      margin: 0;
+    margin: 0;
-    }
   }
+}
 </style>