Masquer une thématique lorsquelle est non applicable sur la page (#1135)

* hide topic criteria if topic is not applicable

* focus na switch when setting last topic criterion as na and closing topic section

* update e2e test

* add topic title in na switch label

* improve responsive behaviour of topic header

* update wording

* update changelog

Author: bellangerq

CHANGELOG.md

@@ -4,20 +4,17 @@
 
 <h2 class="fr-sr-only" id="2025">2025</h2>
 
-<<<<<<< 1136-message-de-lindicateur-denregistrement-incohérent
-### 17/06/2025
+### 18/06/2025
 
-#### <span aria-hidden="true">🐛</span> Corrections
+#### <span aria-hidden="true">🚀</span> Nouvelles fonctionnalités
 
-- Cache le temps relative du dernier enregistrement s’il n’y en a pas ([#1138](https://github.com/DISIC/Ara/pull/1138))
-=======
-### 18/06/2025
+- Cache les critères d’une thématique définie comme "Non applicable" ([#1135](https://github.com/DISIC/Ara/pull/1135))
 
 #### <span aria-hidden="true">🐛</span> Corrections
 
+- Cache le temps relative du dernier enregistrement s’il n’y en a pas ([#1138](https://github.com/DISIC/Ara/pull/1138))
 - Corrige la mise en page de la modale "Observations" ([#1133](https://github.com/DISIC/Ara/pull/1133))
 - Cache l'onglet Point d'amélioration correctement lorsque les commentaires sont vides ([#1130](https://github.com/DISIC/Ara/pull/1130))
->>>>>>> main
 
 ### 28/05/2025
 

confiture-web-app/src/components/audit/AuditGenerationCriterium.vue

@@ -218,6 +218,9 @@ function updateResultStatus(status: CriteriumResultStatus) {
         });
       }
     })
+    .then(() => {
+      store.lastUpdatedTopic = result.value.topic;
+    })
     .catch(handleUpdateResultError);
 }
 

confiture-web-app/src/components/audit/AuditGenerationPageCriteria.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 
-import { useAuditStore, useFiltersStore } from "../../store";
+import { useAuditStore, useFiltersStore, useResultsStore } from "../../store";
 import { AuditPage } from "../../types";
 import TopLink from "../ui/TopLink.vue";
 import AuditGenerationCriterium from "./AuditGenerationCriterium.vue";
 import NotApplicableSwitch from "./NotApplicableSwitch.vue";
 import TransverseElementsList from "./TransverseElementsList.vue";
 
-defineProps<{
+const props = defineProps<{
   page: AuditPage;
   auditUniqueId: string;
 }>();
 
 const store = useFiltersStore();
 const auditStore = useAuditStore();
+const resultsStore = useResultsStore();
 
 const transversePageId = computed(() => {
   return auditStore.currentAudit?.transverseElementsPage.id;
@@ -49,6 +50,26 @@ const noResults = computed(() => {
     };
   }
 });
+
+const notApplicableSwitchRefs = ref<InstanceType<typeof NotApplicableSwitch>[]>(
+  []
+);
+
+// Focus topic NA switch when setting last topic criterion as NA
+watch(
+  () =>
+    resultsStore.topicIsNotApplicable(
+      props.page.id,
+      resultsStore.lastUpdatedTopic
+    ),
+  (newValue) => {
+    if (newValue) {
+      notApplicableSwitchRefs.value[
+        resultsStore.lastUpdatedTopic - 1
+      ].focusInput();
+    }
+  }
+);
 </script>
 
 <template>
@@ -72,28 +93,45 @@ const noResults = computed(() => {
       <div class="fr-mb-3w topic-header">
         <h3
           :id="`topic_${topic.number}`"
-          class="fr-m-0 topic-heading"
+          :class="[
+            'fr-m-0 topic-heading',
+            {
+              'topic-heading--hidden': resultsStore.topicIsNotApplicable(
+                page.id,
+                topic.number
+              )
+            }
+          ]"
           tabindex="-1"
         >
           {{ topic.number }}. {{ topic.topic }}
         </h3>
-        <NotApplicableSwitch :page-id="page.id" :topic-number="topic.number" />
-      </div>
-      <ol class="fr-p-0 fr-m-0">
-        <AuditGenerationCriterium
-          v-for="criterium in topic.criteria"
-          :key="criterium.criterium.number"
-          :page="page"
-          class="fr-mb-3w"
-          :criterium="criterium.criterium"
+        <NotApplicableSwitch
+          ref="notApplicableSwitchRefs"
+          :page-id="page.id"
           :topic-number="topic.number"
-          :audit-unique-id="auditUniqueId"
+          :topic-title="topic.topic"
         />
-      </ol>
-
-      <div class="fr-grid-row fr-grid-row--right">
-        <TopLink target="audit-tabs" />
       </div>
+      <template
+        v-if="!resultsStore.topicIsNotApplicable(page.id, topic.number)"
+      >
+        <ol class="fr-p-0 fr-m-0">
+          <AuditGenerationCriterium
+            v-for="criterium in topic.criteria"
+            :key="criterium.criterium.number"
+            :page="page"
+            class="fr-mb-3w"
+            :criterium="criterium.criterium"
+            :topic-number="topic.number"
+            :audit-unique-id="auditUniqueId"
+          />
+        </ol>
+
+        <div class="fr-grid-row fr-grid-row--right">
+          <TopLink target="audit-tabs" />
+        </div>
+      </template>
     </section>
   </template>
 
@@ -143,11 +181,19 @@ const noResults = computed(() => {
   align-items: center;
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
+  gap: 1rem;
+
+  @media (width < 62rem) {
+    flex-wrap: wrap;
+  }
 }
 
 .topic-heading {
   color: var(--text-action-high-blue-france);
   scroll-margin: 7.5rem;
+
+  &.topic-heading--hidden {
+    color: var(--grey-625-425);
+  }
 }
 </style>

confiture-web-app/src/components/audit/NotApplicableSwitch.vue

@@ -9,8 +9,11 @@ import { CriteriumResultStatus } from "../../types";
 const props = defineProps<{
   pageId: number;
   topicNumber: number;
+  topicTitle: string;
 }>();
 
+defineExpose({ focusInput });
+
 const isOffline = useIsOffline();
 
 const resultsStore = useResultsStore();
@@ -50,18 +53,26 @@ watch(switchValue, (switchValue) => {
     resultsStore.revertTopicStatus(uniqueId, props.pageId, props.topicNumber);
   }
 });
+
+const inputRef = ref<HTMLInputElement>();
+
+function focusInput() {
+  inputRef.value?.focus();
+}
 </script>
 
 <template>
   <div class="fr-toggle fr-toggle--label-left">
     <input
       :id="`topic-switch-${topicNumber}`"
+      ref="inputRef"
       v-model="switchValue"
       type="checkbox"
       class="fr-toggle__input"
       :disabled="isOffline"
     />
     <label class="fr-toggle__label" :for="`topic-switch-${topicNumber}`">
+      <span class="fr-sr-only">Thématique {{ topicTitle }}</span>
       Non applicable
       {{
         pageId === transverseElementsPageId

confiture-web-app/src/store/results.ts

@@ -54,6 +54,8 @@ interface ResultsStoreState {
    */
   lastRequestSuccessEnd: number | null;
   lastRequestFailed: boolean;
+
+  lastUpdatedTopic: number;
 }
 
 export const useResultsStore = defineStore("results", {
@@ -64,7 +66,8 @@ export const useResultsStore = defineStore("results", {
       previousStatuses: {},
       currentRequestCount: 0,
       lastRequestSuccessEnd: null,
-      lastRequestFailed: false
+      lastRequestFailed: false,
+      lastUpdatedTopic: 1
     };
   },
 
@@ -175,6 +178,17 @@ export const useResultsStore = defineStore("results", {
       ).length;
 
       return testedCriteria / total;
+    },
+
+    /**
+     * @returns true if all topic's criteria are NA for a given page.
+     */
+    topicIsNotApplicable() {
+      return (pageId: number, topic: number) => {
+        return this.getTopicResults(pageId, topic).every(
+          (r) => r.status === CriteriumResultStatus.NOT_APPLICABLE
+        );
+      };
     }
   },
 

cypress/e2e/audit.cy.ts

@@ -484,10 +484,7 @@ describe("Audit", () => {
       cy.contains('button[role="tab"]', "Connexion").click();
       cy.contains(" Non applicable sur la page").click();
 
-      cy.get(".page-url + section fieldset input:checked + label").should(
-        "have.class",
-        "grey",
-      );
+      cy.get(".topic-heading").should("have.class", "topic-heading--hidden");
     });
   });