Ajoute un statut d'enregistrement (#281)

* feat: add autosave alert + save user preferences

* feat: focus page heading after closing autosave alert

* fix: remove localstorage preferences

* docs: update changelog

Author: bellangerq

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.
 
+## 01/02/2023
+
+### Nouvelles fonctionnalités 🚀
+
+- Ajout d’un statut d’enregistrement en haut de la page de remplissage de l’audit ([#281](https://github.com/DISIC/Ara/pull/281))
+
 ## 25/01/2023
 
 ### Nouvelles fonctionnalités 🚀

confiture-web-app/src/pages/HomePage.vue

@@ -79,11 +79,15 @@ const steps = [
           L’outil qui va simplifier vos audits d’accessibilité numérique
         </h1>
         <p class="fr-text--lg fr-text--bold">
-          Démarrez en quelques clics l’audit de votre service ! 
+          Démarrez en quelques clics l’audit de votre service !
         </p>
         <p class="fr-text--lg">
-          Ara nécessite une bonne connaissance de la méthode technique du <abbr title="référentiel général d'amélioration de
-          l'accessibilité">RGAA</abbr>. Ce n’est pas un outil d’audit automatique.
+          Ara nécessite une bonne connaissance de la méthode technique du
+          <abbr
+            title="référentiel général d'amélioration de
+          l'accessibilité"
+            >RGAA</abbr
+          >. Ce n’est pas un outil d’audit automatique.
         </p>
         <p>
           Basé sur la dernière version du référentiel général d'amélioration de
@@ -112,11 +116,7 @@ const steps = [
 
     <h2 class="fr-h5">Quelles étapes m'attendent ?</h2>
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div
-        v-for="step in steps"
-        :key="step.title"
-        class="fr-col"
-      >
+      <div v-for="step in steps" :key="step.title" class="fr-col">
         <div class="fr-tile fr-tile--horizontal">
           <div class="fr-tile__body step-content">
             <div class="step-icon" aria-hidden="true">{{ step.icon }}</div>

confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue

@@ -130,6 +130,16 @@ const headerInfos = computed(() => [
     total: getCriteriaCount(auditStore.data?.auditType as AuditType),
   },
 ]);
+
+const showAutoSaveAlert = ref(true);
+
+function closeAutoSaveAlert() {
+  showAutoSaveAlert.value = false;
+
+  const pageHeading = document.querySelector("h1");
+  pageHeading?.setAttribute("tabindex", "-1");
+  pageHeading?.focus();
+}
 </script>
 
 <template>
@@ -140,6 +150,20 @@ const headerInfos = computed(() => [
 
   <!-- FIXME: handle loading states -->
   <template v-if="auditStore.data && resultsStore.data">
+    <div
+      v-if="showAutoSaveAlert"
+      class="fr-alert fr-alert--info fr-alert--sm fr-mb-5w"
+    >
+      <p>😎 Ara enregistre automatiquement votre travail</p>
+      <button
+        class="fr-btn--close fr-btn"
+        title="Masquer le message"
+        @click="closeAutoSaveAlert"
+      >
+        Masquer le message
+      </button>
+    </div>
+
     <AuditGenerationHeader
       :audit-name="auditStore.data.procedureName"
       :key-infos="headerInfos"