feat: Ajout de la traduction par défaut

src/components/Score.vue

@@ -32,12 +32,11 @@ function formatAnswers(answers) {
       );
       return {
         id: answer.id,
-        title: translation.length > 0 ? translation[0].title : "",
+        title: translation.length > 0 ? translation[0].title : answer.title,
         weight: answer.weight,
         image: answer.image,
       };
     })
-    .filter((answer) => answer.title);
 }
 
 function formatScore(score) {
@@ -51,12 +50,11 @@ function formatScore(score) {
       return {
         id: question.id,
         weight: answers[0].weight,
-        title: translation.length > 0 ? translation[0].title : "",
+        title: translation.length > 0 ? translation[0].title : question.title,
         answers: answers,
         splide: ref(),
       };
     })
-    .filter((question) => question.title);
 }
 
 const title = score ? score.title : "";

src/components/ScoresList.vue

@@ -3,33 +3,39 @@ import data from "@/data.json";
 import { useStore } from "@/stores";
 
 const store = useStore();
-const language = store.language;
 
 const translationKey = "languages_id";
 const scores = data.filter((score) => {
   return (
     !!score.translations.find(
-      (translation) => translation[translationKey] == language
+      (translation) => translation[translationKey] == store.language
     ) &&
     score.results.length &&
     score.questions.length
   );
 });
 function getTranslation(translations, key) {
-  return translations.find((translation) => translation[key] == language);
+  return translations.find((translation) => translation[key] == store.language);
+}
+function changeLanguage() {
+  store.changeLanguage()
 }
 </script>
 
 <template>
   <header>
     <h1>Ceiba Scores App</h1>
+    <ul>
+      <li v-if="store.language == 'en-US'" @click="changeLanguage">🇫🇷</li>
+      <li v-if="store.language == 'fr-FR'" @click="changeLanguage">🇺🇸</li>
+    </ul>
   </header>
   <main>
     <div class="container" v-if="scores">
       <ul>
         <li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
           <router-link :to="{ name: 'score', params: { id: score.id } }">{{
-            getTranslation(score.translations, "languages_id").title1
+            getTranslation(score.translations, "languages_id").title
           }}</router-link>
         </li>
       </ul>
@@ -42,7 +48,7 @@ header
   height: var(--header-size)
   overflow: hidden
   display: flex
-  justify-content: center
+  justify-content: space-around
   align-items: center
   border-bottom: 2px solid var(--color-text)
   background: var(--color-green)
@@ -50,6 +56,20 @@ header
   h1
     text-align: center
 
+  ul
+    margin: 0
+    padding: 0
+    list-style: none
+    text-align: center
+    font-size: 1.5rem
+
+    a
+      text-decoration: none
+
+    .hidden
+      display: none
+
+
 main
   width: 100%
   height: calc(100% - var(--header-size))

src/stores.js

@@ -8,4 +8,9 @@ export const useStore = defineStore({
   persist: {
     enabled: true,
   },
+  actions: {
+    changeLanguage() {
+      this.language = this.language == "fr-FR" ? "en-US" : "fr-FR"
+    },
+  },
 });