Frontend: filter displayed questions & quizs depending on locale. ref #…

…360

frontend/src/App.vue

@@ -112,20 +112,28 @@ export default {
     },
   },
 
+  watch: {
+    // eslint-disable-next-line
+    '$i18n.locale' (newLocale, oldLocale) {
+      // reload data (includes updating locale in the store)
+      this.initData();
+    },
+  },
+
   mounted() {
     // set locale
     if (Object.keys(this.$route.query).length) {
       if (Object.keys(this.$route.query).includes('locale')) {
         this.$i18n.locale = this.$route.query.locale || process.env.VUE_APP_I18N_LOCALE;
       }
     }
-
     // load data
     this.initData();
   },
 
   methods: {
     initData() {
+      this.$store.dispatch('SET_LOCALE');
       this.$store.dispatch('GET_CONFIGURATION_DICT_FROM_LOCAL_YAML');
       this.$store.dispatch('GET_DIFFICULTY_LEVEL_LIST_FROM_LOCAL_YAML');
       this.$store.dispatch('GET_AUTHOR_LIST_FROM_LOCAL_YAML');

frontend/src/components/Footer.vue

@@ -49,7 +49,7 @@
         <div class="col-sm">
           <select v-model="$i18n.locale">
             <option v-for="(lang, i) in languages" :key="`Lang${i}`" :value="lang.key">
-              {{ lang.value }}
+              {{ lang.emoji }}&nbsp;{{ lang.value }}
             </option>
           </select>
         </div>
@@ -68,6 +68,7 @@
 </template>
 
 <script>
+import constants from '../constants';
 import HomeLink from './HomeLink.vue';
 
 export default {
@@ -80,10 +81,7 @@ export default {
 
   data() {
     return {
-      languages: [
-        { key: 'fr', value: '🇫🇷 Français' },
-        { key: 'en', value: '🌐 English' },
-      ],
+      languages: constants.LANGUAGE_CHOICE_LIST,
     };
   },
 

frontend/src/components/QuestionAnswerCards.vue

@@ -69,7 +69,7 @@
       <h2 v-if="questionAnswer.success">{{ questionAnswer.message }} !</h2>
       <h2 v-if="!questionAnswer.success">{{ questionAnswer.message }}</h2>
       <h3 v-if="!questionAnswer.success">
-        <small>{{ $t('messages.answerWas') }}&nbsp;</small>
+        <small>{{ $t('messages.answerWas') }}{{ $t('words.semiColon') }}&nbsp;</small>
         <span>{{ question["answer_option_" + question["answer_correct"]] }}</span>
       </h3>
       <!-- Answer explanation -->
@@ -110,7 +110,7 @@
           <img v-bind:src="question.answer_image_url" alt="une image pour illustrer la réponse" />
         </a>
       </p>
-      <p v-if="question.answer_image_explanation" class="answer-image-explanation" title="Légende de l'image">{{ $t('messages.imageLegend') }} {{ question.answer_image_explanation }}</p>
+      <p v-if="question.answer_image_explanation" class="answer-image-explanation" title="Légende de l'image">{{ $t('messages.imageLegend') }}{{ $t('words.semiColon') }} {{ question.answer_image_explanation }}</p>
     </div>
 
     <div v-if="question && questionSubmitted && questionNotValidated" class="alert alert-warning">

frontend/src/components/QuizCard.vue

@@ -31,7 +31,6 @@ export default {
   },
 
   watch: {
-    // eslint-disable-next-line
   },
 
   mounted() {

frontend/src/constants.js

@@ -22,5 +22,9 @@ export default {
   QUIZ_RELATIONSHIP_SIMILAR: 'similaire',
   QUIZ_RELATIONSHIP_TWIN: 'jumeau',
   QUIZ_RELATONSHIP_TRANSLATION: 'traduction',
+  LANGUAGE_CHOICE_LIST: [
+    { key: 'fr', value: 'Français', emoji: '🇫🇷' },
+    { key: 'en', value: 'English', emoji: '🌐' },
+  ],
   // DEFAULT_BACKGROUND_IMAGE_NAME: 'https://quizanthropocene.fr/showyourstripes_globe_1850-2019.png'
 };

frontend/src/i18n.js

@@ -16,8 +16,10 @@ function loadLocaleMessages() {
   return messages;
 }
 
-export default new VueI18n({
+const i18n = new VueI18n({
   locale: process.env.VUE_APP_I18N_LOCALE || 'en',
   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
   messages: loadLocaleMessages(),
 });
+
+export default i18n;

frontend/src/locales/en.json

@@ -8,7 +8,10 @@
         "item1Subtitle": "(we do our best :)",
         "item2Title": "Explore and filter with the <span class='text-secondary'>categories</span> & <span class='color-tag'>tags</span>",
         "item3Title": "Attentive to feedback",
-        "item3Subtitle": "and open to "
+        "item3Subtitle": "and open to",
+        "thereIsCurrently": "There are currently",
+        "helpUs": "Help us",
+        "toAddMore": "to add more"
     },
     "footer": {
         "home": "Home",
@@ -58,14 +61,15 @@
         "multipleAnswers": "multiple answers possible",
         "hint": "Hint",
         "submit": "Submit",
-        "answerWas": "The answer was:",
-        "imageLegend": "Legend:",
+        "answerWas": "The answer was",
+        "imageLegend": "Legend",
         "questionPendingValidation": "This question is pending validation",
         "thanks": "Thanks",
         "thankYou": "Thank You",
         "errorOccured": "An error occured"
     },
     "words": {
+        "et": "and",
         "times": "times",
         "cette": "this",
         "ce": "this",

frontend/src/locales/fr.json

@@ -8,7 +8,10 @@
         "item1Subtitle": "(on fait de notre mieux :)",
         "item2Title": "Explorer et filtrer grâce aux <span class='text-secondary'>catégories</span> & <span class='color-tag'>tags</span>",
         "item3Title": "À l'écoute de vos retours",
-        "item3Subtitle": "et ouvert aux "
+        "item3Subtitle": "et ouvert aux ",
+        "thereIsCurrently": "Il y a actuellement",
+        "helpUs": "Aidez-nous",
+        "toAddMore": "à en rajouter plus"
     },
     "newsletter": {
         "success": "Votre inscription à la newsletter a été enregistrée, merci !"
@@ -61,14 +64,15 @@
         "multipleAnswers": "plusieurs réponses possibles",
         "hint": "un indice",
         "submit": "Valider",
-        "answerWas": "La réponse était :",
-        "imageLegend": "Légende :",
+        "answerWas": "La réponse était",
+        "imageLegend": "Légende",
         "questionPendingValidation": "Cette question est en cours de validation",
         "thanks": "Merci",
         "thankYou": "Merci beaucoup",
         "errorOccured": "Il y a eu une erreur"
     },
     "words": {
+        "et": "et",
         "times": "times",
         "cette": "cette",
         "ce": "ce",

frontend/src/store.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import i18n from './i18n';
 import constants from './constants';
 
 // webpack + vue-cli-plugin-yaml
@@ -29,6 +30,7 @@ const store = new Vuex.Store({
     loading: false,
     error: null,
     configuration: {},
+    locale: {},
     questions: [],
     questionsValidated: [],
     questionsDisplayed: [],
@@ -64,6 +66,13 @@ const store = new Vuex.Store({
       commit('UPDATE_LOADING_STATUS', false);
       commit('UPDATE_ERROR', null);
     },
+    /**
+     * Set app locale
+     */
+    SET_LOCALE: ({ commit }) => {
+      const localeDict = constants.LANGUAGE_CHOICE_LIST.find((l) => l.key === i18n.locale);
+      commit('SET_LOCALE_DICT', { dict: localeDict });
+    },
     /**
      * Get app configuration
      */
@@ -77,8 +86,7 @@ const store = new Vuex.Store({
      * - enrich with categories, tags
      */
     GET_QUESTION_LIST_FROM_LOCAL_YAML: ({ commit, state, getters }) => {
-      // questions
-      const questions = questionsYamlData;
+      const questions = questionsYamlData.filter((q) => q.language === state.locale.value);
       // questions: get category & tags objects
       questions.map((q) => {
         const questionCategory = getters.getCategoryById(q.category);
@@ -111,7 +119,7 @@ const store = new Vuex.Store({
      * - enrich with questions, tags
      */
     GET_QUIZ_LIST_FROM_LOCAL_YAML: ({ commit, state, getters }) => {
-      const quizzes = quizzesYamlData;
+      const quizzes = quizzesYamlData.filter((q) => q.language === state.locale.value);
       // quiz: get question and tag objects
       quizzes.map((q) => {
         // get quiz questions + order + only get question ids
@@ -222,6 +230,9 @@ const store = new Vuex.Store({
     UPDATE_ERROR: (state, value) => {
       state.error = value;
     },
+    SET_LOCALE_DICT: (state, { dict }) => {
+      state.locale = dict;
+    },
     SET_CONFIGURATION_DICT: (state, { dict }) => {
       state.configuration = dict;
     },

frontend/src/views/AboutPage.vue

@@ -8,6 +8,10 @@
       Il est développé par quelques passionés, et a pour but d'évoluer en fonctions des retours utilisateurs :)
     </section> -->
 
+    <section class="alert alert-warning" role="alert" v-if="$i18n.locale === 'en'">
+      🌐Page not yet translated ...
+    </section>
+
     <h3>Pourquoi cette application ?</h3>
     <div v-html="configuration.application_about"></div>
 

frontend/src/views/ContributePage.vue

@@ -2,6 +2,10 @@
   <section class="text-align-left">
     <h2>Contribuer !</h2>
 
+    <section class="alert alert-warning" role="alert" v-if="$i18n.locale === 'en'">
+      🌐Page not yet translated ...
+    </section>
+
     <p>
       Vous souhaitez rajouter une question ? Ou faire un commentaire sur le contenu existant ?<br />
       Envoyez-nous ça en remplissant le petit formulaire ci-dessous 👇

frontend/src/views/GlossaryPage.vue

@@ -1,6 +1,11 @@
 <template>
   <section class="text-align-left">
     <h2>Glossaire</h2>
+
+    <section class="alert alert-warning" role="alert" v-if="$i18n.locale === 'en'">
+      🌐Page not yet translated ...
+    </section>
+
     <p><i>Ces définitions sont ensuite affichées lorsque le mot apparait dans l'énoncé de la question.</i></p>
 
     <br />

frontend/src/views/HomePage.vue

@@ -1,17 +1,17 @@
 <template>
   <section>
 
-    <h2 class="special-title">✨&nbsp;{{ $t('messages.newQuizs') }}&nbsp;✨</h2>
+    <h2 v-if="quizzesSpotlighted && quizzesSpotlighted.length > 0" class="special-title">✨&nbsp;{{ $t('messages.newQuizs') }}&nbsp;✨</h2>
     <div class="row" v-if="quizzesSpotlighted && quizzesSpotlighted.length > 0" id="quiz-list">
       <div class="col-sm-4" v-for="quiz in quizzesSpotlighted" :key="quiz.id">
         <QuizCard :quiz="quiz"/>
       </div>
     </div>
 
     <div class="row justify-content-md-center margin-bottom-1em">
-      <div class="col-sm-6" v-if="questionsCount">
+      <div class="col-sm-6">
         <router-link class="no-decoration" :to="{ name: 'quiz-list' }">
-          <button class="btn btn-primary btn-lg btn-block">
+          <button id="all-quizs-btn" class="btn btn-primary btn-lg btn-block">
             🕹&nbsp;<strong>{{ $t('messages.allQuizs') }}</strong>
           </button>
         </router-link>
@@ -64,8 +64,10 @@
     </div>
 
     <div class="alert alert-primary" role="alert">
-      <i v-if="questionsCount">Il y a actuellement <strong>{{ questionsCount }} questions</strong> et <strong>{{ quizzesPublishedCount }} quiz</strong>. </i>
-      <i><router-link :to="{ name: 'about' }">Aidez-nous</router-link> à en rajouter plus ! </i>
+      <i>
+        {{ $t('home.thereIsCurrently') }} <strong>{{ questionsCount }} questions</strong> {{ $t('words.et') }} <strong>{{ quizzesPublishedCount }} quiz</strong>.
+        <router-link :to="{ name: 'about' }">{{ $t('home.helpUs') }}</router-link> {{ $t('home.toAddMore') }}{{ $t('words.exclamationMark') }}
+      </i>
     </div>
     <div v-if="newsletterRegistrationCallback" class="alert alert-success" role="alert">
       {{ $t('newsletter.success') }}
@@ -75,9 +77,9 @@
     </div>
 
     <div class="row justify-content-md-center">
-      <div class="col-sm-6" v-if="questionsCount">
+      <div class="col-sm-6">
         <router-link class="no-decoration" :to="{ name: 'ressources' }">
-          <button class="btn btn-outline-primary btn-lg btn-block">📚&nbsp;<strong>{{ $t('footer.resources') }}</strong></button>
+          <button id="resources-btn" class="btn btn-outline-primary btn-lg btn-block">📚&nbsp;<strong>{{ $t('footer.resources') }}</strong></button>
         </router-link>
       </div>
     </div>
@@ -101,7 +103,7 @@
             </div>
           </div>
           <div class="col-sm-4 text-align-left">
-            <button class="btn btn-primary" type="submit" :disabled="!emailNewsletterRegistration">Je m'inscris !</button>
+            <button id="newsletter-btn" class="btn btn-primary" type="submit" :disabled="!emailNewsletterRegistration">Je m'inscris !</button>
           </div>
         </form>
         <div v-if="newsletterRegistrationLoading">

frontend/src/views/QuestionDetailPage.vue

@@ -5,10 +5,10 @@
       v-bind:context="{ question_number: (questionIndex+1)+' / '+questionsDisplayedCount, source: 'question' }"
       @answer-submitted="onAnswerSubmitted" />
 
-    <div v-if="question" class="question-next small" :key="question.id"> <!-- INFO: :key is to force reload, avoid button staying blur -->
+    <div v-if="question" class="small" :key="question.id"> <!-- INFO: :key is to force reload, avoid button staying blur -->
       <!-- <br /> -->
       <router-link v-if="questionSameFilterNextId" :to="{ name: 'question-detail', params: { questionId: questionSameFilterNextId } }">
-        <button class="btn" :class="emphasisNextButton ? 'btn-primary' : 'btn-outline-primary'">⏩&nbsp;{{ $t('messages.nextQuestion') }}</button>
+        <button id="question-next-btn" class="btn" :class="emphasisNextButton ? 'btn-primary' : 'btn-outline-primary'">⏩&nbsp;{{ $t('messages.nextQuestion') }}</button>
       </router-link>
     </div>
   </section>

frontend/src/views/QuizDetailPage.vue

@@ -46,8 +46,8 @@
       </div>
     </div>
 
-    <div v-if="quiz && quizStep === 0" class="quiz-start">
-      <button class="btn btn-lg btn-primary margin-10" @click="incrementStep()">▶️&nbsp;{{ $t('messages.startQuiz') }}</button>
+    <div v-if="quiz && quizStep === 0">
+      <button id="quiz-start-btn" class="btn btn-lg btn-primary margin-10" @click="incrementStep()">▶️&nbsp;{{ $t('messages.startQuiz') }}</button>
     </div>
 
     <!-- Quiz en cours -->

frontend/src/views/QuizListPage.vue

@@ -53,7 +53,6 @@ export default {
   },
 
   watch: {
-    // eslint-disable-next-line
   },
 
   mounted() {

frontend/src/views/RessourcesPage.vue

@@ -1,8 +1,11 @@
 <template>
-
   <section class="text-align-left">
     <h2>Ressources pour aller plus loin</h2>
 
+    <section class="alert alert-warning" role="alert" v-if="$i18n.locale === 'en'">
+      🌐Page not yet translated ...
+    </section>
+
     <p><i>Table des matières</i></p>
     <ol>
       <li><a href="#ressources-soutiens">Les associations et les personnes qui participent de près ou de loin au projet</a></li>

frontend/src/views/StatsPage.vue

@@ -2,12 +2,16 @@
   <section class="text-align-left">
     <h2>Quelques statistiques</h2>
 
+    <section class="alert alert-warning" role="alert" v-if="$i18n.locale === 'en'">
+      🌐Page not yet translated ...
+    </section>
+
     <p class="text-muted">Mise à jour : {{ data_last_updated }}</p>
 
     <br />
     <h3>🕹️&nbsp;Quizs</h3>
     <p>
-      <strong>{{ quiz_count_formatted }}</strong> publiés.
+      <strong>{{ quiz_published_count_formatted }}</strong> publiés.
       <br />
       <strong>{{ quiz_answer_count_formatted }}</strong> quizs terminés depuis le lancement
       (dont <strong>{{ quiz_answer_count_last_30_days_formatted }}</strong> durant les 30 derniers jours).
@@ -147,8 +151,9 @@ export default {
       const questionPendingValidationCount = this.$store.state.stats.question_per_validation_status_count ? this.$store.state.stats.question_per_validation_status_count.slice(0).find((item) => item.validation_status === constants.QUESTION_VALIDATION_STATUS_IN_PROGRESS).total : 0;
       return Intl.NumberFormat('fr-FR').format(questionPendingValidationCount);
     },
-    quiz_count_formatted() {
-      return Intl.NumberFormat('fr-FR').format(this.$store.state.quizzes.length);
+    quiz_published_count_formatted() {
+      const quizPublishedCount = this.$store.state.stats.quiz_per_publish_count ? this.$store.state.stats.quiz_per_publish_count.slice(0).find((item) => item.publish === true).total : 0;
+      return Intl.NumberFormat('fr-FR').format(quizPublishedCount);
     },
     question_answer_count_formatted() {
       return Intl.NumberFormat('fr-FR').format(this.$store.state.stats.question_answer_count);