Recover survey changes
This commit is contained in:
parent
300cb8681f
commit
ad999391f7
|
|
@ -5,258 +5,288 @@
|
|||
</h1>
|
||||
<div id="survey" />
|
||||
|
||||
<solution
|
||||
:value="solution"
|
||||
v-if="showSolution"
|
||||
/>
|
||||
<solution :value="solution" v-if="showSolution" />
|
||||
<div v-if="surveyComplete">
|
||||
<a
|
||||
class="button button--primary"
|
||||
@click="reopen"
|
||||
>Übung bearbeiten</a>
|
||||
<a class="button button--primary" @click="reopen">Übung bearbeiten</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {css} from '@/survey.config';
|
||||
import gql from 'graphql-tag';
|
||||
import {Model} from 'survey-core';
|
||||
// we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
|
||||
import 'survey-knockout-ui';
|
||||
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 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 { extractSurveySolutions } from '@/helpers/survey-solutions';
|
||||
import { isTeacher } from '@/helpers/is-teacher';
|
||||
|
||||
import {meQuery} from '@/graphql/queries';
|
||||
import { meQuery } from '@/graphql/queries';
|
||||
|
||||
import {defineAsyncComponent} from 'vue';
|
||||
const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
const Solution = defineAsyncComponent(() =>
|
||||
import(
|
||||
/* webpackChunkName: "content-components"
|
||||
*/ '@/components/content-blocks/Solution'
|
||||
)
|
||||
);
|
||||
StylesManager.applyTheme('modern');
|
||||
|
||||
const MODULE_QUERY = gql`
|
||||
query ModuleSolutions($slug: String) {
|
||||
module(slug: $slug) {
|
||||
solutionsEnabled
|
||||
slug
|
||||
}
|
||||
const MODULE_QUERY = gql`
|
||||
query ModuleSolutions($slug: String) {
|
||||
module(slug: $slug) {
|
||||
solutionsEnabled
|
||||
slug
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default {
|
||||
props: ['id'],
|
||||
components: {
|
||||
Solution,
|
||||
},
|
||||
export default {
|
||||
props: ['id'],
|
||||
components: {
|
||||
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(),
|
||||
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 `
|
||||
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);
|
||||
},
|
||||
}
|
||||
}, ''),
|
||||
};
|
||||
},
|
||||
answers() {
|
||||
return this.currentPage && this.currentPage.elements
|
||||
? this.currentPage.elements.reduce(extractSurveySolutions, [])
|
||||
: [];
|
||||
},
|
||||
isTeacher() {
|
||||
return isTeacher(this);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
initSurvey(data, answers) {
|
||||
let survey = new Model(data);
|
||||
const flatAnswers = {};
|
||||
for (let k in answers) {
|
||||
flatAnswers[k] = answers[k].answer;
|
||||
}
|
||||
this.$log.debug('flatAnswers', flatAnswers);
|
||||
this.$log.debug('data', survey.data);
|
||||
if (Object.keys(flatAnswers).length > 0) {
|
||||
// answers are not empty
|
||||
survey.data = flatAnswers;
|
||||
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;
|
||||
}
|
||||
|
||||
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.$log.debug('saving survey', sender);
|
||||
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.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({
|
||||
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 {survey} = store.readQuery({query, variables});
|
||||
const variables = { id: this.id };
|
||||
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) => {
|
||||
saveSurvey(sender, {
|
||||
...options,
|
||||
exit: true
|
||||
});
|
||||
survey.onComplete.add((sender, options) => {
|
||||
saveSurvey(sender, {
|
||||
...options,
|
||||
exit: true,
|
||||
});
|
||||
survey.onCurrentPageChanged.add(saveSurvey);
|
||||
});
|
||||
survey.onCurrentPageChanged.add(saveSurvey);
|
||||
survey.onCurrentPageChanged.add(updatePage);
|
||||
|
||||
survey.css = css;
|
||||
survey.locale = 'de';
|
||||
survey.showProgressBar = 'bottom';
|
||||
survey.pageNextText = 'Speichern & Weiter';
|
||||
this.$log.debug(survey.data);
|
||||
survey.render('survey');
|
||||
return survey;
|
||||
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,
|
||||
};
|
||||
},
|
||||
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;
|
||||
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,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
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,
|
||||
},
|
||||
};
|
||||
me: meQuery,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "~styles/helpers";
|
||||
@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%;
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue