From aeab246aee6ba867e9b8ec12d24564ffddaa9b7c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 5 Sep 2019 15:22:01 +0200
Subject: [PATCH] Add solutions to survey

---
 .../components/content-blocks/Solution.vue    |  2 +-
 client/src/pages/survey.vue                   | 26 +++++++++++++++----
 client/src/styles/_solutions.scss             | 11 ++++++++
 client/src/styles/main.scss                   |  1 +
 4 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 client/src/styles/_solutions.scss

diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
index 48fa6e66..1c54315f 100644
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@@ -5,7 +5,7 @@
       <template v-else>ausblenden</template>
     </a>
     <transition name="fade">
-      <p class="solution__text fade" data-cy="solution-text" v-if="visible" v-html="value.text">
+      <p class="solution__text solution-text fade" data-cy="solution-text" v-if="visible" v-html="value.text">
       </p>
     </transition>
   </div>
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index 2f1cf817..cce50931 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -2,10 +2,8 @@
   <div class="survey-page">
     <h1 class="survey-page__title">{{title}}</h1>
     <survey :survey='survey'></survey>
-    <div>
-      Answers:
-      {{answers}}
-    </div>
+
+    <solution :value="solution"></solution>
     <div v-if="surveyComplete">
       <a class="button button--primary" @click="reopen">Übung bearbeiten</a>
     </div>
@@ -18,6 +16,7 @@
 
   import SURVEY_QUERY from '@/graphql/gql/surveyQuery.gql';
   import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
+  import Solution from '@/components/content-blocks/Solution';
 
   const Survey = SurveyVue.Survey;
 
@@ -25,6 +24,7 @@
     props: ['id'],
 
     components: {
+      Solution,
       Survey
     },
 
@@ -39,9 +39,25 @@
       surveyComplete() {
         return this.survey && this.survey.isCompleted
       },
+      solution() {
+        return {
+          text: this.answers.reduce((previous, answer) => {
+            if (!answer.answer) {
+              return previous
+            }
+            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((prev, element) => {
-          if (!element || !element.elements) { return prev }
+          if (!element || !element.elements) {
+            return prev
+          }
           return [...prev, ...element.elements.reduce((pr, question) => {
             return [...pr, {title: question.title, answer: question.correctAnswer}];
           }, [])];
diff --git a/client/src/styles/_solutions.scss b/client/src/styles/_solutions.scss
new file mode 100644
index 00000000..ae034f0c
--- /dev/null
+++ b/client/src/styles/_solutions.scss
@@ -0,0 +1,11 @@
+.solution-text {
+  &__heading {
+    @include heading-4;
+    color: $color-silver-dark;
+  }
+
+  &__answer {
+    @include regular-text;
+    margin-bottom: $medium-spacing;
+  }
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index e6984b50..33a6b9a7 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -17,3 +17,4 @@
 @import "navigation";
 @import "survey";
 @import "visibility";
+@import "solutions";