ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Recover survey changes

This commit is contained in:
Ramon Wenger 2023-02-02 14:10:21 +01:00
parent 300cb8681f
commit ad999391f7
1 changed files with 225 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
client/src/pages/survey.vue
View File

@ -5,25 +5,20 @@
</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 '@/styles/survey.modern.css';
import '@/styles/survey.reset.css';
import { css } from '@/survey.config';
import gql from 'graphql-tag';
import {Model} from 'survey-core';
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-knockout-ui';
import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
@ -34,7 +29,13 @@
import { meQuery } from '@/graphql/queries';
import { defineAsyncComponent } from 'vue';
const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
const Solution = defineAsyncComponent(() =>
import(
/* webpackChunkName: "content-components"
*/ '@/components/content-blocks/Solution'
)
);
StylesManager.applyTheme('modern');
const MODULE_QUERY = gql`
query ModuleSolutions($slug: String) {
@ -54,6 +55,8 @@
data() {
return {
survey: this.initSurvey(),
currentPage: null,
surveyData: null,
title: '',
module: {},
completed: false,
@ -80,7 +83,7 @@
}
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('');
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>
@ -97,8 +100,8 @@
};
},
answers() {
return this.survey.currentPage && this.survey.currentPage.elements
? this.survey.currentPage.elements.reduce(extractSurveySolutions, [])
return this.currentPage && this.currentPage.elements
? this.currentPage.elements.reduce(extractSurveySolutions, [])
: [];
},
isTeacher() {
@ -106,6 +109,14 @@
},
},
mounted() {
if (this.surveyData) {
this.loadSurveyFromServer(this.surveyData);
}
},
destroyed() {},
methods: {
initSurvey(data, answers) {
let survey = new Model(data);
@ -113,15 +124,19 @@
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;
}
this.currentPage = survey.currentPage;
const updatePage = (sender, { oldCurrentPage, newCurrentPage }) => {
console.log(oldCurrentPage, newCurrentPage);
this.currentPage = newCurrentPage;
};
const saveSurvey = (sender, { exit }) => {
this.$log.debug('saving survey', sender);
if (this.saveDisabled) {
return;
}
@ -149,28 +164,38 @@
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 });
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 });
}
},
}).then(() => {
})
.then(() => {
if (exit) {
this.$router.go(-1);
}
@ -180,16 +205,16 @@
survey.onComplete.add((sender, options) => {
saveSurvey(sender, {
...options,
exit: true
exit: true,
});
});
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;
},
@ -201,6 +226,20 @@
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: {
@ -214,23 +253,14 @@
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;
this.surveyData = data.survey;
this.loadSurveyFromServer(data.survey);
const module = data.survey.module;
this.$apollo.addSmartQuery('module', {
query: MODULE_QUERY,
variables: {
slug: module.slug
slug: module.slug,
},
});
}
@ -242,7 +272,7 @@
</script>
<style scoped lang="scss">
@import "~styles/helpers";
@import '~styles/helpers';
.survey-page {
max-width: 800px;