move recommandation to non-compliant accordion (#390)

* move recommandation to non-compliant accordion

* remove unused recommandation accordion

* Update CriteriumNotCompliantAccordion.vue

* update changelog

Author: hissalht

CHANGELOG.md

@@ -8,6 +8,10 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 - Corrige une erreur qui survenait lorsqu'un champ de formulaire de type URL contenait un espace ([#386](https://github.com/DISIC/Ara/pull/386))
 
+## Autres changements ⚙️
+
+- Les accordéons "Description de la ou des erreurs" et "Recommandation de correction" sont remplacés par un unique accordéon "Description et recommandation" ([#390](https://github.com/DISIC/Ara/pull/390))
+
 ## 05/05/2023
 
 ### Correction 🐛

confiture-web-app/src/components/AuditGenerationCriterium.vue

@@ -14,7 +14,6 @@ import {
 import CriteriumCompliantAccordion from "./CriteriumCompliantAccordion.vue";
 import CriteriumNotApplicableAccordion from "./CriteriumNotApplicableAccordion.vue";
 import CriteriumNotCompliantAccordion from "./CriteriumNotCompliantAccordion.vue";
-import CriteriumRecommendationAccordion from "./CriteriumRecommendationAccordion.vue";
 import CriteriumTestsAccordion from "./CriteriumTestsAccordion.vue";
 import { useResultsStore, useFiltersStore } from "../store";
 import { useNotifications } from "../composables/useNotifications";
@@ -248,26 +247,21 @@ const uniqueId = computed(() => {
       @update:comment="updateResultComment($event, 'notApplicableComment')"
     />
 
-    <template v-else-if="result.status === CriteriumResultStatus.NOT_COMPLIANT">
-      <CriteriumNotCompliantAccordion
-        :id="`not-compliant-accordion-${uniqueId}`"
-        :comment="result.errorDescription"
-        :user-impact="result.userImpact"
-        :example-images="result.exampleImages"
-        :show-file-format-error="showFileFormatError"
-        :show-file-size-error="showFileSizeError"
-        @update:comment="updateResultComment($event, 'errorDescription')"
-        @update:user-impact="updateResultImpact($event)"
-        @upload-example="handleUploadExample"
-        @delete-example="handleDeleteExample"
-      />
-      <!-- RECOMMENDATION -->
-      <CriteriumRecommendationAccordion
-        :id="`recommendation-${uniqueId}`"
-        :comment="result.recommandation"
-        @update:comment="updateResultComment($event, 'recommandation')"
-      />
-    </template>
+    <CriteriumNotCompliantAccordion
+      v-else-if="result.status === CriteriumResultStatus.NOT_COMPLIANT"
+      :id="`not-compliant-accordion-${uniqueId}`"
+      :comment="result.errorDescription"
+      :user-impact="result.userImpact"
+      :example-images="result.exampleImages"
+      :recommandation="result.recommandation"
+      :show-file-format-error="showFileFormatError"
+      :show-file-size-error="showFileSizeError"
+      @update:comment="updateResultComment($event, 'errorDescription')"
+      @update:user-impact="updateResultImpact($event)"
+      @upload-example="handleUploadExample"
+      @delete-example="handleDeleteExample"
+      @update:recommandation="updateResultComment($event, 'recommandation')"
+    />
 
     <!-- TESTS + METHODO -->
     <CriteriumTestsAccordion

confiture-web-app/src/components/CriteriumNotCompliantAccordion.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
   comment: string | null;
   userImpact: CriterionResultUserImpact | null;
   exampleImages: ExampleImage[];
+  recommandation: string | null;
 
   showFileFormatError: boolean;
   showFileSizeError: boolean;
@@ -22,6 +23,7 @@ const emit = defineEmits<{
   (e: "update:userImpact", payload: CriterionResultUserImpact | null): void;
   (e: "upload-example", payload: File): void;
   (e: "delete-example", payload: ExampleImage): void;
+  (e: "update:recommandation", payload: string): void;
 }>();
 
 const userImpacts: Array<{
@@ -73,18 +75,21 @@ const selectedFiles = computed(() => {
 
 <template>
   <LazyAccordion
-    title="Description de la ou des erreurs"
+    title="Description et recommandation"
     disclose-color="var(--background-default-grey)"
   >
     <!-- COMMENT -->
     <div class="fr-input-group fr-mb-1w">
-      <label class="fr-label sr-only" :for="`criterum-comment-field-${id}`">
+      <label
+        class="fr-label fr-text--bold"
+        :for="`criterum-comment-field-${id}`"
+      >
         Description de la ou des erreurs
       </label>
       <textarea
         :id="`criterum-comment-field-${id}`"
         :value="comment ?? ''"
-        class="fr-mt-0 fr-input"
+        class="fr-input"
         rows="5"
         :aria-describedby="`markdown-notice-${id}`"
         @input="
@@ -173,12 +178,38 @@ const selectedFiles = computed(() => {
 
     <!-- USER IMPACT -->
     <RadioGroup
+      class="fr-mb-4w"
       :model-value="userImpact"
       :items="userImpacts"
       label="Impact sur l’usager"
       :default-value="null"
       @update:model-value="$emit('update:userImpact', $event)"
     />
+
+    <!-- RECOMMANDATION -->
+    <div class="fr-input-group fr-mb-1w">
+      <label
+        class="fr-label fr-text--bold"
+        :for="`criterum-comment-field-${id}`"
+      >
+        Recommandation de correction
+      </label>
+      <textarea
+        :id="`criterum-comment-field-${id}`"
+        :value="recommandation ?? ''"
+        class="fr-input"
+        rows="5"
+        :aria-describedby="`markdown-notice-${id}`"
+        @input="
+          $emit(
+            'update:recommandation',
+            ($event.target as HTMLTextAreaElement).value
+          )
+        "
+      ></textarea>
+    </div>
+
+    <MarkdownHelpButton :id="`markdown-notice-${id}`" />
   </LazyAccordion>
 </template>