120 lines
2.6 KiB
Vue
120 lines
2.6 KiB
Vue
<template>
|
|
<div class="survey-page">
|
|
<h1 class="survey-page__title">{{title}}</h1>
|
|
<survey :survey='survey'></survey>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as SurveyVue from 'survey-vue';
|
|
import {css} from '@/survey.config'
|
|
|
|
import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
|
|
import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
|
|
|
|
const Survey = SurveyVue.Survey;
|
|
|
|
export default {
|
|
props: ['id'],
|
|
|
|
components: {
|
|
Survey
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
survey: this.initSurvey(),
|
|
title: ''
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
initSurvey(data, answer) {
|
|
let survey = new SurveyVue.Model(data);
|
|
const flatAnswers = {};
|
|
for (let k in answer) {
|
|
flatAnswers[k] = answer[k].answer;
|
|
}
|
|
survey.data = flatAnswers;
|
|
|
|
survey.onComplete.add((sender, options) => {
|
|
// sender.clear(false);
|
|
//
|
|
// sender.mode = 'display';
|
|
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
survey.css = css;
|
|
|
|
return survey;
|
|
}
|
|
},
|
|
|
|
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);
|
|
let answer = {};
|
|
if (data.survey.answer && data.survey.answer.data) {
|
|
answer = JSON.parse(data.survey.answer.data);
|
|
}
|
|
|
|
this.survey = this.initSurvey(json, answer);
|
|
this.title = data.survey.title;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</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-row-gap: $large-spacing;
|
|
justify-self: center;
|
|
padding: 100px 0;
|
|
|
|
&__title {
|
|
@include heading-2;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|