Use graphql to retrieve parties

This commit is contained in:
Christoph Lienhard 2020-06-27 10:53:13 +02:00
parent f01d492d95
commit 498a02bf1d
5 changed files with 83 additions and 96 deletions

View File

@ -38,7 +38,7 @@
<script>
import { getTranslatedUrl } from '@/i18n/helper'
import { apolloTheses } from '@/app/euromat/helper'
import { apolloTheses } from '@/app/euromat/graphqlQueries'
export default {
name: 'Emphasis',

View File

@ -36,27 +36,9 @@
/>
</router-link>
<div v-if="party.nationalParty" class="party-results-national">
<feather-corner-down-right />
<div class="party-results-national">
<span>
{{ $t('results.nationalParty') }}
<a
class="party-results-national-logo"
:href="party.nationalParty.program"
target="_blank"
rel="noopener"
>
<div v-if="hasPartyLogo(party.nationalParty.token)">
<img
:src="getPartyLogo(party.nationalParty.token)"
:alt="party.nationalParty.name"
:title="party.nationalParty.name"
width="40"
height="40"
>
</div>
<span v-else>{{ party.nationalParty.token }}</span>
</a>
{{ person.name }}
</span>
</div>
</li>
@ -79,28 +61,13 @@
<feather-rotate-cw />
</router-link>
</div>
<div class="results-affiliation">
<a
href="https://www.talkingeurope.com/"
target="_blank"
rel="noopener"
>
<img
:src="talkingEuropeBanner"
title="Talking Europe"
alt="Talking Europe Banner"
>
</a>
</div>
</section>
</template>
<script>
import { IPDATA_URL } from '@/config/api'
import { getTranslatedUrl, getUserLanguage } from '@/i18n/helper'
import { getTranslatedUrl } from '@/i18n/helper'
import { getPartiesWithScores, getTotalMaxPoints } from '@/app/euromat/scoring'
import { parties } from '@/data'
import { apolloPersonsForResults, parseApolloPersonForResults } from '@/app/euromat/graphqlQueries'
export default {
name: 'Results',
@ -109,15 +76,13 @@
'feather-zoom-in': () =>
import('vue-feather-icons/icons/ZoomInIcon' /* webpackChunkName: "icons" */),
'feather-rotate-cw': () =>
import('vue-feather-icons/icons/RotateCwIcon' /* webpackChunkName: "icons" */),
'feather-corner-down-right': () =>
import('vue-feather-icons/icons/CornerDownRightIcon' /* webpackChunkName: "icons" */)
import('vue-feather-icons/icons/RotateCwIcon' /* webpackChunkName: "icons" */)
},
data () {
return {
userCountry: getUserLanguage().country,
scoringGrid: [],
scores: [],
parties: [],
totalMaxPoints: 0
}
@ -132,14 +97,6 @@
this.$route.query.embedded &&
this.$route.query.embedded === 'iframe'
)
},
talkingEuropeBanner () {
try {
return require(`@/assets/talkingeurope/talkingeurope-${this.$i18n.locale}.png`)
} catch (e) {
console.warn('TalkingEurope image not found, defaulting to "en". ', e)
return require(`@/assets/talkingeurope/talkingeurope-en.png`)
}
}
},
@ -156,24 +113,16 @@
}
if (!emphasized) {
this.$router.push({ path: getTranslatedUrl('theses') })
await this.$router.push({ path: getTranslatedUrl('theses') })
}
try {
const ipResponse = await fetch(IPDATA_URL)
const ipData = await ipResponse.json()
if (ipData.country_code) {
this.userCountry = ipData.country_code.toLowerCase()
}
} catch (error) {
console.warn('Unable to fetch geo location:', error)
}
const apolloResponse = await this.$apollo.query(apolloPersonsForResults)
const parties = parseApolloPersonForResults(apolloResponse.data)
const partiesWithScores = getPartiesWithScores(answers, emphasized, parties)
this.parties = partiesWithScores.map(party => ({
token: party.token,
score: party.score,
nationalParty: party['national_parties'][this.userCountry]
score: party.score
}))
.sort((a, b) => a.score - b.score)
.reverse()

View File

@ -0,0 +1,72 @@
import gql from 'graphql-tag'
import { options } from '@/data'
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
}
function getPositionById (id) {
return options.find(option => option.id === id).position
}
export const apolloPersonsForResults = {
query: gql`{
allPeople(condition: {role: CANDYMAT_CANDIDATE}) {
nodes {
firstName
lastName
id
answersByPersonId {
nodes {
position
questionId
text
}
}
}
}
}`
}
export function parseApolloPersonForResults (data) {
return data.allPeople.nodes.map(person => ({
id: person.id,
name: `${person.firstName} ${person.lastName}`,
token: person.firstName.charAt(0) + person.lastName.charAt(0),
positions: person.answersByPersonId.nodes.map(answer => ({
thesis: answer.questionId,
position: getPositionById(answer.position),
statement: {
de: answer.text
}
}))
}))
}

View File

@ -1,33 +0,0 @@
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
}

View File

@ -1 +0,0 @@
export const IPDATA_URL = 'https://api.ipdata.co/?api-key=test'