107 lines
3.1 KiB
Vue
107 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<team-header/>
|
||
|
|
<hr/>
|
||
|
|
<div v-if="!loading">
|
||
|
|
<span class="date">{{ quiz.createdDate | formatDate }}</span>
|
||
|
|
<quiz-axe-details
|
||
|
|
v-for="axe in axes"
|
||
|
|
:key="axe.identifier"
|
||
|
|
:axe="axe"
|
||
|
|
:score="getScore(axe)"
|
||
|
|
:responses="getResponses(axe)"/>
|
||
|
|
</div>
|
||
|
|
<loader v-else class="center"/>
|
||
|
|
<div class="button-container">
|
||
|
|
<nuxt-link class="button orange" to="/dashboard">Retour à l'accueil</nuxt-link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import {Component, Vue} from "nuxt-property-decorator";
|
||
|
|
import {AxiosResponse} from "axios";
|
||
|
|
import {RepositoryFactory} from "~/repositories/RepositoryFactory";
|
||
|
|
import {Quiz, ResponseWithQuestion, Score} from "~/repositories/models/quiz.model";
|
||
|
|
import QuizAxeDetails from "~/components/QuizAxeDetails.vue";
|
||
|
|
import {Axe} from "~/repositories/models/axe.model";
|
||
|
|
import {RestResponse} from "~/repositories/models/rest-response.model";
|
||
|
|
@Component({
|
||
|
|
components: {QuizAxeDetails}
|
||
|
|
})
|
||
|
|
export default class Result extends Vue {
|
||
|
|
|
||
|
|
readonly axeRepository = RepositoryFactory.get('axe');
|
||
|
|
readonly quizRepository = RepositoryFactory.get('quiz');
|
||
|
|
|
||
|
|
private axes: Axe[] = [];
|
||
|
|
private quiz: Quiz | null = null;
|
||
|
|
private scores: Score[] = [];
|
||
|
|
private responses: ResponseWithQuestion[] = [];
|
||
|
|
private loading = false;
|
||
|
|
|
||
|
|
created() {
|
||
|
|
if (!this.$route.query.quiz) {
|
||
|
|
this.$router.push("/dashboard");
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
this.loading = true;
|
||
|
|
const quizId = Number.parseInt(this.$route.query.quiz as string);
|
||
|
|
this.quizRepository.findById(quizId)
|
||
|
|
.then((response: AxiosResponse<Quiz>) => {
|
||
|
|
this.quiz = response.data;
|
||
|
|
return response;
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
return this.quizRepository.findScores(quizId)
|
||
|
|
.then((response: AxiosResponse<Score[]>) => {
|
||
|
|
this.scores = response.data;
|
||
|
|
return response;
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
return this.quizRepository.findResponses(quizId)
|
||
|
|
.then((response: AxiosResponse<RestResponse<ResponseWithQuestion>>) => {
|
||
|
|
this.responses = response.data._embedded.responses;
|
||
|
|
return response;
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
return this.axeRepository.findAll()
|
||
|
|
.then((response: AxiosResponse<RestResponse<Axe>>) => {
|
||
|
|
this.axes = response.data._embedded.axes;
|
||
|
|
return response;
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
this.loading = false;
|
||
|
|
});
|
||
|
|
} catch (e: any) {
|
||
|
|
console.info("error", e);
|
||
|
|
this.loading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getScore(axe: Axe) {
|
||
|
|
return this.scores.find(value => value.axeIdentifier === axe.identifier);
|
||
|
|
}
|
||
|
|
|
||
|
|
getResponses(axe: Axe) {
|
||
|
|
console.info(this.responses)
|
||
|
|
return this.responses.filter((response: ResponseWithQuestion) => response.axeIdentifier === axe.identifier);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "assets/css/color";
|
||
|
|
@import "assets/css/font";
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: $tertiary-font-size;
|
||
|
|
color: $gray_4;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|