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

Switch to the knockout version of SurveyJS 

The current SurveyVue plugin only works with Vue 2 and prevents us from
upgrading.
This commit is contained in:
Ramon Wenger 2022-07-25 21:47:22 +02:00
parent 8555e2c6ed
commit f1cc2d6616
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/package.json
View File

@ -66,7 +66,7 @@
"eslint-plugin-vue": "^8.6.0", "eslint-plugin-vue": "^8.6.0",
"eslint-webpack-plugin": "^3.2.0", "eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"graphql": "^16.1.0", "graphql": "^16.3.0",
"graphql-config": "^4.3.0", "graphql-config": "^4.3.0",
"graphql-tag": "^2.10.1", "graphql-tag": "^2.10.1",
"graphql-tools": "^8.2.5", "graphql-tools": "^8.2.5",
@ -89,7 +89,8 @@
"sass-loader": "^12.6.0", "sass-loader": "^12.6.0",
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.8.5", "shelljs": "^0.8.5",
"survey-vue": "^1.9.2", "survey-core": "^1.9.41",
"survey-knockout-ui": "^1.9.41",
"ts-loader": "^8.3.0", "ts-loader": "^8.3.0",
"typescript": "^4.5.4", "typescript": "^4.5.4",
"uploadcare-widget": "^3.6.0", "uploadcare-widget": "^3.6.0",

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

@ -3,7 +3,7 @@
<h1 class="survey-page__title"> <h1 class="survey-page__title">
{{ title }} {{ title }}
</h1> </h1>
<survey :survey="survey" /> <div id="survey" />
<solution <solution
:value="solution" :value="solution"
@ -21,6 +21,9 @@
<script> <script>
import {css} from '@/survey.config'; import {css} from '@/survey.config';
import gql from 'graphql-tag'; 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 SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql'; import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql'; import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
@ -30,11 +33,8 @@
import {meQuery} from '@/graphql/queries'; import {meQuery} from '@/graphql/queries';
import * as SurveyVue from 'survey-vue';
const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'); const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
const {Survey, Model} = SurveyVue;
const MODULE_QUERY = gql` const MODULE_QUERY = gql`
query ModuleSolutions($slug: String) { query ModuleSolutions($slug: String) {
module(slug: $slug) { module(slug: $slug) {
@ -46,10 +46,8 @@
export default { export default {
props: ['id'], props: ['id'],
components: { components: {
Solution, Solution,
Survey,
}, },
data() { data() {
@ -191,6 +189,7 @@
survey.showProgressBar = 'bottom'; survey.showProgressBar = 'bottom';
survey.pageNextText = 'Speichern & Weiter'; survey.pageNextText = 'Speichern & Weiter';
this.$log.debug(survey.data); this.$log.debug(survey.data);
survey.render('survey');
return survey; return survey;
}, },
reopen() { reopen() {

6
client/src/styles/_survey.scss
View File

@ -68,6 +68,7 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
margin-left: auto;
> span { > span {
display: none; display: none;
@ -165,3 +166,8 @@
box-shadow: none; box-shadow: none;
} }
} }
.sv-action {
// manually setting this for the knockout version
display: inline-flex;
}