refactor: handle api models identifiers

frontend/components/QuizPart.vue

@@ -64,11 +64,6 @@ export default class Quiz extends Vue {
   })
   public color !: string;
 
-  // private responses = new Map<string, {
-  //   score?: number;
-  //   comment?: string | null
-  // }>();
-
   get cssVars() {
     return {
       '--color': this.color
@@ -76,21 +71,21 @@ export default class Quiz extends Vue {
   }
 
   onRate(score: number, question: Question) {
-    quizStore.updateScoreResponse({axeId: this.axeNumber, questionId: question._links.self.href, score});
+    quizStore.updateScoreResponse({axeId: this.axeNumber, questionId: question.id, score});
     this.emitRatingState();
   }
 
   onComment(comment: string, question: Question) {
-    quizStore.updateCommentResponse({axeId: this.axeNumber, questionId: question._links.self.href, comment});
+    quizStore.updateCommentResponse({axeId: this.axeNumber, questionId: question.id, comment});
   }
 
   getCurrentScore(question: Question): number | undefined {
-    const rate = quizStore.responses.get(question._links.self.href) as QuizRate;
+    const rate = quizStore.responses.get(question.id) as QuizRate;
     return rate ? rate.score : undefined;
   }
 
   getCurrentComment(question: Question): string | undefined {
-    const rate = quizStore.responses.get(question._links.self.href) as QuizRate;
+    const rate = quizStore.responses.get(question.id) as QuizRate;
     return rate ? rate.comment : undefined;
   }
 

frontend/pages/dashboard.vue

@@ -8,10 +8,8 @@
       <section v-if="currentResult" class="last-quiz">
         <div class="last-quiz-header">
           <span class="date"> {{ currentResult.createdDate | formatDate }}</span>
-          <!--        FIXME remove this dirty trick -->
           <nuxt-link
-            class="link"
-                     :to="{ path: '/details', query: { quiz: currentResult._links.self.href.replace('http://localhost:8080/quizzes/','') }}">
+            class="link" :to="{ path: '/details', query: { quiz: currentResult.id }}">
             + Voir le détail
           </nuxt-link>
         </div>
@@ -55,10 +53,7 @@ export default class History extends Vue {
       this.quizzes = response.data._embedded.quizzes;
     });
     for (const quiz of this.quizzes)  {
-      // FIXME ugly : replace when scores will be handled as a REST resource
-      console.info(quiz);
-      const id = Number.parseInt(quiz._links.self.href.replace("http://localhost:8080/quizzes/", ""));
-      await this.quizRepository.findScores(id)
+      await this.quizRepository.findScores(quiz.id)
         .then((value: AxiosResponse<Score[]>) => {
           quiz.scores = value.data;
         });

frontend/pages/details.vue

@@ -87,7 +87,6 @@ export default class Result extends Vue {
   }
 
   getResponses(axe: Axe) {
-    console.info(this.responses)
     return this.responses.filter((response: ResponseWithQuestion) => response.axeIdentifier === axe.identifier);
   }
 }

frontend/pages/quiz.vue

@@ -130,8 +130,8 @@ export default class Login extends Vue {
       responsesFormatted.push({
         score: value.score ? value.score : 0,
         comment: value.comment,
-        questionId: Number.parseInt(key.replace("http://localhost:8080/questions/", "")) // FIXME use correct url when score will be a REST ressource
-      })
+        questionId: key
+      });
     });
 
     this.saving = true;

frontend/repositories/models/question.model.ts

@@ -1,6 +1,7 @@
 import {RestLinks} from "~/repositories/models/rest-response.model";
 
 export interface Question extends RestLinks {
+  id: number;
   label: string;
   description: string;
 }

frontend/repositories/models/quiz.model.ts

@@ -13,7 +13,7 @@ export interface Quiz extends RestLinks {
 
 export interface Response {
   axeId: number;
-  questionId: string;
+  questionId: number;
   score?: number;
   comment?: string;
 }

frontend/repositories/questionRepository.ts

@@ -1,6 +1,7 @@
+import {AxiosResponse} from "axios";
+import {$axios} from "~/utils/api";
 import {RestResponse} from "~/repositories/models/rest-response.model";
 import {Question} from "~/repositories/models/question.model";
-import {$axios} from "~/utils/api";
 
 export default {
   findAllByAxeId(axeId: number) {
@@ -8,6 +9,12 @@ export default {
       params: {
         id: axeId
       }
+    }).then((response: AxiosResponse<RestResponse<Question>>) => {
+      response.data._embedded.questions.map(question => {
+        question.id = Number(question._links.self.href.replace($axios.defaults.baseURL + "/questions/", ""));
+        return question;
+      });
+      return response;
     });
   }
 }

frontend/repositories/quizRepository.ts

@@ -1,6 +1,7 @@
+import {AxiosResponse} from "axios";
+import {$axios} from "~/utils/api";
 import {RestResponse} from "~/repositories/models/rest-response.model";
 import {Quiz, Response, ResponseWithQuestion, Score} from "~/repositories/models/quiz.model";
-import {$axios} from "~/utils/api";
 
 export default {
 
@@ -9,6 +10,13 @@ export default {
       params: {
         sort: "createdDate,desc"
       }
+    })
+      .then((response: AxiosResponse<RestResponse<Quiz>>) => {
+        response.data._embedded.quizzes.map(quiz => {
+          quiz.id = Number(quiz._links.self.href.replace($axios.defaults.baseURL + "/quizzes/", ""));
+          return quiz;
+        });
+        return response;
       });
   },
 

frontend/store/quiz.ts

@@ -9,15 +9,15 @@ import {QuizRate, Response} from "~/repositories/models/quiz.model";
 })
 export default class Quiz extends VuexModule {
 
-  responses = new Map<string, QuizRate>;
-  questionsRatedPerAxe = new Map<number, { questionId: string; rated: boolean }[]>;
+  responses = new Map<number, QuizRate>;
+  questionsRatedPerAxe = new Map<number, { questionId: number; rated: boolean }[]>;
 
   @Mutation
   initialize(questions: Map<number, Question[]>) {
     questions.forEach((questions, axeId) => this.questionsRatedPerAxe.set(axeId, questions.map(value => {
       return {
-        questionId: value._links.self.href,
-        rated: this.responses.has(value._links.self.href)
+        questionId: value.id,
+        rated: this.responses.has(value.id)
       }
     })));
   }