feat: review model to retrieve all the questions with a single query

- update initial data
- add description field to the axe

frontend/components/QuizPart.vue

@@ -6,15 +6,19 @@
         <span class="part-number">{{ axeNumber }}</span>
         <span>{{ title }}</span>
       </h1>
+      <div v-if="description" class="description">{{ description }}</div>
       <div class="icon">
         <img :src="icon" width="200px" alt="" aria-hidden="true"/>
       </div>
     </header>
     <section v-for="question in questions" :key="question._links.self.href" class="question">
-      <details>
+      <details v-if="question.description">
         <summary> {{ question.label }}</summary>
         <p>{{ question.description }}</p>
       </details>
+      <div v-else class="title">
+       {{ question.label }}
+      </div>
       <div class="rating">
         <rating :color="color" :initial-value="getCurrentScore(question)" @rate="rate => onRate(rate, question)" />
       </div>
@@ -36,6 +40,11 @@ export default class Quiz extends Vue {
   })
   private title!: string;
 
+  @Prop({
+    required: false
+  })
+  private description!: string;
+
   @Prop({
     required: true
   })
@@ -132,15 +141,26 @@ $size: 31px;
   margin: $small;
 }
 
+.description {
+  color: $gray_3;
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+
 .question {
   width: 100%;
 }
-.question details {
+.question details,
+.question .title {
   margin-bottom: $x_small;
 }
-.question details summary {
+.question details summary,
+.question .title {
   font-weight: 700;
   font-size: $title-font-size;
+}
+
+.question details summary {
   margin-bottom: $xxx_small;
 }
 

frontend/pages/dashboard.vue

@@ -37,7 +37,7 @@ import {Component, Vue} from "vue-property-decorator";
 import {AxiosResponse} from "axios";
 import {RepositoryFactory} from "~/repositories/RepositoryFactory";
 import {RestResponse} from "~/repositories/models/rest-response.model";
-import {Quiz, Score} from "~/repositories/models/quiz.model";
+import {Quiz} from "~/repositories/models/quiz.model";
 
 @Component
 export default class History extends Vue {
@@ -52,12 +52,6 @@ export default class History extends Vue {
     await this.quizRepository.findMine().then((response: AxiosResponse<RestResponse<Quiz>>) => {
       this.quizzes = response.data._embedded.quizzes;
     });
-    for (const quiz of this.quizzes)  {
-      await this.quizRepository.findScores(quiz.id)
-        .then((value: AxiosResponse<Score[]>) => {
-          quiz.scores = value.data;
-        });
-    }
     this.currentResult = this.quizzes.length > 0 ? this.quizzes[0] : null;
     this.loading = false;
   }

frontend/pages/details.vue

@@ -26,6 +26,7 @@ import {Quiz, ResponseWithQuestion, Score} from "~/repositories/models/quiz.mode
 import QuizAxeDetails from "~/components/QuizAxeDetails.vue";
 import {Axe} from "~/repositories/models/axe.model";
 import {RestResponse} from "~/repositories/models/rest-response.model";
+
 @Component({
   components: {QuizAxeDetails}
 })
@@ -36,7 +37,6 @@ export default class Result extends Vue {
 
   private axes: Axe[] = [];
   private quiz: Quiz | null = null;
-  private scores: Score[] = [];
   private responses: ResponseWithQuestion[] = [];
   private loading = false;
 
@@ -50,28 +50,15 @@ export default class Result extends Vue {
       this.quizRepository.findById(quizId)
         .then((response: AxiosResponse<Quiz>) => {
           this.quiz = response.data;
+          this.responses = response.data._embedded.responses;
           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;
-          });
+              this.axes = response.data._embedded.axes;
+              return response;
+            });
         })
         .finally(() => {
           this.loading = false;
@@ -82,8 +69,12 @@ export default class Result extends Vue {
     }
   }
 
-  getScore(axe: Axe) {
-    return this.scores.find(value => value.axeIdentifier === axe.identifier);
+  getScore(axe: Axe): Score {
+    const responses = this.getResponses(axe);
+    return {
+      axeIdentifier: axe.identifier,
+      scoreAvg: responses.reduce((total, response) => total + response.score, 0) / responses.length
+    };
   }
 
   getResponses(axe: Axe) {

frontend/pages/quiz.vue

@@ -7,6 +7,7 @@
       <quiz-part
         :key="currentAxe.identifier" :axe-number="currentAxe.identifier" :total-axes="axes.length"
         :title="currentAxe.title"
+        :description="currentAxe.description"
         :color="currentAxe.color"
         :icon="'balise_' + currentAxe.identifier + '.svg'"
         :questions="questions.get(currentAxe.identifier)"
@@ -43,7 +44,7 @@
 import {AxiosResponse} from "axios";
 import {Component, Vue} from "nuxt-property-decorator";
 import {RepositoryFactory} from "~/repositories/RepositoryFactory";
-import {Axe} from "~/repositories/models/axe.model";
+import {AxeWithQuestions} from "~/repositories/models/axe.model";
 import {RestResponse} from "~/repositories/models/rest-response.model";
 import {Question} from "~/repositories/models/question.model";
 import {Quiz} from "~/repositories/models/quiz.model";
@@ -53,10 +54,9 @@ import {quizStore} from "~/utils/store-accessor";
 export default class Login extends Vue {
 
   readonly axeRepository = RepositoryFactory.get("axe");
-  readonly questionRepository = RepositoryFactory.get("question");
 
-  private axes: Axe[] = [];
-  private currentAxe?: Axe;
+  private axes: AxeWithQuestions[] = [];
+  private currentAxe?: AxeWithQuestions | undefined;
   private currentAxeIdentifier = 1;
   private questions: Map<number, Question[]> = new Map<number, []>();
   private loading = true;
@@ -67,28 +67,17 @@ export default class Login extends Vue {
     this.loading = true;
     this.axeRepository
       .findAll()
-      .then((response: AxiosResponse<RestResponse<Axe>>) => {
+      .then((response: AxiosResponse<RestResponse<AxeWithQuestions>>) => {
         this.axes = response.data._embedded.axes;
-        const promises: any[] = [];
         this.axes.forEach(axe => {
-          promises.push(
-            this.questionRepository
-              .findAllByAxeId(axe.identifier)
-              .then((response: AxiosResponse<RestResponse<Question>>) => {
-                return {
-                  axeId: axe.identifier,
-                  questions: response.data._embedded.questions
-                };
-              }));
-        });
-        Promise.all(promises).then((axeQuestions) => {
-          axeQuestions.forEach(axeQuestion => {
-            this.questions.set(axeQuestion.axeId, axeQuestion.questions)
-          });
-          quizStore.initialize(this.questions);
-          this.initializeState();
-          this.loading = false;
+          this.questions.set(axe.identifier, axe.questions);
         });
+        this.initializeState();
+        quizStore.initialize(this.questions);
+
+      })
+      .finally(() => {
+        this.loading = false;
       });
   }
 

frontend/repositories/axeRepository.ts

@@ -1,9 +1,9 @@
-import {Axe} from "~/repositories/models/axe.model";
 import {RestResponse} from "~/repositories/models/rest-response.model";
 import {$axios} from "~/utils/api";
+import {AxeWithQuestions} from "~/repositories/models/axe.model";
 
 export default {
   findAll() {
-    return $axios.get<RestResponse<Axe>>("/axes");
+    return $axios.get<RestResponse<AxeWithQuestions>>("/axes/search/me");
   }
 }

frontend/repositories/models/axe.model.ts

@@ -1,8 +1,19 @@
 import {RestLinks} from "~/repositories/models/rest-response.model";
+import {Question} from "~/repositories/models/question.model";
 
 export interface Axe extends RestLinks {
   identifier: number;
   shortTitle: string;
+  description: string;
   title: string;
   color: string;
 }
+
+export interface AxeWithQuestions extends RestLinks {
+  identifier: number;
+  shortTitle: string;
+  description: string;
+  title: string;
+  color: string;
+  questions: Question[];
+}

frontend/repositories/models/quiz.model.ts

@@ -5,19 +5,6 @@ export interface Score {
   axeIdentifier: number;
 }
 
-export interface Quiz extends RestLinks {
-  id: number;
-  createdDate: string;
-  scores: Score[];
-}
-
-export interface Response {
-  axeId: number;
-  questionId: number;
-  score?: number;
-  comment?: string;
-}
-
 export interface ResponseWithQuestion extends RestLinks {
   axeIdentifier: number;
   question: string;
@@ -25,6 +12,22 @@ export interface ResponseWithQuestion extends RestLinks {
   comment: string;
 }
 
+export interface Quiz extends RestLinks {
+  id: number;
+  createdDate: string;
+  scores: Score[];
+  _embedded: {
+    responses: ResponseWithQuestion[]
+  };
+}
+
+export interface Response {
+  axeId: number;
+  questionId: number;
+  score?: number;
+  comment?: string;
+}
+
 export interface QuizRate {
   score?: number;
   comment?: string;