From 0ffb128023e3b39f510a33a0e99587b498ef9175 Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Wed, 3 Jul 2024 15:18:05 +0200
Subject: [PATCH] fix current active link in side menu + type report criteria
 props

---
 .../src/components/report/ReportCriteria.vue  | 55 +++++++++++--------
 .../src/components/report/getReportErrors.ts  |  4 +-
 2 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/confiture-web-app/src/components/report/ReportCriteria.vue b/confiture-web-app/src/components/report/ReportCriteria.vue
index f800f97c..564e0e73 100644
--- a/confiture-web-app/src/components/report/ReportCriteria.vue
+++ b/confiture-web-app/src/components/report/ReportCriteria.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useRoute } from "vue-router";
 
 import { pluralize } from "../../utils";
+import { ReportErrors, ReportTransverseError } from "./getReportErrors";
 
-// FIXME: type things
 const props = defineProps<{
-  pagesData: any;
-  transverseData: any;
+  pagesData: ReportErrors[];
+  transverseData: ReportTransverseError[];
   showFilters?: boolean;
 }>();
 
@@ -17,12 +18,23 @@ const dataCount = computed(() => {
       .flat(2).length + props.transverseData.length
   );
 });
+
+// Set active side menu link
+const route = useRoute();
+console.log(route.hash);
+
+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">
+      <nav
+        class="fr-sidemenu fr-sidemenu--sticky fr-mb-3w"
+        aria-label="Liste des pages"
+      >
         <div class="fr-sidemenu__inner">
           <button
             class="fr-sidemenu__btn"
@@ -40,38 +52,37 @@ const dataCount = computed(() => {
                 :class="[
                   'fr-sidemenu__item',
                   {
-                    'fr-sidemenu__item--active': transverseData.length > 0
+                    'fr-sidemenu__item--active':
+                      !route.hash || isActive('#all-pages')
                   }
                 ]"
               >
                 <a
                   class="fr-sidemenu__link"
                   href="#all-pages"
-                  :aria-current="Boolean(transverseData.length)"
+                  :aria-current="
+                    route.hash
+                      ? isActive('#all-pages')
+                        ? 'true'
+                        : undefined
+                      : 'true'
+                  "
                   >Toutes les pages</a
                 >
               </li>
               <li
-                :class="[
-                  'fr-sidemenu__item',
-                  {
-                    'fr-sidemenu__item--active': !Boolean(transverseData.length)
-                  }
-                ]"
+                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="`#${pagesData[0].id}`"
-                  :aria-current="!transverseData.length ? 'true' : undefined"
-                  >{{ pagesData[0].name }}</a
+                  :href="`#${page.id}`"
+                  :aria-current="isActive(`#${page.id}`) ? 'true' : undefined"
                 >
-              </li>
-              <li
-                v-for="page in pagesData.slice(1)"
-                :key="page.name"
-                class="fr-sidemenu__item"
-              >
-                <a class="fr-sidemenu__link" :href="`#${page.id}`">
                   {{ page.name }}
                 </a>
               </li>
diff --git a/confiture-web-app/src/components/report/getReportErrors.ts b/confiture-web-app/src/components/report/getReportErrors.ts
index 9ae69a5e..fcdd2a71 100644
--- a/confiture-web-app/src/components/report/getReportErrors.ts
+++ b/confiture-web-app/src/components/report/getReportErrors.ts
@@ -9,7 +9,7 @@ import {
   ReportCriteriumResult
 } from "../../types";
 
-type ReportErrors = {
+export type ReportErrors = {
   id: number;
   name?: string;
   order: number;
@@ -81,7 +81,7 @@ function getPage(report: ReportStoreState, pageId: number | string) {
   return report.data!.context.samples.find((p) => p.id === Number(pageId))!;
 }
 
-type ReportTransverseError = {
+export type ReportTransverseError = {
   topic: number;
   name?: string;
   errors: ReportCriteriumResult[];