skillbox/client/src/pages/survey.vue

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

    <solution :value="solution" v-if="showSolution"></solution>
    <div v-if="surveyComplete">
      <a class="button button--primary" @click="reopen">Übung bearbeiten</a>
    </div>
  </div>
</template>

<script>
  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 {extractSurveySolutions} from '@/helpers/survey-solutions';
  import {isTeacher} from '@/helpers/is-teacher';

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

  const Survey = SurveyVue.Survey;

  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
      },
      showSolution() {
        return (module.solutionsEnabled || isTeacher) && !this.survey.isCompleted
      },
      solution() {
        return {
          text: this.answers.reduce((previous, answer) => {
            if (!answer.answer) {
              return previous
            }
            let answerText;
            if (typeof answer.answer === 'object') {
              // this means the answer comes from a matrix, where the keys are the labels and the values are the respective answers
              let answerObject = answer.answer;
              let keysAndValues = [];
              for (let prop of Object.keys(answerObject)) {
                  keysAndValues.push(`${prop}: ${answerObject[prop]}`);
              }
              answerText = keysAndValues.join(', ');
            } else {
              answerText = answer.answer;
            }
            return `
            ${previous}
             <h2 class="solution-text__heading">${answer.title}</h2>
             <p class="solution-text__answer">${answerText}</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);
            }

            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";

  .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>