update overview page navigation and structure

DISIC · Jan 31, 2025 · a0a950a · a0a950a
1 parent ef98e57
commit a0a950a
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 15 deletions.
diff --git a/confiture-web-app/src/components/overview/AuditStep.vue b/confiture-web-app/src/components/overview/AuditStep.vue
@@ -36,7 +36,7 @@ const auditIsInProgress = computed(() => {
 
 <template>
   <StepCard>
-    <div class="fr-mb-3w audit-step-heading">
+    <div class="fr-mb-2w audit-step-heading">
       <span
         v-if="auditIsReady"
         id="audit-step-status"

diff --git a/confiture-web-app/src/components/overview/GridStep.vue b/confiture-web-app/src/components/overview/GridStep.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { useResultsStore } from "../../store";
+import { Audit } from "../../types";
+import StepCard from "./StepCard.vue";
+
+defineProps<{
+  audit: Audit;
+  headingLevel: "h2" | "h3";
+}>();
+
+const resultsStore = useResultsStore();
+
+const auditIsReady = computed(() => {
+  return resultsStore.auditProgress === 1;
+});
+</script>
+
+<template>
+  <StepCard>
+    <div class="fr-mb-2w grid-step-heading">
+      <span
+        v-if="auditIsReady"
+        id="grid-step-status"
+        class="fr-icon--lg fr-icon-checkbox-circle-fill grid-step-check"
+      >
+        <span class="fr-sr-only">Étape terminée</span>
+      </span>
+      <component
+        :is="headingLevel"
+        class="fr-h3 fr-mb-0 grid-step-title"
+        aria-describedby="grid-step-status"
+      >
+        Grille d’audit
+        <p class="fr-badge fr-badge--info fr-badge--no-icon">
+          Généré automatiquement
+        </p>
+      </component>
+    </div>
+    <p class="grid-step-description">
+      {{
+        auditIsReady
+          ? "Vous pouvez livrer la grille d’audit."
+          : "Terminez l’audit avant de livrer la grille d’audit."
+      }}
+    </p>
+    <ul class="fr-btns-group fr-btns-group--icon-left">
+      <li>
+        <!-- TODO: download link + CSV -->
+        <a
+          href="#"
+          class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-download-line fr-mb-0"
+        >
+          Télécharger
+        </a>
+      </li>
+    </ul>
+    <div class="grid-step-download-info">
+      <p class="fr-text--xs fr-mb-0 fr-mt-1v">
+        Contient seulement les résultats des critères.<br />CSV – 22,45 Ko.
+      </p>
+    </div>
+  </StepCard>
+</template>
+
+<style scoped>
+.grid-step-heading {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  grid-column: 1 / -1;
+}
+
+.grid-step-title {
+  grid-column: 1 / -1;
+  grid-row: 1;
+
+  /* FIXME: DSFR default badges dont align. Those with icons does. */
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.grid-step-check {
+  color: var(--text-default-success);
+}
+
+.grid-step-description {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+
+.grid-step-download-info {
+  color: var(--text-mention-grey);
+  grid-column: 1;
+}
+</style>
diff --git a/confiture-web-app/src/components/overview/ReportStep.vue b/confiture-web-app/src/components/overview/ReportStep.vue
@@ -8,6 +8,7 @@ import StepCard from "./StepCard.vue";
 
 defineProps<{
   audit: Audit;
+  headingLevel: "h2" | "h3";
 }>();
 
 const resultsStore = useResultsStore();
@@ -19,23 +20,24 @@ const auditIsReady = computed(() => {
 
 <template>
   <StepCard>
-    <div class="fr-mb-3w report-step-heading">
+    <div class="fr-mb-2w report-step-heading">
       <span
         v-if="auditIsReady"
         id="report-step-status"
         class="fr-icon--lg fr-icon-checkbox-circle-fill report-step-check"
       >
         <span class="fr-sr-only">Étape terminée</span>
       </span>
-      <h2
+      <component
+        :is="headingLevel"
         class="fr-h3 fr-mb-0 report-step-title"
         aria-describedby="report-step-status"
       >
         Rapport d’audit
         <p class="fr-badge fr-badge--info fr-badge--no-icon">
           Généré automatiquement
         </p>
-      </h2>
+      </component>
     </div>
     <p class="report-step-description">
       {{

diff --git a/confiture-web-app/src/components/overview/StatementStep.vue b/confiture-web-app/src/components/overview/StatementStep.vue
@@ -8,6 +8,7 @@ import StepCard from "./StepCard.vue";
 
 const props = defineProps<{
   audit: Audit;
+  headingLevel: "h2" | "h3";
 }>();
 
 const resultsStore = useResultsStore();
@@ -23,20 +24,21 @@ const auditIsPublishable = computed(() => {
 
 <template>
   <StepCard>
-    <div class="fr-mb-3w statement-step-heading">
+    <div class="fr-mb-2w statement-step-heading">
       <span
         v-if="auditIsPublishable"
         id="statement-step-status"
         class="fr-icon--lg fr-icon-checkbox-circle-fill statement-step-check"
       >
         <span class="fr-sr-only">Étape terminée</span>
       </span>
-      <h2
+      <component
+        :is="headingLevel"
         class="fr-h3 fr-mb-0 statement-step-title"
         aria-describedby="statement-step-status"
       >
         Déclaration d’accessibilité
-      </h2>
+      </component>
     </div>
 
     <p class="statement-step-description">

diff --git a/confiture-web-app/src/components/overview/StepCard.vue b/confiture-web-app/src/components/overview/StepCard.vue
@@ -1,7 +1,7 @@
 <template>
-  <li class="fr-px-4w fr-py-3w step-card">
+  <div class="fr-px-4w fr-py-3w step-card">
     <slot />
-  </li>
+  </div>
 </template>
 
 <style scoped>

diff --git a/confiture-web-app/src/pages/audit/AuditOverviewPage.vue b/confiture-web-app/src/pages/audit/AuditOverviewPage.vue
@@ -3,9 +3,12 @@ import { computed, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import AuditStep from "../../components/overview/AuditStep.vue";
+import GridStep from "../../components/overview/GridStep.vue";
 import ReportStep from "../../components/overview/ReportStep.vue";
 import StatementStep from "../../components/overview/StatementStep.vue";
 import PageMeta from "../../components/PageMeta";
+import BackLink from "../../components/ui/BackLink.vue";
+import { useIsConnected } from "../../composables/useIsConnected";
 import { useWrappedFetch } from "../../composables/useWrappedFetch";
 import { useAuditStore, useResultsStore } from "../../store";
 import { AuditType } from "../../types";
@@ -49,6 +52,8 @@ function focusPageHeading() {
   pageHeading?.setAttribute("tabindex", "-1");
   pageHeading?.focus();
 }
+
+const isConnected = useIsConnected();
 </script>
 
 <template>
@@ -93,22 +98,47 @@ function focusPageHeading() {
       </button>
     </div>
 
+    <BackLink
+      v-if="isConnected"
+      label="Retourner à mes audits"
+      :to="{ name: 'account-dashboard' }"
+    />
+
     <div class="content">
-      <h1 class="fr-mb-6w">{{ audit.procedureName }}</h1>
+      <template v-if="isConnected">
+        <h1 class="fr-mb-3v">Livrables</h1>
+        <p class="fr-text--xl fr-mb-4w">{{ audit.procedureName }}</p>
+      </template>
 
-      <ul class="fr-p-0 fr-m-0 overview-steps">
+      <h1 v-else class="fr-mb-6w">{{ audit.procedureName }}</h1>
+
+      <div class="fr-p-0 fr-m-0 overview-steps">
         <!-- Audit -->
-        <AuditStep :audit="audit" />
+        <AuditStep v-if="!isConnected" :audit="audit" class="fr-mb-1w" />
+
+        <h2 v-if="!isConnected" class="fr-mb-0">Livrables</h2>
 
         <!-- Report -->
-        <ReportStep :audit="audit" />
+        <ReportStep
+          :audit="audit"
+          class="fr-mb-1w"
+          :heading-level="isConnected ? 'h2' : 'h3'"
+        />
+
+        <!-- Grid -->
+        <GridStep
+          :audit="audit"
+          class="fr-mb-1w"
+          :heading-level="isConnected ? 'h2' : 'h3'"
+        />
 
         <!-- a11y statement -->
         <StatementStep
           v-if="audit.auditType === AuditType.FULL"
           :audit="audit"
+          :heading-level="isConnected ? 'h2' : 'h3'"
         />
-      </ul>
+      </div>
     </div>
   </template>
 </template>
@@ -122,6 +152,6 @@ function focusPageHeading() {
 .overview-steps {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1.5rem;
 }
 </style>