Merged in feature/survey-knockout-2022-10-25 (pull request #124)

Feature/survey knockout 2022 10 25
This commit is contained in:
Ramon Wenger 2022-10-25 12:13:37 +00:00
commit bd3646f4a3
4 changed files with 49 additions and 20 deletions

View File

@ -49,7 +49,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",
@ -72,7 +72,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",
@ -13991,6 +13992,11 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/knockout": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/knockout/-/knockout-3.5.1.tgz",
"integrity": "sha512-wRJ9I4az0QcsH7A4v4l0enUpkS++MBx0BnL/68KaLzJg7x1qmbjSlwEoCNol7KTYZ+pmtI7Eh2J0Nu6/2Z5J/Q=="
},
"node_modules/lazy-ass": { "node_modules/lazy-ass": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz", "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
@ -18171,12 +18177,18 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/survey-vue": { "node_modules/survey-core": {
"version": "1.9.54", "version": "1.9.41",
"resolved": "https://registry.npmjs.org/survey-vue/-/survey-vue-1.9.54.tgz", "resolved": "https://registry.npmjs.org/survey-core/-/survey-core-1.9.41.tgz",
"integrity": "sha512-X2wmGJopf42ioyKtTIKBjUF9GKbsJg01AdvwwpU4s2vPRfudk3j5JBAuDJw/WkIrtkWLXJvlKlCZjOKNaGv0RA==", "integrity": "sha512-JhJa27EPXqEPTZY1PR+4JwCKBgevGlHca2f6+R5QRCzeH5Xq7l+Fbg8HZCaPb967k1hSfCUUC8g07uUmO3oXLQ=="
},
"node_modules/survey-knockout-ui": {
"version": "1.9.41",
"resolved": "https://registry.npmjs.org/survey-knockout-ui/-/survey-knockout-ui-1.9.41.tgz",
"integrity": "sha512-Dj5Yk/2iNZ2YzGxzX7gNOsRAW8qEnce4xr6YyeXKBHwV1VGjFC6jdTFeuE4EBmuFhZnIskjS0jRPH1tlBOm13Q==",
"dependencies": { "dependencies": {
"vue": "^2.1.10" "knockout": "^3.5.0",
"survey-core": "*"
} }
}, },
"node_modules/svgo": { "node_modules/svgo": {
@ -30498,6 +30510,11 @@
"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz", "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==" "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ=="
}, },
"knockout": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/knockout/-/knockout-3.5.1.tgz",
"integrity": "sha512-wRJ9I4az0QcsH7A4v4l0enUpkS++MBx0BnL/68KaLzJg7x1qmbjSlwEoCNol7KTYZ+pmtI7Eh2J0Nu6/2Z5J/Q=="
},
"lazy-ass": { "lazy-ass": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz", "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
@ -33562,12 +33579,18 @@
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
}, },
"survey-vue": { "survey-core": {
"version": "1.9.54", "version": "1.9.41",
"resolved": "https://registry.npmjs.org/survey-vue/-/survey-vue-1.9.54.tgz", "resolved": "https://registry.npmjs.org/survey-core/-/survey-core-1.9.41.tgz",
"integrity": "sha512-X2wmGJopf42ioyKtTIKBjUF9GKbsJg01AdvwwpU4s2vPRfudk3j5JBAuDJw/WkIrtkWLXJvlKlCZjOKNaGv0RA==", "integrity": "sha512-JhJa27EPXqEPTZY1PR+4JwCKBgevGlHca2f6+R5QRCzeH5Xq7l+Fbg8HZCaPb967k1hSfCUUC8g07uUmO3oXLQ=="
},
"survey-knockout-ui": {
"version": "1.9.41",
"resolved": "https://registry.npmjs.org/survey-knockout-ui/-/survey-knockout-ui-1.9.41.tgz",
"integrity": "sha512-Dj5Yk/2iNZ2YzGxzX7gNOsRAW8qEnce4xr6YyeXKBHwV1VGjFC6jdTFeuE4EBmuFhZnIskjS0jRPH1tlBOm13Q==",
"requires": { "requires": {
"vue": "^2.1.10" "knockout": "^3.5.0",
"survey-core": "*"
} }
}, },
"svgo": { "svgo": {

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",

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() {

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;
}