Get survey from server and display it dynamically

client/src/graphql/gql/surveyQuery.gql

@@ -0,0 +1,10 @@
+query SurveyQuery($id: ID!) {
+  survey(id: $id) {
+    id
+    title
+    data
+    answer {
+      data
+    }
+  }
+}

client/src/main.js

@@ -108,7 +108,6 @@ Vue.use(VeeValidate, {
 
 Vue.filter('date', dateFilter);
 
-
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

client/src/pages/survey.vue

@@ -1,37 +1,107 @@
 <template>
-  <div>
+  <div class="survey-page">
-    <h1>Survey</h1>
+    <h1 class="survey-page__title">{{title}}</h1>
     <survey :survey='survey'></survey>
   </div>
 </template>
 
 <script>
   import * as SurveyVue from 'survey-vue';
+  import {css} from '@/survey.config'
+
+  import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
+  import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
 
   const Survey = SurveyVue.Survey;
 
   export default {
+    props: ['id'],
+
     components: {
       Survey
     },
 
     data() {
-      let json = {"pages":[{"name":"First page","elements":[{"type":"text","name":"question1","title":"Some question"},{"type":"checkbox","name":"question2","title":"Did you like the above question?","choices":[{"value":"item1","text":"Yes"},{"value":"item2","text":"No"},{"value":"item3","text":"Maybe?"}]},{"type":"radiogroup","name":"question3","title":"How many more questions would you like?","choices":[{"value":"item1","text":"Many"},{"value":"item2","text":"A lot!"},{"value":"item3","text":"Tons"}]},{"type":"expression","name":"question12","visibleIf":"{question3} = \"item2\"","title":"Many","expression":"'Hallo {question1}'","commentText":"Other (describe)"},{"type":"dropdown","name":"question4","title":"Are you tired yet?","hasOther":true,"choices":[{"value":"item1","text":"No"},{"value":"item2","text":"Certainly not!"}]},{"type":"comment","name":"question5","title":"Any comments?"},{"type":"rating","name":"question6","title":"How great is this quiz so far?"},{"type":"imagepicker","name":"question7","title":"Which image would describe this quiz best?","choices":[{"value":"lion","imageLink":"https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"},{"value":"giraffe","imageLink":"https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"},{"value":"panda","imageLink":"https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"},{"value":"camel","imageLink":"https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"}]},{"type":"boolean","name":"question8","title":"Vote for this quiz?"},{"type":"html","name":"question9","html":"<h1>Look at you go!</h1>"},{"type":"expression","name":"question10","title":"What is this?","expression":"'{question1}'","displayStyle":"currency","currency":"CHF","commentText":"Other (describe)"},{"type":"matrix","name":"question11","columns":["Column 1","Column 2","Column 3"],"rows":["Row 1","Row 2"]}]},{"name":"Second Page","elements":[{"type":"dropdown","name":"question13","hasOther":true,"choices":["item1","item2","item3"]}],"title":"Dini Mer","description":"Hallo Velo","questionsOrder":"random"}]};
-
-      let survey = new SurveyVue.Model(json);
-
-      survey.onComplete.add((sender, options) => {
-        console.log('complete');
-        console.log(sender);
-        console.log(options);
-        sender.clear(false);
-
-        sender.mode = 'display';
-      });
-
       return {
-        survey
+        // survey
+        survey: this.initSurvey(),
+        title: ''
+      }
+    },
+
+    methods: {
+      initSurvey(data, answer) {
+        let survey = new SurveyVue.Model(data);
+        survey.data = answer;
+
+        survey.onComplete.add((sender, options) => {
+          console.log(survey.data);
+          sender.clear(false);
+
+          sender.mode = 'display';
+
+          this.$apollo.mutate({
+            mutation: UPDATE_ANSWER,
+            variables: {
+              input: {
+                answer: {
+                  surveyId: this.id,
+                  data: JSON.stringify(survey.data)
+                }
+              }
+            }
+          });
+        });
+
+        survey.css = css;
+
+        return survey;
+      }
+    },
+
+    apollo: {
+      survey: {
+        query: SURVEY_QUERY,
+        variables() {
+          return {
+            id: this.id
+          }
+        },
+        manual: true,
+        result({data, loading, networkStatus}) {
+          if (!loading) {
+            console.log(data);
+            let json = JSON.parse(data.survey.data);
+            let answer = {};
+            if (data.survey.answer.data && data.survey.answer) {
+              answer = JSON.parse(data.survey.answer.data);
+            }
+
+            console.log(json);
+            this.survey = this.initSurvey(json, answer);
+            this.title = data.survey.title;
+          }
+        },
       }
     }
   }
 </script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .survey-page {
+    max-width: 800px;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-row-gap: $large-spacing;
+    justify-self: center;
+    padding: 100px 0;
+
+    &__title {
+      @include heading-2;
+      margin: 0;
+    }
+  }
+</style>

client/src/router/index.js

@@ -25,6 +25,7 @@ import Router from 'vue-router'
 import editProject from '@/pages/editProject'
 import newProject from '@/pages/newProject'
 import surveyPage from '@/pages/survey'
+// import styleGuidePage from '@/pages/styleguide'
 
 import store from '@/store/index';
 
@@ -87,9 +88,11 @@ const routes = [
     ]
   },
   {
-    path: '/survey',
+    path: '/survey/:id',
-    component: surveyPage
+    component: surveyPage,
+    props: true
   },
+  // {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];
 

client/src/styles/_survey.scss

@@ -0,0 +1,28 @@
+.survey {
+  &__panel-title {
+    @include main-title;
+    margin-bottom: $large-spacing*2;
+    span {
+     @include main-title;
+    }
+  }
+
+  &__panel-description {
+    @include regular-paragraph;
+    line-height: 1.5;
+    margin-bottom: $large-spacing;
+  }
+
+  &__question-title {
+    @include heading-4;
+    margin-bottom: $medium-spacing;
+    span {
+      @include heading-4;
+    }
+  }
+
+  &__input {
+    width: 100%;
+    margin-bottom: $medium-spacing;
+  }
+}

client/src/styles/main.scss

@@ -14,3 +14,4 @@
 @import "article";
 @import "actions";
 @import "top-navigation";
+@import "survey";