From b796eb3e8a829d9076cc1bc143e76144c652042c Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Fri, 6 Sep 2024 14:52:14 +0200
Subject: [PATCH] add transverse callout in results detail tab

---
 .../audit/AuditGenerationCriterium.vue        |   1 -
 .../src/components/report/ReportResults.vue   | 260 +++++++++++-------
 .../src/pages/report/ReportPage.vue           |  10 +-
 3 files changed, 162 insertions(+), 109 deletions(-)

diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
index df5ee41dd..74148b8b2 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -74,7 +74,6 @@ const result = computed(
     )!
 );
 
-// TODO: UX is not finalized.
 const transverseStatus = computed((): CriteriumResultStatus | null => {
   if (store.data) {
     return store.data?.[-1][props.topicNumber][props.criterium.number].status;
diff --git a/confiture-web-app/src/components/report/ReportResults.vue b/confiture-web-app/src/components/report/ReportResults.vue
index 81cc3550a..a4869606c 100644
--- a/confiture-web-app/src/components/report/ReportResults.vue
+++ b/confiture-web-app/src/components/report/ReportResults.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useRoute } from "vue-router";
 
 import { useReportStore } from "../../store";
 import { AuditStatus, AuditType } from "../../types";
@@ -7,6 +8,13 @@ import { getAuditStatus, pluralize, slugify } from "../../utils";
 import { StatDonutTheme } from "../StatDonut.vue";
 import SummaryCard from "../SummaryCard.vue";
 
+defineEmits<{
+  (e: "toTab", payload: string): void;
+}>();
+
+const route = useRoute();
+const uniqueId = route.params.uniqueId as string;
+
 const report = useReportStore();
 
 const stats = computed(() => {
@@ -57,8 +65,11 @@ const pageDistributionTableData = {
       ? report.data.pageDistributions.slice(1).map((p) => {
           return [
             p.name,
-            `${Math.round(p.compliant.raw)}`,
-            `${Math.round(p.notCompliant.raw)}`
+            Math.round(p.compliant.raw),
+            Math.round(p.notCompliant.raw) +
+              (report.data
+                ? report.data.pageDistributions[0].notCompliant.raw
+                : 0)
           ];
         })
       : [])
@@ -78,9 +89,9 @@ const topicDistributionTableData = {
       ? report.data.topicDistributions.map((t, i) => {
           return [
             `${i + 1}. ${t.name}`,
-            `${Math.round(t.compliant.raw)}`,
-            `${Math.round(t.notCompliant.raw)}`,
-            `${Math.round(t.notApplicable.raw)}`
+            Math.round(t.compliant.raw),
+            Math.round(t.notCompliant.raw),
+            Math.round(t.notApplicable.raw)
           ];
         })
       : [])
@@ -90,6 +101,10 @@ const topicDistributionTableData = {
 const auditInProgress = computed(
   () => !!report.data && getAuditStatus(report.data) === AuditStatus.IN_PROGRESS
 );
+
+const transverseNotCompliantCount = computed(() => {
+  return report.data?.pageDistributions[0].notCompliant.raw;
+});
 </script>
 
 <template>
@@ -132,113 +147,152 @@ const auditInProgress = computed(
       </div>
     </div>
 
-    <h2 class="fr-mt-8w">Détails des résultats</h2>
-
-    <!-- Per page -->
-    <h3 :id="slugify(pageDistributionTableData.title)" class="fr-h4 fr-mb-3w">
-      {{ pageDistributionTableData.title }}
-    </h3>
-
-    <div class="fr-table fr-table--no-caption fr-mb-6w">
-      <div class="fr-table__wrapper">
-        <div class="fr-table__container">
-          <div class="fr-table__content">
-            <table class="fr-cell--multiline">
-              <caption>
-                {{
-                  pageDistributionTableData.title
-                }}
-              </caption>
-              <thead>
-                <tr>
-                  <th
-                    v-for="header in pageDistributionTableData.data[0]"
-                    :key="header"
-                    scope="col"
-                  >
-                    {{ header }}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  v-for="(row, i) in pageDistributionTableData.data.slice(1)"
-                  :key="i"
-                >
-                  <td>
-                    <a
-                      :href="
-                        report.data.context.samples.find(
-                          (s) => s.name === row[0]
-                        )?.url
-                      "
-                      target="_blank"
-                      class="fr-text--bold"
+    <div class="wrapper">
+      <h2 class="fr-mt-8w">Détails des résultats</h2>
+
+      <!-- Per page -->
+      <h3 :id="slugify(pageDistributionTableData.title)" class="fr-h4 fr-mb-3w">
+        {{ pageDistributionTableData.title }}
+      </h3>
+
+      <div class="fr-table fr-table--no-caption fr-mb-3v">
+        <div class="fr-table__wrapper">
+          <div class="fr-table__container">
+            <div class="fr-table__content">
+              <table class="fr-cell--multiline">
+                <caption>
+                  {{
+                    pageDistributionTableData.title
+                  }}
+                </caption>
+                <thead>
+                  <tr>
+                    <th
+                      v-for="header in pageDistributionTableData.data[0]"
+                      :key="header"
+                      scope="col"
                     >
-                      {{ row[0] }}
-                    </a>
-                  </td>
-                  <td v-for="data in row.slice(1)" :key="data">{{ data }}</td>
-                </tr>
-              </tbody>
-            </table>
+                      {{ header }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(row, i) in pageDistributionTableData.data.slice(1)"
+                    :key="i"
+                  >
+                    <td>
+                      <a
+                        :href="
+                          report.data.context.samples.find(
+                            (s) => s.name === row[0]
+                          )?.url
+                        "
+                        target="_blank"
+                        class="fr-text--bold"
+                      >
+                        {{ row[0] }}
+                      </a>
+                    </td>
+                    <td v-for="data in row.slice(1)" :key="data">{{ data }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Per topic -->
-    <h3 :id="slugify(topicDistributionTableData.title)" class="fr-h4 fr-mb-3w">
-      {{ topicDistributionTableData.title }}
-    </h3>
-
-    <div class="fr-table fr-table--no-caption fr-m-0">
-      <div class="fr-table__wrapper">
-        <div class="fr-table__container">
-          <div class="fr-table__content">
-            <table class="fr-cell--multiline">
-              <caption>
-                {{
-                  topicDistributionTableData.title
-                }}
-              </caption>
-              <thead>
-                <tr>
-                  <th
-                    v-for="header in [
-                      'Thématique du RGAA',
-                      'Critères conformes',
-                      'Critères non conformes',
-                      'Critères non applicables'
-                    ]"
-                    :key="header"
-                    scope="col"
+      <div v-if="transverseNotCompliantCount" class="fr-callout fr-mb-6w">
+        <p class="fr-callout__text fr-mb-2w">
+          <strong>{{ transverseNotCompliantCount }}</strong>
+          {{ pluralize("critère", "critères", transverseNotCompliantCount) }}
+          non
+          {{ pluralize("conforme", "conformes", transverseNotCompliantCount) }}
+          concernent des éléments transverses à toutes les pages de
+          l’échantillon.
+        </p>
+        <!-- TODO: make this link work -->
+        <RouterLink
+          :to="{
+            name: 'report',
+            params: { uniqueId, tab: slugify('Détails des non-conformités') }
+          }"
+          class="fr-link"
+          @click="$emit('toTab', 'Détails des non-conformités')"
+          >Voir
+          {{
+            pluralize(
+              "le critère non conforme transverse",
+              "les critères non conformes transverses",
+              transverseNotCompliantCount
+            )
+          }}</RouterLink
+        >
+      </div>
+
+      <!-- Per topic -->
+      <h3
+        :id="slugify(topicDistributionTableData.title)"
+        class="fr-h4 fr-mb-3w"
+      >
+        {{ topicDistributionTableData.title }}
+      </h3>
+
+      <div class="fr-table fr-table--no-caption fr-m-0">
+        <div class="fr-table__wrapper">
+          <div class="fr-table__container">
+            <div class="fr-table__content">
+              <table class="fr-cell--multiline">
+                <caption>
+                  {{
+                    topicDistributionTableData.title
+                  }}
+                </caption>
+                <thead>
+                  <tr>
+                    <th
+                      v-for="header in [
+                        'Thématique du RGAA',
+                        'Critères conformes',
+                        'Critères non conformes',
+                        'Critères non applicables'
+                      ]"
+                      :key="header"
+                      scope="col"
+                    >
+                      {{ header }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(row, i) in report.data.topicDistributions.map(
+                      (t, i) => {
+                        return [
+                          `${i + 1}. ${t.name}`,
+                          `${Math.round(t.compliant.raw)}`,
+                          `${Math.round(t.notCompliant.raw)}`,
+                          `${Math.round(t.notApplicable.raw)}`
+                        ];
+                      }
+                    )"
+                    :key="i"
                   >
-                    {{ header }}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  v-for="(row, i) in report.data.topicDistributions.map(
-                    (t, i) => {
-                      return [
-                        `${i + 1}. ${t.name}`,
-                        `${Math.round(t.compliant.raw)}`,
-                        `${Math.round(t.notCompliant.raw)}`,
-                        `${Math.round(t.notApplicable.raw)}`
-                      ];
-                    }
-                  )"
-                  :key="i"
-                >
-                  <td v-for="data in row" :key="data">{{ data }}</td>
-                </tr>
-              </tbody>
-            </table>
+                    <td v-for="data in row" :key="data">{{ data }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </template>
 </template>
+
+<style scoped>
+.wrapper {
+  max-width: 46rem;
+}
+</style>
diff --git a/confiture-web-app/src/pages/report/ReportPage.vue b/confiture-web-app/src/pages/report/ReportPage.vue
index 677225acd..832ca4f04 100644
--- a/confiture-web-app/src/pages/report/ReportPage.vue
+++ b/confiture-web-app/src/pages/report/ReportPage.vue
@@ -88,7 +88,7 @@ const targetTabIndex = computed(() => {
 });
 const router = useRouter();
 
-function handleTabChange(tab: { title: string }) {
+function handleTabChange(tabTitle: string) {
   // change the URL in the browser adress bar without triggering vue-router navigation
   history.pushState(
     {},
@@ -97,12 +97,12 @@ function handleTabChange(tab: { title: string }) {
       name: "report",
       params: {
         uniqueId,
-        tab: slugify(tab.title)
+        tab: slugify(tabTitle)
       }
     }).fullPath
   );
 
-  targetTab.value = slugify(tab.title);
+  targetTab.value = slugify(tabTitle);
 }
 
 const csvExportUrl = computed(() => `/api/reports/${uniqueId}/exports/csv`);
@@ -286,9 +286,9 @@ const siteUrl = computed(() => {
         role="tabpanel"
         :aria-labelledby="`tabpanel-${slugify(tab.title)}`"
         tabindex="0"
-        v-on="{ 'dsfr.disclose': () => handleTabChange(tab) }"
+        v-on="{ 'dsfr.disclose': () => handleTabChange(tab.title) }"
       >
-        <component :is="tab.component" />
+        <component :is="tab.component" @to-tab="handleTabChange" />
       </div>
     </div>
   </template>