From ea1cfcf7aac6d0b7d569400c838b35ef95f3a1ee Mon Sep 17 00:00:00 2001
From: Helen Root <helenroot1@gmail.com>
Date: Mon, 25 Nov 2024 14:43:12 +0100
Subject: [PATCH] UI/UX improvements

---
 frontend/src/utils.js                         |   8 ++
 .../WasteMeasureSteps/index.vue               | 115 +++---------------
 2 files changed, 23 insertions(+), 100 deletions(-)

diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index ef51a409c..c7d77409b 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -365,6 +365,14 @@ export const formatDate = (dateString) => {
   return date.toLocaleString("fr", options)
 }
 
+export const formatNumber = (value) => {
+  if (value || value === 0) {
+    const formatter = new Intl.NumberFormat("fr-FR")
+    return formatter.format(value)
+  }
+  return "—"
+}
+
 export const sectorsSelectList = (sectors, category = null) => {
   sectors = JSON.parse(JSON.stringify(sectors))
   if (category) {
diff --git a/frontend/src/views/DiagnosticTunnel/WasteMeasureSteps/index.vue b/frontend/src/views/DiagnosticTunnel/WasteMeasureSteps/index.vue
index 762aa4e87..5237177c5 100644
--- a/frontend/src/views/DiagnosticTunnel/WasteMeasureSteps/index.vue
+++ b/frontend/src/views/DiagnosticTunnel/WasteMeasureSteps/index.vue
@@ -44,101 +44,6 @@
           </DsfrCallout>
         </v-col>
       </v-row>
-      <v-row>
-        <v-col cols="12">
-          <fieldset :disabled="!payload.hasWasteMeasures">
-            <legend class="my-3 font-weight-bold">
-              Mesures des déchets
-              <span :class="`fr-hint-text mt-2 ${payload.hasWasteMeasures ? '' : 'grey--text'}`">
-                Optionnel
-              </span>
-            </legend>
-            <v-row>
-              <v-col cols="12" sm="6" class="pb-0">
-                <DsfrTextField
-                  v-model.number="payload.totalLeftovers"
-                  :rules="payload.hasWasteMeasures ? [validators.nonNegativeOrEmpty, validators.decimalPlaces(2)] : []"
-                  validate-on-blur
-                  label="Total des déchets alimentaires"
-                  suffix="kg"
-                  :readonly="!payload.hasWasteMeasures"
-                  :disabled="!payload.hasWasteMeasures"
-                  :hideOptional="true"
-                />
-              </v-col>
-              <v-col cols="12" sm="6" class="pb-0">
-                <DsfrTextField
-                  :value="payload.durationLeftoversMeasurement"
-                  @input="(x) => (payload.durationLeftoversMeasurement = integerInputValue(x))"
-                  :rules="
-                    payload.hasWasteMeasures
-                      ? [validators.nonNegativeOrEmpty, validators.isInteger, validators.lteOrEmpty(365)]
-                      : []
-                  "
-                  validate-on-blur
-                  label="Période de mesure"
-                  suffix="jours"
-                  :readonly="!payload.hasWasteMeasures"
-                  :disabled="!payload.hasWasteMeasures"
-                  :hideOptional="true"
-                />
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col cols="12" sm="6" class="pb-0">
-                <DsfrTextField
-                  v-model.number="payload.breadLeftovers"
-                  :rules="payload.hasWasteMeasures ? [validators.nonNegativeOrEmpty, validators.decimalPlaces(2)] : []"
-                  validate-on-blur
-                  label="Reste de pain"
-                  suffix="kg/an"
-                  :readonly="!payload.hasWasteMeasures"
-                  :disabled="!payload.hasWasteMeasures"
-                  :hideOptional="true"
-                />
-              </v-col>
-              <v-col cols="12" sm="6" class="pb-0">
-                <DsfrTextField
-                  v-model.number="payload.servedLeftovers"
-                  :rules="payload.hasWasteMeasures ? [validators.nonNegativeOrEmpty, validators.decimalPlaces(2)] : []"
-                  validate-on-blur
-                  label="Reste plateau"
-                  suffix="kg/an"
-                  :readonly="!payload.hasWasteMeasures"
-                  :disabled="!payload.hasWasteMeasures"
-                  :hideOptional="true"
-                />
-              </v-col>
-            </v-row>
-            <v-row>
-              <v-col cols="12" sm="6" class="pb-0">
-                <DsfrTextField
-                  v-model.number="payload.unservedLeftovers"
-                  :rules="payload.hasWasteMeasures ? [validators.nonNegativeOrEmpty, validators.decimalPlaces(2)] : []"
-                  validate-on-blur
-                  label="Reste en production (non servi)"
-                  suffix="kg/an"
-                  :readonly="!payload.hasWasteMeasures"
-                  :disabled="!payload.hasWasteMeasures"
-                  :hideOptional="true"
-                />
-              </v-col>
-              <v-col cols="12" sm="6" class="pb-0">
-                <DsfrTextField
-                  v-model.number="payload.sideLeftovers"
-                  :rules="payload.hasWasteMeasures ? [validators.nonNegativeOrEmpty, validators.decimalPlaces(2)] : []"
-                  validate-on-blur
-                  label="Reste de composantes (entrée, plat dessert...)"
-                  suffix="kg/an"
-                  :readonly="!payload.hasWasteMeasures"
-                  :disabled="!payload.hasWasteMeasures"
-                  :hideOptional="true"
-                />
-              </v-col>
-            </v-row>
-          </fieldset>
-        </v-col>
-      </v-row>
     </div>
     <fieldset v-else-if="stepUrlSlug === 'actions'">
       <legend class="my-3">
@@ -298,7 +203,11 @@
       </v-dialog>
     </div>
     <div v-else-if="stepUrlSlug === 'évaluations'" class="fr-text">
-      <p>Complèter vos évaluations de vos déchets alimentaires</p>
+      <p>
+        Suivre les mesures de vos déchets alimentaires dans notre outil pour visualiser les sources principales de vos
+        déchets, et pour recevoir des conseils personnalisés à votre situation.
+      </p>
+      <p>Il est conseillé de faire au moins deux évaluations par an.</p>
       <ul class="mb-6">
         <li v-for="m in measurements" :key="m.id">
           <router-link
@@ -308,9 +217,9 @@
               query: { return: href },
             }"
           >
-            {{ m.periodStartDate }} - {{ m.periodEndDate }}
+            {{ formatDate(m.periodStartDate) }} - {{ formatDate(m.periodEndDate) }}
           </router-link>
-          : {{ m.totalMass }} kg
+          : {{ formatNumber(m.totalMass) }} kg en total
         </li>
       </ul>
       <div>
@@ -331,7 +240,7 @@
 </template>
 
 <script>
-import { applicableDiagnosticRules } from "@/utils"
+import { applicableDiagnosticRules, formatDate, formatNumber } from "@/utils"
 import validators from "@/validators"
 import LastYearAutofillOption from "../LastYearAutofillOption"
 import DsfrCallout from "@/components/DsfrCallout"
@@ -367,7 +276,7 @@ const STEPS = [
     urlSlug: "expérimentation",
   },
   {
-    title: "Mesure de mes déchets alimentaires (pt 2)",
+    title: "Détail des mesures de mes déchets alimentaires",
     urlSlug: "évaluations",
   },
   {
@@ -512,6 +421,12 @@ export default {
           this.measurements = response
         })
     },
+    formatDate(str) {
+      return formatDate(str)
+    },
+    formatNumber(str) {
+      return formatNumber(str)
+    },
   },
   mounted() {
     this.$emit("update-steps", this.steps)