feat: add frontend

frontend/pages/details.vue

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