Use backend on theses page

This commit is contained in:
Christoph Lienhard 2020-06-14 03:13:52 +02:00
parent 13be951160
commit 0347a54ac0
3 changed files with 56 additions and 12 deletions

View File

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

View File

@ -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()
}
},

33
src/app/euromat/helper.js Normal file
View File

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