From 728abc9a2f0045243cd51f03519987897fc85c6b Mon Sep 17 00:00:00 2001
From: Quentin Bellanger <hello@quentin-bellanger.com>
Date: Thu, 7 Mar 2024 16:20:22 +0100
Subject: [PATCH] =?UTF-8?q?Corrige=20l'affichage=20du=20taux=20de=20confor?=
 =?UTF-8?q?mit=C3=A9=20avant=20la=20fin=20de=20l'audit=20(#676)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* dont display compliance rate if audit is in progress in summary cards

* add disabled theme to stat donut

* set disabled state in data definition

* update changelog
---
 CHANGELOG.md                                           |  1 +
 confiture-web-app/src/components/StatDonut.vue         |  9 ++++++++-
 .../src/components/audit/AuditGenerationHeader.vue     |  6 ++----
 .../src/components/report/OnboardingModal.vue          |  1 +
 .../src/components/report/ReportResults.vue            |  4 ++--
 .../src/pages/audit/AuditGenerationPage.vue            | 10 +++++-----
 6 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b562260..dfbf3d60 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 ### Corrections 🐛
 
 - Améliorer l’affichage sur mobile du header sticky sur la page de génération de l’audit ([#678](https://github.com/DISIC/Ara/pull/678))
+- Corrige l’affichage des donuts des statistiques parfois désactivés ([#676](https://github.com/DISIC/Ara/pull/676))
 
 ### Autres changements ⚙️
 
diff --git a/confiture-web-app/src/components/StatDonut.vue b/confiture-web-app/src/components/StatDonut.vue
index e7a8db14..5e54cb10 100644
--- a/confiture-web-app/src/components/StatDonut.vue
+++ b/confiture-web-app/src/components/StatDonut.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-export type StatDonutTheme = "blue" | "red" | "green";
+export type StatDonutTheme = "blue" | "red" | "green" | "grey";
 
 defineProps<{
   value: number;
@@ -65,6 +65,13 @@ defineProps<{
   );
 }
 
+.theme-grey {
+  background: conic-gradient(
+    var(--background-disabled-grey) 0deg var(--pie-deg),
+    var(--background-disabled-grey) var(--pie-deg) 360deg
+  );
+}
+
 .card-hole {
   display: flex;
   align-items: center;
diff --git a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
index 6c09cb81..67e4b4f1 100644
--- a/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
+++ b/confiture-web-app/src/components/audit/AuditGenerationHeader.vue
@@ -187,8 +187,6 @@ const isDevMode = useDevMode();
 
 const systemStore = useSystemStore();
 
-const auditIsInProgress = computed(() => resultStore.auditProgress < 1);
-
 const showAuditProgressBar = computed(() => {
   return (
     !auditStore.currentAudit?.publicationDate ||
@@ -426,11 +424,11 @@ onMounted(() => {
         <SummaryCard
           :title="keyInfos[0].title"
           :description="keyInfos[0].description"
-          :value="auditIsInProgress ? 0 : keyInfos[0].value"
+          :value="keyInfos[0].value"
           :total="keyInfos[0].total"
           :unit="keyInfos[0].unit"
           :theme="keyInfos[0].theme"
-          :disabled="auditIsInProgress"
+          :disabled="keyInfos[0].disabled"
         />
       </div>
       <div
diff --git a/confiture-web-app/src/components/report/OnboardingModal.vue b/confiture-web-app/src/components/report/OnboardingModal.vue
index 51ad0b58..49ad9177 100644
--- a/confiture-web-app/src/components/report/OnboardingModal.vue
+++ b/confiture-web-app/src/components/report/OnboardingModal.vue
@@ -108,6 +108,7 @@ watch(currentStep, () => {
                   class="stat-donut"
                   :value="accessibilityRate"
                   :total="100"
+                  theme="blue"
                   unit="%"
                 />
 
diff --git a/confiture-web-app/src/components/report/ReportResults.vue b/confiture-web-app/src/components/report/ReportResults.vue
index 25dd8c0b..cc4ee88d 100644
--- a/confiture-web-app/src/components/report/ReportResults.vue
+++ b/confiture-web-app/src/components/report/ReportResults.vue
@@ -18,7 +18,7 @@ const stats = computed(() => {
             description: auditInProgress.value
               ? "(Disponible à la fin de l’audit)"
               : "RGAA version 4.1",
-            value: report.data?.accessibilityRate,
+            value: auditInProgress.value ? 0 : report.data?.accessibilityRate,
             total: 100,
             unit: "%",
             hasDetails: true,
@@ -107,7 +107,7 @@ const auditInProgress = computed(
           :value="stat.value!"
           :total="stat.total!"
           :unit="stat.unit"
-          :theme="stat.theme"
+          :theme="stat.disabled ? 'grey' : stat.theme"
           :disabled="stat.disabled"
         >
           <template v-if="stat.hasDetails" #accordion-title>
diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
index 5b9455d1..865da191 100644
--- a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
+++ b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -9,7 +9,6 @@ import AuditGenerationHeader from "../../components/audit/AuditGenerationHeader.
 import AuditGenerationPageCriteria from "../../components/audit/AuditGenerationPageCriteria.vue";
 import PageMeta from "../../components/PageMeta";
 import BackLink from "../../components/ui/BackLink.vue";
-import { StatDonutTheme } from "../../components/StatDonut.vue";
 import { useAuditStats } from "../../composables/useAuditStats";
 import { useWrappedFetch } from "../../composables/useWrappedFetch";
 import rgaa from "../../criteres.json";
@@ -99,10 +98,11 @@ const headerInfos = computed(() => [
           description: auditIsInProgress.value
             ? "(Disponible à la fin de l’audit)"
             : "RGAA version 4.1",
-          value: complianceLevel.value,
+          value: auditIsInProgress.value ? 0 : complianceLevel.value,
           total: 100,
           unit: "%",
-          theme: "blue" as StatDonutTheme
+          theme: auditIsInProgress.value ? "grey" : "blue",
+          disabled: auditIsInProgress.value
         }
       ]
     : []),
@@ -115,13 +115,13 @@ const headerInfos = computed(() => [
     )} pour l’usager`,
     value: notCompliantCriteriaCount.value,
     total: getCriteriaCount(auditStore.currentAudit?.auditType as AuditType),
-    theme: "red" as StatDonutTheme
+    theme: "red"
   },
   {
     title: "Critères<br/> conformes",
     value: compliantCriteriaCount.value,
     total: getCriteriaCount(auditStore.currentAudit?.auditType as AuditType),
-    theme: "green" as StatDonutTheme
+    theme: "green"
   }
 ]);