Ajout d'options d'affichage (#322)

* feat: add show/hide filters button * adjust filters column width * show focus indicator on toggle buttons * docs: update changelog
DISIC · Mar 30, 2023 · 791f0a5 · 791f0a5
1 parent 1c0cdef
commit 791f0a5
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 106 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 30/03/2023
+
+## Nouvelles fonctionnalités 🚀
+
+- Ajout d’un bouton pour afficher ou cacher la barre latérale des filtres ([#322](https://github.com/DISIC/Ara/pull/322))
+
 ## 24/03/2023
 
 ## Nouvelles fonctionnalités 🚀

diff --git a/confiture-web-app/src/components/AuditGenerationFilters.vue b/confiture-web-app/src/components/AuditGenerationFilters.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { computed, watch } from "vue";
+import { computed, watch, nextTick } from "vue";
 import { ref } from "vue";
 import { useFiltersStore, useResultsStore } from "../store";
 
 defineProps<{
   topics: { title: string; number: number; value: number }[];
 }>();
 
+const emit = defineEmits<{
+  (e: "toggle-filters", payload: boolean): void;
+}>();
+
 const filterStore = useFiltersStore();
 const resultStore = useResultsStore();
 
@@ -37,132 +41,184 @@ function submit() {
   filterStore.search = search.value;
 }
 
+const showFilters = ref(true);
+const hideFiltersRef = ref<HTMLButtonElement>();
+const displayFiltersRef = ref<HTMLButtonElement>();
+
+async function hideFilters() {
+  showFilters.value = false;
+  emit("toggle-filters", false);
+  await nextTick();
+  displayFiltersRef.value?.focus();
+}
+
+async function displayFilters() {
+  showFilters.value = true;
+  emit("toggle-filters", true);
+  await nextTick();
+  hideFiltersRef.value?.focus();
+}
+
 watch(
   () => filterStore.hideEvaluatedCriteria,
   () => filterStore.updateEvaluatedCriteria()
 );
 </script>
 
 <template>
-  <h2 class="fr-h4 fr-mb-2w">Filtres</h2>
   <button
-    v-if="
-      filterStore.search ||
-      filterStore.topics.length ||
-      filterStore.hideEvaluatedCriteria
-    "
-    class="fr-btn fr-btn--tertiary-no-outline fr-icon-refresh-line fr-btn--icon-right fr-mb-4w"
-    @click="onGlobalReset"
+    v-if="!showFilters"
+    ref="displayFiltersRef"
+    type="button"
+    class="fr-btn fr-btn--sm fr-btn--tertiary fr-icon-arrow-right-s-line-double toggle-column-button"
+    @click="displayFilters"
   >
-    Réinitialiser
+    <span class="sr-only">Afficher la colonne des filtres</span>
   </button>
-  <form @submit.prevent="submit">
-    <label class="fr-label fr-text--bold fr-mb-1w" for="filters-search">
-      Rechercher par mots clés
-    </label>
-    <div class="fr-search-bar">
-      <input
-        id="filters-search"
-        ref="searchInputRef"
-        v-model="search"
-        class="fr-input"
-        placeholder="Rechercher"
-        type="search"
-      />
-      <button type="submit" class="fr-btn" title="Rechercher">
-        Rechercher
+  <template v-else>
+    <div class="heading-wrapper">
+      <h2 class="fr-h4 fr-mb-0">Filtres</h2>
+      <button
+        ref="hideFiltersRef"
+        type="button"
+        class="fr-btn fr-btn--sm fr-btn--tertiary fr-icon-arrow-left-s-line-double toggle-column-button"
+        @click="hideFilters"
+      >
+        <span class="sr-only">Cacher la colonne des filtres</span>
       </button>
     </div>
-  </form>
-
-  <div role="alert" aria-live="polite">
-    <p v-if="filterStore.search" class="fr-mt-2w fr-mb-1w">
-      {{ resultsCount }} {{ resultsCount !== 1 ? "résultats" : "résultat" }}
-    </p>
-    <!-- FIXME: can't change color on dismissable tags. "fr-tag--blue-france" -->
-  </div>
-  <button
-    v-if="filterStore.search"
-    class="fr-tag fr-tag--dismiss"
-    :aria-label="`Retirer la recherche ${filterStore.search}`"
-    @click="onSearchReset"
-  >
-    {{ filterStore.search }}
-  </button>
-
-  <div class="fr-my-4w fr-py-4w evaluated-criteria-filter">
-    <div class="fr-checkbox-group">
-      <input
-        id="hide-evaluated-criteria"
-        v-model="filterStore.hideEvaluatedCriteria"
-        type="checkbox"
-      />
-      <label class="fr-label" for="hide-evaluated-criteria">
-        Masquer critères évalués
-        <template v-if="resultStore.testedCriteriumCount">
-          ({{ resultStore.testedCriteriumCount }})
-        </template>
-      </label>
-    </div>
     <button
       v-if="
-        filterStore.hideEvaluatedCriteria &&
-        filterStore.newEvaluatedCriteria.length
+        filterStore.search ||
+        filterStore.topics.length ||
+        filterStore.hideEvaluatedCriteria
       "
-      class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-mt-2w"
-      @click="filterStore.updateEvaluatedCriteria"
+      class="fr-btn fr-btn--tertiary-no-outline fr-icon-refresh-line fr-btn--icon-right fr-mb-4w"
+      @click="onGlobalReset"
     >
-      Mettre à jour critères masqués ({{
-        filterStore.newEvaluatedCriteria.length
-      }})
+      Réinitialiser
     </button>
 
-    <div class="fr-checkbox-group fr-mt-4w">
-      <input
-        id="hide-tests-and-references"
-        v-model="filterStore.hideTestsAndReferences"
-        type="checkbox"
-      />
-      <label class="fr-label" for="hide-tests-and-references">
-        Masquer les tests et références
+    <form @submit.prevent="submit">
+      <label class="fr-label fr-text--bold fr-mb-1w" for="filters-search">
+        Rechercher par mots clés
       </label>
+      <div class="fr-search-bar">
+        <input
+          id="filters-search"
+          ref="searchInputRef"
+          v-model="search"
+          class="fr-input"
+          placeholder="Rechercher"
+          type="search"
+        />
+        <button type="submit" class="fr-btn" title="Rechercher">
+          Rechercher
+        </button>
+      </div>
+    </form>
+
+    <div role="alert" aria-live="polite">
+      <p v-if="filterStore.search" class="fr-mt-2w fr-mb-1w">
+        {{ resultsCount }} {{ resultsCount !== 1 ? "résultats" : "résultat" }}
+      </p>
+      <!-- FIXME: can't change color on dismissable tags. "fr-tag--blue-france" -->
     </div>
-  </div>
-
-  <div class="fr-form-group">
-    <fieldset class="fr-fieldset">
-      <legend class="fr-fieldset__legend fr-text--regular fr-text--bold">
-        Thématiques de critères
-      </legend>
-      <ol class="fr-fieldset__content fr-pl-0">
-        <li
-          v-for="(topic, i) in topics"
-          :key="i"
-          class="fr-mb-3w topic-filter"
-          :style="{ '--topic-filter-value': topic.value + '%' }"
-        >
-          <div class="fr-checkbox-group topic-filter-checkbox">
-            <input
-              :id="`topic-filter-${i}`"
-              v-model="filterStore.topics"
-              type="checkbox"
-              :value="topic.number"
-            />
-            <label class="fr-label fr-pb-0" :for="`topic-filter-${i}`">
-              {{ topic.number }}. {{ topic.title }}
-            </label>
-          </div>
-          <span class="fr-text--sm fr-m-0 fr-ml-1w topic-filter-value"
-            >{{ topic.value }}%</span
+    <button
+      v-if="filterStore.search"
+      class="fr-tag fr-tag--dismiss"
+      :aria-label="`Retirer la recherche ${filterStore.search}`"
+      @click="onSearchReset"
+    >
+      {{ filterStore.search }}
+    </button>
+
+    <div class="fr-my-4w fr-py-4w evaluated-criteria-filter">
+      <div class="fr-checkbox-group">
+        <input
+          id="hide-evaluated-criteria"
+          v-model="filterStore.hideEvaluatedCriteria"
+          type="checkbox"
+        />
+        <label class="fr-label" for="hide-evaluated-criteria">
+          Masquer critères évalués
+          <template v-if="resultStore.testedCriteriumCount">
+            ({{ resultStore.testedCriteriumCount }})
+          </template>
+        </label>
+      </div>
+      <button
+        v-if="
+          filterStore.hideEvaluatedCriteria &&
+          filterStore.newEvaluatedCriteria.length
+        "
+        class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-mt-2w"
+        @click="filterStore.updateEvaluatedCriteria"
+      >
+        Mettre à jour critères masqués ({{
+          filterStore.newEvaluatedCriteria.length
+        }})
+      </button>
+
+      <div class="fr-checkbox-group fr-mt-4w">
+        <input
+          id="hide-tests-and-references"
+          v-model="filterStore.hideTestsAndReferences"
+          type="checkbox"
+        />
+        <label class="fr-label" for="hide-tests-and-references">
+          Masquer les tests et références
+        </label>
+      </div>
+    </div>
+
+    <div class="fr-form-group">
+      <fieldset class="fr-fieldset">
+        <legend class="fr-fieldset__legend fr-text--regular fr-text--bold">
+          Thématiques de critères
+        </legend>
+        <ol class="fr-fieldset__content fr-pl-0">
+          <li
+            v-for="(topic, i) in topics"
+            :key="i"
+            class="fr-mb-3w topic-filter"
+            :style="{ '--topic-filter-value': topic.value + '%' }"
           >
-          <div class="topic-filter-progress" />
-        </li>
-      </ol>
-    </fieldset>
-  </div>
+            <div class="fr-checkbox-group topic-filter-checkbox">
+              <input
+                :id="`topic-filter-${i}`"
+                v-model="filterStore.topics"
+                type="checkbox"
+                :value="topic.number"
+              />
+              <label class="fr-label fr-pb-0" :for="`topic-filter-${i}`">
+                {{ topic.number }}. {{ topic.title }}
+              </label>
+            </div>
+            <span class="fr-text--sm fr-m-0 fr-ml-1w topic-filter-value"
+              >{{ topic.value }}%</span
+            >
+            <div class="topic-filter-progress" />
+          </li>
+        </ol>
+      </fieldset>
+    </div>
+  </template>
 </template>
 
 <style scoped>
+.heading-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.toggle-column-button:focus {
+  outline: 2px solid #0a76f6;
+  outline-offset: -2px;
+}
+
 .evaluated-criteria-filter {
   border-top: 1px solid var(--border-default-grey);
   border-bottom: 1px solid var(--border-default-grey);

diff --git a/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue b/confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue
@@ -141,6 +141,12 @@ function closeAutoSaveAlert() {
   pageHeading?.setAttribute("tabindex", "-1");
   pageHeading?.focus();
 }
+
+const showFilters = ref(true);
+
+function toggleFilters(value: boolean) {
+  showFilters.value = value;
+}
 </script>
 
 <template>
@@ -199,12 +205,15 @@ function closeAutoSaveAlert() {
     </AuditGenerationHeader>
 
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-12 fr-col-md-3">
+      <div :class="`fr-col-12 fr-col-md-${showFilters ? '3' : '1'}`">
         <div class="filters-wrapper" role="search">
-          <AuditGenerationFilters :topics="topics" />
+          <AuditGenerationFilters
+            :topics="topics"
+            @toggle-filters="toggleFilters"
+          />
         </div>
       </div>
-      <div class="fr-col-12 fr-col-md-9">
+      <div :class="`fr-col-12 fr-col-md-${showFilters ? '9' : '11'}`">
         <div class="fr-tabs">
           <ul
             class="fr-tabs__list"
@@ -270,6 +279,17 @@ function closeAutoSaveAlert() {
   transition: none !important;
 }
 
+/* Override DSFR columns width */
+.fr-col-md-1 {
+  flex: 0 0 2rem !important;
+}
+
+.fr-col-md-11 {
+  flex-grow: 1 !important;
+  max-width: none !important;
+  width: auto !important;
+}
+
 .filters-wrapper {
   position: sticky;
   top: 0;