From ff5b2d28f6893bd8ca873545b7fec5a10b368b5d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 3 Mar 2021 21:53:40 +0100
Subject: [PATCH] Prevent answers being deleted when opening a completed survey

---
 client/package-lock.json                      |   6 +-
 client/package.json                           |   2 +-
 .../assignment/SubmissionForm.vue             |   1 -
 client/src/pages/survey.vue                   | 342 +++++++++---------
 4 files changed, 177 insertions(+), 174 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 337bed1a..d0a4d8f1 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -19008,9 +19008,9 @@
       }
     },
     "survey-vue": {
-      "version": "1.5.18",
-      "resolved": "https://registry.npmjs.org/survey-vue/-/survey-vue-1.5.18.tgz",
-      "integrity": "sha512-DJURzwbCmVgcW2YTM/L9+8J8AgfRffqbPygYY9eXtf5UR4YVAX0wGcVzmcnqwHnjxCw4sX5DW1UDLzXRBtgGWQ==",
+      "version": "1.8.33",
+      "resolved": "https://registry.npmjs.org/survey-vue/-/survey-vue-1.8.33.tgz",
+      "integrity": "sha512-ffsYmW8AJCiAyJiNAaZtDxAxYoaSiZCVZQHoAVFcK8IZCuKa2gPYpbZEnC2ytK0WjJ84XdZo+/TcLNU6DnlneQ==",
       "requires": {
         "vue": "^2.1.10"
       }
diff --git a/client/package.json b/client/package.json
index cc94188d..d2ebda89 100644
--- a/client/package.json
+++ b/client/package.json
@@ -69,7 +69,7 @@
     "sass-loader": "^7.1.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "survey-vue": "^1.5.18",
+    "survey-vue": "^1.8.32",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "unfetch": "^3.1.1",
     "uploadcare-widget": "^3.6.0",
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 90ff82a5..46afbfac 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -90,7 +90,6 @@
         return 'document' in this.userInput;
       },
       showSpellcheckButton() {
-        console.log(process.env.VUE_APP_ENABLE_SPELLCHECK);
         return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
       },
       spellcheckText() {
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index 5b8ea7b0..5c17bf3e 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -15,206 +15,210 @@
 </template>
 
 <script>
-import * as SurveyVue from 'survey-vue';
-import {css} from '@/survey.config';
+  import * as SurveyVue from 'survey-vue';
+  import {css} from '@/survey.config';
 
-import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
-import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql';
-import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
-import Solution from '@/components/content-blocks/Solution';
+  import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
+  import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql';
+  import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
+  import Solution from '@/components/content-blocks/Solution';
 
-import {extractSurveySolutions} from '@/helpers/survey-solutions';
-import {isTeacher} from '@/helpers/is-teacher';
+  import {extractSurveySolutions} from '@/helpers/survey-solutions';
+  import {isTeacher} from '@/helpers/is-teacher';
 
-import {meQuery} from '@/graphql/queries';
+  import {meQuery} from '@/graphql/queries';
 
-const Survey = SurveyVue.Survey;
+  const Survey = SurveyVue.Survey;
 
-export default {
-  props: ['id'],
+  export default {
+    props: ['id'],
 
-  components: {
-    Solution,
-    Survey
-  },
-
-  data() {
-    return {
-      survey: this.initSurvey(),
-      title: '',
-      module: {},
-      completed: false,
-      me: {
-        permissions: []
-      },
-    };
-  },
-
-  computed: {
-    surveyComplete() {
-      return this.survey && this.survey.isCompleted;
+    components: {
+      Solution,
+      Survey
     },
-    showSolution() {
-      return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
-    },
-    solution() {
-      // todo: should this be done inside of Solution.vue?
+
+    data() {
       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 `
+        survey: this.initSurvey(),
+        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 {
+          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 {
-            return `
+            } else {
+              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);
-    }
-  },
-
-  methods: {
-    initSurvey(data, answers) {
-      let survey = new SurveyVue.Model(data);
-      const flatAnswers = {};
-      for (let k in answers) {
-        flatAnswers[k] = answers[k].answer;
-      }
-      survey.data = flatAnswers;
-
-      const saveSurvey = (sender, options) => {
-        // sender.clear(false);
-        //
-        // sender.mode = 'display';
-
-        this.completed = true;
-
-        const data = {};
-
-        for (let k in survey.data) {
-          if (survey.data.hasOwnProperty(k)) {
-            let question = sender.getQuestionByName(k);
-            data[k] = {
-              answer: survey.data[k],
-              correct: question && question.correctAnswer ? question.correctAnswer : ''
-            };
-          }
-        }
-
-        this.$apollo.mutate({
-          mutation: UPDATE_ANSWER,
-          variables: {
-            input: {
-              answer: {
-                surveyId: this.id,
-                data: JSON.stringify(data)
-              }
             }
-          },
-          // fixme: make the update work instead of refetching
-          update: (store, {data: {updateAnswer: {answer}}}) => {
-            const query = SURVEY_QUERY;
-            const variables = {id: this.id};
-            const queryData = store.readQuery({query, variables});
-            if (queryData.survey) {
-              queryData.survey.answer = answer;
-              store.writeQuery({query, variables, data: queryData});
-            }
-          }
-        });
-      };
-
-      survey.onComplete.add(saveSurvey);
-      survey.onCurrentPageChanged.add(saveSurvey);
-
-      survey.css = css;
-      survey.locale = 'de';
-      survey.showProgressBar = 'bottom';
-      survey.pageNextText = 'Speichern & Weiter';
-      return survey;
-    },
-    reopen() {
-      this.completed = false;
-      let data = this.survey.data; // save the data
-      this.survey.clear();
-      this.survey.data = data; // reapply it
-    }
-  },
-
-  apollo: {
-    survey: {
-      query: SURVEY_QUERY,
-      variables() {
-        return {
-          id: this.id
+          }, '')
         };
       },
-      manual: true,
-      result({data, loading, networkStatus}) {
-        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);
+      answers() {
+        return this.survey.currentPage && this.survey.currentPage.elements
+          ? this.survey.currentPage.elements.reduce(extractSurveySolutions, [])
+          : [];
+      },
+      isTeacher() {
+        return isTeacher(this);
+      }
+    },
+
+    methods: {
+      initSurvey(data, answers) {
+        let survey = new SurveyVue.Model(data);
+        const flatAnswers = {};
+        for (let k in answers) {
+          flatAnswers[k] = answers[k].answer;
+        }
+        survey.data = flatAnswers;
+
+        const saveSurvey = (sender) => {
+          if (this.saveDisabled) {
+            return;
           }
 
-          if (!this.completed) {
-            this.survey = this.initSurvey(json, answer);
-          }
-          this.title = json.title;
-          const module = data.survey.module;
+          this.completed = true;
 
-          this.$apollo.addSmartQuery('module', {
-            query: MODULE_QUERY,
+          const data = {};
+
+          for (let k in survey.data) {
+            if (survey.data.hasOwnProperty(k)) {
+              let question = sender.getQuestionByName(k);
+              data[k] = {
+                answer: survey.data[k],
+                correct: question && question.correctAnswer ? question.correctAnswer : ''
+              };
+            }
+          }
+          const answer = {
+            surveyId: this.id,
+            data: JSON.stringify(data)
+          };
+
+          this.$apollo.mutate({
+            mutation: UPDATE_ANSWER,
             variables: {
-              id: module.id
+              input: {
+                answer
+              }
+            },
+            // fixme: make the update work instead of refetching
+            update: (store, {data: {updateAnswer: {answer}}}) => {
+              const query = SURVEY_QUERY;
+              const variables = {id: this.id};
+              const queryData = store.readQuery({query, variables});
+              if (queryData.survey) {
+                queryData.survey.answer = answer;
+                store.writeQuery({query, variables, data: queryData});
+              }
             }
           });
-        }
+        };
+
+        survey.onComplete.add(saveSurvey);
+        survey.onCurrentPageChanged.add(saveSurvey);
+
+        survey.css = css;
+        survey.locale = 'de';
+        survey.showProgressBar = 'bottom';
+        survey.pageNextText = 'Speichern & Weiter';
+        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;
+      }
     },
-    me: meQuery
-  }
-};
+
+    apollo: {
+      survey: {
+        query: SURVEY_QUERY,
+        variables() {
+          return {
+            id: this.id
+          };
+        },
+        manual: true,
+        result({data, loading, networkStatus}) {
+          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: {
+                id: module.id
+              }
+            });
+          }
+        },
+      },
+      me: meQuery
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/_variables.scss";
-@import "@/styles/_mixins.scss";
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.survey-page {
-  max-width: 800px;
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-auto-rows: auto;
-  grid-row-gap: $large-spacing;
-  justify-self: center;
-  padding: 100px 0;
-  width: 100%;
+  .survey-page {
+    max-width: 800px;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-auto-rows: auto;
+    grid-row-gap: $large-spacing;
+    justify-self: center;
+    padding: 100px 0;
+    width: 100%;
 
-  &__title {
-    @include meta-title;
-    margin: 0;
+    &__title {
+      @include meta-title;
+      margin: 0;
+    }
   }
-}
 </style>