Affiche les critères conformes dans le rapport (#732)

* update errors tab * display improvements on new tab * conditionnally display improvements tab * add improvement criterium component * create layout component for report criteria * split functions to fetch report data * create ReportErrorCriterium * lint imports * update changelog * refacto active menu condition Co-authored-by: Adrien Boutigny <[email protected]> * fix current active link in side menu + type report criteria props * remove log Co-authored-by: Adrien Boutigny <[email protected]> * remove sticky class --------- Co-authored-by: Adrien Boutigny <[email protected]>
DISIC · Jul 3, 2024 · 2a94132 · 2a94132
1 parent 2e91379
commit 2a94132
Show file tree

Hide file tree

Showing 12 changed files with 847 additions and 669 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,11 @@
 
 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.
 
-## 03/06/2024
+## 03/07/2024
+
+### Nouvelles fonctionnalités 🚀
+
+- Ajoute les critères conformes et non applicables au rapport dans l’onglet "Points d’améliorations" ([#732](https://github.com/DISIC/Ara/pull/732))
 
 ### Corrections 🐛
 
@@ -16,7 +20,7 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
   - Agrandissement de la zone d’annotation en panneau latéral
   - Sauvegarde automatique des changements
   - Création d’un composant d’ajout de fichier commun (critères non conformes + annotations)
-  - Choix de *télécharger* ou de *visualiser* chaque fichier
+  - Choix de _télécharger_ ou de _visualiser_ chaque fichier
   - Affichage des pièces jointes dans les notes du rapport d’audit
   - Suppression des bannières de notification d’ajout et de suppression de fichier
   - Affichage de la syntaxe Markdown dans une page séparée (au lieu d’une modale)

diff --git a/confiture-web-app/src/components/audit/CriteriumCompliantAccordion.vue b/confiture-web-app/src/components/audit/CriteriumCompliantAccordion.vue
@@ -18,12 +18,12 @@ const isOffline = useIsOffline();
 <template>
   <LazyAccordion
     disclose-color="var(--background-default-grey)"
-    title="Commentaire"
+    title="Points d’améliorations"
   >
     <!-- COMMENT -->
     <div class="fr-input-group fr-mb-1w">
       <label class="fr-label sr-only" :for="`criterum-comment-field-${id}`">
-        Commentaire
+        Points d’améliorations
       </label>
       <textarea
         :id="`criterum-comment-field-${id}`"

diff --git a/confiture-web-app/src/components/report/ReportCriteria.vue b/confiture-web-app/src/components/report/ReportCriteria.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+import { pluralize } from "../../utils";
+import { ReportErrors, ReportTransverseError } from "./getReportErrors";
+
+const props = defineProps<{
+  pagesData: ReportErrors[];
+  transverseData: ReportTransverseError[];
+  showFilters?: boolean;
+}>();
+
+const dataCount = computed(() => {
+  return (
+    props.pagesData
+      .map((page: any) => page.topics.map((topic: any) => topic.improvements))
+      .flat(2).length + props.transverseData.length
+  );
+});
+
+// Set active side menu link
+const route = useRoute();
+
+function isActive(id: string) {
+  return route.hash && route.hash === id;
+}
+</script>
+
+<template>
+  <div class="main">
+    <div class="sidebar">
+      <nav class="fr-sidemenu fr-mb-3w" aria-label="Liste des pages">
+        <div class="fr-sidemenu__inner">
+          <button
+            class="fr-sidemenu__btn"
+            hidden
+            aria-controls="fr-sidemenu-wrapper"
+            aria-expanded="false"
+          >
+            Pages
+          </button>
+          <div id="fr-sidemenu-wrapper" class="fr-collapse">
+            <div class="fr-sidemenu__title fr-mb-2w">Pages</div>
+            <ul class="fr-sidemenu__list">
+              <li
+                v-if="transverseData.length"
+                :class="[
+                  'fr-sidemenu__item',
+                  {
+                    'fr-sidemenu__item--active':
+                      !route.hash || isActive('#all-pages')
+                  }
+                ]"
+              >
+                <a
+                  class="fr-sidemenu__link"
+                  href="#all-pages"
+                  :aria-current="
+                    route.hash
+                      ? isActive('#all-pages')
+                        ? 'true'
+                        : undefined
+                      : 'true'
+                  "
+                  >Toutes les pages</a
+                >
+              </li>
+              <li
+                v-for="page in pagesData"
+                :key="page.name"
+                class="fr-sidemenu__item"
+                :class="{
+                  'fr-sidemenu__item--active': isActive(`#${page.id}`)
+                }"
+              >
+                <a
+                  class="fr-sidemenu__link"
+                  :href="`#${page.id}`"
+                  :aria-current="isActive(`#${page.id}`) ? 'true' : undefined"
+                >
+                  {{ page.name }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <slot name="filter" />
+    </div>
+
+    <div>
+      <div class="fr-mb-6w header">
+        <div role="alert" aria-live="polite">
+          <p class="fr-mb-0 fr-text--xl fr-text--bold">
+            {{ dataCount }}
+            {{ pluralize("résultat", "résultats", dataCount) }}
+          </p>
+        </div>
+      </div>
+
+      <slot v-if="transverseData.length" name="transverse-data" />
+
+      <slot name="pages-data" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.main {
+  display: grid;
+  grid-template-columns: 20rem 1fr;
+  gap: 2rem;
+}
+
+.sidebar {
+  box-shadow: inset -1px 0 0 0 var(--border-default-grey);
+}
+
+.page-title {
+  color: var(--text-active-blue-france);
+}
+
+.page-url {
+  word-break: break-all;
+}
+
+.fr-sidemenu__inner {
+  box-shadow: none !important;
+}
+
+@media (width < 48rem) {
+  .main {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    box-shadow: none;
+  }
+}
+</style>
diff --git a/confiture-web-app/src/components/report/ReportErrorCriterium.vue b/confiture-web-app/src/components/report/ReportErrorCriterium.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { chunk } from "lodash-es";
+import { marked } from "marked";
+
+import rgaa from "../../criteres.json";
+import { CriterionResultUserImpact, ReportCriteriumResult } from "../../types";
+import { formatStatus, formatUserImpact, getUploadUrl } from "../../utils";
+import CriteriumTestsAccordion from "../audit/CriteriumTestsAccordion.vue";
+import LazyAccordion from "../audit/LazyAccordion.vue";
+import MarkdownRenderer from "../ui/MarkdownRenderer.vue";
+
+defineProps<{
+  error: ReportCriteriumResult;
+}>();
+
+function getCriterium(topicNumber: number, criteriumNumber: number) {
+  // FIXME: "any everywhere" : The criteria properties of each topic do not have the same signature. See: https://github.com/microsoft/TypeScript/issues/33591#issuecomment-786443978
+  const criterium = (rgaa.topics as any)
+    .find((t: any) => t.number === topicNumber)
+    ?.criteria.find((c: any) => c.criterium.number === criteriumNumber)
+    .criterium;
+
+  return criterium;
+}
+
+function getCriteriumTitle(topicNumber: number, criteriumNumber: number) {
+  return marked.parseInline(getCriterium(topicNumber, criteriumNumber).title);
+}
+</script>
+
+<template>
+  <div>
+    <p class="fr-text--lg fr-text--bold criterium-title">
+      {{ error.topic }}.{{ error.criterium }}&nbsp;
+      <span v-html="getCriteriumTitle(error.topic, error.criterium)" />
+    </p>
+
+    <ul class="fr-badges-group fr-mb-2w">
+      <li>
+        <p class="fr-badge fr-badge--sm fr-badge--error fr-badge--no-icon">
+          {{ formatStatus(error.status) }}
+        </p>
+      </li>
+      <li v-if="error.userImpact">
+        <p
+          class="fr-badge fr-badge--sm"
+          :class="{
+            'fr-badge--yellow-moutarde':
+              error.userImpact === CriterionResultUserImpact.MAJOR,
+            'fr-badge--error fr-badge--no-icon':
+              error.userImpact === CriterionResultUserImpact.BLOCKING
+          }"
+        >
+          Impact {{ formatUserImpact(error.userImpact) }}
+        </p>
+      </li>
+      <li v-if="error.quickWin">
+        <p class="fr-badge fr-badge--sm">Facile à corriger</p>
+      </li>
+    </ul>
+
+    <!-- Error -->
+    <LazyAccordion
+      v-if="error.notCompliantComment || error.exampleImages.length > 0"
+      title="Erreur et recommandation"
+      data-accordion
+    >
+      <MarkdownRenderer
+        v-if="error.notCompliantComment"
+        class="fr-mb-3w"
+        :markdown="error.notCompliantComment"
+      />
+      <p
+        v-if="chunk(error.exampleImages, 2).length"
+        class="fr-text--xs fr-mb-1w error-accordion-subtitle"
+      >
+        Exemple(s) d’erreur(s)
+      </p>
+      <div class="fr-container--fluid">
+        <div
+          v-for="(line, k) in chunk(error.exampleImages, 2)"
+          :key="k"
+          class="fr-grid-row fr-grid-row--gutters"
+        >
+          <a
+            v-for="example in line"
+            :key="example.key"
+            class="fr-col-md-6 fr-col-12 image-link"
+            :href="getUploadUrl(example.key)"
+            target="_blank"
+          >
+            <span class="sr-only">
+              Ouvrir l’image dans une nouvelle fenêtre
+            </span>
+            <img style="width: 100%" :src="getUploadUrl(example.key)" alt="" />
+          </a>
+        </div>
+      </div>
+    </LazyAccordion>
+
+    <!-- Tests -->
+    <CriteriumTestsAccordion
+      :topic-number="error.topic"
+      :criterium="getCriterium(error.topic, error.criterium)"
+    />
+  </div>
+</template>