Merge pull request #248 from abes-esr/THE-1364-Int-gration-l-interfac…

…e-theses.fr-des-fichiers-json-traduits The 1364 integration l interface theses.fr des fichiers json traduits + ameliorations
abes-esr · Oct 14, 2024 · 785003d · 785003d
2 parents 5ca1b83 + 3fc4422
commit 785003d
Show file tree

Hide file tree

Showing 16 changed files with 793 additions and 408 deletions.
diff --git a/components/common/DomainSelector.vue b/components/common/DomainSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="domain-selector" role="list">
     <div role="listitem">
-      <v-btn flat @click="select('theses')" title="Rechercher des thèses" role="button">
+      <v-btn flat @click="select('theses')" :title="$t('rechercherTheses')" role="button">
         <v-icon size="50" color="secondary">mdi-school</v-icon>
         <span class="title">
           <h2 :class="selected === 'theses' ? 'selected' : ''">
@@ -12,7 +12,7 @@
     </div>
     <v-divider aria-hidden="true" vertical></v-divider>
     <div role="listitem">
-      <v-btn flat @click="select('personnes')" title="Rechercher des personnes liées aux thèses" role="button">
+      <v-btn flat @click="select('personnes')" :title="$t('rechercherTheses')" role="button">
         <v-icon size="50" color="secondary">mdi-account-multiple</v-icon>
         <span class="title">
           <h2>
@@ -27,7 +27,9 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const selected = ref('theses');
 const router = useRouter();
 const currentRoute = useRoute();

diff --git a/components/common/FooterCustom.vue b/components/common/FooterCustom.vue
@@ -82,7 +82,7 @@
     <v-card-text class="footerBottom">
         <div class="text-center text-md-left pa-0 slogan">
           {{ new Date().getFullYear() }} —
-          theses.fr, le moteur de recherche des thèses françaises
+          theses.fr, {{ $t('slogan') }}
         </div>
         <div class="text-center text-md-right pa-0">
           <v-divider vertical class="my-1"></v-divider>

diff --git a/components/common/HeaderCustom.vue b/components/common/HeaderCustom.vue
@@ -2,25 +2,22 @@
   <v-app-bar flat id="appBar" v-if="!mobile && isReady">
     <div class="toolbar-wrapper" role="list">
       <div class="text-center text-md-left language-accessibility-toolbar" role="listitem">
-
         <v-btn plain size="x-large" @click="dialog = true" :title="$t('access.btn')" role="button">
           <img :alt="$t('header.accessibility')" id="logo-handicap-visuel"
             :src="'/icone-handicap-visuel-' + colorMode + '.svg'" />
         </v-btn>
-  <!--     Quand actif ajouter role="listitem" -->
-<!--        <div class="languages-btn">-->
-<!--          &lt;!&ndash; selecteur de langues désactivé &ndash;&gt;-->
-<!--          <v-btn flat @click="setLanguage('fr')" title="Langue française"-->
-<!--            :class="locale === 'fr' ? 'selected' : ''">FR</v-btn>-->
-<!--          |-->
-<!--          <v-btn flat @click="setLanguage('en')" title="English Language"-->
-<!--            :class="locale === 'en' ? 'selected' : ''">EN</v-btn>-->
-<!--          |-->
-<!--          <v-btn flat @click="setLanguage('es')" title="Idioma espanol"-->
-<!--            :class="locale === 'es' ? 'selected' : ''">ES</v-btn>-->
-<!--        </div>-->
+        <div class="languages-btn" role="list" :aria-label="$t('header.localeSelection')">
+          <v-btn flat @click="setLanguage('fr')" aria-label="Changer la langue du site en français"
+          :class="locale === 'fr' ? 'selected' : ''">FR</v-btn>
+          <v-divider vertical role="presentation"></v-divider>
+          <v-btn flat @click="setLanguage('en')" aria-label="Switch language to English"
+            :class="locale === 'en' ? 'selected' : ''">EN</v-btn>
+          <v-divider vertical role="presentation"></v-divider>
+          <v-btn flat @click="setLanguage('es')" aria-label="Cambiar el idioma a español"
+            :class="locale === 'es' ? 'selected' : ''">ES</v-btn>
+        </div>
       </div>
-      <div class="text-center text-md-right" role="presentation">
+      <div class="text-center text-md-right" role="list">
         <!--<v-btn tabindex="-1" title="Réseau" size="x-large" icon>
           <div class="icons"><icons-icon-reseau></icons-icon-reseau></div>
         </v-btn>
@@ -175,7 +172,7 @@ header {
 }
 
 .language-accessibility-toolbar {
-  display: grid; // dé-commenter si on active le bouton accessibilité
+  display: grid;
   grid-template-columns: 1fr 20px 3fr;
   margin: 0 30px 0;
 
@@ -185,9 +182,10 @@ header {
 }
 
 .languages-btn {
-  grid-column-start: 3; // 3 si on active le bouton accessibilité
+  grid-column-start: 3;
   max-height: 36px;
   align-self: center;
+  display: inline-flex;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
     grid-column-start: 2;
@@ -197,6 +195,11 @@ header {
       padding: 0 5px;
     }
   }
+
+  .v-divider {
+    height: 1.5em;
+    align-self: center;
+  }
 }
 
 .logos-droite {

diff --git a/components/common/HeaderMobile.vue b/components/common/HeaderMobile.vue
@@ -47,17 +47,17 @@
     <!-- Menu burger mobile -->
     <v-fade-transition>
       <div v-show="showMenu" ref="expandedMenu" tabindex="0" class="expanded-search-bar-container white-containers" role="list">
-        <div class="languages-btn-container">
-<!--          <div class="languages-btn">-->
-<!--            <button flat @click="setLanguage('fr')" title="Langue française"-->
-<!--              :class="locale === 'fr' ? 'selected' : ''">FR</button>-->
-<!--            <p>|</p>-->
-<!--            <button flat @click="setLanguage('en')" title="English Language"-->
-<!--              :class="locale === 'en' ? 'selected' : ''">EN</button>-->
-<!--            <p>|</p>-->
-<!--            <button flat @click="setLanguage('es')" title="Idioma Espanol"-->
-<!--              :class="locale === 'es' ? 'selected' : ''">ES</button>-->
-<!--          </div>-->
+        <div class="languages-btn-layout-wrapper">
+          <div class="languages-btn-container" role="list" :aria-label="$t('header.localeSelection')">
+            <v-btn flat @click="setLanguage('fr')" aria-label="Changer la langue du site en français" density="compact" size="small"
+                   :class="locale === 'fr' ? 'selected' : ''">FR</v-btn>
+            <v-divider vertical role="presentation"></v-divider>
+            <v-btn flat @click="setLanguage('en')" aria-label="Switch language to English" density="compact" size="small"
+                   :class="locale === 'en' ? 'selected' : ''">EN</v-btn>
+            <v-divider vertical role="presentation"></v-divider>
+            <v-btn flat @click="setLanguage('es')" aria-label="Cambiar el idioma a español" density="compact" size="small"
+                   :class="locale === 'es' ? 'selected' : ''">ES</v-btn>
+          </div>
         </div>
         <div class="expanded-burger-menu">
           <div class="nav-bar-list-burger">
@@ -360,10 +360,22 @@ onMounted(() => {
 
 .languages-btn-container {
   padding-top: 10px;
+  display: inline-flex;
+  margin-bottom: 10px;
+  width: fit-content;
+  justify-self: center;
+
+  :deep(.v-btn--size-small) {
+    font-size: unset;
+    min-width: unset;
+    width: 2.3em;
+  }
+}
+
+.languages-btn-layout-wrapper {
   width: 100%;
-  display: grid;
-  grid-template-columns: 3fr 2fr;
-  height: 35px;
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
 }
 
 .languages-btn {

diff --git a/components/common/results/FacetCheckbox.vue b/components/common/results/FacetCheckbox.vue
@@ -1,7 +1,7 @@
 <template>
   <v-lazy  :min-height="10" :options="{ threshold: 0 }">
-    <v-checkbox :aria-label="`${replaceFacetsText(facetItem.label)} (${facetItem.value.toLocaleString('fr-FR')})` + ' résultats'" v-model="checkboxState" @click="updateCheckbox" :class="`checkboxes ms-${props.marginOffset}`"
-      :label="`${replaceFacetsText(facetItem.label)} (${facetItem.value.toLocaleString('fr-FR')})`" density="compact" inline hide-details @keyup.enter="updateCheckbox">
+    <v-checkbox :aria-label="`${replaceFacetsTextAndTranslate(facetItem.label)} (${facetItem.value.toLocaleString('fr-FR')})` + ' résultats'" v-model="checkboxState" @click="updateCheckbox" :class="`checkboxes ms-${props.marginOffset}`"
+      :label="`${replaceFacetsTextAndTranslate(facetItem.label)} (${facetItem.value.toLocaleString('fr-FR')})`" density="compact" inline hide-details @keyup.enter="updateCheckbox">
     </v-checkbox>
   </v-lazy>
 
@@ -19,7 +19,9 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";
 import { replaceFacetsText } from "../../../services/Common";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const { addToFiltersLabelsMap } = useStrategyAPI();
 
 const emit = defineEmits(['updateParentCheckbox', 'updateFilterData', 'updateFilterDataRecursive']);
@@ -140,6 +142,10 @@ function arrayContainsFilter() {
   }
   return false;
 }
+
+function replaceFacetsTextAndTranslate(label) {
+  return t(replaceFacetsText(label));
+}
 </script>
 
 <style scoped lang="scss">

diff --git a/components/common/results/FacetDrawer.vue b/components/common/results/FacetDrawer.vue
@@ -7,7 +7,7 @@
           </v-icon>
         </template>
         <h2 :id="'facet-title-' + index" class="facet-title">
-          {{ facet.name }}
+          {{ $t('results.facet.' + facet.name) }}
         </h2>
         <v-btn @click.stop="" @click="reinitializeCheckboxes(); reinitializeFilterSearchText();" class="reinitialize-button" size="small" depressed
           elevation="0" color="surface" :title="$t('reinitializeFacet') + facet.name">
@@ -20,7 +20,7 @@
             append-inner-icon="mdi-magnify" density="compact" single-line hide-details
             class="facet-search-bar"></v-text-field>
         </div>
-        <div role="list" :aria-label="'Liste des ' + facet.name" class="panel-text" ref="`facet-${facet.name}`">
+        <div role="list" :aria-label="$t('results.facet.list') + $t('results.facet.' + facet.name)" class="panel-text" ref="`facet-${facet.name}`">
           <!--          Facette date-->
           <div v-if="date" class="date-container">
             <span class="date-item">

diff --git a/components/common/results/FacetsHeader.vue b/components/common/results/FacetsHeader.vue
@@ -6,7 +6,7 @@
     </div>
     <v-btn v-if="!mobile" @click.stop="" @click="searchAndReinitializeAllFacets" size="small" depressed elevation="0"
       color="surface" class="desktop-reinitialize-button" :aria-label="$t('reinitializeAll')">
-      <v-icon>mdi-reload</v-icon> Réinitialiser
+      <v-icon>mdi-reload</v-icon> {{ $t('results.facet.reset') }}
     </v-btn>
     <button v-else @click="closeOverlay" class="close-overlay-button" elevation="0" color="transparent">
       <div class="close-overlay-icon-wrapper">

diff --git a/components/common/results/SortingSelect.vue b/components/common/results/SortingSelect.vue
@@ -1,6 +1,5 @@
 <template>
-  <v-select class="select-box" v-model="tri" return-object :items=items item-title="nom" item-value="cle"
-    density="compact" flat single-line variant="solo" menu-icon="mdi-chevron-down" :aria-label="$t('results.ariaSortBy')">
+  <v-select class="select-box" v-model="tri" return-object :items="items" item-title="nom" item-value="cle" density="compact" flat single-line variant="solo" menu-icon="mdi-chevron-down" :aria-label="$t('results.ariaSortBy')">
     <template v-slot:menu-icon>
       <v-icon>
         mdi-chevron-down
@@ -10,27 +9,63 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 import { useI18n } from "vue-i18n";
 
 const currentRoute = useRoute();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 const emit = defineEmits(['updatePageNumberFromSortingSelect', 'search']);
 const { setSorting, getItemsTri, getCurrentSorting, getTriMap } = useStrategyAPI();
 
-const items = ref();
-const tri = ref();
+const items = ref([]);
+const tri = ref("");
 let noDoubleUpdates = false;
 
 onMounted(() => {
-  items.value = getItemsTri();
-  tri.value = getCurrentSortName();
+  updateDataTri();
 });
 
 /**
  * Fonctions
  */
 
+function updateDataTri() {
+  items.value = getTranslatedItemsTri();
+  tri.value = getTranslatedCurrentSortName();
+}
+
+/**
+ * Retourne les éléments de tri traduits
+ * @returns {Array}
+ */
+function getTranslatedItemsTri() {
+  const itemsTri = getItemsTri();
+
+  if (!!itemsTri) {
+    return itemsTri.map(item => ({
+      ...item,
+      nom: t(item.nom)
+    }));
+  }
+}
+
+/**
+ * Retourne le tri appliqué traduit
+ * @returns {Array}
+ */
+function getTranslatedCurrentSortName() {
+  const currentSortName = getCurrentSortName();
+
+  if (!!currentSortName) {
+    let obj = getCurrentSortName();
+    return {
+      ...obj,
+      cle: obj.cle,
+      nom: t(obj.nom)
+    };
+  }
+}
+
 /**
  * Récupère les clés/valeurs du tri pour le domaine actuel
  * @returns {{nom: (*|string), cle: (*|string)}}
@@ -46,30 +81,33 @@ function getCurrentSortName() {
  * Watchers
  */
 
+// Surveiller les changements de tri
 watch(tri, async (newSortingArray, previousSortingArray) => {
-  if (typeof previousSortingArray !== 'undefined' && !noDoubleUpdates) { // Pas de mise à jour de la page à la première initialisation
+  if (typeof previousSortingArray !== 'undefined' && !noDoubleUpdates) {
     setSorting(newSortingArray.cle);
     emit("updatePageNumberFromSortingSelect", 1);
     emit("search");
   }
   noDoubleUpdates = false;
 });
 
-
-// Mise à jour des valeurs de tri
+// Surveiller les changements de domaine dans la route
 watch(() => currentRoute.query.domaine, () => {
   setSorting('pertinence');
-  items.value = getItemsTri();
-  tri.value = getCurrentSortName();
+  items.value = getTranslatedItemsTri();
+  tri.value = getTranslatedCurrentSortName();
 });
 
+// Surveiller les changements de tri dans la route
 watch(() => currentRoute.query.tri, () => {
   noDoubleUpdates = true;
-  items.value = getItemsTri();
-  tri.value = getCurrentSortName();
+  items.value = getTranslatedItemsTri();
+  tri.value = getTranslatedCurrentSortName();
 });
 
-
+watch(locale, (newLocale) => {
+  updateDataTri();
+});
 
 </script>
 

diff --git a/components/personnes/search/SearchBar.vue b/components/personnes/search/SearchBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="searchbar">
-    <v-combobox role="search" class="searchbar__input" label="Rechercher des personnes, par nom ou par domaine d’expertise"
+    <v-combobox role="search" class="searchbar__input" :label="$t('rechercherPersonnes')"
       :items="suggestions" :menu-props="menuProps" hide-no-data
       :no-data-text="isSuggestionLoading ? $t('personnes.searchBar.loading') : $t('personnes.searchBar.noData')"
       v-model="request" v-model:search="requestSearch" variant="outlined" cache-items hide-details hide-selected

diff --git a/components/theses/ThesisTable.vue b/components/theses/ThesisTable.vue
@@ -113,7 +113,7 @@
           <strong>{{ $t('theseView.partenariat') }}&nbsp;:{{ '\xa0' }}</strong>
         </td>
         <td role="list">
-          <strong>{{ firstPartenaireKeyName + " : " }}</strong>
+          <strong>{{ $t(firstPartenaireKeyName) }}  : </strong>
           <template v-for="(partenaire, index) in partenairesGroupedByType[firstPartenaireKeyName]">
           <nuxt-link v-if="partenaire.ppn" :key="partenaire.ppn"
             class="clickable lightblue" :to="'/' + partenaire.ppn" role="listitem">
@@ -130,7 +130,7 @@
         <tr v-if="indexType !== firstPartenaireKeyName" class="table-rows">
           <td class="empty-first-cell-mandatory"></td>
           <td>
-            <strong>{{ indexType + " : " }}</strong>
+            <strong>{{ $t(indexType) + " : " }}</strong>
             <template v-for="(partenaire, index) in type">
               <nuxt-link v-if="partenaire.ppn"
                 class="clickable lightblue" :to="'/' + partenaire.ppn" role="listitem">
@@ -150,7 +150,7 @@
           <strong>{{ $t('theseView.jury') }}&nbsp;:{{ '\xa0' }}</strong>
         </td>
         <td role="list">
-          <strong>{{ firstJuryMemberKeyName + " : " }}</strong>
+          <strong>{{ $t(firstJuryMemberKeyName) + " : " }}</strong>
           <template v-for="(member, index) in juryMembersGroupedByType[firstJuryMemberKeyName]">
             <nuxt-link v-if="member.ppn"  :key="member.ppn"
               class="clickable lightblue" :to="'/' + member.ppn" role="listitem">
@@ -166,7 +166,7 @@
         <tr v-if="indexType !== firstJuryMemberKeyName" class="table-rows">
           <td class="empty-first-cell-mandatory"></td>
           <td>
-            <strong>{{ indexType + " : " }}</strong>
+            <strong>{{ $t(indexType) + " : " }}</strong>
             <template v-for="(member, index) in type">
               <nuxt-link v-if="member.ppn" class="clickable lightblue"
                 :to="'/' + member.ppn" role="listitem">