From 0347a54ac0730511a6d1502f1b5348b0d11a0010 Mon Sep 17 00:00:00 2001
From: Christoph Lienhard <christoph-lienhard@gmx.de>
Date: Sun, 14 Jun 2020 03:13:52 +0200
Subject: [PATCH] Use backend on theses page

---
 package.json                          |  2 +-
 src/app/euromat/components/theses.vue | 33 ++++++++++++++++++---------
 src/app/euromat/helper.js             | 33 +++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 12 deletions(-)
 create mode 100644 src/app/euromat/helper.js

diff --git a/package.json b/package.json
index 5f59fcf..930d07f 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "serve": "npm run svg && vue-cli-service serve",
     "build": "npm run svg && npm run admin && npm run data && vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "lint": "vue-cli-service lint --fix",
     "test:unit": "vue-cli-service test:unit",
     "svg": "vsvg -s ./src/assets/svg -t ./src/assets/icons",
     "admin": "node bin/admin-yml"
diff --git a/src/app/euromat/components/theses.vue b/src/app/euromat/components/theses.vue
index 4994991..8a62f8b 100644
--- a/src/app/euromat/components/theses.vue
+++ b/src/app/euromat/components/theses.vue
@@ -1,12 +1,12 @@
 <template>
-  <section class="theses">
+  <section v-if="thesesCount > 0 && theses.length > 0" class="theses">
     <div class="header-progress">
       <div>
         <span class="progress-current">{{ currentThesisStep }}</span>
         <span>/{{ thesesCount }}</span>
       </div>
       <button
-        :disabled="currentThesis === 0"
+        :disabled="currentThesis === 1"
         class="btn-dark btn-small"
         type="button"
         @click="goBack"
@@ -35,17 +35,22 @@
             type="button"
             @click="submitAnswer(optionSkip)"
           >
-            {{ optionSkip.label }} <feather-corner-up-right />
+            {{ optionSkip.label }}
+            <feather-corner-up-right />
           </button>
         </div>
       </div>
     </div>
   </section>
+  <section v-else>
+    <span>Loading...</span>
+  </section>
 </template>
 
 <script>
-  import { options, theses } from '@/data'
+  import { options } from '@/data'
   import { getTranslatedUrl } from '@/i18n/helper'
+  import { apolloTheses, apolloThesesCount } from '@/app/euromat/helper'
 
   export default {
     name: 'EuroMat',
@@ -63,12 +68,18 @@
 
     data () {
       return {
-        currentThesis: 0,
-        thesesCount: theses.length,
+        currentThesis: 1,
+        theses: [],
+        thesesCount: 0,
         answers: []
       }
     },
 
+    apollo: {
+      theses: apolloTheses,
+      thesesCount: apolloThesesCount
+    },
+
     computed: {
       isEmbedded () {
         return (
@@ -77,16 +88,16 @@
         )
       },
       currentThesisStep () {
-        return this.currentThesis + 1
+        return this.currentThesis
       },
       thesisTitle () {
-        if (this.currentThesis === this.thesesCount) {
+        if (this.currentThesis > this.thesesCount) {
           return
         }
         return this.getThesis(this.currentThesis).thesis[this.$i18n.locale]
       },
       thesisCategory () {
-        if (this.currentThesis === this.thesesCount) {
+        if (this.currentThesis > this.thesesCount) {
           return
         }
         return this.getThesis(this.currentThesis).category[this.$i18n.locale]
@@ -118,7 +129,7 @@
         }
       },
       getThesis (id) {
-        return theses.find(t => t.id === id)
+        return this.theses.find(t => t.id === id)
       },
       goBack () {
         const thesis = this.getThesis(this.currentThesis)
@@ -138,7 +149,7 @@
         event && event.target.blur()
         window.scrollTo(0, 0)
 
-        if (this.currentThesis === this.thesesCount) {
+        if (this.currentThesis > this.thesesCount) {
           this.forwardToResults()
         }
       },
diff --git a/src/app/euromat/helper.js b/src/app/euromat/helper.js
new file mode 100644
index 0000000..324457e
--- /dev/null
+++ b/src/app/euromat/helper.js
@@ -0,0 +1,33 @@
+import gql from 'graphql-tag'
+
+export const apolloTheses = {
+  query: gql`{
+    allQuestions(orderBy: ID_ASC) {
+      nodes {
+        category: categoryByCategoryId {
+          title
+        }
+        text
+        id
+      }
+    }
+  }`,
+  update: data => data.allQuestions.nodes.map(node => ({
+    id: node.id,
+    thesis: {
+      de: node.text
+    },
+    category: {
+      de: node.category.title
+    }
+  }))
+}
+
+export const apolloThesesCount = {
+  query: gql`{
+    allQuestions {
+      totalCount
+    }
+  }`,
+  update: data => data.allQuestions.totalCount
+}