Skip to content

Commit

Permalink
THE-1268 resultats : differenciation du focus selon si recherche avan…
Browse files Browse the repository at this point in the history
…cee simple ou recherche lancee + layout border quand focus sur v-select formulaire recherche avancee
  • Loading branch information
clementdelafontaine committed Apr 22, 2024
1 parent eaad1f4 commit e62132d
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 12 deletions.
30 changes: 28 additions & 2 deletions components/common/results/ResultComponents.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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});
});
/**
Expand Down Expand Up @@ -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>

Expand Down
14 changes: 12 additions & 2 deletions components/theses/search/AdvancedForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 }">
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand Down
23 changes: 15 additions & 8 deletions components/theses/search/SearchBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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
*/
Expand Down

0 comments on commit e62132d

Please sign in to comment.