Merge branch 'hotfix/deleted-survey-answers' into develop
This commit is contained in:
commit
271b517fdc
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue