Merge pull request #223 from abes-esr/develop

FIX bordure focus resultat de recherche

.env

@@ -1,4 +1,5 @@
 NUXT_APP_API=http://localhost:8990/api/v1/
 NUXT_APP_API=https://beta.theses.fr/api/v1/
 NUXT_APP_APIREF=https://apicom.sudoc.fr/wsReferentiels/v1/
-NUXT_APP_RECAPTCHA=
+NUXT_IS_MAINTENANCE=false
+NUXT_MAINTENANCE_MESSAGE="<p>Nous nous excusons pour tout inconvénient que cela pourrait causer. </p><br /> <p>Vous pouvez suivre le compte Twitter de l'ABES pour le suivi des travaux : <a href='https://twitter.com/com_abes' target='_blank'>https://twitter.com/com_abes</a></p><br /><p>Nous vous remercions pour votre patience et nous revenons bientôt !</p>"

README.md

@@ -49,3 +49,24 @@ npm run build
 ```
 
 Plus d'infos sur le déploiement dans la documentation de Nuxt 3 [deployment documentation](https://nuxt.com/docs/getting-started/deployment) .
+
+
+### Mode maintenance
+
+L'application est dotée d'un mode maintenance, qui a pour effet de rediriger tous les visiteurs vers la page /maintenance à l'aide d'un middleware Nuxt (le template de la page de maintenance est dans /pages/maintenance.vue)
+
+Le message affiché sur la page de maintenance est modifiable dans le .env ```THESES_FRONT_VITE_APP_MAINTENANCE_MESSAGE```. Cela peut être un simple texte, ou bien du HTML pour ajouter du formattage ou des liens par exemple. Un redémarrage du container est nécessaire lors de la mise à jour du message de maintenance.
+
+
+Pour passer l'application en mode maintenance, il suffit de passer la valeur de ```THESES_FRONT_VITE_APP_IS_MAINTENANCE``` dans le .env à ```true```, puis de relancer le container : ```sudo docker compose up -d```
+
+Une fois la maintenance terminée, effectuer la manipulation inverse, remettre ```THESES_FRONT_VITE_APP_IS_MAINTENANCE``` dans le .env à ```false```, puis de relancer le container : ```sudo docker compose up -d```
+
+
+
+> [!NOTE]
+> Le .env mentionné ici est le .env utilisé par le docker-compose.yml, pas le .env local du projet Nuxt
+> 
+> Aucune page n'est accessible lorsque le mode maintenance est activé (sauf la page de maintenance). Toutes les autres routes sont redirigées vers cette page.
+> 
+> Egalement, lorsque le mode maintenance est désactivée, il n'est pas possible d'aller sur /maintenance, cela vous redirigera vers la page d'accueil.

components/common/results/ResultComponents.vue

@@ -299,4 +299,8 @@ watch(() => props.dataReady, () => {
   position: relative;
   bottom: -5em;
 }
+
+#returned-results-statement-container:focus-visible {
+  outline: none;
+}
 </style>

components/common/results/ResultPagination.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="result-pagination">
     <div class="first-bar-element">
-      <v-select :items="['10', '25', '50']" v-model="currentShowingNumber" density="compact" variant="solo"
+      <v-select :items="['10', '25', '50']" v-model="currentShowingNumber" density="compact" variant="solo" :aria-label="$t('results.ariaResultsPerPage')"
         class="left-select v-selects" menu-icon="mdi-chevron-down">
         <template v-slot:menu-icon>
           <v-icon>
@@ -28,8 +28,10 @@
 <script setup>
 import { ref, watch, computed, onMounted } from "vue";
 import { scrollToTop } from "../../services/Common";
+import { useI18n } from "vue-i18n";
 import { useDisplay } from "vuetify";
 
+const { t } = useI18n();
 const { setPageNumber, setShowingNumber } = useStrategyAPI();
 const emit = defineEmits(['search', 'updatePage', 'updateShowingNumber']);
 const currentRoute = useRoute();
@@ -196,6 +198,14 @@ watch(() => props.currentShowingNumber, () => {
   }
 }
 
+.v-selects:focus-within {
+  border: 1px solid rgb(var(--v-theme-gris-fonce));
+  box-sizing: border-box;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
+  padding: 3px;
+  transition: border-color 0.3s ease;
+}
+
 
 .no-wrap-text {
   overflow: hidden;

components/common/results/SortingSelect.vue

@@ -1,6 +1,6 @@
 <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">
+    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
@@ -11,9 +11,10 @@
 
 <script setup>
 import { onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
 const currentRoute = useRoute();
-
+const { t } = useI18n();
 const emit = defineEmits(['updatePageNumberFromSortingSelect', 'search']);
 const { setSorting, getItemsTri, getCurrentSorting, getTriMap } = useStrategyAPI();
 

components/personnes/search/SearchBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="searchbar">
     <v-combobox role="search" class="searchbar__input" label="Rechercher des personnes, par nom ou par domaine d’expertise"
-      single-line :items="suggestions" :menu="isSuggestionActive && suggestions.length != 0" :menu-props="menuProps"
+      :items="suggestions" :menu="isSuggestionActive && suggestions.length != 0" :menu-props="menuProps"
       :hide-no-data="!isSuggestionActive || suggestions.length == 0"
       :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

components/theses/search/AdvancedForm.vue

@@ -458,7 +458,6 @@ hr {
 }
 
 .v-field--container:focus-within {
-  //border-color: rgba(0, 0, 0, 0.3);
   border: 1px solid rgb(var(--v-theme-secondary-darken-2));
   box-sizing: border-box;
   box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);

components/theses/search/SearchBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="searchbar">
-    <v-combobox role="search" v-if="!isAdvanced" class="searchbar__input" label="Rechercher des thèses" single-line :items="items"
+    <v-combobox role="search" v-if="!isAdvanced" class="searchbar__input" label="Rechercher des thèses" :items="items"
       :menu="suggestionActive" :menu-props="menuProps" v-model="request" v-model:search="requestSearch" variant="outlined" base-color="primary"
       cache-items hide-details hide-no-data hide-selected no-filter density="compact" return-object type="text"
       menu-icon="" @keydown.enter="search" enterkeyhint="send" ref="targetElement" id="searchbar">

locales/fr.json

@@ -136,8 +136,10 @@
     },
     "show": "Afficher",
     "resultsPerPage": "résultats par page",
+    "ariaResultsPerPage": "Choix du nombre de résultats par page.",
     "sort": "Trier",
     "sortBy": "Trier par",
+    "ariaSortBy": "Choix du tri sur la recherche.",
     "searched": "La recherche sur",
     "returned": "a retourné",
     "results": "résultat(s)"

middleware/maintenance.global.js

@@ -0,0 +1,12 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+    const config = useRuntimeConfig();
+    const isMaintenance = config.public.IS_MAINTENANCE;
+
+    if (isMaintenance && to.path !== '/maintenance') {
+        return navigateTo('/maintenance')
+    }
+
+    if (!isMaintenance && to.path === '/maintenance') {
+        return navigateTo('/')
+    }
+})

nuxt.config.ts

@@ -21,7 +21,8 @@ export default defineNuxtConfig({
     public: {
       API: process.env.NUXT_APP_API,
       API_REF: process.env.NUXT_APP_APIREF,
-      CAPTCHA: process.env.NUXT_APP_RECAPTCHA,
+      IS_MAINTENANCE: process.env.NUXT_IS_MAINTENANCE,
+      MAINTENANCE_MESSAGE: process.env.NUXT_MAINTENANCE_MESSAGE
     }
   },
   routeRules: {

pages/maintenance.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="container">
+        <h1><v-icon>mdi-account-hard-hat-outline</v-icon>Theses.fr est en maintenance.</h1>
+        <span v-html="maintenanceMsg" class="maintenance-text">
+        </span>
+    </div>
+</template>
+
+<script setup>
+const config = useRuntimeConfig();
+const maintenanceMsg = config.public.MAINTENANCE_MESSAGE;
+</script>
+
+<style scoped lang="scss">
+@use 'vuetify/settings';
+
+header {
+    padding: 0 !important;
+}
+
+h1 {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    width: 80%;
+
+    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+        font-size: 3rem;
+    }
+}
+
+.container {
+    width: 90%;
+    align-items: flex-start;
+}
+
+.maintenance-text {
+    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+        font-size: 1.3rem;
+    }
+}
+</style>