skillbox/client/src/pages/survey.vue

<template>
  <div class="survey-page">
    <h1 class="survey-page__title">
      {{ title }}
    </h1>
    <div id="survey" />

    <solution
      :value="solution"
      v-if="showSolution"
    />
    <div v-if="surveyComplete">
      <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, 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 UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';

  import {extractSurveySolutions} from '@/helpers/survey-solutions';
  import {isTeacher} from '@/helpers/is-teacher';

  import {meQuery} from '@/graphql/queries';

  const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
  StylesManager.applyTheme('modern');

  const MODULE_QUERY = gql`
    query ModuleSolutions($slug: String) {
        module(slug: $slug) {
            solutionsEnabled
            slug
        }
    }
`;

  export default {
    props: ['id'],
    components: {
      Solution,
    },

    data() {
      return {
        survey: this.initSurvey(),
        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 {
          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 `
            ${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);
      },
    },

    mounted() {
      if(this.surveyData) {
        this.loadSurveyFromServer(this.surveyData);
      }
    },

    destroyed() {
    },

    methods: {
      initSurvey(data, answers) {
        let survey = new Model(data);
        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;
        }

        const saveSurvey = (sender, {exit}) => {
          if (this.saveDisabled) {
            return;
          }

          this.completed = true;

          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}}}) => {
              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
                  survey: {
                    ...survey,
                    answer
                  }
                };
                store.writeQuery({query, variables, data: newData});
              }
            },
          }).then(() => {
            if (exit) {
              this.$router.go(-1);
            }
          });
        };

        survey.onComplete.add((sender, options) => {
          saveSurvey(sender, {
            ...options,
            exit: true
          });
        });
        survey.onCurrentPageChanged.add(saveSurvey);

        survey.css = css;
        survey.locale = 'de';
        survey.showProgressBar = 'bottom';
        survey.pageNextText = 'Speichern & Weiter';
        survey.render('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,
          };
        },
        manual: true,
        result({data, loading }) {
          if (!loading) {
            this.surveyData = data.survey;
            this.loadSurveyFromServer(data.survey);
            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";

  .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;
    }
  }
</style>