Use backend on theses page
This commit is contained in:
parent
13be951160
commit
0347a54ac0
|
@ -5,7 +5,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "npm run svg && vue-cli-service serve",
|
"serve": "npm run svg && vue-cli-service serve",
|
||||||
"build": "npm run svg && npm run admin && npm run data && vue-cli-service build",
|
"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",
|
"test:unit": "vue-cli-service test:unit",
|
||||||
"svg": "vsvg -s ./src/assets/svg -t ./src/assets/icons",
|
"svg": "vsvg -s ./src/assets/svg -t ./src/assets/icons",
|
||||||
"admin": "node bin/admin-yml"
|
"admin": "node bin/admin-yml"
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="theses">
|
<section v-if="thesesCount > 0 && theses.length > 0" class="theses">
|
||||||
<div class="header-progress">
|
<div class="header-progress">
|
||||||
<div>
|
<div>
|
||||||
<span class="progress-current">{{ currentThesisStep }}</span>
|
<span class="progress-current">{{ currentThesisStep }}</span>
|
||||||
<span>/{{ thesesCount }}</span>
|
<span>/{{ thesesCount }}</span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
:disabled="currentThesis === 0"
|
:disabled="currentThesis === 1"
|
||||||
class="btn-dark btn-small"
|
class="btn-dark btn-small"
|
||||||
type="button"
|
type="button"
|
||||||
@click="goBack"
|
@click="goBack"
|
||||||
|
@ -35,17 +35,22 @@
|
||||||
type="button"
|
type="button"
|
||||||
@click="submitAnswer(optionSkip)"
|
@click="submitAnswer(optionSkip)"
|
||||||
>
|
>
|
||||||
{{ optionSkip.label }} <feather-corner-up-right />
|
{{ optionSkip.label }}
|
||||||
|
<feather-corner-up-right />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section v-else>
|
||||||
|
<span>Loading...</span>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { options, theses } from '@/data'
|
import { options } from '@/data'
|
||||||
import { getTranslatedUrl } from '@/i18n/helper'
|
import { getTranslatedUrl } from '@/i18n/helper'
|
||||||
|
import { apolloTheses, apolloThesesCount } from '@/app/euromat/helper'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EuroMat',
|
name: 'EuroMat',
|
||||||
|
@ -63,12 +68,18 @@
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
currentThesis: 0,
|
currentThesis: 1,
|
||||||
thesesCount: theses.length,
|
theses: [],
|
||||||
|
thesesCount: 0,
|
||||||
answers: []
|
answers: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
apollo: {
|
||||||
|
theses: apolloTheses,
|
||||||
|
thesesCount: apolloThesesCount
|
||||||
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
isEmbedded () {
|
isEmbedded () {
|
||||||
return (
|
return (
|
||||||
|
@ -77,16 +88,16 @@
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
currentThesisStep () {
|
currentThesisStep () {
|
||||||
return this.currentThesis + 1
|
return this.currentThesis
|
||||||
},
|
},
|
||||||
thesisTitle () {
|
thesisTitle () {
|
||||||
if (this.currentThesis === this.thesesCount) {
|
if (this.currentThesis > this.thesesCount) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
return this.getThesis(this.currentThesis).thesis[this.$i18n.locale]
|
return this.getThesis(this.currentThesis).thesis[this.$i18n.locale]
|
||||||
},
|
},
|
||||||
thesisCategory () {
|
thesisCategory () {
|
||||||
if (this.currentThesis === this.thesesCount) {
|
if (this.currentThesis > this.thesesCount) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
return this.getThesis(this.currentThesis).category[this.$i18n.locale]
|
return this.getThesis(this.currentThesis).category[this.$i18n.locale]
|
||||||
|
@ -118,7 +129,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getThesis (id) {
|
getThesis (id) {
|
||||||
return theses.find(t => t.id === id)
|
return this.theses.find(t => t.id === id)
|
||||||
},
|
},
|
||||||
goBack () {
|
goBack () {
|
||||||
const thesis = this.getThesis(this.currentThesis)
|
const thesis = this.getThesis(this.currentThesis)
|
||||||
|
@ -138,7 +149,7 @@
|
||||||
event && event.target.blur()
|
event && event.target.blur()
|
||||||
window.scrollTo(0, 0)
|
window.scrollTo(0, 0)
|
||||||
|
|
||||||
if (this.currentThesis === this.thesesCount) {
|
if (this.currentThesis > this.thesesCount) {
|
||||||
this.forwardToResults()
|
this.forwardToResults()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
33
src/app/euromat/helper.js
Normal file
33
src/app/euromat/helper.js
Normal 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
|
||||||
|
}
|
Loading…
Reference in a new issue