THE-1268 resultats : differenciation du focus selon si recherche avan…

…cee simple ou recherche lancee + layout border quand focus sur v-select formulaire recherche avancee
abes-esr · Apr 22, 2024 · e62132d · e62132d
1 parent eaad1f4
commit e62132d
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 12 deletions.
diff --git a/components/common/results/ResultComponents.vue b/components/common/results/ResultComponents.vue
@@ -68,6 +68,7 @@ const { mobile } = useDisplay();
 import { replaceAndEscape } from "../services/Common";
 const { setShowingNumber, getFacetsRequest } = useStrategyAPI();
 const emit = defineEmits(['reinitializePageNumber']);
+const { t } = useI18n();
 
 const props = defineProps({
   result: {
@@ -99,14 +100,38 @@ const props = defineProps({
   }
 });
 
+/**
+ * Début gestionnaire clic
+ */
+// Déclarer une référence réactive pour stocker le dernier élément cliqué
+const dernierElementClique = ref(null);
+
+// Ajouter un gestionnaire d'événements de clic
+const handleClick = (event) => {
+  dernierElementClique.value = event.target.innerText;
+};
+
+onMounted(() => {
+  document.addEventListener("click", handleClick);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", handleClick);
+});
+
+/**
+ * Fin gestionnaire clic
+ */
+
 const currentPageNumber = currentRoute.query.page ? ref(parseInt(currentRoute.query.page)) : ref(1);
 const currentShowingNumber = currentRoute.query.nb ? ref(parseInt(currentRoute.query.nb)) : ref(10);
 const isAdvanced = useState("isAdvanced");
 
 const returnStatementDiv = ref(null);
 
 onMounted (() => {
-  returnStatementDiv.value.focus({ focusVisible: false});
+  if(dernierElementClique.value !==  t('avancee') && dernierElementClique.value !==  t('simple'))
+    returnStatementDiv.value.focus({ focusVisible: false});
 });
 
 /**
@@ -155,7 +180,8 @@ watch(() => props.resetPage, () => {
 });
 
 watch(() => props.dataReady, () => {
-  returnStatementDiv.value.focus({ focusVisible: false});
+  if(dernierElementClique.value !==  t('avancee') && dernierElementClique.value !==  t('simple'))
+    returnStatementDiv.value.focus({ focusVisible: false});
 });
 </script>
 

diff --git a/components/theses/search/AdvancedForm.vue b/components/theses/search/AdvancedForm.vue
@@ -7,7 +7,7 @@
                         v-model="operatorModel"></v-switch><span class="switch-text pl-4">OU</span></span>
                 <div v-for="(field, index) in formFields" :key="index" class="form-row">
                     <div class="type">
-                        <v-select density="compact" v-model="field.type" :items="types" item-title="titre"
+                        <v-select class="v-field--container" density="compact" v-model="field.type" :items="types" item-title="titre"
                             item-value="value" label="Champ" variant="plain" single-line menu-icon="mdi-chevron-down"
                             @update:model-value="clearField(index)">
                             <template v-slot:item="{ props, index }">
@@ -25,7 +25,7 @@
                     <div class="text">
                         <div v-if="field.type === 'dateSoutenance' || field.type === 'datePremiereInscriptionDoctorat'">
                             <span class="calendars">
-                                <div class="calendar-row advanced-input-fields" tabindex="0">
+                                <div class="calendar-row advanced-input-fields">
                                     <span class="calendar-text pr-4">Du</span> <vue-date-picker v-model="dateFrom"
                                         :teleport="true" locale="fr" auto-apply :clearable="false"
                                         model-type="yyyy-MM-dd" format="yyyy-MM-dd" :enable-time-picker="false"
@@ -445,6 +445,16 @@ hr {
 :deep(.v-switch__track) {
     background-color: rgb(var(--v-theme-gris-switch));
 }
+
+:deep(.v-input__details) {
+  margin-top: -50px;
+}
+
+.v-field--container:focus-within  {
+  border-color: rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
+  transition: border-color 0.3s ease;
+}
 </style>
 
 <style>

diff --git a/components/theses/search/SearchBar.vue b/components/theses/search/SearchBar.vue
@@ -102,7 +102,21 @@ const dernierElementClique = ref(null);
 
 // Ajouter un gestionnaire d'événements de clic
 const handleClick = (event) => {
-  dernierElementClique.value = event.target;
+  dernierElementClique.value = event.target.innerText;
+
+  if(dernierElementClique.value) {
+    if(dernierElementClique.value === t('avancee') && document.getElementsByClassName('advanced-input-fields').length > 0) {
+      const firstInputElementInAdvancedForm = document.getElementsByClassName('advanced-input-fields')[0].getElementsByTagName('input')[0];
+      if(firstInputElementInAdvancedForm !== null) {
+        firstInputElementInAdvancedForm.focus();
+      }
+    } else if (dernierElementClique.value === t('simple')) {
+      const searchbar = document.getElementById('searchbar');
+      if(searchbar !== null) {
+        searchbar.focus();
+      }
+    }
+  }
 };
 
 onMounted(() => {
@@ -113,13 +127,6 @@ onBeforeUnmount(() => {
   document.removeEventListener("click", handleClick);
 });
 
-// Gestion focus au clic sur recherche avancée
-onUpdated(() => {
-  if(dernierElementClique.value && dernierElementClique.value.innerText === t('avancee')) {
-    const firstInputElementInAdvancedForm = document.getElementsByClassName('advanced-input-fields')[0].getElementsByTagName('input')[0];
-    firstInputElementInAdvancedForm.focus();
-  }
-});
 /**
  * Fin gestionnaire clic
  */