display transverse comment

DISIC · Sep 5, 2024 · 2c28513 · 2c28513
1 parent 1f6e191
commit 2c28513
Showing 1 changed file with 73 additions and 22 deletions.
diff --git a/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue b/confiture-web-app/src/components/audit/AuditGenerationCriterium.vue
@@ -20,6 +20,7 @@ import {
   handleFileDeleteError,
   handleFileUploadError
 } from "../../utils";
+import MarkdownRenderer from "../ui/MarkdownRenderer.vue";
 import { RadioColor } from "../ui/Radio.vue";
 import RadioGroup from "../ui/RadioGroup.vue";
 import CriteriumCompliantAccordion from "./CriteriumCompliantAccordion.vue";
@@ -79,6 +80,32 @@ const transverseStatus = computed((): CriteriumResultStatus | null => {
   return null;
 });
 
+const transverseComment = computed((): string | null => {
+  if (store.data) {
+    switch (transverseStatus.value) {
+      case CriteriumResultStatus.COMPLIANT:
+        return store.data?.[-1][props.topicNumber][props.criterium.number]
+          .compliantComment;
+      case CriteriumResultStatus.NOT_COMPLIANT:
+        return store.data?.[-1][props.topicNumber][props.criterium.number]
+          .notCompliantComment;
+      case CriteriumResultStatus.NOT_APPLICABLE:
+        return store.data?.[-1][props.topicNumber][props.criterium.number]
+          .notApplicableComment;
+      default:
+        return null;
+    }
+  }
+
+  return null;
+});
+
+const showTransverseComment = ref(false);
+
+function toggleTransverseComment() {
+  showTransverseComment.value = !showTransverseComment.value;
+}
+
 const notify = useNotifications();
 
 const errorMessage: Ref<FileErrorMessage | null> = ref(null);
@@ -203,7 +230,7 @@ const isOffline = useIsOffline();
     </div>
 
     <!-- STATUS -->
-    <div class="fr-ml-6w fr-mb-2w criterium-radios-container">
+    <div class="fr-ml-6w fr-mb-1w criterium-radios-container">
       <RadioGroup
         :disabled="isOffline"
         :model-value="result.status"
@@ -222,29 +249,49 @@ const isOffline = useIsOffline();
         transverseStatus &&
         transverseStatus !== CriteriumResultStatus.NOT_TESTED
       "
-      class="fr-ml-6w fr-mb-2w criterium-transverse-notice"
+      class="fr-ml-5w fr-mb-2w fr-p-1w"
+      :class="{ 'criterium-transverse-is-open': showTransverseComment }"
     >
-      <span class="fr-icon-information-line fr-icon--sm" aria-hidden="true" />
-      <p class="fr-text--sm fr-m-0">
-        Vous avez déjà évalué ce critère à
-        <strong
-          :class="[
-            'fr-badge fr-badge--sm fr-badge--no-icon',
-            {
-              'fr-badge--success':
-                transverseStatus === CriteriumResultStatus.COMPLIANT,
-              'fr-badge--error':
-                transverseStatus === CriteriumResultStatus.NOT_COMPLIANT
-            }
-          ]"
-          >{{ formatStatus(transverseStatus) }}</strong
+      <div class="fr-mb-9v criterium-transverse-notice">
+        <span class="fr-icon-information-line fr-icon--sm" aria-hidden="true" />
+        <p class="fr-text--sm fr-m-0">
+          Vous avez déjà évalué ce critère à
+          <strong
+            :class="[
+              'fr-badge fr-badge--sm fr-badge--no-icon',
+              {
+                'fr-badge--success':
+                  transverseStatus === CriteriumResultStatus.COMPLIANT,
+                'fr-badge--error':
+                  transverseStatus === CriteriumResultStatus.NOT_COMPLIANT
+              }
+            ]"
+            >{{ formatStatus(transverseStatus) }}</strong
+          >
+          sur toutes les pages
+        </p>
+
+        <button
+          v-if="transverseComment"
+          class="fr-link fr-link--sm"
+          @click="toggleTransverseComment"
         >
-        sur toutes les pages
-      </p>
-      <button class="fr-link fr-link--sm">
-        Voir le commentaire <span class="fr-sr-only">transverse</span>
-        <span class="fr-icon-arrow-down-s-line fr-icon--sm" />
-      </button>
+          {{ showTransverseComment ? "Masquer" : "Voir" }}
+          {{
+            transverseStatus === CriteriumResultStatus.NOT_COMPLIANT
+              ? "les erreurs"
+              : "le commentaire"
+          }}
+          <span class="fr-sr-only">transverse</span>
+          <span class="fr-icon-arrow-down-s-line fr-icon--sm" />
+        </button>
+      </div>
+
+      <MarkdownRenderer
+        v-if="showTransverseComment && transverseComment"
+        class="fr-mb-3w"
+        :markdown="transverseComment"
+      />
     </div>
 
     <!-- COMMENT / DESCRIPTION -->
@@ -301,6 +348,10 @@ const isOffline = useIsOffline();
   content: none;
 }
 
+.criterium-transverse-is-open {
+  background: var(--background-contrast-info);
+}
+
 .criterium-transverse-notice {
   align-items: start;
   display: grid;